Results 1 to 16 of 16
  1. #1
    Join Date
    Aug 2000
    Posts
    2,750

    [css] What's wrong with this?

    http://www.theofa.co.uk/XadaX/

    In I.E there is a gap between the images, in firefox it displays correctly, I've been trying for over an hour to get them looking the same.

  2. #2
    Join Date
    May 2004
    Location
    Pflugerville, TX
    Posts
    11,222
    Replace: #navcontainer li ul { margin: 0 0 0px 0; }

    With: #navcontainer ul li { margin: 0 }

    You had the descending order mixed up
    Studio1337___̴ı̴̴̡̡̡ ̡͌l̡̡̡ ̡͌l̡*̡̡ ̴̡ı̴̴̡ ̡̡͡|̲̲̲͡͡͡ ̲▫̲͡ ̲̲̲͡͡π̲̲͡͡ ̲̲͡▫̲̲͡͡ ̲|̡̡̡ ̡ ̴̡ı̴̡̡ ̡͌l̡̡̡̡.__Web Design

  3. #3
    Join Date
    May 2004
    Location
    Pflugerville, TX
    Posts
    11,222
    Even better, condense a couple of your styles, like so:

    Replace:
    Code:
    #navcontainer ul
    {
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    }
    
    #navcontainer li ul { margin: 0 0 0px 0; }
    With:
    Code:
    #navcontainer ul, #container li { margin: 0; padding: 0; list-style: none; font-family: Arial, Helvetica, sans-serif; font-size: 14px; }
    Or space it out line-by-line if you prefer it that way, but combine those two styles. There's no need to separate them out
    Studio1337___̴ı̴̴̡̡̡ ̡͌l̡̡̡ ̡͌l̡*̡̡ ̴̡ı̴̴̡ ̡̡͡|̲̲̲͡͡͡ ̲▫̲͡ ̲̲̲͡͡π̲̲͡͡ ̲̲͡▫̲̲͡͡ ̲|̡̡̡ ̡ ̴̡ı̴̡̡ ̡͌l̡̡̡̡.__Web Design

  4. #4
    Join Date
    Aug 2000
    Posts
    2,750
    Thanks for helping, however if you look now there is now a gap in both browsers, i've tried both set's of code you posted.

  5. #5
    Try changing your html to this...

    Code:
    <div id="navcontainer">
    <ul>
    
    <li><a href="#"><img src=images/homepage.gif border=0></a></li><li><a href="#"><img src=images/portfolio.gif border=0></a></li><li><a href="#"><img src=images/phpscripts.gif border=0></a></li><li><a href="#"><img src=images/contact.gif border=0></a></li><li><img src=images/slice.gif border=0></li>
    </ul>
    </div>
    Note to self: Add something funny!
    Search is your friend!

  6. #6
    Join Date
    Aug 2000
    Posts
    2,750
    Quote Originally Posted by tree-host
    Try changing your html to this...

    Code:
    <div id="navcontainer">
    <ul>
    
    <li><a href="#"><img src=images/homepage.gif border=0></a></li><li><a href="#"><img src=images/portfolio.gif border=0></a></li><li><a href="#"><img src=images/phpscripts.gif border=0></a></li><li><a href="#"><img src=images/contact.gif border=0></a></li><li><img src=images/slice.gif border=0></li>
    </ul>
    </div>

    Tried, didn't make any difference.

    Thanks for replying.

  7. #7
    Join Date
    May 2004
    Location
    Pflugerville, TX
    Posts
    11,222
    Sorry, I mistyped

    Code:
    #navcontainer ul, #navcontainer ul li { margin: 0; padding: 0; list-style: none; font-family: Arial, Helvetica, sans-serif; font-size: 14px; }
    Try that.

    Also, if you have an explicit height for the images, try applying that height to your <li> styles in your CSS. That may be what you need. AND/OR, since you've declared your links to be block-level elements, you can float them (not the line items, just the 'a' element), and that might eliminate the gaps.
    Studio1337___̴ı̴̴̡̡̡ ̡͌l̡̡̡ ̡͌l̡*̡̡ ̴̡ı̴̴̡ ̡̡͡|̲̲̲͡͡͡ ̲▫̲͡ ̲̲̲͡͡π̲̲͡͡ ̲̲͡▫̲̲͡͡ ̲|̡̡̡ ̡ ̴̡ı̴̡̡ ̡͌l̡̡̡̡.__Web Design

  8. #8
    Join Date
    Aug 2000
    Posts
    2,750
    The following:

    Code:
    #navcontainer ul, #navcontainer ul li
    {
     margin: 0; 
     padding: 0; 
     list-style: none;
     height: 31px; 
     width: 195px;
     }
    fixes the spaces in firefox, but doesn't fix it in i.e


  9. #9
    Join Date
    Dec 2004
    Posts
    729
    Not the best solution but I would do this:
    #navcontainer ul, #navcontainer li { margin: 0 0 -5px 0; padding: 0; list-style: none; font-family: Arial, Helvetica, sans-serif; font-size: 14px; }

    (see the bold)

    Personally I would drop the UL's and LI's but I'm guessing they are probably going to be used for some type of menu structure. This will give you the desired affect whlie keeping the Lists.
    Who is General Fault, and why is he reading my disk?

  10. #10
    Join Date
    Aug 2000
    Posts
    2,750
    That did the trick! thanks.

  11. #11
    Join Date
    May 2004
    Location
    Pflugerville, TX
    Posts
    11,222
    And you have one image that is only 30 pixels, so you're going to see a 1px gap on that as well.

    Oh, you don't want to apply the height to the entire UL! Just to the LI. But still, that doesn't seem to solve the problem. What happens when you add float:left to your <a href> elements?
    Studio1337___̴ı̴̴̡̡̡ ̡͌l̡̡̡ ̡͌l̡*̡̡ ̴̡ı̴̴̡ ̡̡͡|̲̲̲͡͡͡ ̲▫̲͡ ̲̲̲͡͡π̲̲͡͡ ̲̲͡▫̲̲͡͡ ̲|̡̡̡ ̡ ̴̡ı̴̡̡ ̡͌l̡̡̡̡.__Web Design

  12. #12
    Join Date
    Aug 2000
    Posts
    2,750
    I've fixed the image locally and and the page i've got locally it's all lined now

    Thank you everyone for help!

  13. #13
    Join Date
    May 2004
    Location
    Pflugerville, TX
    Posts
    11,222
    Wanna share how you did it?
    Studio1337___̴ı̴̴̡̡̡ ̡͌l̡̡̡ ̡͌l̡*̡̡ ̴̡ı̴̴̡ ̡̡͡|̲̲̲͡͡͡ ̲▫̲͡ ̲̲̲͡͡π̲̲͡͡ ̲̲͡▫̲̲͡͡ ̲|̡̡̡ ̡ ̴̡ı̴̡̡ ̡͌l̡̡̡̡.__Web Design

  14. #14
    Join Date
    Aug 2000
    Posts
    2,750
    Used the code supplied by Teh_Winnar .

  15. #15
    Join Date
    Sep 2004
    Posts
    1,904
    Strange - you would think there would be a better way to go about this. But - what works - works.


  16. #16
    Join Date
    May 2004
    Location
    Pflugerville, TX
    Posts
    11,222
    Quote Originally Posted by xadax
    Used the code supplied by Teh_Winnar .
    I didn't see the extra posts between our post exchanges

    I'm glad the negative margin works, but I wish there was an explanation for the gaps. Not knowing what causes them is going to get to me until I figure it out
    Studio1337___̴ı̴̴̡̡̡ ̡͌l̡̡̡ ̡͌l̡*̡̡ ̴̡ı̴̴̡ ̡̡͡|̲̲̲͡͡͡ ̲▫̲͡ ̲̲̲͡͡π̲̲͡͡ ̲̲͡▫̲̲͡͡ ̲|̡̡̡ ̡ ̴̡ı̴̡̡ ̡͌l̡̡̡̡.__Web Design

Posting Permissions

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