Site Reference Forums

ColoEagle wrote:

IE funny stuff here.

A friendly FYI - looking at your CSS there is some stuff in there that needs to be cleaned up.

Without redoing the navigation completely, just working with what you have;
Add the following conditional statement to the head section of the pages telling IE to give a negative 3px margin to the bottom of the images.

Code: html

<!--[if lte IE 7]>

<style type="text/css" media="screen">

#sectionLinks img {margin-bottom:-3px;} 

</style>

<![endif]-->

Balance out the image heights to 18px making them the same with the exception of the home image. Leave this one at 22px. This will maintain the spacing in relationship to the wine bottle image.

To bring this wine bottle image up to the bottom of the nav links remove the br tag just above this image.

Since you have declared and coded HTML 4.01 remove the XHTML closing in the verify meta tag. This will allow the page to validate and remove the possibility of the browser going into quirks mode.

Thanks ColoEagle,

That pretty much sussed it. I did however try #sectionLinks img {margin-bottom:-1px;
}  in the CSS file, but it didn't appear to work. Just thought I would try it instead of adding it to the head of every page.

You will note I reduced the margin-bottom:-3px down to -2px, then -1px as the top images were distorting the curvature of the top of the menu. Anyway, it worked at -1px, so left it there.

You mention about cleaning some stuff up in the CSS file - anything in particular?

Anyway, thanks once again for the above advise.

Cheers,
Graeme

ColoEagle wrote:

Your welcome, glad I could help.

graecille wrote:

You mention about cleaning some stuff up in the CSS file - anything in particular?

Just a few minor things really.

Code: css

body{

    font-family: Verdana, Arial, Helvetica, sans-serif;

    color: #003300;

    font-size: small;

    text-align: justify;

    line-height: 1.166;    

    margin: 0px;

    padding: 0px;

    background: images/h_tile.jpg;

    }

body {

    background-color: #cad7b9;

}

These two can be listed all in one. With the first one you have the background image mis-coded.

You have several duplicated font family declarations.
In the body you have already declared Verdana, Arial, Helvetica, sans-serif  Duplication (such as all the h tags) is not needed unless you change the family for a specific element/purpose.

One more point, you are using different font size settings - px, large, small, %. Would be better if you use just one throughout the css. Makes it easier to make adjustments and understand the settings.

Thanks again Colo, I will get onto it.

Cheers  .