SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2003
    Location
    Mexico City
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    background-image misplaced in IE

    Hi,

    I have a rendering problem in IE. I believe it must be a bug, since Firefox and Mozilla render the page perfectly.

    Here's the relevant CSS code:
    Code:
    div#contents div#tools {
     width: auto;
     height: 150px;
     float:left;
     padding: 10px;
    }
    div#tools div a {
     background-repeat:no-repeat;
     padding-left:15px;
     position:relative;
    }
    div#tools div#btnpdf a {
     background-image: url(images/tools-pdf.gif);
     padding-top:35px;
     top: 35px;
    }
    Now, please take a look at the screenshot I attached. The first button "catalogo pdf" is "div#btnpdf a", the other two have similar definitions.

    To the left is the page rendered by Firefox, and IE's on the right.

    Does anyone know a workaround or fix so IE does not "scroll" the images horizontally?

    Thanks in advance.

    - Ivan V.
    Attached Images Attached Images

  2. #2
    googlicious graymatter bvarvel's Avatar
    Join Date
    Sep 2002
    Location
    Katy, TX
    Posts
    956
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Without seeing the screenshot and assuming I'm understanding you correctly, it appears that you haven't specified in your CSS NOT to repeat it:

    You've got:

    PHP Code:
     background-imageurl(images/tools-pdf.gif); 
    you should need:

    PHP Code:
     background-imageurl(images/tools-pdf.gifno-repeat

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2003
    Location
    Mexico City
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Look closely:
    Code:
    div#tools div a {
     background-repeat:no-repeat;
    
    ...
    ;-)

  4. #4
    Starting to-digg-in ********* jamesxv7's Avatar
    Join Date
    Oct 2003
    Location
    Island of Puerto Rico @ the Caribbean
    Posts
    873
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you a have a link when we can see it in action?
    James: Ecodig - My Blog - My Gallery
    Validate your sites: CSS - HTML/XHTML
    Without faith you are lost.

  5. #5
    SitePoint Zealot
    Join Date
    Feb 2003
    Location
    Mexico City
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sure, here it is:

    http://www.soluciones.cx/lab/reyriv/

    Hope you can help me.

    - Ivan V.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Its the padding in your float that's upsetting ie.
    Code:
    div#tools {
     width: auto;
     height: 150px;
     float:left;
     padding: 10px;
    }
    Take the padding out and it should work ok.

    Paul

  7. #7
    SitePoint Zealot
    Join Date
    Feb 2003
    Location
    Mexico City
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Right on!

    Thanks a lot.

    - Ivan V.


Bookmarks

Posting Permissions

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