# Div positie IE/FF

**URL:** https://forum.kirupa.com/t/div-positie-ie-ff/263588
**Category:** web dev
**Created:** [June 17, 2008, 2:22pm UTC](https://forum.kirupa.com/t/div-positie-ie-ff/263588 "2008-06-17T14:22:04Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![Dark\_Angel](https://avatars.discourse-cdn.com/v4/letter/d/9f8e36/32.png) [@Dark\_Angel](https://forum.kirupa.com/u/Dark_Angel)
#### Post date: [June 17, 2008, 2:22pm UTC](https://forum.kirupa.com/t/div-positie-ie-ff/263588/1 "2008-06-17T14:22:04Z")

</div>

Hello,

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

top: FF bottom: IE

```auto
#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;
}

```

```auto
<?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

---

<div class="post-metadata">

### Author: ![sekasi](https://avatars.discourse-cdn.com/v4/letter/s/5f8ce5/32.png) [@sekasi](https://forum.kirupa.com/u/sekasi)
#### Post date: [June 17, 2008, 2:31pm UTC](https://forum.kirupa.com/t/div-positie-ie-ff/263588/2 "2008-06-17T14:31:01Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Dark\_Angel](https://avatars.discourse-cdn.com/v4/letter/d/9f8e36/32.png) [@Dark\_Angel](https://forum.kirupa.com/u/Dark_Angel)
#### Post date: [June 17, 2008, 2:41pm UTC](https://forum.kirupa.com/t/div-positie-ie-ff/263588/3 "2008-06-17T14:41:16Z")

</div>

Tried it all, but doesn´t work. Tried different things with Float and clear ☹ 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](http://www.quirksmode.org/css/condcom.html))

---

<div class="post-metadata">

### Author: ![NeoDreamer](https://avatars.discourse-cdn.com/v4/letter/n/ccd318/32.png) [@NeoDreamer](https://forum.kirupa.com/u/NeoDreamer)
#### Post date: [June 18, 2008, 6:43am UTC](https://forum.kirupa.com/t/div-positie-ie-ff/263588/4 "2008-06-18T06:43:01Z")

</div>

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

![](http://img296.imageshack.us/img296/1166/ie6yn1.gif)

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.

---

<div class="post-metadata">

### Author: ![Dark\_Angel](https://avatars.discourse-cdn.com/v4/letter/d/9f8e36/32.png) [@Dark\_Angel](https://forum.kirupa.com/u/Dark_Angel)
#### Post date: [June 18, 2008, 1:49pm UTC](https://forum.kirupa.com/t/div-positie-ie-ff/263588/5 "2008-06-18T13:49:47Z")

</div>

> 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.

---

<div class="post-metadata">

### Author: ![sekasi](https://avatars.discourse-cdn.com/v4/letter/s/5f8ce5/32.png) [@sekasi](https://forum.kirupa.com/u/sekasi)
#### Post date: [June 18, 2008, 2:51pm UTC](https://forum.kirupa.com/t/div-positie-ie-ff/263588/6 "2008-06-18T14:51:12Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Dark\_Angel](https://avatars.discourse-cdn.com/v4/letter/d/9f8e36/32.png) [@Dark\_Angel](https://forum.kirupa.com/u/Dark_Angel)
#### Post date: [June 18, 2008, 8:13pm UTC](https://forum.kirupa.com/t/div-positie-ie-ff/263588/7 "2008-06-18T20:13:25Z")

</div>

> 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” =).