Pixel differences/webkit/gecko

[Sikwondo]

Hi Peeps,

I am trying to learn about HTML 5 and CSS 3 so am building a site to do so but just had a query about webkit/gecko engines as have noticed a pixel jump and not sure how to remedy it in the simplest way.

The page is:
http://dev.pelli.co.uk/pelli/

First issue is, as I have given the a tags padding, it has moved the padded area up over the header.
Another issue is there is about a 2px difference between gecko (checked in Safari/Chrome) and Gecko (checked in Firefox), and not sure the best way to make it flush with the bottom of the header element.

The code is as follows:

<nav>
	<ul>
		<li><a href="#">Photography</a></li>
		<li><a href="#">Journal</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Airbrushing</a></li>
	</ul>
</nav>

/*headstrip*/
#headstrip {
	background:url(../images/structure/logostrip-gradient.png) no-repeat #2b2b2b;
	height:82px;
	margin-top:8px;
	width:100%;
}

#headstrip p { color:#d1d0d0; padding:50px 0 0 50px; }
#headstrip p a { border-bottom:1px solid #656565; color:#fff; text-decoration:none; }
#headstrip p a:hover { color:#dc3948; }

/*nav*/
nav ul { font-size:1.8em; margin-left:100px; }
nav ul li { display:inline; }
nav a {
	background:#e7e7e7;
	color:#2b2b2b;
	padding:15px 20px;
	text-decoration:none;
}

Thanks in advance

[RyanReese]

Hi, you shouldn't create your own elements because IE doesn't allow the st yling of random elements, even if they are in the HTML5 draft .

Try giving "nav" overflow:hidden;, float the <li>'s, and then give display:block to the <a>'s .

[Sikwondo]

Hi, you shouldn't create your own elements because IE doesn't allow the st yling of random elements, even if they are in the HTML5 draft .

Try giving "nav" overflow:hidden;, float the <li>'s, and then give display:block to the <a>'s .

Thanks for that

Yeah I know, there are some fixes around to deal with IE to make sure they recognise the elements but this is just a way for me to begin to learn and work with HTML 5 and CSS 3... just experimenting.

Thank you for that I will make the changes now

[Sikwondo]

Magic - sorted

Would you mind explaining which each part is for and how it fixes the issue? Sorry to be a pain, just really want to learn the reasons behind so I don't keep making mistakes and so I can apply it to different instances.

[RyanReese]

Display:block on the anchors allow for vertical padding which you set on the anchors.

However once you set that then the <li>'s will appear on different rows even though you set dispay:inline on them. THus the float:left is needed.

Since you floated the <li>'s the parent has collapsed in height and needs a clearing mechanism placed on it. Overflow:hidden does that .

Generally, learn to float instead of display:inline and then remember to use a clearing mechanism (if you need somehting hanging out of the container then overflow:Hidden wont be the best choice, google the "clearfix technique" instead .

[Stomme poes]

Display:block on the anchors allow for vertical padding which you set on the anchors.

Did you mean vertical margins?

[RyanReese]

That too but he set vertical padding on the anchors, so I meant what I said and I said waht I meant .

Edit:

I love when I get no sleep at night

[RyanReese]

I mean the real issue was that since the <li> was an inline element via display:inline it wasn't able to have the anchor contained within it a different way (aka what I posted) is needed..college is having me do all nighters..no sleep

[Stomme poes]

Off Topic:

Thought college was supposed to be All Party.

[RyanReese]

Off Topic:

On friday/saturday I spent 1 night partying one night studying..this weekend I had friday be my party night and last night study/write papers/homework all night

[Sikwondo]

Thanks a lot Ryan, that's a great help, I really appreciate it

[RyanReese]

Glad to help