No replies
FrancescoIT
Offline
newbie
Last seen: 12 years 18 weeks ago
Joined: 2009-03-11
Posts: 2
Points: 0

Hello,

I need to center a span in a specific place of the Header: more in detail I have to display some text (span) inside a "O" that is part of the Header background image.

I defined the header with position:relative and then I use position:absolute to place a wrapper DIV embedding the span.

It works fine in IE and Safari. In Firefox it is also ok when page is loaded, but if then I enlarge/reduce the browser window, the span remains in its position (like it would be position:fixed) and does not move together with the Header.

Here the code:

ventures

.header{
position:relative;
min-width:980px;
display:block;
height:116px;
background:Transparent url(images/Backgrounds/headerBgr.png) top right no-repeat;
}

.logo{
margin:0;
padding:15px 0 0 15px;
float:left;
min-width:150px;
}

.HeaderLinksWrapper{
float:right;
margin-right:175px;
position:relative;
}

.header:after, .logo:after {
content: ".";
height: 0;
display: block;
visibility: hidden;
overflow: hidden;
clear: both;
}

.wsNameHintContainer{
position:absolute;
top:30px;
right:69px;
width:76px;
height:70px;
line-height:1.1em;
text-align:center;
}

.wsNameHintContainer span{
display:table-cell;
vertical-align:middle;
width:75px;
height:70px;
}

How might I solve this in FF?
Thanks for any advise!