Problem solved. In stead of coding image(left) - text - image(right) I had to define first the two images and then the text: image(left) - image(right) - text. Now it looks ok both in firefox and IE7.
Thanks for the time and effort! 2010/3/2 dries annaert <[email protected]> > Hi Muzilla, > > Thanks for the reply. > > Two screenshots attached. It's the orange line that is not working as it > should. The two white squares at each end are the logo's displayed and under > the white line there's teh title. > > With kind regards, > Max > > 2010/3/1 Munzilla <[email protected]> > > Hi Max, >> Welcome to life with CSS and IE :) >> I'm having a hard time visualizing exactly what you're trying to do. >> Could you send screenshots or a link? >> Thanks. >> >> On Mar 1, 10:34 am, Max <[email protected]> wrote: >> > 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] >> > > -- -- 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]
