SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Afghanistan
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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.

  2. #2
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,350
    Mentioned
    63 Post(s)
    Tagged
    3 Thread(s)
    tested in IE6 on win2000

    works fine
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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

  4. #4
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Afghanistan
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    no no no

    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?

  5. #5
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Arizona
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    [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.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    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

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

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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •