Bug or feature?

J

Jeroen

With the following code Firefox (1.0.1 WinXP) shows an extra strip of
body at the bottom of the page that is always the height of "div1". I
think it shouldn't be there. Opera and IE don't show this strip.

Is this a bug or a feature?

---------
<html><head>
<style>
body{
background-color:#FF0000;
}
table.main{
background-color:#BBBBBB;
width:100%;
height:1000px;
}
#td2{
background-color:#888888;
width:500px;
}
#div1{
background-color:#444444;
height:100px;
}
#div2{
background-color:#666666;
height:100%;
}
</style></head><body>

<table class=main >
<tr>
<td>td1</td>
<td id=td2 valign=top>

<div id=div1>div1</div>
<div id=div2>div2</div>

</td>
<td>td3</td>
</tr>
</table>
</body></html>
 
O

Oli Filth

Jeroen said:
With the following code Firefox (1.0.1 WinXP) shows an extra strip of
body at the bottom of the page that is always the height of "div1". I
think it shouldn't be there. Opera and IE don't show this strip.

Is this a bug or a feature?

The heights you've specified in the CSS don't make logical sense. You've
set the height of #div2 to be 100% of its containing block, but you've
also specified the height of #div1 to be 100px. How can both of those be
honoured?
 
E

Edwin van der Vaart

Spartanicus said:
Don't post code, post a url.
Why not posting the html codes?
Suppose he has no web space by a webhosting. What then, posting with an
attachment in this NG? That's a totally no no.
 
E

Edwin van der Vaart

Jeroen said:
With the following code Firefox (1.0.1 WinXP) shows an extra strip of
body at the bottom of the page that is always the height of "div1". I
think it shouldn't be there. Opera and IE don't show this strip.
Could you show us what you mean?
Is this a bug or a feature? [snip style sheet codes]

<table class=main >
Missing qoutes by class -> class="main"
<tr>
<td>td1</td>
<td id=td2 valign=top>
Missing qoutes by id -> id="td2" and by valign
<div id=div1>div1</div>
Also missing qoutes
<div id=div2>div2</div>
Missing qoutes
 
T

Toby Inkster

Edwin said:
Missing qoutes by class -> class="main"

Missing qoutes by id -> id="td2" and by valign

Also missing qoutes

Missing qoutes

As the OP is not using XHTML, these are all cases where the quotes are
optional.
 
J

Jeroen

Oli said:
The heights you've specified in the CSS don't make logical sense. You've
set the height of #div2 to be 100% of its containing block, but you've
also specified the height of #div1 to be 100px. How can both of those be
honoured?

It makes just as much sense as a <table> with a width of 500px that has
a <td> with a width of 100px and a <td> with a width of 100%... the
second <td> just takes the space that is left over, in this case 400px.


Greetings,

Jeroen
 
J

Jeroen

Edwin said:
Missing qoutes by class -> class="main"


Missing qoutes by id -> id="td2" and by valign


Also missing qoutes


Missing qoutes

With HTML it's not required to quote values that consist of
alpha-numeric characters. That's only requered if the values contain
special characters or if you're using XHTML.

You should really check with W3C before making strange comments like
these. I noticed your site http://www.evandervaart.nl uses plain HTML
4.0.1, so this is someting you should have known.

Greetings,

Jeroen
 
E

Edwin van der Vaart

Jeroen said:
With HTML it's not required to quote values that consist of
alpha-numeric characters. That's only requered if the values contain
special characters or if you're using XHTML.

You should really check with W3C before making strange comments like
these. I noticed your site http://www.evandervaart.nl uses plain HTML
4.0.1, so this is someting you should have known.
Plain HTML??
I use strict as doctype on that site. The site is a combination of php
and html.
 
O

Oli Filth

Jeroen said:
It makes just as much sense as a <table> with a width of 500px that has
a <td> with a width of 100px and a <td> with a width of 100%... the
second <td> just takes the space that is left over, in this case 400px.

Actually, that's not really what happens with width. Try this example:

<div style="width: 500px; background: #FF9">500px wide</div>
<div style="width: 400px; background: #F99">400px wide</div>
<table cellspacing="0" style="width: 500px">
<tr>
<td style="width:100%; background: #9F9">400px wide?</td>
<td style="width:100px; background: #99F">
Lots and lots of text
</td>
</tr>
</table>


Regardless, the CSS/HTML model acts quite differently for vertical
sizing/positioning as it does for horizontal. Compare:
http://www.w3.org/TR/CSS21/visudet.html#Computing_heights_and_margins
and
http://www.w3.org/TR/CSS21/visudet.html#Computing_widths_and_margins

(Note that I don't claim to understand much of what the CSS spec says in
this instance!)
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,906
Latest member
SkinfixSkintag

Latest Threads

Top