Need help with absolute positioning in Firefox

Well, I'm new to the forum and to webdevelopping. It's been 2 or 3 days I'd been having problems with absolute positioning in my site, ony in firefox.

No matter what I try, i can't get firefox to calculate the positioning of my absolute positioned divs taking as reference the parent relative positioned div. I don't know if I am being clear. It works in IE, Opera and Chrome, but firefox simpy ignores the parent div.

Here are the parts of the CSS that I believe are problematic, and the body of the html. If you need any other informantion, just say.

______________________________________________________

#stylefour {
margin:0;
position: absolute;
left: 147px;
top: 225px;
display:block;
height:39px;
width:845px;
font-size:11px;
font-weight:bold;
background:transparent url(/bgoff.gif) repeat-x top left;
font-family:Arial,Verdana,Helvitica,sans-serif;
border-top:4px solid #B30000;
}

#stylefour ul{
margin:0;
padding:0;
list-style-type:none;
width:auto;}

#stylefour ul li{
display:block;
float:left;
margin:0;}

#stylefour ul li a{
display:block;
float:left;
color:#35556a;
text-decoration:none;
padding:11px 20px 0 20px;
height:23px;
background:transparent url(/bgdivider.gif) no-repeat top right;}

#stylefour ul li a:hover,#stylefour ul li a.current{
color:#B30000;
background:#fff url(/bgon.gif) no-repeat top left;}

#outer-wrapper {
width: 980px;
min-height:1800px;
height:auto !important;
height:1800px;
margin:0 auto;
padding:10px;
padding-bottom:40px;
position: relative;
text-align:$startSide;
font: $bodyfont;
display: table;
background: #fff url(/linhavertical.png) repeat-y 11px;
border:1px solid black;
}

#main-wrapper {
width: 609px;
margin-left: 30px;
position:relative;
left:150px;
top:50px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 180px;
position:absolute;
right:10px;
top:280px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#newsidebar-wrapper {
margin-left: 0px;
margin-right: 0;
width: 150px;
position: absolute;
top:225px;
left:5px;
background:transparent url(/fundoxba.png) no-repeat top right;}

#espacador1 {
height:10px;
width:52px;
position:absolute;
left:0px;
top:0px;
background: #fff;
}

#espacador2 {
height:120px;
width:52px;
position:absolute;
left:0px;
top:212px;
background: #fff;
}

#espacador3 {
height:10px;
width:52px;
position:absolute;
left:0px;
bottom:0px;
background: #fff;
}

#creditos {
position:absolute;
bottom:15px;
left:10px;
}

_____________________________

and the Html:

<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> ¦
<a href='#sidebar'>skip to sidebar</a>
</span>

<div id='stylefour'>
<ul>
<li><a href='#' title='O Grêmio'>O Grêmio</a></li>
<li><a href='#' title='Eventos'>Eventos</a></li>
<li><a href='#' title='Calendário'>Calendário</a></li>
<li><a href='#' title='Contato'>Contato</a></li>
<li><a href='#' title='Colunistas'>Colunistas</a></li>
<li><a href='#' title='Galerias'>Galerias</a></li>
</ul>
</div>

<div id='content-wrapper'>

</div> 

</div></div> 
</body>

______________________________

Yes, it is a modded blogger template. I said I was a beginner.

Please, I realy need your help.

[edited by: swa66 at 9:23 pm (utc) on July 22, 2009]
[edit reason] No urls, please see ToS and Forum Charter [/edit]

Need help with absolute positioning in Firefox

claudiohs

claudiohs

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week