problem with ie6

Hey there, after a bit of a struggle i've managed to get my website looking right in everything apart from ie6.

I know most people use a different browser but according to my google analytics more people using my site view it through ie6 than ie7! So I'd really like to get it sorted

anyway, the site is bigmenslargeclothes.co.uk and the problem in ie6 is the borders are missing and the width is too big - as you can clearly see if you look at it through ie6

If anyone can help me with this i'd be eternally grateful, I've been struggling with this for a week now

thanks in advance

 

Its probably a problem with the margins on the div #mainwrapper.
Try adding this to the div in your css file: display:inline;

Should work. Tell us if it does not

 

Its the dreaded BOX MODEL BUG - see: http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

The easiest way around it would be to reduce the width of your element for IE6.

Say you have:

width: 600px;

on the line below write:

_width: 580px;

The _ will instruct the browser to use this line only for IE6.

 

Not 100% right Rimona.

Every browser except IE6 will just drop the line with a _ at the beginning. IE6 will just "delete" that _ and parse the CSS after the _



Regards,

Michael

 

nope that didn't work, it just got rid of the sidebar bits completely

 

Try adding display:inline-block; to each of the sidebars.

 

I stand (semantically) corrected.
Results are however the same.

Michael,
Ich nehme an, Ich brauche auch Nachhilfe-Unterricht in Englisch!

 

hi there, ok I've done the validation thing and cleaned up all but one of the errors (which I'll sort out later but it's not to do with layout I don't think)

Everything looks good in all browsers apart from in ie6 the category pics which are meant to be three to a line horizontally, for some reason the bottom line has been pushed over and there's only two on it and the last one starts a new line underneath.

I've tried sticking in display:inline's but that didn't seem to work - has anyone any other ideas?

Also in both ie6&7 my bullet points on the left sidebar navigation are right up against the text, I can't figure out how to position them like they appear in FF

If anyone feels like helping me out I'd be really really grateful!
David

 

It would very much help if we could see the site as is.

Can you post a link?

 

OK, i do not use ie6 so I could see what's the exact of your problem. In ie7, it's also different from what FF and chrome displays. In ff or chrome, you could see a border margin but in ie7 just extend to bottom. I make it by adding another wrapper div out of <div id="mainWrapperLeft">
<div class="pp">
<div id="mainWrapperLeft">
... ...
</div>
</div>

And the CSS

Now it looks the same as in ff and chrome

 

apologies http://www.bigmenslargeclothes.co.uk

 

Add as _width: 866px; as shown

#mainWrapper {
	background-color:#FFF;
	color:#000000;
	text-align: left;
	width: 850px;
	_width: 866px;
	margin-left: 9px;
	margin-right: 9px;
	}

Code (markup):

This may not be the only problem but is one of them.

 

I tried this but it just made the mainwrapper bigger so that the little bars down the side were obscured. Also it didn't seem to fix anything, what was it meant to do?

thanks, I appreciate the help

 

Hi,
I don't have IE6 here to test your site, but I can suggest you to try zoom: 1; It does fix some problems in IE sometimes.

#mainWrapper {
	background-color:#FFF;
	color:#000000;
	text-align: left;
	width: 850px;
	_width: 866px;
	margin-left: 9px;
	margin-right: 9px;
        zoom: 1;
	}

Code (markup):

Also you should use those hacks (_width, zoom, '_any') in separated css files to maintain your main css code valid. This is how I do it:

<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="css/ie6.css" media="screen" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="css/ie7.css" media="screen" /><![endif]-->

Code (markup):

style.css:
#mainWrapper {
	background-color:#FFF;
	color:#000000;
	text-align: left;
	width: 850px;
	margin-left: 9px;
	margin-right: 9px;
	}

ie6.css:
#mainWrapper {
	width: 866px;
        zoom: 1;
	}

Code (markup):