Problem with navigation placement in Opera and IE

HTML & CSS
1

Hello,

Perhaps someone here can lend a hand with this small issue I am having with this site in Opera and IE. The site looks as it should in Safari, Firefox and Chrome but in Opera 10.5 and IE 8, the button labeled “CONTACTO” in the top navigation moves down a little bit and creates a gap between the navigation and the main banner that shouldn’t be there.

It is odd as both the XHTML and CSS validate and there are no problems that I could discern.

Here is the link to the site: http://bit.ly/cHsJU9

Here is the link to the CSS file: http://bit.ly/9Ecuw7

I am also attaching the screenshots showing the problem and the site as it should look.

Any help would be greatly appreciated.

Thanks

2

I suspect that it’s a haslayout issue with IE, but don’t have any details to hand on fixing it for you.

The people in the CSS Forum will though.

3

Thanks pmw57.

I fixed this small issue. It was something with the margin and padding of the UL element and that I was assigning the list-style rule to the list items instead to unordered list itself. I added the following code:

#navigation {
list-style: none;
padding: 0;
margin: 0;
}

Removing the list-style from the rule for the list items and it’s fixed. Now looks fine in IE 8 and Opera 10.5 too.

Thanks

4

Hi,

Glad you sorted it :slight_smile:

Browsers apply either left margin or left padding to the ul by default to allow for the bullet to show. Therefore you need to address both to make it consistent between browsers as you found out :slight_smile:

5

Yep, thanks. I also noted that IE 7 was adding some extra pixels to the right sidebar and was pulling it down, even while it looked fine in all the other browsers (sans IE6, which I am kind of ignoring).

Thanks again for the tip.

6

Something was probably pushing it wide, and thus IE was adding a few pixels.

I’d need to see code to be sure but that’s what it probably is.

Either way you got it all sorted :slight_smile: