Hi all,
I'm sorry if this would be the wrong place to place this question. I'm
fairly new to CSS and don't really know what's going wrong.
What I wanted to do, is have a fixed header that kept showing on top
of the page when scrolling down and at the bottom of the header a kind
of a horizontal line shown across the page. I achieved this in firefox
with the following CSS-code:
<style type="text/css">
body{
margin:0;
padding:100px 0 0 0;
}
div#header{
position:absolute; top:0;
left:0;
width:100%;
height:80px;
background-color:#888888;
}
@media screen{
body>div#header{
position:fixed;
}
}
* html body{
overflow:hidden;
}
* html div#content{
height:100%;
overflow:auto;
}
hr {
color: #FF8000;
background-color: #FF8000;
height: 10px;
width:100%;
}
</style>
At the beginning and the end of the header there are 2 images. Below
the images there should be a horizontal line of 10px across the
complete page. This line is achieved by a 1x1 pixel png with a width
of 100% and a height of 10.
Code for this (this is from within the 'header'-div:
<img align="left" src="images/0.jpg" HEIGHT="75" WIDTH="75">Titel of
the page<img align="right" src="images/LogoAbes.jpg" HEIGHT="75"
WIDTH="75"></b><img src="images/ruler.png" width=100% height=10></
div>';
In firefox this is shown correctly under the two images but in
Internet explorer 7 the horizontal line is shown between the two
images which is wrong.
Can anyone help me to get this correct?
In case of clarification, I also have screenshots of the headers.
--
--
You received this because you are subscribed to the "Design the Web with CSS"
at Google groups.
To post: [email protected]
To unsubscribe: [email protected]
