Eiso 0

html:

<div id="top-bar">
<div id="header">&nbsp;</div>
</div>

css:

#top-bar {
display:inline-block;
height:60px;
left:0;
position:absolute;
top:0;
width:100%;
}

#header {
position: relative;
background:url("images/top-bar-blue.png") repeat-x scroll center top #FFF;
height: 60px;
}

I am trying to place a bar at the top of my website that has the background image repeated across it. It works in all browsers except IE6 (I won't even look at IE5). It does work when you set the width to a set amount of pixels but I need it to be 100%.

I know there is an easy fix but Googling hasn't allowed me to find it.

Thank you,

Eiso

4 answers

danwellman 5600
0
points

Try setting a width on the #header

Answered over 9 years ago by danwellman
  • I set width:100%; but still the same issue. It doesn't repeat. Eiso over 9 years ago
KC Rajput 178
0
points

use width in pixel of #header.

edit

 body, html {
            width: 100%;
            height: 100%;
            padding: 0;
            margin:0;
        }

add html tag in body.

Answered over 9 years ago by KC Rajput
  • I agree that works, but I need it to be 100% of the browser window, so then width in px's can't be done. Eiso over 9 years ago
  • i have edit my answer. try this. KC Rajput over 9 years ago
  • Thank you for effort, but that didn't change anything either. Eiso about 9 years ago
0
points

I would think you should be using display:block; as opposed to display:inline-block in #top-bar especially because you're using absolute positioning. With IE, sometimes little things like that give rise to weird bugs.

Answered about 9 years ago by Alex Ford
  • Great idea, but unfortunately the change has no effect. Still the same problem. Eiso about 9 years ago
Tony B 86
0
points

If you are trying to have a bar in a fixed position that stays there when you scroll then try this:

#header { height:60px;   width:100%;   background: #fff url(/images/top-bar-blue.png) 0 0 repeat-x; position:fixed;  }
Answered about 9 years ago by Tony B
  • Thank you but I am trying to keep it at the top. However the above code has the same problem in IE6 as mine. Eiso about 9 years ago