Div positie IE/FF

programming web dev
1

Hello,

I have a problem with positioning in IE. In FireFox it´s all good :(.

top: FF bottom: IE

#container{
    width:100%;
    background:url(../img/-background.jpg) bottom left repeat-x;
}

#menu{
    position:absolute;
    top:320px;
    left:30px;
    z-index:5;
}

#header{
    background:url(../img/header-.png) center no-repeat;
    width:515px;
    vertical-align:middle;
    height:500px;
    padding-top:7px;
    /*margin-left:auto;
    margin-right:auto;*/
    text-align:left;
    float:left;
}

#footer{
    background:url(../img/bg-wit.gif) top left repeat-x #FFF;
    width:100%;
    height:50px;
    position:static;
    padding-top:20px;
    margin-top:50px;
    /*margin-left:auto;
    margin-right:auto;*/
    text-align:center;
    float:left;
}

.dn{
    display:none;
}

#button-preview{
    position:relative;
    padding:70px 0px 0px 20px;
    margin:0px;
}

#button-preview ul{
    width:100%;
    list-style-type:none;
    padding:0px;
    margin:0px;
    position:static;
}
        
#button-preview li{
    background:url(../img/-content-vlak.png) top left no-repeat;
    height:275px;
    width:247px;
    float:left;
    padding:0px;
    margin:0px;
    list-style-type:none;
    text-align:left;
}

#button-preview li a{
    list-style-type:none;
    text-decoration:none;
    color:#FFF;
}

#button-preview li a:hover{
    list-style-type:none;
}

#button-preview li a:visited{
    list-style-type:none;
    text-decoration:none;
    color:#FFF;
}

<?php include ("header.php"); ?>
<div id="container" align="left">
    <div id="menu"><?php include ("menu.php"); ?></div>
    <div id="button-preview"><ul><?php include("commercieel.php");include("graphics.php");include("studie.php");?></ul></div>
    <div id="footer"><?php include ("footer.php"); ?></div>
    <div style="clear:both; background:#FFF;">&nbsp;</div>
</div>
</body>
</html>

Does someone see the problem or knows how it can be solved?
Thanks,
D.A

2

Don’t you need to float your button-preview div?

3

Tried it all, but doesn´t work. Tried different things with Float and clear :frowning: but i just think IE hates me ;). Just wierd how IE and FF handling CSS HTML different…

Who knows a solution? mayby something with conditional comments special for IE?
(http://www.quirksmode.org/css/condcom.html)

4

Oh, Lord. You need to test in IE6, not IE7. More people use 6 than 7. Take a look:

IE6 doesn’t support PNG transparency. Your site doesn’t really need transparency. Just use GIF’s instead. Only use PNG transparency when you have to overlay the image over some complex background. Yours is solid red - don’t need transparency. Well, don’t F over IE6 people in the first place…

Now to address your original question. Re-code it so that your #header (logo) is inside the #container DIV. Float everything to the left - float your logo, float all your portfolio items - in the #container. Give everything a width and height. IE probably doesn’t like the fact that you’re not treating DIV’s as blocks.

5

Oh, Lord. You need to test in IE6, not IE7. More people use 6 than 7.

Thanks for checking, but i already knew. Heard their was a png-fix (js) for it. If not then i just make gifs.

Re-code it so that your #header (logo) is inside the #container DIV. Float everything to the left - float your logo, float all your portfolio items - in the #container. Give everything a width and height. IE probably doesn’t like the fact that you’re not treating DIV’s as blocks.

I will try this, thanks for looking! I will post if works or not.

D.A.

6

is it just me or does that star + text look a lot like the Macy’s logo? : )

7

is it just me or does that star + text look a lot like the Macy’s logo? : )

Just a graphic i´ll change it later. Going to be flash animation or something, not sure about that right now.Maybe i put a circle around it and let it look like “converse” =).