Hello all, this is my first experiment with CSS layering to clone a table-based layout, and I'm having some cross-browser differences in rendering. At this point, I'm fairly certain my code is to blame, but I'm not sure of the best way to fix it.
As you can see from the test page (<!-- m --><a class="postlink" href="http://develop.indriani.net/~andy/test/layer/index.htm">http://develop.indriani.net/~andy/test/layer/index.htm</a><!-- m -->), Firefox displays the brown "Title goes here" <div> exactly the way I intended, which is above everything else. IE, places the <div> in the document flow as if the layer didn't matter.
Here's the CSS
#container{
height: 512px;
width: 75%;
margin-top: 30px;
margin: auto;
background: url(../images/diag.png);
}
#imagebox{
position:relative;
top: 0;
height: 512px;
width: 204px;
background: url(../images/shadow.png) no-repeat;
float: left;
padding-top: 16px;
padding-left: 16px;
padding-bottom:0;
padding-right:0;
z-index:1;
}
#leftimage{
background: url(../images/mountainroad.png) no-repeat;
position: relative;
height: 480px;
width: 172px;
margin: 0;
padding:0;
z-index:1;
}
#titlebox{
position: relative;
top: 30px;
width: 80%;
background: #666633;
margin: auto;
padding: 5px;
border: 1px solid;
z-index:2;
font-size :large;
text-decoration: none;
font-family:Georgia, "Times New Roman", Times, serif;
}
Problems/questions:
1) In Firefox, why does the text in #titlebox not ignore the floated element beneath it and render to the left of the box like it's supposed to?
2) IE, obviously, has interpreted my CSS differently than Firefox. Is this because there is a problem with IE, or does my code need work and Firefox is going easy on me?Have you tried validating your markup and styles?
As you can see from the test page (<!-- m --><a class="postlink" href="http://develop.indriani.net/~andy/test/layer/index.htm">http://develop.indriani.net/~andy/test/layer/index.htm</a><!-- m -->), Firefox displays the brown "Title goes here" <div> exactly the way I intended, which is above everything else. IE, places the <div> in the document flow as if the layer didn't matter.
Here's the CSS
#container{
height: 512px;
width: 75%;
margin-top: 30px;
margin: auto;
background: url(../images/diag.png);
}
#imagebox{
position:relative;
top: 0;
height: 512px;
width: 204px;
background: url(../images/shadow.png) no-repeat;
float: left;
padding-top: 16px;
padding-left: 16px;
padding-bottom:0;
padding-right:0;
z-index:1;
}
#leftimage{
background: url(../images/mountainroad.png) no-repeat;
position: relative;
height: 480px;
width: 172px;
margin: 0;
padding:0;
z-index:1;
}
#titlebox{
position: relative;
top: 30px;
width: 80%;
background: #666633;
margin: auto;
padding: 5px;
border: 1px solid;
z-index:2;
font-size :large;
text-decoration: none;
font-family:Georgia, "Times New Roman", Times, serif;
}
Problems/questions:
1) In Firefox, why does the text in #titlebox not ignore the floated element beneath it and render to the left of the box like it's supposed to?
2) IE, obviously, has interpreted my CSS differently than Firefox. Is this because there is a problem with IE, or does my code need work and Firefox is going easy on me?Have you tried validating your markup and styles?