SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict drbones's Avatar
    Join Date
    Nov 2001
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Padding Problem in Firefox

    Hi,

    I am currently redesigning my site with a new layout and CSS. This is my first time really utilizing CSS. I'm having problems getting Firefox to display the site properly. Firefox seems to be adding extra pixes/padding onto the right side of all my divs. IE spits the page out correctly, so I can't understand why FF won't.

    If anyone wouldn't mind taking a look, that would be awesome.

    http://www.jokemania.com/newlayout.php

    The CSS is in the php file.

    Thanks a lot!
    *WRITERS* Create How To Guides and articles and get
    75% of the MONEY it makes via Adsense forever!

    Sign up Now! <- $100 Top Poster Contest

  2. #2
    SitePoint Evangelist Ed Seedhouse's Avatar
    Join Date
    Aug 2006
    Location
    Victoria, B.C. Canada
    Posts
    592
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by drbones
    I am currently redesigning my site with a new layout and CSS. This is my first time really utilizing CSS. I'm having problems getting Firefox to display the site properly. Firefox seems to be adding extra pixes/padding onto the right side of all my divs. IE spits the page out correctly, so I can't understand why FF won't.
    You have no DTD and so your site triggers "quirks" mode in all browsers. Quirks mode is not what you want to be in. No browser renders CSS correctly in "quirks" mode and IE is the worst of all.

    CSS is predicated on valid html or xhtml. That means html or xhtml with a Doctype and a Namespace declaration. Without that CSS behaviours are essentially undefined and it's a pure crap shoot.

    Get your html a doctype and get it validated at the W3C validator. Until you do that you don't have a hope of making CSS work right and especially not cross-browser.

    Browsers in "standards" mode, triggered by a propter doctype and namespace, generally render more or less according to the CSS standard. IE, however, is the worst, not the best, at doing this however.

    Don't design to IE, design to a properly compliant browsers such as Firefox or Opera. Then when it looks right in these, fix it up for IE (which might require a few hacks).

    The general rule is that, given standards compliant html or xhtml, if it renders one way in IE and another way in Firefox, then 99% of the time Firefox is right and IE is wrong. And that's true even when IE looks the way you want it to look.

    So to put it in a nutshell, you are presently doing almost everything wrong and need to rethink your whole approach. Sorry to be the bearer of bad news.
    Ed Seedhouse

  3. #3
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <>

  4. #4
    SitePoint Zealot photoshop250's Avatar
    Join Date
    Aug 2006
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE is notorious for displaying CSS incorrectly but I know there are hacks for this and for Safari(MAC) as well.
    Discover Hidden Photoshop Secrets

  5. #5
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You know, so far I've found the opposite to be true: all of my CSS works just fine in IE but FF messes it up.

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's because you're probably coding your Web site in Internet Explorer. You need to code your site, then check in FireFox and Opera simultaneously (and either Konqueror or Safari if possible), then correct any mistakes in Internet Explorer. Make a change or addition to the CSS, save, validate, check in FireFox/Opera/KHTML (Konqueror and Safari--note that KHTML is often referred to as WebKit, especially when referring to Safari), then check for Internet Explorer and fix any rendering issues there. Normally, you will be able to fix IE without having to resort to hacks or conditional style rules. There are times however, when they are necessary.


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
  •