Banner appears different in firefox to ie8

HTML & CSS
1

Hi,

I have created a wrapper using the sliding doors technique and then made a three column layout. I put in an image for the banner. The problem is the banner image looks fine in IE8 but overhangs the wrapper to the right in firefox.
I messed about a bit with the sizes of the banner but it seems if I get it right in one the other browser does not look right.

it can be seen at: http://www.alphatest.co.uk

the css is as follows:

body{
margin:0;
padding:0;
/*background:url(c2_images/corp2_back.gif) repeat-x;*/
background:#ccffff;
}

#wrapper{
width:90%;
margin:2% auto;
background:#E5E5E5;

}

.wrapper{
width:100%;
background-color:#cccccc;
background:url(c2_images/bigwrap_bl_shad.jpg) no-repeat left bottom;
}

.wrap_outer{background:url(c2_images/bigwrap_br_shad.jpg) no-repeat right bottom;
}

.wrap_inner{background:url(c2_images/bigwrap_tl_shad.jpg) no-repeat left top;
}


#header{
width:98%;
height:22%;
background:url(c2_images/bigwrap_tr_shad.jpg) no-repeat right top;
overflow:hidden;
padding-top:2.15%;
margin-left:2.1%;
margin-right:2.1%;
margin-bottom:2%;

}

#header img{overflow:hidden;}

#mainNav{
float:left;
width:16%;
background-color:#99CC66;
margin-left:4%;
}

#content{
float:left;
width:76%;
background-color:#339999;
margin-right:2%;
}

#mainContent{
float:left;
width:59%;
background-color:#996600;
padding-top:30px;
padding-left:5%;
padding-right:5%;

}

#secondaryNav{
float:left;
width:29%;
padding-right:2%;
background-color:#FFFF99;

}

#footer{
clear:both;
}

Anyone got any ideas why this si doing this?

thanks

2

Hi, it seems a rounding error the browsers have with the margin you declared for the header: 2.1%. Try changing it to 2% and see if that gets it better.

3

With all the percentages browsers wil have to make a choice whether to round up or down and those odd pixels can really add up :).

Try as Luki said but also add display:inline; here to fix an IE6 bug :slight_smile:

#mainNav{
float:left;
width:16%;
background-color:#99CC66;
margin-left:4%;
}
4

I tried as you both advised and it does cut the image off slightly in firefox. I suppose i will just have to target i.e.browsers with a seperate css for this do you think?

thanks

5

Conditional comments won’t be needed, granted I can’t help you right now due to me having to leave, but if noone responds by the time Iget back I’ll take a look :). YOu rarely ever need CC’s :slight_smile:

6

Hi,

Where exactly are we looking ? I see overlaps in different laces depending on screen width.

I can see bigger problems though where your page has great big gaps in it on my monitor.

See attached screenshot.

You should utilise some sort of min and max widths to make it hold together better.

7

Hi Paul, I really thought i had cracked it with this technique but its really causing problems. You hve actually found a problem other than the one the thread was about but it is probably more major.

I dont think im making the wrapper large enough. Mine is only about 1000px. Width wise it should really be double that shouldnt it?

Can i use max width on IE8? and would it go in #wrapper or .wrapper?

I think i need to get this sorted before i return to the other problem.

thanks for your help

8

It should be on #wrapper since that’s the outer parent :). Yes Max-width will work on IE8 though IE6 will need an expression to simulate it :slight_smile:

2000px? Almost every single monitor will have a scrollbar lol, some huge and some not as huge but still huge lol :slight_smile:

9

Thanks for that. i put the max-width in as 1100 which is the same width as right and left images together.

Now back to the original problem.

I have just put a graphic in the banner to prove (terrible picture - sorry) but in ie it fits perfect. In firefox it is far short of the size of the wrapper. Could this be a case for conditional comments or am i missing something?

thanks

10

Hi, to fix IE6/7 (this is not addressing your problem, you need to fix the double float margin bug on “#mainNav” and then offset the rounding errors (a -1px margin will patch it up)

I don’t see IE6/7/8/FF/Opera appearing any differently though as far as the graphic in the banner :confused:

#mainNav
{
	display:inline;/*fix Ie6's double float margin bug*/
	margin-right:-1px;/*offset rounding errors*/
}

Could you screenshot the trouble spot? In FF and IE8 if you will (or whatever browser(s) that are right/wrong design wise :))

11

I shall install a snapshot prog and get back to you.

thanks

12

Just use MS paint, open that up.
Go to your browser and hit Alt+Print Screen (top of your keyboard)

Then go to paint and hit CTRL+V

Save it and repeat the process for the second browser.

Then go to photobucket or something and then upload it and paste the direct link here :slight_smile:

13

hi

doesnt seem like I have ms paint on Vista.:mad:

14

Really? That’s weird…not that I have vista though.

You can download gimp.

It’s a free editor and does the same job. If vista won’t allow that then try this :slight_smile:

15

hi Ryanreese

Thanks for all the stuff you put into this problem. It has boiled down to a problem with firefox itself. A virus i think. It wasnt refreshing for some reason. There has been something wrong for some time so i tried system restore on the computer. And now both pages in IE and firefox look fine. No wonder it looked fine on your computer!!

thanks for all the extra advice re margins

:slight_smile:

16

It was probably just a cached version and that can be fixed by c learing it :).
CTRL+F5 clears cahce.