Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 9 of 9
  1. #1
    Junior Member
    Join Date
    Jul 2007
    Posts
    6
    Member #
    15495
    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:

    Code:
    /* 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
    Attached Images Attached Images

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,733
    Member #
    5580
    Liked
    718 times
    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.


  4. #3
    Junior Member
    Join Date
    Jul 2007
    Posts
    6
    Member #
    15495
    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.

  5. #4
    Junior Member
    Join Date
    Jul 2007
    Posts
    6
    Member #
    15495
    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.

  6. #5
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    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.

  7. #6
    Junior Member
    Join Date
    Jul 2007
    Posts
    6
    Member #
    15495
    That didn't work either :[

  8. #7
    Junior Member
    Join Date
    Jul 2007
    Posts
    6
    Member #
    15495
    actually it did work. I put the
    Code:
    overflow:hidden
    on the #layout id.

  9. #8
    Junior Member
    Join Date
    Jul 2007
    Posts
    6
    Member #
    15495
    thanks a lot!

  10. #9
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Cool. No problem Feel free to edit your posts when you want to add further information, rather than posting again


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 06:29 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com