Minor IE 6 Problem

[mikey]

I am baffled by this minor problem!

On all browsers the site looks fine except IE, on the portfolio section the bottom menu is dropped down slightly further.

I have removed the whole menu from that box and it still drops down, so its not the menu coding.

Website link

HTML code

Code: Select all

				<div id="portfoliomain">
					<div id="portfoliotext"></div>
					<div id="portfolio">
						<img src="Main.jpg" alt="Image"></img>
					</div>
					<div id="portfoliomenu">
						<ul id="menu">
							<li>
								<span class="box">
									Use these links to view my work
								</span>
							</li>.................

CSS Code

Code: Select all

#portfoliomain	{width:599px;
				float: left;
				background: #D7CAC1;
				height: 350px;
				border-right: solid #FFFFFF 1px;}

#portfolio		{width:414px;
				float: left;
				height: 314px;}

#portfoliotext	{width:180px;
				float: left;
				height: 314px;
				padding-left: 5px;
				font-size:11px;}

#portfoliomenu	{width:599px;
				float: left;
				background: #BFAC9B;
				height: 36px;}

[Lchad]

Sorry I don't see any difference from FF2 and IE7. Can you be more specific?

[mikey]

At the bottom of the portfolio page is the menu, the menu is in a dark brown box, in IE 6 this box will drop down about 5px I think out of the main frame design.

I haven't viewed my site in IE7 so can't say if it working properly or not in that browser.

I will try and post an image up if you still can't see any problems.

Thanks.

[Lchad]

Geesh... if I had read the subject line of your post I would have noticed you said "problem in IE"! There's my moron moment for the day!

Your problem lies here:

Code: Select all

#menu {
    margin: 0;
    padding-left: 0px;
    padding-top: 6px;
    width:599px;
    overflow: hidden;
}

Change the padding-top to something lower. Probably 2px or 3px.

[mikey]

Haha, I have tried that, but then in all the browsers it looks fine in it makes a gap at the bottom because it has been moved up as theres less padding.

I'm baffled by it.

[BGarner]

If that piece of code fixes IE 6, you can always insert into the head of your html:

Code: Select all

        <!--[if IE 6]>
            <style type="text/css">
                 #menu {
                   margin: 0;
                   padding-left: 0;
                   padding-top: 2px;
                   width: 599px;
                   overflow: hidden;
               }
            </style>
        <![endif]-->

Also, you can eliminate all default padding by inserting

Code: Select all

* {
margin: 0;
padding: 0;
}

But this may make your page display weird and you would have to go back and manually fix all padding. I always put this code in first thing so it's never a problem.

[mikey]

After a bit more playing I have worked out its the images in the portfolio section that are somehow the problem.

The height of the image is 314px, the same as the div it is in, however IE6 seems to add 4px padding to the image at the bottom, this then causing the menu to drop down.

I have changed the image height to 310px this making the site look fine, however I now get a 4px padding section underneath the image which I don't want.

I have search through my CSS trying to find something thats effecting the image but can't find anything, and it only happens in IE6!?

[MikeHopley]

Originally Posted by mikey

it only happens in IE6!?

Then, as BGarner suggested, use conditional comments to serve IE6 an extra stylesheet that other browsers don't get.