Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    Sep 2007
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts

    IE.6 ? 3px bug? + html bug??? I dont get it

    I want a floated div(left) and another div next to it with no gap.
    Works in Firefox. IE there is a 3 pixel gap.
    Yes I have looked at the 3 pixel bug documentation:
    http://www.positioniseverything.net/...reepxtest.html
    But it does not help me.

    ***********here is the css****************
    html{
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    }

    body {
    margin:0px;
    padding:0px;
    width:100%;
    height:100%;
    }


    #floatleft {
    float:left;
    height:30px;
    width:90px;
    background:#ff0000;
    border-width:0px;
    }

    #box1 {
    height:60px;
    width:200px;
    background:#0000ff;
    margin-left:90px;
    border-width:0px;
    }


    here is the html
    <?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">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
    <link rel="stylesheet" href="styles/layout.css" type="text/css" />
    </head>
    <body>
    <div id="floatleft">
    float left text
    </div>

    <div id="box1">
    box 1 textbox 1 textbox 1 textbox 1 textbox 1 textbox 1 textbox 1 textbox 1 textbox 1 textbox 1 textbox 1 text
    </div>
    </body>
    </html>


    On reading http://www.positioniseverything.net/...reepxtest.html
    It sort of looks like my problem, indeed they are both 3px bugs, but that pie-doc seems to show the 3px gap only on text, while my own 3px gap is on the box edges, not padding the text.
    You can see this becuase at the egde of the float on the pie-doc, the text padding stops. But on my own, the text is aligned to the left side of the box anyway, so even when the float stops, and the aligned box continues, the box and all the text still has the 3px gap!
    I have tried the solutions anyway, giving 1% height to the box next to the float, making the box1 a paragraph(with zero padding+margin), putting them in a container with specified width/height. But nothing seems to work. I get the feeling I am missing something obvious.
    And No I do not want to try floating the 2nd box right becuase that just causes widths problems for me later. (floats dont span 100% remainder width, and mixing 100% + fixed px widths causes overflow etc etc)

    *******************************************************
    *********** THE NEXT PROBLEM (BUG2) *******************


    I tried having the float, not floating, but positioned absolutly instead, and then having the box1 as a margin.
    html{
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    }

    body {
    margin:0px;
    padding:0px;
    width:100%;
    height:100%;
    }


    #absolute {
    position:absolute;
    height:30px;
    width:90px;
    background:#ff0000;
    border-width:0px;
    }

    #marginleft {
    height:60px;
    width:200px;
    background:#0000ff;
    margin-left:90px;
    border-width:0px;
    }

    But then I run into another bug(of course only with IE:
    If I have a div positioned absolutly and then a div positioned relativley, directly following it in the html doc, the absolute div seems to take a left margin equal to the left margin of the relative div(even if the relative div is floated right to the other side).
    This can be solved by putting text between the divs in the html:
    <div id="absolute">
    float left text
    </div>
    text that fixs bug
    <div id="marginleft">
    </div>


    But obviously this causes a gap above #marginleft.
    Anyone know a fix for this bug without putting content between the divs in html?
    I can not anywhere find documentaion of this html bug for ie.6

    So I have 2 IE.6 bugs. (I seem to spend 99% of my web design time being stumped on IE not displaying things properly)
    Can anyone point me in the right direction?
    I am assuming they are IE.6 bugs, and not me just being an idiot and not using proper code becuase everything always looks perfect in firefox.
    Any help is appreciated.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Get rid of this first
    Code:
    <?xml version="1.0" encoding="ISO-8859-1"?>
    Thats likely causing one of your bugs.

    As for the gap I suggest you reread that article because it tells you exactly what you need to do to fix it. Its likely you just don't understand the article in which case you need to tell us which parts you don't understand.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    Sep 2007
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for responding.
    I would guess the DTD/XML bits were meant to solve the html bug....
    But...

    I removed the xml bit so I just have :
    <!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>
    <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
    <link rel="stylesheet" href="styles/layout.css" type="text/css" />
    </head>

    And all the bugs were exactly the same, no difference in browser output of my code.


    I also tried just:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
    <link rel="stylesheet" href="styles/layout.css" type="text/css" />
    </head>

    This also had no effect. Bugs remain.....


    I will read the article again... and try and explain better the bits I don't understand. I thought I had made it clear but I will try again. And post an update shortly.

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Try this
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    html, body {
    margin:0;
    padding:0;
    height:100%;
    }
    
    #floatleft {
    float:left;
    width:90px;
    background:#ff0000;
    border-width:0px;
    }
    
    #box1 {
    width:200px;
    background:#0000ff;
    margin-left:90px;
    border-width:0px;
    }
    </style>
    <!--[if lte IE 6>
    <style type="text/css">
    #floatleft {
    margin-right:-3px;
    }
    #box1 {
    margin-left:0;
    height:1%;
    }
    </style>
    <![endif]-->
    </head>
    <body>
    <div id="floatleft"> float left text </div>
    <div id="box1"> box 1 textbox 1 textbox 1 textbox 1 textbox 1 textbox 1 textbox 1 textbox 1 textbox 1 textbox 1 textbox 1 text </div>
    </body>
    </html>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    New Coder
    Join Date
    Sep 2007
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I copied and pasted the code into my html doc, leaving nothing else in my doc.
    It looks fine in firefox just as before but in IE.6 there is still the 3 pixel gap.
    I have attached a screenshot of the output of your code in IE.6
    (I also drew an arrow pointing to the 3 pixel gap)
    Attached Thumbnails Attached Thumbnails IE.6 ? 3px bug? + html bug??? I dont get it-3pixels.jpg  

  • #6
    New Coder
    Join Date
    Sep 2007
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have this thread on another forum too(I hope this isn't considered spamming).
    Located here: http://www.webdeveloper.com/forum/sh...988#post802988

    I will add some important info from that thread here now:


    POSTED BY CYJETSU(ME):
    Floating the other box left does solve the gap problem, however I did actually want the other box's width to span the rest of the browser window, I only had a set width when experimenting, but wether leaving the width in or taking it out the bugs were still there.
    Anyway I can not float the other element becuase then when I do not specify the width, it does not span the browser window(as opposed to not specifying the width of a non-floated element). I think not specfying a floated width has a default of auto? And when since having a fixed width on the floated left element, no percentage on another floated element next to it will span 100% remainder of the browser window on all resolutions. (eg fixed.width + 100% width = overflow)
    And 50% would only span the rest of the browser width if the resolution was exactly twice the width of the left float.
    I think you can see what I am getting at.

    POSTED BY CENTAURI:
    This is a known bug, whereby if the non-floated div has a width or height specified, it will not ignore the float like it is supposed to. You mentioned something about wanting to expand to the remainder of available width - in this case only specify the mnargins and not the width or height of #box1 and it will work fine.

    POSTED BY CYJETSU:
    Progress has been made. But I am not free yet.

    Not specifying width and height on #box1 removes the gap.
    Now I can have text inside the #box1 with no 3px.gap.

    But as soon as I put a div(with widths and height) inside #box1, the 3pixel gap between the float reappears.....
    I can have divs inside it without widths and height, but then how can I make a decent webpage layout?

    The idea is I want to have a page layout with fixed and liquid elements. The first step is having nav/menu floated left and Main content aligned beside it on the right(without IE's stupid 3 px gap). I do not think I will be able to do that without specifying any widths and heights inside the main content. Thus... the 3 px bug remains......

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    The 3px bug can't be fixed when the element next to the first floated element has a set width. I'm guessing if you removed the width it would work fine. I suggest you take a look at the layout examples here: http://bonrouge.com/3c-hf-fluid.php
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #8
    New Coder
    Join Date
    Sep 2007
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    There is really no way to have an element with set width next to a float without a 3 pixel gap? *scratchs head*
    hmmmmm..... I suppose I would have to use absolute positioning instead.... but then I get that weird html bug.

    I will look at those layouts you mentioned.....

  • #9
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Quote Originally Posted by cyjetsu View Post
    There is really no way to have an element with set width next to a float without a 3 pixel gap? *scratchs head*
    hmmmmm..... I suppose I would have to use absolute positioning instead.... but then I get that weird html bug.

    I will look at those layouts you mentioned.....
    Unless you float the second element which why I'm still unsure why don't do that in the first place. You can still have other elements that are fluid. Just give them a left margin equal to the width of both the left menu and that second element.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #10
    New Coder
    Join Date
    Sep 2007
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Becuase I can not get a floated element to span 100% remainder of the browser width on all resolutions. If I set it to 100%, it causes overflow (of browser window) becuase it is 100% + floated width. And other percentages will not work on all resolutions.
    I have a floated left box, a non floated box beside it, if I add another box, it appears underneath the second box, and still has a 3px gap from the float anyway. And if I float the second box, the bug appears again.
    I am studying those layouts.....I should get it eventually......
    If something as simple as having 2 boxs is stumping me, I would hate to think how stressy it will be making complicated layouts work with IE.......

  • #11
    New Coder
    Join Date
    Sep 2007
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I think I found solutions to alll my problems now. Just by creating a stylesheet especially for IE.
    <!-[if IE>
    <link rel="stylesheet" type"text/css" href="forie.css" media="screen"
    <!endif]-->
    or using <!-if lte IE 6]> for IE6

    Is there any need to mess with javascript browser detection if I can just use that above code? And would I be able to create a totally standards valid css sheet for IE or would I still have to use hacks. Surley everything you can do with hacks, you could just as easily do simpler and cleaner by creating an ie specific stylesheet right?

  • #12
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    IE 3px. I haven't bothered looking at your code, but from my experience there are differences between firefox and IE because of the way the browser automatically lays out a page. Have you tried:

    body {
    left: 0;
    top: 0;}

    That sets them all the same.


  •  

    Posting Permissions

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