Pixel differences/webkit/gecko

HTML & CSS
1

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

2

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 :).

3
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 :slight_smile:

4

Thanks for that :slight_smile:

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 :slight_smile:

5

Magic - sorted :slight_smile:

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.

6

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 :).

7

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

Did you mean vertical margins?

8

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 :stuck_out_tongue:

9

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 :frowning:

10
Off Topic:

Thought college was supposed to be All Party.

11

Thanks a lot Ryan, that’s a great help, I really appreciate it :slight_smile:

12

Glad to help :slight_smile: