Hey guys.

 

First of all, I would definitely be classified as a noob, so if there is messy coding, I am still working hard at learning.

 

I have a page here: http://www.stevenvolpe.ca/test/paintings.html

 

CSS is here: http://www.stevenvolpe.ca/test/css/paintings.css

 

The page appears as I want in every browser except Explorer (6 through 8 ). The navigation menu does not display the same in those browsers. It kind of bleeds over on to 2 lines. If I space it a little wide, the navigation does not line up right with the logo. (bottom of 'volpe' and bottom of nav should line up...see below)

 

In Firefox, Safari, Opera, Chrome, the bottom of the menu is aligned with the bottom of the logo text. And it 'fits' fine into that area right of the logo. It appears correctly.

 

Can anyone give me some tips on how to fix the problem in Explorer?

 

Thanks in advance.

 

EDIT: I just checked on browsershots.org, and the menu appears to be ok in IE 8. So it's an IE 6 and 7 issue now.

The ul tag has a default left margin which you had not made 0; so edit the ul tag like this:-

 

#navcontainer ul

{

list-style-type: none;

text-align: left;

/*margin-top: -8px;*/ margin: -8px 0 0 0;

padding: 0;

position: relative;

z-index: 2;

}

 

Browsers have different default margins and padding to various elements, sometimes top or bottom ,sometimes the sides, and in this case it was IE's left margin.

 

Many people put a general reset style at the top of their stylesheet to make lots of elements 0; like

 

* { margin: 0; padding: 0; }

 

so all browsers start the same, and then they add specific margins or padding where they want.

That fixed it! Thanks a ton for the tip.