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 6 of 6
  1. #1
    Junior Member fullmanator's Avatar
    Join Date
    Sep 2003
    Location
    Fort Lauderdale, FL
    Posts
    15
    Member #
    3091
    Ok, here's the problem. For the sidebar on the right hand side, I'm using images for most of the buttons. That's fine.

    At the very bottom, where I give the "powered by" credit, the "Movable Type 3.12" is a text-based CSS button, using the block property and everything.

    IE displays this perfectly, as it should.

    Firefox and Opera, on the other hand, do not, and it's driving me crazy.

    I suspect it is the padding-top and padding-left in the CSS file (you can find this at the very bottom of the CSS file, referenced below), because as soon as I remove it, Firefox and Opera display perfectly, albeit everything being flushed top left. Blah.

    Problematic page:
    http://www.fullmanator.com/journal/

    CSS file:
    http://www.fullmanator.com/gfx/global.css

    Any help would be greatly appreciated. I'm friggin exhausted. :disappointed:

  2.  

  3. #2
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    if you specify padding and width in the same CSS spec, you'll have issues. the reason is that IE includes the padding dimension in the width, and Moz / opera do not. The easiest way to get around it w/out hacking is to have nested elements, parent w/ width and child w/ padding, like so:
    Code:
    <div style="width: 250px">
        <div style="padding: 10px">
        </div>
    </div>

  4. #3
    Senior Member Brak's Avatar
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    3,413
    Member #
    1217
    Liked
    2 times
    Grrr... you guys drive me nuts with this

    Padding is supposed to be added to the width. IE6 does it. Mozilla does it. Opera does it. It's supposed to do that. The only browser that does this wrong is IE5 for windows. That's the only browser in the world that does this. Are you using IE5 for testing? If so I strongly suggest you upgrade, IE5 has almost no market share anymore.
    Kyle Neath: Rockstar extraordinare
    The blog | The poetry site | The Spore site

  5. #4
    Junior Member fullmanator's Avatar
    Join Date
    Sep 2003
    Location
    Fort Lauderdale, FL
    Posts
    15
    Member #
    3091
    No, I develop for IE6, Firefox 1.0, Opera 7, Netscape 7, IE 5.5, in that order.

  6. #5
    Senior Member Rince's Avatar
    Join Date
    Nov 2004
    Posts
    183
    Member #
    8318
    IE6 will use the box model of IE5 if your page runs in quirks mode. See the CSS Enhancements in Internet Explorer 6 for details of using doctype switching in IE6.

    In IE5 and in IE6 under quirks mode, the box size is width + padding.

    In IE6 Standards mode and in Firefox/Mozilla and opera, the box size is width + margin + border + padding.

    Clearly the two systems cause a big error if you are not aware of the problem.

    Now the common solution to the problem is to either avoid it or to use the Tantek hack to get round it. However the Tantek hack is rather ugly and works by forcing IE6 in to quirks mode then sniffing for IE and serving IE different css deffinitions form the other browsers.

    In the w3c css3 specs, there is a new css control for box-sizing. This allows you to change the box model in use by the browsers. For example:
    Code:
    box-sizing: border-box
    This will make the box model follow the traditional IE format.
    Code:
    box-sizing: content-box
    Will cause the w3c model to be used.

    The above css is alread accepted by Opera and IE5 for Mac.

    For mozilla, you can use the following for the same effect
    Code:
    -moz-box-sizing: border-box;
    -moz-box-sizing: content-box;
    -moz-box-sizing: padding-box;
    So you can combine these together to give code like this:
    Code:
    .someclass {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    }
    So we have a potential sollution. If you use css to make mozilla/firefox and Opera use the border-box (traditional IE model) rather than the w3c model. Then you can just use the doctype switch to force IE6 into quirls mode. Now you have all the browsers using the same box model.

  7. #6
    Senior Member Brak's Avatar
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    3,413
    Member #
    1217
    Liked
    2 times
    ... or you could add a doctype (as he already has) and make IE6 run in standards mode. I prefer that way as it's way easier
    Kyle Neath: Rockstar extraordinare
    The blog | The poetry site | The Spore site


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