Textpattern CMS

#13 2008-01-06 17:57:33

jm

Plugin Author

From: Missoula, MT

Registered: 2005-11-27

Posts: 1,746

Website

Re: 100% width navbar with padding

Demo

IE7

Safari 3

IE6 does not support pseudo-classes, so you can throw some simple JavaScript at it.

edit: The W3Schools demo works fine in Safari 3.

Last edited by jm (2008-01-06 18:10:33)

---

What? My name is… | GitHub

#14 2008-01-06 18:24:50

zero

Member

From: Lancashire

Registered: 2004-04-19

Posts: 1,470

Website

Re: 100% width navbar with padding

the W3Schools demo works fine in browsers other than IE but Joey’s problem is IE and W3Schools is misleading when it implies first:child will work in IE with a doctype.

---

BB6 Band My band
Gud One My blog

#15 2008-01-06 18:47:09

jm

Plugin Author

From: Missoula, MT

Registered: 2005-11-27

Posts: 1,746

Website

Re: 100% width navbar with padding

Ah. IE<7 support wasn’t mentioned in Joey’s posts, hence non-IE6 demos.

For IE6, just add the following to your HTML:

<!--[if lt IE 7]>
	<script type="text/javascript">
		function classFirstChild(id, firstElement, firstClass) {
			if (!document.getElementById(id)) return;
			document.getElementById(id).getElementsByTagName(firstElement)[0].className = firstClass;
		}
		window.onload = function() {
			classFirstChild('nav', 'li', 'first');
		};
	</script>
<![endif]-->

CSS:

	#nav li:first-child, #nav li.first {
		background: #faa;
	}

I didn’t test in IE6, but it should work.

---

What? My name is… | GitHub