Fri, 2003-12-12 13:23
Hi http://www.jamiegwilliam.com/hm/
I am trying to get this layout to work in mozilla and IE. Sadly I am having no joy what so ever 
Any ideas
Fri, 2003-12-12 20:28
#1
[SOLVED] IE6 and Mozilla - problems with layout...
Hi magictorch,
I'd start by putting topbox first in you html markup.
Hope that helps
Sat, 2003-12-13 14:58
#2
Tried that dude
Thanks for that but I have already tried that and i can get it to workin one but the other and vice versa, driving me nuts!
Sat, 2003-12-13 17:00
#3
[SOLVED] IE6 and Mozilla - problems with layout...
The float method won't work because of problems in IE.
In fact it's only due to a proprietary violation of the W3c
specs that IE handles this design 'correctly'.
Happily there is a different way that works fine in all the
browsers. First, un-float all the elements. Then make
#topbox a normal flowed element with side margins of 197px,
the same width as the side images. Then those side divs are
made 'position: absolute;' and given 'top: 0;' and either
'left: 0;' or right: 0;' for the two divs.
Thus the side images drop into the slots prepared for them.
Since they are absolute, they can be before or after #topbox.
This also will need the default body padding to be zeroed for
Opera.
Sun, 2003-12-14 14:49
#4
ok tried that but I am still stuggling here
Thanks but I am still struggling?
<html>
<head>
<title>CCW</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="ccw.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
-->
body {
background-color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.9em ;
margin: 0px 0;
}
#leftbox{
height: 563px;
background: #fff url(left.gif) no-repeat 0 0;
position: absolute;
}
#rightbox{
height: 563px;
background: #fff url(right.gif) no-repeat 0 0;
position: absolute;
}
#topbox{
height: 127px;
margin-left: 197px;
margin-right: 197px;
}
</style>
</head>
<body>
<div id="leftbox"></div>
<div id="topbox"><img src="top.gif" width="100%" height="127">
</div>
<div id="rightbox"></div>
</body>
</html>
Sun, 2003-12-14 15:12
#5
IE bug still there!
OK I have now figured out the layout but when viewed in IE #topbox places a 10px whitespace on either side of the image?
Why is it doing this ? We are nearly there!
Sun, 2003-12-14 16:17
#6
[SOLVED] IE6 and Mozilla - problems with layout...
Jamie, you have added styles to the head section, but the
link is still bringing in the old stylesheet, complete with the
float commands. Remember I said to get rid of the floating!
Here is a working example of your design:
http://www.kingmanaz.net/~bigjohn/temps/jamie/CCW.html
The IE gaps you have are the 3px space IE likes to use next to
floats in many situations. It's the reason the floats won't do the job.
You can see details of this behavior here:
http://www.positioniseverything.net/explorer/threepxtest.html
HTH
Sun, 2003-12-14 22:30
#7
You are the man
John What can I say but a big thank you for sorting this dilemma out, the web truely is a great place. Let open source go forth and multiply. Down with closed minds! A humble welshman