11 replies [Last post]
jacktanner
Offline
newbie
Last seen: 15 years 36 weeks ago
Joined: 2004-03-31
Posts: 6
Points: 0

IE6 wants to shift text left for no apparent reason; Mozilla works fine. Here's the code:

<html>
<head>
<title>I'm a Web Page</title>
<style>
div.program {padding: 1.5em; border-left: dotted; border-right: dotted; border-width: 0em 1em 0em 1em; }</style></head>
<body>

<div class="program">
<div id="kill-me">
</div>
</div>

<p>I get cut off!</p>
<div id="i-compensate" style="margin-left: 1em;">
</div>
</body>
</html>

The p gets shifted left and cut off. If I remove ANY of the CSS rules, the p doesn't get shifted; if I remove the div "kill-me", the p doesn't get shifted; and if I move the p inside the empty div "i-compensate", that compensates for the shift.

What's going on here? Thanks!

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 5 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

IE6 left-shift after div

Hi

The reason is because you are applying a border and padding to a div without a width defined.

In IE that div will be rendered to 100% width of the screen, plus your padding.

Change your code like this:

<html>
<head>
<title>I'm a Web Page</title> 
<style> 
#program {
border-left: dotted;
border-right: dotted;
border-width: 0 1em 0 1em;
}
#kill-me {
padding: 1.5em;
}
</style>
</head> 
<body> 

<div id="program"> 
<div id="kill-me"> 
</div> 
</div> 

<p>I get cut off!</p> 
<div id="i-compensate" style="margin-left: 1em;"> 
</div> 
</body> 
</html>

And all is fine.

Trevor

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 5 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

IE6 left-shift after div

Hi

Doh! It's late here. Time for bed.

I just realised the problem is the lack of height in IE. Often IE can't cope with a width-less container with margins/borders set, so you have to feed it a fake height. In your case, without content, IE won't give you any border at too low a height, a bit of experimentation shows 10% is right with my system, but this may need to be a pixel based height, not %, you'll juts have to suck it and see:

<html>
<head>
<title>I'm a Web Page</title> 
<style> 
#program {
border-left: dotted;
border-right: dotted;
border-width: 0 1em 0 1em;
padding: 1.5em;
}
* html #program {height:10%;}
#kill-me {
}
</style>
</head> 
<body> 

<div id="program"> 
<div id="kill-me"> 
</div> 
</div> 

<p>I get cut off!</p> 
<div id="i-compensate" style="margin-left: 1em;"> 
</div> 
</body> 
</html>

The second style for program can only be seen by IE. The others don't need it.

Trevor

jacktanner
Offline
newbie
Last seen: 15 years 36 weeks ago
Joined: 2004-03-31
Posts: 6
Points: 0

That did it!

* html #program {height:10%;} really does make a difference, and your explanation makes sense. Is this some sort of trick with all browsers except IE treating * as a comment character? Is this a bug on the part of the other browsers?

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 5 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

IE6 left-shift after div

Hi

The * hack is an IE bug. Browsers are supposed to ignore invalid code in the style sheet, a line starting with this is invalid, but IE doesn't ignore it.

Second, IE treats html as a style container, the others (most anyway) don't, so by defining the div as a child of html restricts it to IE. It's a common IE-only hack.

Browsers shouldn't need that height, but IE's model isn't perfect, so it alone does. Ever read that IE's css model is not entirely perfect? Design for Moz (like Firefox 0.8 ) and then hack for IE. It's quicker I find.

Trevor

jacktanner
Offline
newbie
Last seen: 15 years 36 weeks ago
Joined: 2004-03-31
Posts: 6
Points: 0

IE6 left-shift after div

It turns out the height hack causes a problem in IE6.

I have a div#sidebar {float:right} next to div.program. Without the height hack, the two display side-by-side. With the height hack, in IE (not in Moz, which doesn't see the height hack), if the IE window is resized to be narrower horizontally, the div.program will sometimes drop down (it then starts at the bottom of the div#sidebar), and will sometimes pop back up when the window is resized to be yet narrower.

I'm having a really tough time tracking this down (it seems to go away when I remove the font descriptors for h2!), so I'm posting more code than I did last time.

h1 {margin: 0em; padding: 0.25em 0.33em 0.125em;}

h2 {font-family: Arial, sans-serif; font-style: italic; font-weight: normal; margin: 0;}
h2 {margin: 0em; padding: 0.33em 0.5em 0.175em 0.5em;}

div div {margin-bottom: 2em;}
div h2, h3 {margin: 0em; padding: 0em 0.7em 0.8em 0.7em;}
div p {margin: 0em 1em 0em 0em; padding: 0em 0em 1em 1em;}
div ul {margin: 0em 2em 1em 2em; padding: 0em 0em 1em 1em;}
div table {margin: 0em 0em 1em auto; padding: 0em 0em 1em 1em;}

