a simple design but does not work in IE CSS Question

Question a simple design but does not work in IE ( SitePoint Forums CSS )
Updated: 2008-11-23 05:25:01 (5)

a simple design but does not work in IE

This is a very simple design: a left column 150px wide with a menu, and a right column 600px wide with the main body of the page. Nothing else.

IT DOES NOT WORK.

I've tried everything: absolute positioning for both columns, float for the left one, float for the left one and absolute positioning for the right one: it does not work. If you open such a page in IE (6.0 or 5.5.), then you can not select (hightlight) anything in the right column below the level of the left column. But above that level it works fine.

An example:

*******************
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<p style="width: 150px">menu here</p>

<p style="position: absolute; top: 0px; left: 170px; width: 400px">
Paragraph here. Paragraph here. Paragraph here. Paragraph here. Paragraph here. Paragraph here. Paragraph here. Paragraph here. Paragraph here. Paragraph here. Paragraph here. Paragraph here. Paragraph here. Paragraph here. Paragraph here. Paragraph here. Paragraph here. Paragraph here. Paragraph here.</p>
*******************

It does not matter that there is not much CSS here. You can select anything in the first line of the right column. But nothing in the second and so for columns, because they are BELOW the "menu here" line of the left column.

The issue here is in the DOCTYPE declaration. And it does not matter what you declare there. The word <!DOCTYPE is what screws up everything. You remove it, it works in IE. You have it, even like <!DOCTYPE Microsoft sucks> - it stops working.

No problems in Opera or Netscape. The IE problem have been tested on many machines with various versions of Windows. It happens everywhere.

PLEASE: help me write a code that 1) has two columns with fixed widths; 2) does not uses tables for formatting; 3) is free of this bug.

Thanks.

Answers: a simple design but does not work in IE ( SitePoint Forums CSS )

a simple design but does not work in IE

Hi,

Quote:

The right and left column should have no margin between them,

The why have you set the left column to 150px and the right column at 170px! Thats a 20px gap between the two - I'm not a mind-reader

Quote:

(A hint: I work on this problem a few months already; I have tried all obvious things already, they don't work; setting padding and margins to zero on both columns seems to be an obvious suggestion, but don't give it: I have tried all obviuos suggestions, they don't works, and this one does not work consistently across the three browsers.)

hint : look at the the FAQ sticky thread especially the part on floats and the ie 3 pixel jog. It is a simple matter to overcome when you know what you are doing.

Code:

Moreover, dropping URI does not change anything - it still does not work

Yes it does - get your facts right please. I'm here to give help and not argue about these things. See here for more info about doctypes:

http://www.ericmeyeroncss.com/bonus/render-mode.html

Doctypes do not have to have a uri and there is no hard and fast rule. The html 4.01 transitional doctype without uri triggers (quirks mode (legacy behavuiour) in ie.

The xml prologue is 100% valid in xhtml documents but is optional so you can leave it in or take it out. In ie6 it triggers quirks mode by accident and in some cases this can be used to your advantage as in your problem above.

Quote:

In other words, nobody knows a valid HTML/CSS way to fix the issue?

What are you talking about I have given you 2 valid ways to fix the issues you mentioned.

The only thng you need to know is that text is not selectable in ie6 when in standards mode when using absolutely placed elements.

Therefore you have 2 chioces:
Force quirks mode as explained above - 100% valid.
Us floats -100% valid. But you will need to fix the ie 3 pixel jog but the code and css will validate.

Here it is anyway as I'm still feeling generous even after your post

Code:

<!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">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#left{
float:left;
width:150px;
background:red;
}
* html #left {margin-right:-3px}/* ie 3 pixel jog*/
#middle{
margin-left:150px;
width:400px;
background:blue;
}
* html #middle {margin-left:147px}/*ie will add 3 pixels to this*/
</style>
</head>
<body>
<div id="left"> 
<p>menu here</p>
<p>menu here</p>
<p>menu here</p>
<p>Some text to wrap around some text to wrap around : Some text to wrap around 
	some text to wrap around : Some text to wrap around some text to wrap around 
	: </p>
