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