Forum Moderators: open
<body style="text-align:center">
<span style="width:100%; height:100%; display:block; background:teal;"/>
<div style="width:500px; height:500px; background:blue; margin:100px auto 200px auto;"/>
</body>the teal background doesn't fill the whole page in firefox3, and chrome, but fill the whole page in IE7 and 8
now the weird part is when you apply 1 pixel border to the span
<span style="width:100%; height:100%; display:block; background:teal; border:solid 1px black;"/>then the teal background would fill the whole page in chrome and firefox. someone please tell me whats going on?
i've found another workaround by using "table" display which displays correctly(according to me). but i just want to know why adding a border alters the box model so much
and a warm welcome to these forums. ;)
Which DOCTYPE are you using for your document?
birdbrain
this happens in any doctypes
have you tried my example and see what happens?
have you tried my example and see what happens?
The span element must be enclosed by a block element and requires a closing tag </span.
It seems pointless to use a span element set to display:block - why not just use a div element?
The div element also requires a closing tag </div>.
Nevertheless, if you still want you example to work, try it like 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">
<meta http-equiv="Content-Style-Type" content="text/css"><title></title>
<style type="text/css">
html,body {
margin:0;
padding:0;
height:100%;
}#myspan {
height:100%;
}#myspan span{
width:100%;
height:100%;
display:block;
background:teal;
}#mydiv {
width:500px;
height:500px;
background:blue;
margin:100px auto 200px auto;
}</style>
</head>
<body><div id="myspan"><span></span></div>
<div id="mydiv"></div>
</body>
</html>
im pretty sure usage of <span/> and <div/> is valid at least in transitional.
my intention of the "span" was to create another layer of background
I'm pretty sure usage of <span/> and <div/> is valid at least in transitional.
Well, why don't you put that assumption to the test. ;)
Why would you want to use a transitional dtd when it is quite simple to use
good coding practise and a strict dtd. :(
Anyway, my example has solved your problem, hasn't it.
birdbrain
what i meant to say is there is normally, when you add border style to a block, you expect it to render the same except with border applied right?
well in my example it is not, when you apply the border to the span, the span displayed full screen, without border, the span rendered height is equal to the div's height, something like that.
if you want a strict example, here you go
<!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">
<meta http-equiv="Content-Style-Type" content="text/css"> <title></title>
<style type="text/css">
html,body {
margin:0;
padding:0;
}
#myspan{
width:100%;
height:100%;
display:block;
background:teal;
border:1px solid black;
}
#mydiv {
width:500px;
height:500px;
background:blue;
margin:100px auto 200px auto;
}
</style>
</head>
<body>
<div id="myspan">
<div id="mydiv"></div>
</div>
</body>
</html>
I ran the validation with <span/> and <div/> under transitional and it passed.
Well, I used this dtd...
[red]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">[/red]
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css"><title></title>
</head>
<body style="text-align:center">
<span style="width:100%; height:100%; display:block; background:teal;"/>
<div style="width:500px; height:500px; background:blue; margin:100px auto 200px auto;"/></body>
</html>
Errors and Warnings* Line 14, character 71:
... play:block; background:teal;"/>
^Warning: net-enabling start-tag; possibly missing required quotes around an attribute value
* Line 15, character 87:... argin:100px auto 200px auto;"/>
^Warning: net-enabling start-tag; possibly missing required quotes around an attribute value
* Line 15, character 87:... argin:100px auto 200px auto;"/>
^Error: element DIV not allowed here; possible cause is an inline element containing a block-level element
* Line 17, character 7:</body>
^Error: end tag for DIV omitted; possible causes include a missing end tag, improper nesting of elements, or use of an element where it is not allowed
* Line 15, character 1:<div style="width:500px; height:500px; background:blue; marg ...
^start tag was here
* Line 17, character 7:</body>
^Error: end tag for SPAN omitted; possible causes include a missing end tag, improper nesting of elements, or use of an element where it is not allowed
* Line 14, character 1:<span style="width:100%; height:100%; display:block; backgro ...
^start tag was here
It seems that we have been at cross purposes. ;)
I have been concerned about code while you were concerned about margins.
The answer to your problem can be found here...
No bugs AFAIK (well IE is most likely as usual, but I meant in FF and the like)
First: you 100% height will not do a thing unless you give it's parent an explicitly set height that's different from auto. There is but one exception: the root element has the height of the viewport. So you need to set html, body and everything else that's a parent of you element height 100% is you want an element to have the height of the viewport when you set height: 100% on it.
Next the border goes around the width and height you set for the content, so that explains scroll bars appearing. (padding does the same)
Finally, as pointed to by bridbrain, there is collapsing margins. Your border prevents the collapsing from occurring.
Note that collapsing margins only occur in the vertical direction, not in the horizontal one.
