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.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 11
  1. #1
    Senior Member jbagley's Avatar
    Join Date
    Sep 2004
    Location
    Cape Town
    Posts
    845
    Member #
    7422
    Im having trouble with li and ul tags looking different in IE and FF.

    View the attached image. here is the code that generates it:
    HTML Code:
    <div class="block">
    <h1>Contacts</h1>
    <ul>
    	<li><a href="inserting_contact.php">New</a></li>
            <li><a href="updating_contact.php">Edit</a></li>
    	<li><a href="deleting_contact.php">Delete</a></li>
    	<li>Add to Groups</li>
            <li>View all contacts</li>
    </ul>
    </div>
    And here is the CSS that I have used so far...
    Code:
    .block {
    background-image: url(images/block.gif);
    background-repeat: no-repeat;
    width: 132px;
    height: 167px;
    margin-left: auto;
    margin-right: 0px;}
    
    .block h1 {
    font-size: 0.8em;
    text-decoration: none;
    font-weight: bold;
    margin: 0px;
    text-align: center;
    padding-top: 18px;}
    
    
    .block ul {
    font-size: 0.7em;
    }
    
    .block li {
    margin: 0px;
    padding: 0px;}
    What must I do in order to get them to look the same, and fit nicely into the block?
    Attached Images Attached Images

  2.  

  3. #2
    Senior Member Brak's Avatar
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    3,413
    Member #
    1217
    Liked
    2 times
    I'm guessing you've got a line-height set somewhere in the body, or above. Try adding a specific line-height to the ul/li, also try leveling out the margin/padding on the ul, because I think IE has some on there too.
    Kyle Neath: Rockstar extraordinare
    The blog | The poetry site | The Spore site

  4. #3
    Senior Member jbagley's Avatar
    Join Date
    Sep 2004
    Location
    Cape Town
    Posts
    845
    Member #
    7422
    We meet again Brak. :classic:

    I forgot bout line-height. So thats solved my one problem. The other problem is I want to move the list over to the left by a couple of pixels...

    When I set padding-left: 0, FF shows the list completely on the left, but in IE, its in almost the exact postion before I added the padding. Ive added the padding to the <ul>

    margin-left:0 does the EXACT oppisite. what can I try to solve this?

  5. #4
    Senior Member jbagley's Avatar
    Join Date
    Sep 2004
    Location
    Cape Town
    Posts
    845
    Member #
    7422
    Oh ok. I see what you meen about leveling out the padding and margins. I set them both to 15px and they are now where i want it to be.

    EDIT: Another Q? how do I change that stupid black circle? Can i specify my own bullet?

    BTW, who's more screwed up? IE or FF when it comes CSS handling?

  6. #5
    Senior Member Brak's Avatar
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    3,413
    Member #
    1217
    Liked
    2 times
    To be honest, neither really - it's just a matter of minor differences. An amazing tip for helping out though is to level out all margin/padding for all browsers. Just add this bit to your CSS at the top:

    Code:
    * {padding:0;margin:0;}
    
    body {padding:5px;}
    
    h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, label, ul, ol, dl, fieldset, address { margin:20px 0; }
    
    li, dd, blockquote { margin-left: 40px; }
    
    fieldset { padding:10px; }
    Solves 90% of positioning problems between IE/FF, Another 5% can be accounted for by line-height, and the rest.. well, the rest crop up just when you don't want them to
    Kyle Neath: Rockstar extraordinare
    The blog | The poetry site | The Spore site

  7. #6
    Senior Member jbagley's Avatar
    Join Date
    Sep 2004
    Location
    Cape Town
    Posts
    845
    Member #
    7422
    Kewl. I shall give it a try. But if I include that at the top of my CSS, what happens when, say I want my <h1> tag not have a the margin of 20px? If I define another <h1> will my H1 tags have 20px margin or my defined margin?

  8. #7
    Senior Member Brak's Avatar
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    3,413
    Member #
    1217
    Liked
    2 times
    Your defined margin. CSS stands for cascading style sheets, so the lower the rule is in the document chain, the more "power" it has - or it will override.

    For example:

    Code:
    h1{ margin:20px 0; }
    
    #something{}
    
    h1{ padding:5px; }
    
    h1{ margin:5px 2px; }
    This sequence will generate an h1 tag with 5px top/bottom margins, 2px left/right margins, and 5px padding top/right/bottom/left.

    Same goes for defining something more specific (like a class or id).
    Kyle Neath: Rockstar extraordinare
    The blog | The poetry site | The Spore site

  9. #8
    Senior Member Brak's Avatar
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    3,413
    Member #
    1217
    Liked
    2 times
    P.S. Just noticed the reference to the bullet. You'll need to use a background image (because of browser suppport). More info at ALA: http://www.alistapart.com/articles/taminglists/

    Basically, get rid of the bullets (using list-style) and then put a background image on li's, and give them padding so you have the illusion of a bullet.
    Kyle Neath: Rockstar extraordinare
    The blog | The poetry site | The Spore site

  10. #9
    Senior Member jbagley's Avatar
    Join Date
    Sep 2004
    Location
    Cape Town
    Posts
    845
    Member #
    7422
    Ok. Thanks for the help Kyle.

    Cheers

  11. #10
    Member J Dot's Avatar
    Join Date
    Feb 2005
    Location
    Brisbane, Australia
    Posts
    30
    Member #
    9088
    list-style-image

    Another way to use custom images for lists is to use list-style-image: url(images/folder.gif)


Page 1 of 2 1 2 LastLast

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 10:35 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com