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 5 of 5
  1. #1
    Junior Member
    Join Date
    Aug 2010
    Location
    London
    Posts
    5
    Member #
    22956
    hi people!

    Fairly new to CSS coding and in the process of building a small website. I had been testing in Opera & Safari offline and everything looked as designed, and everything looks *nearly* ok in Firefox, just one problem:

    Firefox seems to ignore the value for the left-margin in the <li> style declaration

    Also, I looked at the page in IE, eeek! The last couple of paragraphs have inherited the font color from <li> when they should be the same as the rest of the <p> tags in that div.

    I have a CSS reset attached to the page as global.css, then another sheet with all the styling and formatting, i have attached all files except images below.

    Any suggestions how to sort these out?

    Thanks

    Sam

  2.  

  3. #2
    WDF Staff MikeB's Avatar
    Join Date
    Jun 2010
    Location
    Lincolnshire, UK
    Posts
    88
    Member #
    22274
    Hi,

    Can't actually download your css files to have a look. I'm getting a 500 Internal error which me or RickM will have to have a look at!

    In the mean time is it possible to upload them somewhere else or post them here with the code bb tags.

    From looking at your index html file however;
    a) You should try tabbing out code, would make it much easier to read and spot issues such as point b...

    b) You're actually missing the opening ul tag for your list! That could be causing some problems!
    Mike Barlow
    WDF Co-Owner

    Need help? PM Me!

  4. #3
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    Lists behave a bit oddly in CSS.

    Firefox LI elements ignore left margin because the UL has a left padding.

    Worse, IE list margins behave differently.

    I tend to normalize list styles as follows:

    Code:
    ul, ol {
        margin-left: 30px; /* left margin includes the number or icon */
        padding: 0;
    }
    li {
        margin: 0 0 3px;  /* 3px between line items */
        padding: 0;
    }
    Hope that helps!

  5. #4
    Junior Member
    Join Date
    Aug 2010
    Location
    London
    Posts
    5
    Member #
    22956
    Quote Originally Posted by MikeB View Post
    Hi,


    a) You should try tabbing out code, would make it much easier to read and spot issues such as point b...

    b) You're actually missing the opening ul tag for your list! That could be causing some problems!
    hi Mike!

    a) apologies, i saved the file in Dreamweaver, didn't realise how awful it looked in a text reader

    b) spot on!!!! this has solved both the issues I was having!

    thanks a million! :-)

  6. #5
    Junior Member
    Join Date
    Aug 2010
    Location
    London
    Posts
    5
    Member #
    22956
    Quote Originally Posted by smoseley View Post
    Lists behave a bit oddly in CSS.
    I tend to normalize list styles as follows:

    Code:
    ul, ol {
        margin-left: 30px; /* left margin includes the number or icon */
        padding: 0;
    }
    li {
        margin: 0 0 3px;  /* 3px between line items */
        padding: 0;
    }
    Hope that helps!
    thanks Steven, will keep that in mind for future work, appreciated!


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