SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 28
  1. #1
    SitePoint Evangelist Alexandra's Avatar
    Join Date
    Aug 2002
    Location
    Perth, Australia
    Posts
    414
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Mozilla adding extra padding to <p></p> tags

    I am experiencing a strange inconsistency of paragraph spacing between browsers that I have not enountered before.

    Please take a look at the example page in:
    • Mozilla Firebird (or similar)
    • Internet Explorer 6
    • Opera 7
    In IE an Opera everything displays as I would expect it to. In Mozilla (as you can see) there is a huge amount of space above the text in the two gray areas of the page ("welcome to cadmium" and "updates").

    The code for the heading class is below:

    HTML Code:
    .heading01 {
     	font-family: Arial, Helvetica, sans-serif;
     	font-weight: bold;
     	font-size: 18px;
     	color: #666666;
     	padding: 0px;
     }
    And the code for the actual page is:

    PHP Code:
    <div id="content">
         <div id="header">
         <img src="images/cadmium-logo.gif" height="75" width="230" alt="Cadmium Design &amp; Development" />
        </div>
         <div id="navbar"><?php require("includes/menu.htm"); ?></div>
         <div id="introduction">
             <p class="heading01">welcome to cadmium</p>
         </div>
         <div id="updates">
             <p class="heading01">updates</p>
         </div>
     </div>
    Can anyone explain why this is happening, and even better suggest a work-around?

    You will also notice, Mozilla isn't treating the gap between the menu and the content the same as the other two browsers (this is done with a margin-bottom property). Any suggestions on how to solve this would also be appreciated.
    Alex Graham
    Cadmium Design & Development
    www.cadmium.com.au
    alexandra@cadmium.com.au

  2. #2
    SitePoint Wizard silver trophy redemption's Avatar
    Join Date
    Sep 2001
    Location
    Singapore
    Posts
    5,269
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can fix this by setting the margins for paragraphs to 0:
    Code:
    p {
    margin:0;
    }
    Oh yes you asked for an explanation as well. Simple really. Mozilla sets a default p margin of
    Code:
    margin: 1em 0 1em 0
    whereas IE has margin: 0 0 1em 0

  3. #3
    Ensure you finish what you sta bronze trophy John Colby's Avatar
    Join Date
    Aug 2003
    Location
    University of Central England, U.K.
    Posts
    487
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by redemption
    Mozilla sets a default p margin of
    Code:
    margin: 1em 0 1em 0
    whereas IE has margin:
    Code:
    margin: 0 0 1em 0
    So which is the correct method? (yes, I know I can burrow in the specs - just thought you may know)
    John
    No electrons were harmed during the creation, transmission
    or reading of this posting. However, many were excited and
    some may have enjoyed the experience.

  4. #4
    SitePoint Wizard silver trophy redemption's Avatar
    Join Date
    Sep 2001
    Location
    Singapore
    Posts
    5,269
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure there is a "correct" method or any recommendations set by any standards body. It would be useful if you could go burrowing so that we can find out Thanks in advance!

  5. #5
    SitePoint Evangelist Alexandra's Avatar
    Join Date
    Aug 2002
    Location
    Perth, Australia
    Posts
    414
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that, all sorted. Any ideas on the second point?

    You will also notice, Mozilla isn't treating the gap between the menu and the content the same as the other two browsers (this is done with a margin-bottom property). Any suggestions on how to solve this would also be appreciated.
    Thanks again!
    Alex Graham
    Cadmium Design & Development
    www.cadmium.com.au
    alexandra@cadmium.com.au

  6. #6
    SitePoint Wizard silver trophy redemption's Avatar
    Join Date
    Sep 2001
    Location
    Singapore
    Posts
    5,269
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm... I don't really see what you mean - appears the same in IE6 and Mozilla Firebird trunk build.

  7. #7
    SitePoint Evangelist Alexandra's Avatar
    Join Date
    Aug 2002
    Location
    Perth, Australia
    Posts
    414
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The gap between the menu and the content is smaller than the gap between the header and the menu.

    Take a look at this screenshot that compares the site in Mozilla (top) and IE (bottom).


    As you can see, on my PC it is scrunching everything up for no apparent reason.

    Any ideas?
    Alex Graham
    Cadmium Design & Development
    www.cadmium.com.au
    alexandra@cadmium.com.au

  8. #8
    SitePoint Wizard silver trophy redemption's Avatar
    Join Date
    Sep 2001
    Location
    Singapore
    Posts
    5,269
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, it appears OK (i.e. like how it is in IE6) in my Mozilla Firebird build.

    Let me go fire up Firebird 0.7 and see.

  9. #9
    SitePoint Evangelist Alexandra's Avatar
    Join Date
    Aug 2002
    Location
    Perth, Australia
    Posts
    414
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Which version of Firebird are you using?
    Alex Graham
    Cadmium Design & Development
    www.cadmium.com.au
    alexandra@cadmium.com.au

  10. #10
    SitePoint Wizard silver trophy redemption's Avatar
    Join Date
    Sep 2001
    Location
    Singapore
    Posts
    5,269
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was using the 20031230 trunk build. I also fired up Firebird 0.7 (I kept a copy) and it showed me the same thing:
    Attached Images Attached Images

  11. #11
    SitePoint Evangelist Alexandra's Avatar
    Join Date
    Aug 2002
    Location
    Perth, Australia
    Posts
    414
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That is really weird and very annoying. Sometimes I hate computers...

    I wonder what is causing it?

    Is there anybody else out there with Firebird 0.7 who could let me know if they are seeing the site correctly?

    Is it just me?

    This is sooooo frustrating!
    Alex Graham
    Cadmium Design & Development
    www.cadmium.com.au
    alexandra@cadmium.com.au

  12. #12
    Ensure you finish what you sta bronze trophy John Colby's Avatar
    Join Date
    Aug 2003
    Location
    University of Central England, U.K.
    Posts
    487
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My Firebird 0.7 shows as your second example, as does Mox 1.6b. Which version of Moz are you using?
    John
    No electrons were harmed during the creation, transmission
    or reading of this posting. However, many were excited and
    some may have enjoyed the experience.

  13. #13
    SitePoint Evangelist Alexandra's Avatar
    Join Date
    Aug 2002
    Location
    Perth, Australia
    Posts
    414
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, well at least everyone is seeing it properly even if I'm not. :-(
    Alex Graham
    Cadmium Design & Development
    www.cadmium.com.au
    alexandra@cadmium.com.au

  14. #14
    Ensure you finish what you sta bronze trophy John Colby's Avatar
    Join Date
    Aug 2003
    Location
    University of Central England, U.K.
    Posts
    487
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cache?
    John
    No electrons were harmed during the creation, transmission
    or reading of this posting. However, many were excited and
    some may have enjoyed the experience.

  15. #15
    SitePoint Evangelist Alexandra's Avatar
    Join Date
    Aug 2002
    Location
    Perth, Australia
    Posts
    414
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm, I haven't changed anything in regards this area of the site, so I doubt that would be it...I'll just clear the cache and see....Nope, still a tiny gap instead of 3px.

    There must be another setting on the browser, but I can't figure out what it is, I've been through the preferences over and over but I can't find anything that appears relevant.
    Alex Graham
    Cadmium Design & Development
    www.cadmium.com.au
    alexandra@cadmium.com.au

  16. #16
    Ensure you finish what you sta bronze trophy John Colby's Avatar
    Join Date
    Aug 2003
    Location
    University of Central England, U.K.
    Posts
    487
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Version of Moz? I only have 1.6b so can't test any other.
    John
    No electrons were harmed during the creation, transmission
    or reading of this posting. However, many were excited and
    some may have enjoyed the experience.

  17. #17
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Font size. In my Firebird 0.7, that gap gets bigger/smaller as I resize the font.

  18. #18
    SitePoint Evangelist Alexandra's Avatar
    Join Date
    Aug 2002
    Location
    Perth, Australia
    Posts
    414
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    John,

    I'm using Firebird 0.7 as was Redemption, so I don't think it has anything to do with that,

    Blufive,

    I thought of that myself and you're right, if you increase the font enough the gap becomes the correct size - however, the text is big enough to read from across the room.

    I don't think this is it either as Redemption sent through a screen capture that showed the font size to match mine.

    This really is a tricky one! Trust me :-)

    Did the gap show up correctly for you though in the first place?
    Alex Graham
    Cadmium Design & Development
    www.cadmium.com.au
    alexandra@cadmium.com.au

  19. #19
    SitePoint Evangelist Alexandra's Avatar
    Join Date
    Aug 2002
    Location
    Perth, Australia
    Posts
    414
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've just checked the site on another computer in the office using Firebird 0.7 and it shows up perfectly!

    This is really annoying, but I guess I am just going to have to live with it. It is obviously working on the majority of browsers including Firebird 0.7 (just not mine).

    Oh well, thanks guys, I think I'll just let this one rest.
    Alex Graham
    Cadmium Design & Development
    www.cadmium.com.au
    alexandra@cadmium.com.au

  20. #20
    Ensure you finish what you sta bronze trophy John Colby's Avatar
    Join Date
    Aug 2003
    Location
    University of Central England, U.K.
    Posts
    487
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yet resizing in Opera (resize the whole screen, not just the font) in Opera 7.23 causes the gap to be correct in proportion.
    John
    No electrons were harmed during the creation, transmission
    or reading of this posting. However, many were excited and
    some may have enjoyed the experience.

  21. #21
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,350
    Mentioned
    63 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by Alexandra
    Is there anybody else out there with Firebird 0.7 who could let me know if they are seeing the site correctly?
    the gap above and below the red nav bar is identical in both IE6 and Firebird 0.7 here

    so you must've fixed that

    but the site isn't what i'd call displaying "correctly" because unless i have the browser window totally maximized, there's a horizontal scrollbar, but the content is cut off at the left, and i can't scroll over to see it!!
    Attached Images Attached Images
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  22. #22
    SitePoint Evangelist Alexandra's Avatar
    Join Date
    Aug 2002
    Location
    Perth, Australia
    Posts
    414
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    r937,

    Thanks for that, I'm testing as I go and haven't had a chance to look at that yet, so thanks for bringing it up - I'll look into it now.

    How small did you make the window? I designing it to fit onto 800x600 minimum.
    Alex Graham
    Cadmium Design & Development
    www.cadmium.com.au
    alexandra@cadmium.com.au

  23. #23
    SitePoint Evangelist Alexandra's Avatar
    Join Date
    Aug 2002
    Location
    Perth, Australia
    Posts
    414
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    r937,

    Could you post a screenshot of what is happening when you reduce the window? I can't emmulate it here.
    Alex Graham
    Cadmium Design & Development
    www.cadmium.com.au
    alexandra@cadmium.com.au

  24. #24
    SitePoint Wizard silver trophy redemption's Avatar
    Join Date
    Sep 2001
    Location
    Singapore
    Posts
    5,269
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm... that is true. The negative margin-left for your content div is the reason.

    Edit:

    Added screenshot
    Attached Images Attached Images

  25. #25
    SitePoint Evangelist Alexandra's Avatar
    Join Date
    Aug 2002
    Location
    Perth, Australia
    Posts
    414
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The nagative left margin is what centers the site...I'm using code from this site...

    http://www.wpdfd.com/editorial/thebox/deadcentre1.html

    Thanks for the screenshot, I've changed the method of centering - how is it looking now - http://www.cadmium.com.au/2004/
    Alex Graham
    Cadmium Design & Development
    www.cadmium.com.au
    alexandra@cadmium.com.au


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
  •