CSS Issue with Safari!

[ericrichner]

I am trying to finish converting a layout that was sliced in ImageReady to CSS using only DIV's and XHTML compliant code.


Currently I have a footer image that is hovering over the main div with a z-index of 1.

The DIV itself is outside of the main DIV and has a relative position and height of 0px. The image is placed in the DIV.

The image is placed properly in Safari, Firefox, (havent test IE6+ yet).

The only ISSUE is that in Safari there is "extra" space after the layout, in Firefox there is not (because of the height: 0px)


Here is the CSS:

/* CSS Document */

body {
    background-color: #FFF1C8;
}
#content {
    padding: 0 35px 0 25px;
    float: right;
    width: 550px;
}
#layout {
    background-image: url(images/contentbg2.jpg);
    background-repeat: repeat-y;
    width: 700px;
    margin: 0 auto;
}

#airmail {
    border: 0px;
    position: relative;
    background-image: url(images/airmail.jpg);
    z-index: 1;
    width: 113px;
    float: left;
    visibility: visible;
    bottom: 321px;
    height: 0px;
    min-height:0px;
    max-height:0px;
}

.form {
    color:#000066;
    font-size: 16px;
}

.text {
    color:#000066;
    font-size: 15px;
    display:block;
    padding: 1px 10px;
}

Here is a link to the page:

http://www.123shoot.com/tsc

[mlseim]

Safari must be seeing something with this line: bottom: 321px;
That space looks like about 321 pixels to me.

How about if you make the bottom image one image instead of two.
And don't do any positioning.

[ericrichner]

Yea. I think I might just do that. But I don't want a 321px gap from the end of the text and the end of the layout.

[ericrichner]

actually, it still shows the height of the image even though its in a DIV. When I put the image height to 0px, the space is gone.

[Shadowfiend]

You should be able to tell the div to keep its overflow hidden ([minicode]overflow: hidden;[/minicode], as it were). Alternatively, make the image the background image for the div instead of placing an actual image tag in there.

[ericrichner]

That didn't work either :[

[ericrichner]

actually it did work. I put the

overflow:hidden

on the #layout id.

[ericrichner]

thanks a lot!

[Shadowfiend]

Cool. No problem Feel free to edit your posts when you want to add further information, rather than posting again