div.program, div#sidebar {background: transparent; padding: 1.5em;}
div.program, div#sidebar {border-left: dotted; border-right: dotted; border-width: 0em 1em 0em 1em;}

div.program {width: auto; margin: 1em 18em 2em 1em;}
* html div.program {height: 10%;} /* IE hack, ignored by other browsers */

div#sidebar {width: 10em; margin: 1em 1em 2em 1em; float: right;}
div#sidebar div {font-size: 75%;}
div#sidebar p {margin: 0em 1em 0em 0em; padding: 0em 0em 0.5em 1em; }
div#sidebar h2 {margin: 0em; padding: 0em 0.7em 0.5em 0.7em; }

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 5 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

IE6 left-shift after div

Hi Jack

I could do with all the page code as one html file (ie doctype, head, styles inline, and all the body) with it stripped to barebones (no unnecssary images or java), preferably as a url on the web. It's easier to see it all working that way. Perhaps upload a complete test page and post the url here.

Trevor

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 2 years 31 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

IE6 left-shift after div

You can tailor the code for IE with an IE conditional comment - let IE features fix IE bugs :roll:

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

jacktanner
Offline
newbie
Last seen: 15 years 36 weeks ago
Joined: 2004-03-31
Posts: 6
Points: 0

IE6 left-shift after div

Sorry about that. Here's a sample file. Once again, the problem is that if you resize the IE window horizontally, the div#program jumps down and up and down and up ... The freakish thing is that the jumps go away when I remove h2 {font-style: italic;}.

<html>
<head>
<title>I'm a web page!</title>
<style type="text/css">
<!--
h2 {font-family: Arial, sans-serif; font-style: italic; font-size: 1.8em;}
h2 {margin: 0em; padding: 0.33em 0.5em 0.175em 0.5em;}

div div {margin-bottom: 2em; background: red;}
div h2, h3 {margin: 0em; padding: 0em 0.7em 0.8em 0.7em;}
div p {margin: 0em 1em 0em 0em; padding: 0em 0em 1em 1em;}
div ul {margin: 0em 2em 1em 2em; padding: 0em 0em 1em 1em;}

div#program {padding: 1.5em;}
div#program {border-left: dotted; border-right: dotted; border-width: 0em 1em 0em 1em;}
div#program {width: auto; margin: 1em 14em 2em 1em;}
* html div#program {height: 10%;} /* IE hack, ignored by other browsers */

div#sidebar {width: 10em; margin: 1em .5em 1em .5em; float: right;}
div#sidebar p {padding: 0em 0em 0.5em 1em; font-size: .8em;}
div#sidebar h2 {padding: 0em 0.7em 0.5em 0.7em; font-size: 1.3em;}
-->
</style>
</head>
<body>

<div id="sidebar">
<div>
<h2>I'm a heading 2</h2>
<p>text text text text text text text text text </p>
<p>text text text text text text text text text </p>
</div>

<div>
<h2>I'm a heading 2</h2>
<p>text text text text text text text text text </p>
<p>text text text text text text text text text </p>
</div>

<div>
<h2>I'm a heading 2</h2>
<p>text text text text text text text text text </p>
<p>text text text text text text text text text </p>
</div>
</div>

<div id="program">
<div>
<h2>I'm a really really really really really really long heading 2</h2>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
</div>
</div>
</body>
</html>

jacktanner
Offline
newbie
Last seen: 15 years 36 weeks ago
Joined: 2004-03-31
Posts: 6
Points: 0

IE6 left-shift after div

Quote:
The freakish thing is that the jumps go away when I remove h2 {font-style: italic;}.

Oooh! It gets even more interesting. A jump happens every time the length of the top line of the h2 changes because of the wrap-around, and it doesn't happen if font-style: italic is removed!

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 5 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

IE6 left-shift after div

Hi

Add this code after the h2 definitions:

/* \*/
* html h2 {
overflow: hidden;
width: 100%;
o\verflow: visible;
w\idth: auto;
he\ight: 1px;
word-wrap: normal;
}
/* */

IE has a bug rendering italics, usuually associated with justified text, but the above fixes your problem. Notice how word-wrap is set to normal. If it is otherwise IE throws a fit in italics.

The page (for IE) could do with a width in the body to cope with small screen widths, otherwise the right divs will force the left side down.

If the content is to be wrapped in an overall page container (a good idea), that will need a min-width for Moz.

Trevor

jacktanner
Offline
newbie
Last seen: 15 years 36 weeks ago
Joined: 2004-03-31
Posts: 6
Points: 0

IE6 left-shift after div

Trevor, thank you for your help. It seems my problem was the bug described in http://www.positioniseverything.net/guests/italicbug-ie.html. I ended up using the {width:95%;} hack described on that page (targetted at IE only), and it's worked out great. Is your method preferable, or are they equivalent?

Also, what's with the slashes in /* \*/, o\verflow, w\idth, he\ight... I've been seeing those often lately.