particular browser issue div being cutt of

[cssfreakie]

Hi all,

 

I have a little trouble with some browser named IE 6 not that that is a surprise but maybe someone can help me out with the following. the content in div#mid-content in IE 6 is being cut-of (see image) it should reach out till the red line.

 

the basic mark-up looks like this: but for a working example look here : http://cssfreakie.webege.com/zindextest.php

 

<div id="wrapper">
            <div id="header">
                <div id="header-content">
                    <ul id="left-menu">
                        <li id="bla"><a href=""></a></li>
                        <li id="bla"><a href=""></a></li>
                        <li id="bla"><a href=""></a></li>
                     </ul>
                </div>
            </div>
            <div id="middle">
                <div id="mid">
                    <div id="mid-content">
                        <?php  include 'somecontent.php'; echo $some_stuff; ?>
                    </div>
                </div>
                <div id="right">
                    <div id="right-content"></div>
                </div>
            </div>
            <div id="footer">
                <div id="footer-content"></div>
            </div>

 

normal css

body{
    background:#fff;
    color:#fff;
}
#wrapper{
    width:960px;
    margin:0 auto;
}
#header{
    position:relative;
    width:960px;
    height:424px;
    background: url(../images/z-indextest/header.png) no-repeat;
    float:left;
}
#header-content{
    position:absolute;
    bottom:180px;
    width:960px;
    border:1px solid red;
}
#middle{
    position:relative;
    width:960px;
    float:left;
    background: #006680 url(../images/z-indextest/middle.png) no-repeat;
    min-height: 323px;
}
#mid{
    width:520px;
    min-height:323px;
    margin:-180px 10px -150px 20px;
    padding:5px;
    float:left;
    text-align: justify;
    border:3px dotted grey;
}
#mid-content{

}
#right{
    width:300px;
    min-height:323px;
    margin:-180px 20px -150px 10px;
    padding:5px;
    float:left;
    border:3px dotted grey;
}
#right-content{

}
#footer{
    width:960px;
    height:323px;
    background: url(../images/z-indextest/footer.png) no-repeat;
    float:left;
}

ie 7 and lower

#middle, #mid{
    height:323px; /* height of the background image */
}

P.s. I am using meyers reset btw, if anyone has a suggestion or solution i would be pretty pleased to hear here it.

 

[attachment deleted by admin]

[cssfreakie]

oh not only ie6 does weird, ,looking a little closer showed me that ie7 doesn't show the dotted border of div#mid

 

So in a nutshell ie6 cuts off div#mid-content and ie7 doenst show the border of div #mid

[haku]

Your problem is your use of relative positioning.  Relative positioning always ends up causing problems like this. You should spend some time learning to use floats, it will make your life much easier. Google 'floatutorial', it's a little old, but a very good start to floats.

[cssfreakie]

I will certainly have a look in that haku, but i thought i was doing it right.

for instance:

i gave #header a position of relative, so that #header-content with a position absolute behaves according to the relative position of #header.. is that not the right way?

i think you are right about position:relative; of #middle that one could have been left out. But could you maybe tell if my #header and #header-content way was right? that's really how I learned it.

[cssfreakie]

haku sorry to say, but that floatorial is it great but not for what i am aiming for if i read it correctly. the examples given are only for things in the normal flow. But the design I am aiming for is trying to let elements overlap. And that's why i need anything other than a static position to apply a z-index. Now if i am correct a position relative on a parent (without setting additional properties) can be useful (and has NO extra side effects)  if a child element needs a position absolute.

so that is what i did on #header (relative) and #header-content (absolute).

 

I'll remove that position relative from the content, but i now realise i did that to give it a z-index Higher to Overlap the header. Now i can be completely wrong or either stupid, but every tutorial i read tells me that. The problem i have is ie 6 cut's of a div. I know there is a IE6 z-index bug, but i am not sure how to fix it even after reading quite a lot and trying quite alot.  If anyone knows what might be wrong to the above please tell me i am happy to learn.

 

 

-edit i added an image of a 3d model on how the mark-up should end up looking also in ie6

 

[attachment deleted by admin]

[haku]

You can still use floats, you just have to reconsider the way you are using background images. I could do the same layout you have entirely floated.

 

On a purely design-concept level however, you have a flaw in your design with the overlap of the list on the changing of the colors. For one, proper (web) design should be implemented using The Grid (google it if you don't know it). The human mind reacts to grids when parsing information in a logical manner, and it improves pattern by which people's eyes scan the page. By having your list overlapping the line, it creates a discontinuity, which doesn't translate well to having the viewer take in your design. There is a reason why headers are usually separate from the body. Now that doesn't mean that the colors can't flow smoothly from the header to the body, but at the moment there is no clear distinction between the head and the body of your design, which makes it harder to follow the flow of your page for the user.

[cssfreakie]

You can still use floats, you just have to reconsider the way you are using background images. I could do the same layout you have entirely floated.

 

On a purely design-concept level however, you have a flaw in your design with the overlap of the list on the changing of the colors. For one, proper (web) design should be implemented using The Grid (google it if you don't know it). The human mind reacts to grids when parsing information in a logical manner, and it improves pattern by which people's eyes scan the page. By having your list overlapping the line, it creates a discontinuity, which doesn't translate well to having the viewer take in your design. There is a reason why headers are usually separate from the body. Now that doesn't mean that the colors can't flow smoothly from the header to the body, but at the moment there is no clear distinction between the head and the body of your design, which makes it harder to follow the flow of your page for the user.

 

Thanks Haku for your quick reply, and i agree offtopic that the colors are illogical and awful and i tottaly agree with that. But i am using some weird dummie custom made design for this thread to make a proper distinction between the header etc. To underline my content is overlapping the header(image....) The real design is pretty eye catching and there is a very clear distinction between the header and the content. But i leave that to the person designing the stuff. Fact is i still got a design like this with those precise measurements and really don't se that can be done with floats since they have to overlap. that's the design and i can't do anything about it. foating and averlapping are two different things and i find i should have to master both instead of running the otherway.

 

back to the topic. if anyone might want to look in to the above and might have an idea without floats since i must use overlapping elements (*the design dictates me to! and the realife design is pretty kick ass btw but i am not allowed to show it) please let me know.

 

-->Btw the IE 7 thing  is solved  i used the property 'grey' which is not valid. SO that leaves only IE6!!

[cssfreakie]

okay this been quite a waste of my time and of yours haku sorry for that. The problem seemed that my stylesheet of IE6 was not properly included.

i had src="ie/z-indextest.css"  instead of src="css/ie/z-indextest.css"

I thought let try something simple like change the body background color to total black.... and noting happend

pointing me to the <link>

 

So if someone wants to overlap like I wanted here is the solution

 

in your ie stylesheet add.

 

#mid{
    height:323px;
    position:relative;
    z-index: 100;
}

it worked like a charm

 

Cheers! and Sorry haku for bothering you

 

edit: haku were you refering to these guys? http://understandinggraphics.com/

[haku]

Not bothering me at all mate. If I don't want to answer questions, I don't. You were clear about what your issue was, and willing to work on fixing it, I'm happy to help (even though I didn't end up helping this time!). Glad it worked out.

[cssfreakie]

Not bothering me at all mate. If I don't want to answer questions, I don't. You were clear about what your issue was, and willing to work on fixing it, I'm happy to help (even though I didn't end up helping this time!). Glad it worked out.

yeah i am pretty glad to because I was pretty much banging my head on my keyboard, because of this typo

glad i am not like this guy