2 replies [Last post]
supersoutie
Offline
newbie
Cape Town, South Africa
Last seen: 16 years 35 weeks ago
Cape Town, South Africa
Timezone: GMT+2
Joined: 2004-03-30
Posts: 5
Points: 0

I have designed a layout which works great in IE, but all messed up in Netscape. The left column has disappeared with the bodyblock shifting to the left. The image also no longer floats to the left :?

I have attached two amall gifs to show how the different browsers display the code.

[code]
<html>
<head>
<style type="text/css" media="all">
body {
font-size:12px;
font-family:Georgia, "Times New Roman", Times, serif;
margin:20px;
background:#ff0000;
color: #ffffff;
padding:0;
}

img.left-floating {
float: left
}

#outerblock {
text-align:right;
border:1px solid #ff0000;
width:700px;
margin:auto;
}

#leftcol {
float:left;
background:#000000;
color: #ffffff;
width:145px;
height:400px;
}

#bodyblock {
position:relative;
background: #ff0000;
color: #ffffff;
width:550px;
padding:0;
height:400px;
}

#hdr {
height:110px;
background:#000000;
color: #ffffff;
padding:5;
}

#link {
height:25px;
background:#ff0000;
color: #ffffff;
padding:0;
text-align:center;
}

#main {
width:550px;
height:265px;
background:#000000;
color: #ffffff;
text-align:left;
padding:5;
}

#ftr {
height:25px;
background:#000000;
color: #ffffff;
border:solid #ff0000;
border-width:3px 0 0 0;
margin:0;
}
</style>
</head>

<body>
<div id="outerblock">
<div id="leftcol" align="center">
&nbsp;
<br />
</div>

<div id="bodyblock">
<div id="hdr" align="right">
<img class="left-floating" src="" width="400" height="90" alt="" border="0" />
The Address<br />
and other<br />
contact details<br />
to float<br />
all around<br />
image on left
</div>

<div id="link">
&nbsp;
</div>

<div id="main">
&nbsp;
</div>
</div>

<div id="ftr" align="center">
&nbsp;
</div>
</div>
</body>
</html>
</code>

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 16 years 45 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

IE works Netscape not?

As a start change your css to

#bodyblock {
float:right; /* add this bit */
position:relative;
background: #ff0000;
color: #ffffff;
width:550px;
padding:0;
height:400px;
}

.clear {clear:both;} /* a new bit */

and then add this to your html

<div id="main">
&nbsp;
</div>
</div>
<div class="clear"></div> <!-- add this line -->
<div id="ftr" align="center">
&nbsp;
</div>
</div>

This will at least get the layout divs looking in roughly the right place.
Your next problem will be the sizing.
Either put your code into standards compliant mode to get the box model working properly in both browsers or apply the box model hacks to correct IE errors.

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

supersoutie
Offline
newbie
Cape Town, South Africa
Last seen: 16 years 35 weeks ago
Cape Town, South Africa
Timezone: GMT+2
Joined: 2004-03-30
Posts: 5
Points: 0

IE works Netscape not?

You are a star thanks Tongue The rest shouldnt be a problem

Thanks muchly