Minor IE 6 Problem

mikey · #1 (**permalink**) Jun 18th, 2007, 15:30

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 · #2 (**permalink**) Jun 18th, 2007, 16:29

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

mikey · #3 (**permalink**) Jun 18th, 2007, 16:33

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 · #4 (**permalink**) Jun 18th, 2007, 18:23

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 · #5 (**permalink**) Jun 18th, 2007, 18:27

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 · #6 (**permalink**) Jun 18th, 2007, 19:30

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 · #7 (**permalink**) Jun 19th, 2007, 10:59

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 · #8 (**permalink**) Jun 20th, 2007, 07:45

Quote:

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.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
First image problem and inline list problem	konnor5092	Web Page Design	8	Dec 1st, 2007 09:08
2 minor problems need sorting	AdRock	Web Page Design	2	Mar 26th, 2007 21:12
CSS (minor help)	john555	Web Page Design	4	Sep 6th, 2006 17:24
Minor design Flash needed	Anonymous User	Flash & Multimedia Forum	0	Dec 7th, 2004 19:43

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Minor IE 6 Problem