Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Empty Div for Images - IE Problem

    I'm hoping this has a simple fix, but suspect it might need some IE hack.

    The website I recently designed has an empty div in the HTML that, ideally, should be formatted with CSS to include an image. The code below works great on all Mac browsers, but chokes in IE PC - it doesn't appear.

    The website is LandWorks

    Code:
    <div id="imagebar" class="img-portfolio"></div>
    The class changes depending on the section of the site.

    Code:
    #imagebar {
    z-index: 1;
    position: relative;
    width:688px;
    height:85px;
    margin: 93px 0 0 0;
    padding: 0;
    }
    
    #imagebar.img-home {background-image: url(../images/img_01.gif);}
    #imagebar.img-company {background-image: url(../images/img_02.gif);}
    #imagebar.img-capabilities {background-image: url(../images/img_03.gif);}
    #imagebar.img-portfolio {background-image: url(../images/img_04.gif);}
    #imagebar.img-contact {background-image: url(../images/img_05.gif);}
    #imagebar.img-client {background-image: url(../images/img_06.gif);}
    The image should display like this: http://www.landworksvt.com/IE_MAC_screenshot.gif


    I've tried changing the positioning/ making it a float, but that seems to mess things up in Mac browsers.

    Any help would be great!

    Thanks!

  • #2
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    I was having this IE problem myself, and just put the image in the div like this... <div><img /></div>

    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #3
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It appears to me IE is not respecting the margin you have set on 'imagebar' and it's being layered behind the absolutely positioned 'nav'.

    If you are using the margin to position the imagebar, try swapping the margin and padding values, or specify the relative position as top:93px; and set margin to 0.
    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.

  • #4
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks guys!

    I'm hoping to do all of the formatting using only CSS. I've got the XHTML all set.

    try swapping the margin and padding values
    This worked! Thanks for the info. I had to add a couple of other commands/tweaks, including specifying a background-image for the entire div.

    Code:
    #imagebar {
    z-index: 1;
    position:relative;
    background-position: bottom;
    background-image: url(../images/img_01.gif);
    background-color: #fff;
    width:688px;
    height:77px;
    margin: 0;
    padding: 93px 0 0 0;
    }
    At this moment, IE is ignoring the background-images for the separate classes. I'm guessing that I need to either change the classes to ids, or apply the above code to each class. Either way, at least something is showing up!

    Thanks again!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •