...

View Full Version : IE.6 ? 3px bug? + html bug??? I dont get it



cyjetsu
09-17-2007, 02:58 PM
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/explorer/threepxtest.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/explorer/threepxtest.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.

_Aerospace_Eng_
09-17-2007, 03:24 PM
Get rid of this first

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

cyjetsu
09-17-2007, 03:58 PM
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.

_Aerospace_Eng_
09-17-2007, 04:16 PM
Try this

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

cyjetsu
09-17-2007, 04:34 PM
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)

cyjetsu
09-17-2007, 05:00 PM
I have this thread on another forum too(I hope this isn't considered spamming).
Located here: http://www.webdeveloper.com/forum/showthread.php?p=802988#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......

_Aerospace_Eng_
09-17-2007, 05:53 PM
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

cyjetsu
09-17-2007, 07:17 PM
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.....

_Aerospace_Eng_
09-17-2007, 08:07 PM
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.

cyjetsu
09-17-2007, 08:56 PM
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.......

cyjetsu
09-19-2007, 03:57 AM
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?

finbarr
09-19-2007, 02:14 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum