Hi All,
I've got a "hybrid" layout for one of my sites (i.e. part CSS, part
'old-style'). I'm trying to get an image to take up 95% of the
"content column" width. Important styles are:
body {
padding: 0px;
margin: 0px;
background-color: #408040;
font-family: arial, helvetica, sans-serif;
}
#bodycontent {
position:relative;
margin:0;
left: 13%;
width: 75%;
padding: 3px;
background-color: #ffffff;
border-color: #e0ffe0;
border-style: outset;
border-width: 5px;
}
td {
text-align: left;
vertical-align: top;
}
td.masthead {
text-align: center;
vertical-align: middle;
font-family: uechi, 'Monotype Corsiva', cursive;
font-size: 48pt;
}
td.content {
vertical-align: top;
font-size: 75%;
padding-right: 20px;
}
table.outer {
border-color: #e0ffe0;
border-style: groove;
border-width: 3px;
margin-left: auto;
margin-right: auto;
}
I'm using ORB to assemble the site, and the following is from the ORB
source (hence the weird includes). In the body, I've got:
<body>
<div id="bodycontent">
<table class="outer" width="100%">
[[$include masthead.orh]]
<tr>
<td class="no_print" width="25%" valign="top">
<p> </p>
[[$include navigation.orh]]
</td>
<td class="content">
<h1>Page Heading</h1>
<p>blah, blah, blah</p>
<p><img src="myimage.png" alt="Description" style="width:95%"><br>
<span style="font-style:italic;">Image caption</span></p>
<p>Blah, blah, blah.</p>
</td>
</tr>
</table>
</div>
[[$include footer.orh]]
</body>
This works as expected in Firefox 3.6 and Opera 10.62 but IE8 renders
the image at actual size. For info, I'm using HTML 4.01 Transitional
and I've tried changing the DTD declaration to:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd";>
While IE8 then rendered the image at approx the correct size, it also
positioned the border of the table.outer outside the border of the
bodycontent div. So I then tried changing the bodycontent div
positioning viz:
#bodycontent {
position:relative;
margin:0;
/*left: 13%;*/
margin-left:auto;
margin-right:auto;
width: 75%;
padding: 3px;
background-color: #ffffff;
border-color: #e0ffe0;
border-style: outset;
border-width: 5px;
}
FF and Opera continued behaving as expected but IE8 reverted to
rendering the image actual size. I changed the image width to 75% and
IE8 reduced the image size but positioned it in a space that was
actual width (so the text flowed off the right-hand edge of the
"content field" and the border of the outer table moved accordingly).
FWIW, the reason why I originally used "left:13%;width:75%" for the
bodycontent div was because the layout wouldn't work properly in IE
with the more usual setting of left and right margins to "auto".
This is driving me round the twist, so all help gratefully received.
--
Geoff
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
