SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    My Unordered List Looks Different In Firefox and Safari. Why?

    LINK-
    http://www.greenleaf3d.com/products/...ps-design.html

    The list items (li) look indented in Safari which is what I am going for, but in Firefox (and I assume Internet Explorer) the list items are not indented. Can someone share with me why this is happening and a fix for it? I am wanting them indented.

    Thanks in advance!
    Todd
    Todd Temple > T2 Design

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,761
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Hi, I've seen this happen before. The issue (probably) is because of the charset.

    What I've found is that it ignores the first rule if the charset is done invalidly (this only seems to be in webkit). The charset must be the first characters/line in the CSS file. The comment above it is making this happen.
    Code:
    /* CSS Document */
    @charset "UTF-8";
    
    * {
    	margin: 0;
    	padding: 0;
    }
    Move the charset above the ciomment or remove the charset or rmeove the comment etc etc

    The reason saffy is playing along is because it has a margin/padding to space it out. So once you fix this issue with safari just give the <ul> padding-left (or margin-left)
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    Word Painter silver trophy Shyflower's Avatar
    Join Date
    Oct 2003
    Location
    Winona, MN USA
    Posts
    10,053
    Mentioned
    142 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Todd Temple View Post
    LINK-
    http://www.greenleaf3d.com/products/...ps-design.html

    The list items (li) look indented in Safari which is what I am going for, but in Firefox (and I assume Internet Explorer) the list items are not indented. Can someone share with me why this is happening and a fix for it? I am wanting them indented.

    Thanks in advance!
    Todd
    You need to use a reset in your css to override browser presentation defaults. Eric Meyers explains it here: http://meyerweb.com/eric/thoughts/20...set-reasoning/


    He has a public domain reset stylesheet which you can access at http://meyerweb.com/eric/tools/css/reset/
    Linda Jenkinson
    "Say what you mean. Mean what you say. But don't say it mean." ~Unknown

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,761
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    @Shy, he does have a reset. The point I'm trying to point out is that an invalid charset ignores the first rule in a stylesheet, thus the reset is ignored thus the issue is occuring (well the desired output is because of the reset not being applied)
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Everyone else on the page has left-margin of 27px, leaving the non-margin'd ul sticking out. If you gave the ul the same margin as everyone else on the page (or, instead of putting that margin on everyone, you could have had that as padding on the inside of the container) then it should be indented. None of my browsers show the indenting except safari-for-windows.

    ------------------------------------------------------------------------------
    As a side note, I recommend against
    * {
    margin: 0;
    padding: 0;
    }

    Because of how that removes padding you cannot add back in some browsers (esp Opera) with form controls... unless there will be zero forms on this site.

    I remove padding from those whom I think will cause trouble: the body (opera?), ul's, ol's, and if I have very small tables like a calendar, th's and td's. Nobody else seems to have padding in any other browser except the aforementioned form controls (for example, a select dropdown without padding will let the arrow cover up some of the text of the select... also submit buttons *can* lose their "depressed" look when you push them (forget which browsers), considered valuable feedback, therefore is good usability).

    Plus you're still going ahead and manually removing padding from everyone anyway, defeating the purpose of *

    img {
    vertical-align: bottom;
    }
    a img {
    border: 0;
    }

    body {
    background: url(../i/gfx_pattern_084.gif) repeat;
    margin: 0;
    padding: 0;

    }

    You can also
    img {
    vertical-align: bottom;
    border: 0;
    }

    any images who need a border, they just need a class or be in some element you can mention:
    #container img {
    border: 1px solid #f00;
    }

    or so.

    I do keep the reset on margins, because I know it doesn't hurt anything and I want everyone I don't set margins on to be 0 like I expect them. I only reset padding on the above-mentioned elements:
    * {
    margin: 0;
    }
    body, ul, ol, th, td {
    padding: 0;
    }

    but if there are no ol's or tables that are small it's just
    body, ul {
    padding: 0;
    }

    Edit:

    wow, everyone was busy while I was typing! I did not know about webkit and the @charset line, but that's partially because I never set the charset like that... I don't see the point. I save my files in my editor as utf-8, therefore they are utf-8.

  6. #6
    Word Painter silver trophy Shyflower's Avatar
    Join Date
    Oct 2003
    Location
    Winona, MN USA
    Posts
    10,053
    Mentioned
    142 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by RyanReese View Post
    @Shy, he does have a reset. The point I'm trying to point out is that an invalid charset ignores the first rule in a stylesheet, thus the reset is ignored thus the issue is occuring (well the desired output is because of the reset not being applied)
    Hmm... I looked at his css for a reset and didn't see one there. Just

    Code:
    * {
    	margin: 0;
    	padding: 0;
    }
    html, body {
    	height: 100%;
    }
    I use the Meyers reset.css (with some modifications) as a separate style sheet. I've found that in some browsers, just declaring margin and padding 0 for all just doesn't work, more or less just as Stomme Poes said
    Linda Jenkinson
    "Say what you mean. Mean what you say. But don't say it mean." ~Unknown

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

    Remove the comments that are above the charset in the cssfile as that is illegal and probably making the global reset null and void.

    The charset must be the first thing in the file (including white-space).

    then just set the indent that you want and all browsers will be the same.

    Edit:


    Whoops should have refreshed

  8. #8
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Off Topic:


    I use the Meyers reset.css (with some modifications) as a separate style sheet. I've found that in some browsers, just declaring margin and padding 0 for all just doesn't work, more or less just as Stomme Poes said
    I posted my reset:
    * {
    margin: 0;
    }
    body, ul, ol, th, td { /*depending on who lives on my site*/
    padding: 0;
    }
    ul {
    list-style: none; /*because 99% of my lists on 99% of my pages don't have bullets, so it makes sense up here, otherwise not*/
    }
    img {
    vertical-align: bottom;
    border: 0;
    }

    that's it. Nothing more. Eric Meyer's resets applets and iframes. wth? no thanks. : )

  9. #9
    Word Painter silver trophy Shyflower's Avatar
    Join Date
    Oct 2003
    Location
    Winona, MN USA
    Posts
    10,053
    Mentioned
    142 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Off Topic:



    I posted my reset:
    * {
    margin: 0;
    }
    body, ul, ol, th, td { /*depending on who lives on my site*/
    padding: 0;
    }
    ul {
    list-style: none; /*because 99% of my lists on 99% of my pages don't have bullets, so it makes sense up here, otherwise not*/
    }
    img {
    vertical-align: bottom;
    border: 0;
    }

    that's it. Nothing more. Eric Meyer's resets applets and iframes. wth? no thanks. : )
    Off Topic:

    Oh, I certainly agree! I took a bunch of things out of his that I know I will never use.
    Linda Jenkinson
    "Say what you mean. Mean what you say. But don't say it mean." ~Unknown

  10. #10
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    Remove the comments that are above the charset in the cssfile as that is illegal and probably making the global reset null and void.

    The charset must be the first thing in the file (including white-space).

    then just set the indent that you want and all browsers will be the same.

    Edit:


    Whoops should have refreshed
    How important is the white space? I have also seen lots of extra white space in WordPress themes and other SHTML docs that have includes and PHP. Does the white space really matter? I guess I was interested in removing white space to (1) clean up the code and (2) reduce the file size even if it is very, very small.

    Thanks for the info!
    Todd Temple > T2 Design

  11. #11
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Easy way to find out: leave whitespace in there and look at Safari : )

    In the case of Internet Explorer going into Quirks Mode if the Doctype did not begin at character 1 of line 1, it mattered. So I can imagine it mattering for webkit.

    In the rest of the file, whitespace should not matter.

  12. #12
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Yes, having white-space can matter but it all depends upon "where" it occurs though and to how it is processed and handled by the user-agent.

    This is the case for both x(ht)ml and CSS 2.1 although character encoding has to be the first thing declared and if within the CSS you use "@charset" it must appear at the very start of the document, not preceded by any characters.

    Much like The XML Declaration, if present, must occur at the very beginning of the file. It may not be preceded by anything except for a possible Byte Order Mark (depending on the character encoding), i.e. <?xml version="1.0" encoding="UTF-8"?> which is used in XHTML.

  13. #13
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    And the BOM has been implicated in causing problems in some user agents for the same reason: causes the beginning of the code not to be at char 1 line 1.

    Hm, close, but doesn't quite have that TV doctor diagnosis sound.. I should try again.

  14. #14
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,761
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Todd Temple View Post
    How important is the white space? I have also seen lots of extra white space in WordPress themes and other SHTML docs that have includes and PHP. Does the white space really matter? I guess I was interested in removing white space to (1) clean up the code and (2) reduce the file size even if it is very, very small.

    Thanks for the info!
    The white space generally don't matter, however in this case it does.

    Plus it's only valid to have the charset be first. If you were to validate it it would probably show up as invalid.
    Quote Originally Posted by Shyflower View Post
    Hmm... I looked at his css for a reset and didn't see one there. Just

    Code:
    * {
    	margin: 0;
    	padding: 0;
    }
    html, body {
    	height: 100%;
    }
    I use the Meyers reset.css (with some modifications) as a separate style sheet. I've found that in some browsers, just declaring margin and padding 0 for all just doesn't work, more or less just as Stomme Poes said
    The *{margin:0;padding:0;} is a reset
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  15. #15
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    I also call that a reset. Just a small one : )


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
  •