problems with IE and Opera positioning

IE positioning relative css

[bramcorleone]

I'm currently working on an internet site and I've first coded it in FF. Just the other minute I watched the result in IE and Opera and apparently these two browsers doesn't position the flower on the right spot as it should!

The url is: <snip>

It is mainly about these lines of code:

HTML:
<div id="left">
<h1 id="logo"></h1>
<ul id="img_nav">

<li><a href="index.php?pid=17" id="info"></a></li>
<li><a href="index.php?pid=24" id="portfolio"></a></li>
</ul>
<ul id="list_nav">
<li class="a_nav"><a href="index.php?pid=1">Home</a></li>
<li class="a_nav"><a href="index.php?pid=7">Over ons</a></li>
<li class="a_nav"><a href="index.php?pid=2">Kosten</a></li>

<li class="a_nav"><a href="index.php?pid=4">Contact</a></li>
</ul>
<div id="bloem"></div>
</div>

CSS:
div#bloem{
width:73px;
height:117px;
position:relative;
left:479px;
top:196px;
background-image:url('../images/bloem.gif');
}

Thanks in advance,

Bramcorleone.

[edited by: swa66 at 10:47 pm (utc) on Feb. 26, 2009]
[edit reason] NO personal URLs, see ToS [/edit]

[tonynoriega]

try absolute positioning.

i think what is happening is that FF and IE position the div id="bloem" differently in relation to div id="left"...

depending on how "left" is positioned, and what "left" is wrapped in...

[bramcorleone]

'left' is wrapped in 'wrapper'.

css code of wrapper:
div#wrapper{
width:1004px;
margin:0 auto;
background-color:#FFFFFF;
}

This is de remaining css code, which I've used in the div 'left':

div#left{
float:left;
width:628px;
}
h1#logo{
margin:30px 0 100px 10px;
background-image:url('../images/BS_Webdesign.gif');
width:439px;
height:115px;
}
ul#img_nav{
padding-left:5px;
}
ul#img_nav li{
list-style-type:none;
float:left;
}
a#info, a#portfolio{
display:block;
width:229px;
height:313px;
cursor:pointer;
}
a#info{
background-image:url('../images/info_off.gif');
}
a#portfolio{
background-image:url('../images/portfolio_off.gif');
}
a#info:hover{
background-image:url('../images/info_on.gif');
}
a#portfolio:hover{
background-image:url('../images/portfolio_on.gif');
}
ul#list_nav{
float:left;
margin-top:35px;
margin-left:20px;
padding:0px;
}
li.a_nav{
list-style:none;
font-family:georgia;
font-size:22px;
}
li.a_nav a{
text-decoration:none;
color:#dcdcdc;
}
li.a_nav a:hover{
color:#c5fc03;
}

[tonynoriega]

where would you like it positioned?

should it be below your UL at the bottom?

[bramcorleone]

In FF div id="bloem" is in the middle, just below the ul id="list_nav". In Opera it's also in the middle, but some px too low. In IE it's after and below the div id="right":

div#right{
float:left;
width:376px;
background-image:url('../images/sitegras_cbox.gif');
background-repeat:no-repeat;
padding-top:255px;
}

So in Opera there must be something with the margin or padding of an element.

In IE the div id="bloem" is on the right of the ul id=img_nav" right below the ul id="list_nav", when I change:

'left:479px;' to 'top:0px;'
'top:196px;' to 'left:0px;'

In FF and Opera it's in the left top corner of the ul id="img_nav", so IE must be positioning relative to the ul id="img_nav", not taking in account: 'float:left;'.

[swa66]

Opera typically uses smaller line heights than other compliant browsers.

Not relying on pixel perfect positioning really is easier.

I'd suggest to look carefully at your use of position relative with large offset, and consider position:absolute instead, unless you want for some reason it to take up its original spot in the flow.

For IE there's always conditional comments to visually fix things.