...

View Full Version : css positioning woes in ie ...



bear85
06-04-2007, 04:41 AM
hey guys,

im building this site for fun and im having some problems in IE.

the url to the site is here (http://albertobonora.ca/fc) and
the style sheet is here (http://albertobonora.ca/fc/styles.css).

the problem i am having is that one of my div's is bigger in IE and is the right size in firefox.
any help is appreciated.

Thanks in advanced.

cyberlogi
06-04-2007, 08:04 PM
It is hard to say exactly, but IE 6 and lower messes up the box model. Because of this elements with padding/margin should never have width. The only exception i have found to this rule is when using 'margin: 0px auto' to center the main content div. However, if you can restructure the rest of your elements to not have margins and widths, you will probably fix your problem. Otherwise, you'll need a special IE hacks stylesheet. This is what I use for my IE hacks:


<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="css/iehacks.css" />
<![endif]-->

koyama
06-04-2007, 09:24 PM
the problem i am having is that one of my div's is bigger in IE and is the right size in firefox.
Carefully look at the sizes of your elements.

You have #area nested within #inner. But here is your CSS:


#inner {
width:674px;
height:706px;
margin: 0 auto;
border:solid #fe2f37;
background-color:#fe6e73;
}
#area {
width:550px;
height:547px;
margin: 0 75px;
}

Clearly, there is not enough space for #area within inner.

Why IE6 expands #inner ? Read this: Internet Explorer and the Expanding Box Problem (http://www.positioniseverything.net/explorer/expandingboxbug.html) [fixed in IE7]

bear85
06-05-2007, 04:42 AM
thank you koyama & cyberlogi for your help.

koyama, when i was reading your reply and you mentioned that there was not enough space for #area within #inner i looked at my code and saw that for #area i had the margin set at '0 75px'. so i changed '75px' to 'auto' and it fixed the problem.

once again thank you both for your help.

thanks :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum