homepage Welcome to WebmasterWorld Guest from 54.167.11.16
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Table-less design doesn't display properly in IE
worchyld




msg:1203696
 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




msg:1203697
 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)

DE

worchyld




msg:1203698
 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




msg:1203699
 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...]

DE

worchyld




msg:1203700
 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




msg:1203701
 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




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

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]

worchyld




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

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

worchyld




msg:1203704
 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




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

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved