PDA

View Full Version : css in ie7... grrrr...


stevenradams
07-18-2009, 03:14 PM
back again...!

please visit www.adamsapplemedia.co.uk

if you are on a mac, you'll see a simple site with container div, menu div (on the left), content div (in the middle) and an 'extras' div (on the right and being problematic at the moment so ignore the content of this last div).

everything works fine thanks to the help of some clever ppl on this website :) except when i check it in ie7 on a pc. typically.

i've accessed my company via remote desktop to view my site through the eyes of a pc user, and i've noticed that the container div is having problems. rather than resizing to content, it seems to be oversized (height-wise). on my mac, testing in ie, ff and safari this doesn't happen. the container div shrinks and grows with each page as desired.

the css for the container div is:

#container {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #333;
width: 720px;
border: 1px solid #333;
position: relative;
background-image: url(../images/aam_header.png);
background-repeat: no-repeat;
background-position: right top;
margin-top: 10px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}

and the page code is:

<link href="../css/p a.css" rel="stylesheet" type="text/css" />
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<script src="../SpryAssets/xpath.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryData.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
var stevenadamsblog = new Spry.Data.XMLDataSet("../rss/stevenadamsblog.rss", "rss/channel/item", {distinctOnLoad: true});
//-->
</script>
</head>

<body>
<div id="container">
<div id="headbufferdiv"></div>
<div id="menudiv">
<p><a href="../index.php" title="about adamsapplemedia" target="_self">about</a></p>
<p><a href="../blog.php" title="visit steven adams' blog" target="_self">blog</a></p>
<p>&nbsp;</p>
<p><a href="../print.php" title="our print media experience" target="_self">print</a></p>
<p><a href="../web.php" target="_self">web</a></p>
<p><a href="../word.php" target="_self">word</a></p>
<p>&nbsp;</p>
<p><a href="../contact.php" title="Contact adamsapplemedia" target="_self">contact</a></p>
</div>
<!-- TemplateBeginEditable name="maincontent" -->
<div id="contentdiv">
<p>&nbsp;</p>
</div>
<!-- TemplateEndEditable -->
<div id="feeddiv">
<p><strong>// extras</strong></p>
<p>{stevenadamsblog::title}</p>
<p>&nbsp;</p>
</div>
<div id="containerstretchdiv"></div>
<div id="footer">
<p>Copyright adamsapplemedia 2009</p>
</div>
</div>
</body>
</html>

anyone have any views on this? is there a hack i need to know about or am i doing something stoopid...?

thank you as ever.

DWcourse
07-18-2009, 05:59 PM
Just a guess, but IE treats left & right margins on objects with a widths differently than other browsers. So I suspect your divs are addin up to an overall width that is too wide for for #container and getting pushed around.

stevenradams
07-18-2009, 06:04 PM
Ah, that's a good tip... I haven't explored widths as the solution yet, and some of the divs are on fixed widths... thanks for this, I'll give it a try and let you know.

much appreciated,
S

DWcourse
07-18-2009, 06:08 PM
Easiest way to check is to just increase the width of container quite a bit and see if things line up vertically. If they do, you can reduce the width again and then search for the actual culprit.

stevenradams
07-19-2009, 12:50 AM
nope... changed everything to %'s but no joy. Went on the netrenderer site and it is an ie5-7 issue (sorted in 8 )... but i'm buggered if i can see what...

DWcourse
07-19-2009, 04:37 AM
Don't change to %, just increase the width of the container and see if things fall into place. If they do, then figure a way to take the margins out of the divs which have an assigned width.

(Hope that makes sense, I've had a few glasses of wine tonight.)

stevenradams
07-19-2009, 11:36 AM
:) I'd also had a few glasses...

But nope... didn't work. just gets wider but maintains its incorrect depth. Weird. as. hell.

Hmm...

pavid
07-19-2009, 11:45 AM
You have most probably tried this but does it mention anything in the browser compatibility check in dreamweaver?

stevenradams
07-19-2009, 11:50 AM
well, there are tow references to:

Expanding box problem:
Any content that does not fit in a fixed-width or -height box causes the box to expand to fit the content rather than letting the content overflow.

Affects: Internet Explorer 6.0
Likelihood: Likely

... but what I struggle with is finding out what's not fitting...!

stevenradams
07-19-2009, 12:06 PM
I think it's something to do with the headerbuffer div and the container stretch div I've used...

I've put a div before the menu/content divs with clear:both and a top margin (so that the content clears my imagery which is set as the container background). I've also put a div after the menu/content/right div with clear:both ... as I learnt on here recently that floated divs don't stretch the container.

hmm... i'm going to keep exploring but I'll post on here in case others in similar positions may benefit...

stevenradams
07-20-2009, 09:17 AM
Seems I was right, above.

I deleted the headbufferdiv, (which was essentially a 0px high div that cleared both sides with a top margin, designed to knock the content down far enough to clear the container div background image, which acted as the header image).

I replaced with a div with fixed height, and a background image, that clears both sides (but – importantly I suspect – no top margin), and the strange gap at the bottom of the page disappeared.

I'm left with two odd issues (that I may selfishly start a new thread on)... the min-width command for the container doesn't work in safari (though I know it's not expected to in IE), and the spry repeating list in the spry region (the right hand div called feeddiv) just doesn't show in IE. I don't know much about IE spry bugs, but am going to do some reading.

Safari shows it fine, IE just shows the div's left border.

I'll get there soon... it's frustrating as it seems to be a simple layout: three column, liquid, with a feed highlighting my latest and greated blog ramblings! But then, I am still learning my way here...