Table-less design doesn't display properly in IE

Forum Moderators: not2easy

Message Too Old, No Replies

Table-less design doesn't display properly in IE

worchyld

1:34 pm on Apr 30, 2003 (gmt 0)

This table-less design works more or less in all browsers (I know I need to but Opera hacks and stuff in it, but this is the page at its most basic).

However in IE the text moves to the right a little bit - but I cannot figure out why - any chance someone can have a look and find out what's going wrong?

Many Thanks.


<style type="text/css">
<!--
#all {
margin: 1em;
background: #eee;
border: 1px solid #000;
}
#hdr {
background: red;
}
#leftbar {
float: left;
text-align: right;
width: 175px;
padding-right: 5px;
}
#rightbar {
background: #fff;
margin-left: 180px;
padding-left: 1em;
}
p {
margin: 0px;
padding: 0px;
}
-->
</style>
<body><div id="all"><div id="hdr">Logo</div>
<div id="leftbar">
<p>Left bit</p>
<p>Left bit</p>
</div>
<div id="rightbar">
<p>Right Bar</p>
<p>Right Bar</p>
<p>Right Bar</p>
<p>Right Bar</p>
<p>Right Bar</p>
<p>Right Bar</p>
<p>Right Bar</p>
<p>Right Bar</p>
</div>
</div>
</body>

DCElliott

2:13 pm on Apr 30, 2003 (gmt 0)

What doctype are you using?
If you are in "quirks" mode you may be getting some unexpected body margin¦padding (I always forget which)

worchyld

2:37 pm on Apr 30, 2003 (gmt 0)

Sorry, I didn't put it in before hand

the doctype is below:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

DCElliott

2:51 pm on Apr 30, 2003 (gmt 0)

Remove the "<?xml version="1.0" encoding="iso-8859-1"?> " at the beginning. I know I know, you should be able to use it but IE gets confused and goes into quirks mode despite your doctype being xhtml.

Further explanation here: [alistapart.com...]

worchyld

7:45 am on May 1, 2003 (gmt 0)

I've tried different DOCTYPEs after someone mentioned it, it still does the same thing...

I've tried removing the <?xml thing you said but that doesn't do anything...

Here is the code again...someone mentioned to me that I found another IE bug - because it seems to work in other browsers but not IE...

Anyway.


<!DOCTYPE html 
   PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<title>Untitled Document</title>
<style type="text/css">
<!--
#all {
margin: 1em;
background: #eee;
border: 1px solid #000;
}
#hdr {
background: red;
}
#leftbar {
float: left;
text-align: right;
width: 175px;
padding-right: 5px;
}
#rightbar {
background: #fff;
margin-left: 180px;
padding-left: 1em;
}
p {
margin: 0px;
padding: 0px;
}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="all">
<div id="hdr">Logo</div>
<div id="leftbar">
<p>Left bit</p>
<p>Left bit</p>
</div>
<div id="rightbar">
<p>Right Bar</p>
<p>Right Bar</p>
<p>Right Bar</p>
<p>Right Bar</p>
<p>Right Bar</p>
<p>Right Bar</p>
<p>Right Bar</p>
<p>Right Bar</p>
</div>
</div></body>
</html>

grahamstewart

7:49 am on May 1, 2003 (gmt 0)

in IE the text moves to the right a little bit

Sounds like another occurence of the 3 pixel jog bug [positioniseverything.net]

Spook

8:39 am on May 1, 2003 (gmt 0)

I've just been playing around with this and used a "CSS spacer" as suggested by SuzyUK in another thread:

#spacer{
display: block;
float:left;
height:150px; /* to suit */
width: 1px; /* required in Netscape */
background-color: red; /* change to transparent I only used red to show how it works */
}

This seems to bring everything into alignment.

OK, not a pure CSS solution, but hey - I'm really an engineer ;)

Spook [with respect to SuzyUK]

worchyld

10:41 am on May 1, 2003 (gmt 0)

Where do I put the spacer? In the left bit or the right bit?

worchyld

10:45 am on May 1, 2003 (gmt 0)

The height part, when I put in the right part it stretches beyond the height of the actual box.

I need it to fit inside the box and setting the height to 100% doesn't work.

Spook

11:06 am on May 1, 2003 (gmt 0)

I put the spacer between the leftbar and rightbar divs like so:

<div id="rightbar">
<p>Right Bar</p>
<p>Right Bar</p>
<p>Right Bar</p>
<p>Right Bar</p>
<p>Right Bar</p>
<p>Right Bar</p>
<p>Right Bar</p>
<p>Right Bar</p>

It's not a perfect solution, I couldn't get the height part to work either. It can be "adjusted to suit" but obviously this is no good for dynamic content, or if several pages use the same stylesheet. Maybe someone else can advise?

Spook