homepage Welcome to WebmasterWorld Guest from 54.144.236.12
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

10+ Year Member



 
Msg#: 975 posted 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

10+ Year Member



 
Msg#: 975 posted 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

10+ Year Member



 
Msg#: 975 posted 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

10+ Year Member



 
Msg#: 975 posted 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

10+ Year Member



 
Msg#: 975 posted 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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 975 posted 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

10+ Year Member



 
Msg#: 975 posted 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

10+ Year Member



 
Msg#: 975 posted 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+ Year Member



 
Msg#: 975 posted 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

10+ Year Member



 
Msg#: 975 posted 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