Welcome to WebmasterWorld Guest from 54.205.115.177

Forum Moderators: not2easy

Message Too Old, No Replies

Table-less design doesn't display properly in IE

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

10+ Year Member



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>

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

10+ Year Member



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

DE

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

10+ Year Member



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">

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

10+ Year Member



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

DE

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

10+ Year Member



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>

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

WebmasterWorld Senior Member 10+ Year Member



in IE the text moves to the right a little bit

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

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

10+ Year Member



Hi

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]

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

10+ Year Member



Where do I put the spacer? In the left bit or the right bit?
10:45 am on May 1, 2003 (gmt 0)

10+ Year Member



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.

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

10+ Year Member



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

<div id="leftbar">
<p>Left bit</p>
<p>Left bit</p>
<p>Left bit</p>
<p>Left bit</p>
</div>

<div id="spacer"></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>

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