7 replies [Last post]
magictorch
magictorch's picture
Offline
newbie
Last seen: 6 years 35 weeks ago
Joined: 2003-07-22
Posts: 6
Points: 0

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 Sad

Any ideas

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 days 6 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

[SOLVED] IE6 and Mozilla - problems with layout...

Hi magictorch,
I'd start by putting topbox first in you html markup.

Hope that helps

magictorch
magictorch's picture
Offline
newbie
Last seen: 6 years 35 weeks ago
Joined: 2003-07-22
Posts: 6
Points: 0

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!

Big John
Big John's picture
Offline
Enthusiast
Arizona
Last seen: 16 years 4 weeks ago
Arizona
Timezone: GMT-7
Joined: 2003-10-29
Posts: 94
Points: 0

[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.

http//www.positioniseverything.net/

magictorch
magictorch's picture
Offline
newbie
Last seen: 6 years 35 weeks ago
Joined: 2003-07-22
Posts: 6
Points: 0

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>

magictorch
magictorch's picture
Offline
newbie
Last seen: 6 years 35 weeks ago
Joined: 2003-07-22
Posts: 6
Points: 0

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!

http://www.jamiegwilliam.com/hm/newindex.php

Big John
Big John's picture
Offline
Enthusiast
Arizona
Last seen: 16 years 4 weeks ago
Arizona
Timezone: GMT-7
Joined: 2003-10-29
Posts: 94
Points: 0

[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

http//www.positioniseverything.net/

magictorch
magictorch's picture
Offline
newbie
Last seen: 6 years 35 weeks ago
Joined: 2003-07-22
Posts: 6
Points: 0

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