Forum Moderators: not2easy
If anyone cares to explain this, I would be grateful. Im just confused :(
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style>
html
{
width:100%;
height:100%;
}body
{
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
margin: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
background-color:#FCC4FF;
color:black;
font-family: verdana,arial,sans-serif;
font-size:1em;
height:100%;
width:100%;
}#header
{
background-color:#9CB0FB;
position: relative;
border:solid black;
/*border-width: 0px 0px 1px 0px; */
border-width: 1px 0px 1px 0px;
}
</style>
</head>
<body>
<div id="header">
<h1>Sample Text</h1></div>
</body>
</html>
Wild guess but, is it because there is no space between your first comment declaration?
/* border-width: 0px 0px 1px 0px; */
P.S. I may be misunderstanding the Q.
The code, as is, works well. The top of the page, starting at 0px, is that div, as expected.
But, if you use the commented code instead, the top div is shifted down a line. With only that small change? I tested all this without any commented code, so that shouldnt be the problem.
Thx so far.
Congrats on mod status: I just noticed PageOne : )
Have you tried the process of elimination method? ;)
I think if you remove those first four attributes for absolute positioning, you may see different results. The margin:0; and padding:0; should give you your 0 margin that you are looking for.
<added> I'd also suggest using this format for your embedded style reference...
<style type="text/css"></style>
instead of <style></style>.
As to the removing some of the overkill in the body property: didnt help a bit...
<added>
I just noticed for the first time that the div in IE, when I use
border-width: 0px 0px 1px 0px;, also grows smaller by one line.
it's Collapsing Margins [w3.org].
without the top border in place the top margins of the two elements (div and H1(default)) are collapsing (or overlapping, kinda describes it better) and you're seeing the larger of the two.. Then the Browser differences are because they are deciding which background to apply ~ Moz again (though I did doubt for a while this time) is right I think...
...If the element's margins are collapsed with its parent's top margin, the top border edge of the box is defined to be the same as the parent's....
One way to remove it safely cross browser would be to declare margin: 0; on the <h1> and set any spacing required with padding instead.
{I do this on hn and p elements anyway)
or:
use a 1px top border (same color as background if it's not actually required to show) as this may save further children causing the same problem
The border has the effect of seperating the elements so their margins are not touching and therefore wont collapse.
to test: set h1 {margin: 0;}
Suzy
<added> The difference in box model rendering is what is causing the different scenario in IE.. it never could get the margins right anyway ;), and that's why I mentioned the cross browser solutions...<added>
a full doctype MUST be the first line in the file to make IE operate in 'Standards' mode. So you'll have to remove the
<?xml version="1.0" encoding="UTF-8"?>
border:solid black;
border-width: 0px 0px 1px 0px;
The border shorthand must have (in this order): width, style, color
So, the proper way to write what you want would be:
border: 0 solid black;
border-bottom-width: 1px;
border:
[ <'border-width'> ¦¦ <'border-style'> ¦¦ <color> ] ¦ inherit
# A bar (¦) separates two or more alternatives: exactly one of them must occur.
# A double bar (¦¦) separates two or more options: one or more of them must occur, in any order.
# Brackets ([ ]) are for grouping.
grahamstewert: true
SuzyUK: oh my, thank you so much: that clearly is what seems to be happening.
Thank you, too: Hester, DrDoc, and Graham, for throwing the tips at me. And of course PageOneResults.
<added>
I never get to bust on DrDoc! =P. Suzy, you watch it. Your hegemony of perfection is coming to an end =p j/k guys/gals.
</added>
You're welcome and LOL ;)
Suzy