</div>
<div id="middle"> 
<p> Paragraph here. Paragraph here. Paragraph here. Paragraph here. Paragraph 
	here. Paragraph here. Paragraph here. Paragraph here. Paragraph here. Paragraph 
	here. Paragraph here. Paragraph here. Paragraph here. Paragraph here. Paragraph 
	here. Paragraph here. Paragraph here. Paragraph here. Paragraph here.</p>
<p> Paragraph here. Paragraph here. Paragraph here. Paragraph here. Paragraph 
	here. Paragraph here. Paragraph here. Paragraph here. Paragraph here. Paragraph 
	here. Paragraph here. Paragraph here. Paragraph here. Paragraph here. Paragraph 
	here. Paragraph here. Paragraph here. Paragraph here. Paragraph here.</p>
</div>
</body>
</html>

and a thank you wouldn't go amiss either

Paul

From th w3c css validator:

Edit:

No error or warning found

To work as intended, your CSS style sheet needs a correct document parse tree. This means you should use valid HTML.

Valid CSS information

#left {
- float : left;
- width : 150px;
- background : red;
}
* html #left {
- margin-right : -3px;
}
#middle {
- margin-left : 150px;
- width : 400px;
- background : blue;
}
* html #middle {
- margin-left : 147px;
}

Paul O'B

a simple design but does not work in IE

tested in IE6 on win2000

works fine

r937

a simple design but does not work in IE

Hi,

Just float your menu left and theres no need to use absolute positioning which cause the non selectable text bug.

Code:

<p style="float:left;width: 150px">menu here</p>
<p style="margin-left: 170px; width: 400px">
Paragraph here. Paragraph here. Paragraph here. Paragraph here. Paragraph here. Paragraph here. Paragraph here. Paragraph here. Paragraph here. Paragraph here. Paragraph here. Paragraph here. Paragraph here. Paragraph here. Paragraph here. Paragraph here. Paragraph here. Paragraph here. Paragraph here.</p>

The inline styles are for example only and should never be used.

If you must have an absolutely positioned layut and still want selectable text in ie then simply usethe htm4.01 doctype without uri or use the xhtml doctype with the xml prologue, both of which force quirks mode in ie and then you wil be able to selct the text.

Code:

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

Paul

Paul O'B

a simple design but does not work in IE

The right and left column should have no margin between them, and this design with the left float introduces a margin as you can see by adding background color to both columns. I was not yet successful in writing code that would totally remove the blank space both for IE, and Opera, and Netscape without using absolute positioning. Thus I have to use absolute positioning.

(A hint: I work on this problem a few months already; I have tried all obvious things already, they don't work; setting padding and margins to zero on both columns seems to be an obvious suggestion, but don't give it: I have tried all obviuos suggestions, they don't works, and this one does not work consistently across the three browsers.)

As far as I know, URI in DOCTYPE is not optional in the strict sense. There would not be much point in spending so much time writing HTML-4.01-compliant code and then dropping the key item. Yes, sure - it works anyway. But IE/Opera/Netscape fix lots of non-compliant things anyway, still that does not mean I should use them.

Moreover, dropping URI does not change anything - it still does not work. Like I said, you can plainly write <!DOCTYPE> - and it will be enough to screw up everything.

The XML suggestion works, but I will now need to learn what it really means, right? To read the spec on XML etc.

In other words, nobody knows a valid HTML/CSS way to fix the issue?

Rusi

a simple design but does not work in IE

[quote=Rusi]The right and left column should have no margin between them,
Yes the above Css does introduce a little space between the two columns in IE. Call Microsoft and complain about their broken box model. Well .. never mind that; They aren't listening.

The above Css does work. If you really need, I mean really need them to appear exactly the same, you should investigate IE's conditional comments. You can then write a css rule or complete file for IE alone and 'comment' it out. Other browsers will not see it.

Or you can try the ! important rule, which IE does not see. Create a rule, make it !important, for non-IE browsers. The immediately make the same rule for IE, which IE will use (cascade).

Sorry, but there is probably no straight CSS that will work correctly in IE and compliant browsers.

DesertPrince

- Source: a simple design but does not work in IE SitePoint Forums CSS
- Previous Question: How to get parent of absolute positioning element SitePoint Forums CSS
- Next Question: Favicon and CSS SitePoint Forums CSS