-
Market Share != Quality
Have a look at the following page in your favorite web browser.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head>
<title>Market Share != Quality</title>
</head>
<body>
<div style="position: relative;">
<p style="float: left;">If this sentence</p>
<p style="float: right;">makes sense, then your browser may work correctly. If this sentence is</p>
</div>
<div>
<p>jumbled, then your browser has failed.</p>
</div>
</body>
While there may be some unorthidox spacing, you should be able to read "If this sentence makes sense, then your browser may work correctly. If this sentence is jumbled, then your browser has failed." Am I right?
If so, IE 6 and Opera 6 failed. Mozilla 1.0 RC3 seems to understand it just fine.
Anyone have an ugly solution that doesn't involve tables for inept browsers?
-
What effect are you try to get? I'm not sure how it looks in Moz because I recently formatted and haven't installed it yet, but this seems to look the same on NS 6.2, Opera 6.02, IE 6:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Market Share != Quality</title>
</head>
<body>
<div style="position: relative;">
<p style="float:left;">If this sentence</p>
<p style="float:right;">makes sense, then your browser may work correctly. If this sentence is</p>
</div>
<div style="clear:both;">
<p>jumbled, then your browser has failed.</p>
</div>
</body>
</html>
-
Okay, adding the "clear" gets the affect I want. But... should I have to do that? I think not, since the second div is a sibling, not a child, of the first.
How about this:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head>
<title>Market Share != Quality</title>
</head>
<body>
<div style="position: relative; border-style: solid;">
<p style="float: left;">If this sentence</p>
<p style="float: right;">makes sense, then your browser may work correctly. If this sentence is</p>
</div>
<div style="clear: both;">
<p>jumbled, then your browser has failed.</p>
</div>
</body>
Should there be a border around the first div, or above the first div, or between the floated text?
-
To my knowledge you should have to put clear, as float floats the object, even if it overlaps other elements. Like of you do something like:
Code:
<p><img src="SomeImage.png" alt="" style="float:left;">Here is some text</p>
<p>This text should wrap around the above image</p>
<p style="clear:left;">And this text shouldn't</p>
As for the second question, there should only be a border around the first div, and I think it should go through the images if they are bigger than the div. Is that border code valid CSS? Shouldn't it be something like "border: 1px solid black;"? I could be wrong about that though.
-
But the third paragraph is not in the same block as the two that are floating. So why should it have to clear? It should be to the left inside its own block.
The example you give is three inline tags all in the same block. I have two seperate blocks.
If the border is supposed to actually go around the first div, then again, it is only correct in Mozilla.
Yes, the CSS is correct. The sample you gave for that is shorthand, which is correct, and can be expanded to "border-width: 1px; border-style: solid; border-color: black;".
-
I think it should have to clear, because like I said float will overlap other elements, even if they are not in the same block. I think there is a diagram on the W3C site somewhere, but I have no idea where :p
I didn't know if you could have only border-style, I though maybe you would then need color and width also.
-
There are some default values. I think width is 2px, or something close to that (1.8?) and color is black. And that may vary on UA. But default style is none. 'Course, the space should still be allocated.
I'd like to see that diagram. I'll have to look again. I think that it underminds the point of block level entities. Again, Mozilla has been more true than any other browser, so I'm siding with it simply based on track history.
-
-
UA is user agent. The web browser is a UA. Some browsers may have limitations imposed by the media they are on. If you had a visual browser with an LCD screen, then borders might always be 1, and never anything more.
-
I don't know why I didn't think of user agent :rolleyes:
-
Okay, so I did some checking.
Yes, a floating object that overflows its containing block may obscure the border of other box blocks and affect the layout of their line blocks.
IE was doing that correctly.
If not explicitly defined, the height of a box block is determined by a number of things (spelled out in section 10.6 of the CSS2 documentation). In this case, the box blocks height is equal to the line- hieight of a contained line box.
IE failed to set the height of the box block, which allowed the floated object (a line box) to overflow and affect the following box.
I guess if I set the hieght of the box to 1em, then it would fix the problem and not require the float: clear.
I don't guess that is a huge problem. The lesson for today is, explicitly declare everything, because not everyone knows the correct way to comput them.
