Newbie CSS question?

Discussion in 'HTML' started by Jens Lenge, Mar 4, 2005.

  1. Jens Lenge

    Jens Lenge Guest

    Hello world,

    I am pretty sure this is a typical newbie CSS question, but I couldn't find
    a solution yet.

    Obviously Firefox 1.x and Internet Explorer 6.x interprete the "width"
    attribute differently (don't know how other browsers do it): If you define a
    div with an absolute width of 100px and a padding of 10px, then IE will take
    the width as 100px total including the padding, while Firefox will make it
    100px plus the padding (so 120px in total).

    How the hell can I make my div have the exact same width on all browsers? It
    seems to work when setting the padding to 0px, but this would require an
    extra (inner) div for the text content. Isn't there a more elegant solution?

    Jens
     
    Jens Lenge, Mar 4, 2005
    #1
    1. Advertising

  2. Jens Lenge

    mscir Guest

    Jens Lenge wrote:

    > Hello world,
    > I am pretty sure this is a typical newbie CSS question, but I couldn't
    > find a solution yet.
    > Obviously Firefox 1.x and Internet Explorer 6.x interprete the "width"
    > attribute differently (don't know how other browsers do it): If you
    > define a div with an absolute width of 100px and a padding of 10px, then
    > IE will take the width as 100px total including the padding, while
    > Firefox will make it 100px plus the padding (so 120px in total).
    > How the hell can I make my div have the exact same width on all
    > browsers? It seems to work when setting the padding to 0px, but this
    > would require an extra (inner) div for the text content. Isn't there a
    > more elegant solution?
    > Jens


    This renders the same in my Firefox 1.0.1, Netscape 7.2, IE 6. Does it
    work in your browsers? If so, post an example of something that doesn't
    work in your browsers.

    Mike

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

    <html>

    <head>
    <title>Untitled</title>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
    <style type="text/css">
    * {
    padding:0;
    margin:0;
    border: 0;
    }
    body{
    width: 100%;
    height: 100%;
    text-align: center;
    }
    ..wrapper{
    width: 300px;
    padding: 10px;
    border: 1px solid red;
    margin: 0 auto;
    }
    </style>
    </head>

    <body>
    <div class='wrapper'>
    This is the wrapper div. This is the wrapper div. This is the wrapper
    div. This is the wrapper div. This is the wrapper div. This is the
    wrapper div.
    </div>
    </body>
    </html>
     
    mscir, Mar 4, 2005
    #2
    1. Advertising

  3. Jens Lenge

    Jens Lenge Guest

    "mscir" <> wrote:

    > This renders the same in my Firefox 1.0.1, Netscape 7.2, IE 6. Does it
    > work in your browsers? If so, post an example of something that doesn't
    > work in your browsers.


    Your code worked perfectly, so I was able to track it down: It's obviously a
    matter of the Doctype!
    When you use (as you did)...

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

    ....then IE renders exactly as Firefox. When you use (as I did)...

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    ....then IE renders differently (you can easily check that in your example).

    I admit I don't really understand the full meaning of the DOCTYPE syntax.
    What is the difference between using "loose.dtd", "srict.dtd", or no
    trailing URL at all?
    Which option should I use these days (and why)?

    Could you please give me some hints (or link me to a corresponding
    explanation)?

    Jens
     
    Jens Lenge, Mar 4, 2005
    #3
  4. On Fri, 4 Mar 2005 04:28:56 +0100, Jens Lenge <> wrote:

    > Hello world,


    It's just me

    > Obviously Firefox 1.x and Internet Explorer 6.x interprete the "width"
    > attribute differently (don't know how other browsers do it):
    >
    > How the hell can I make my div have the exact same width on all browsers?


    After you've correctly marked up your page (no extra divs needed), you style the
    thing with css and keep FireFox as your primary browser to test the looks. When
    done, open it in IE and prepare for the shock :)

    One thing you should do is give a full doctype declaration[1], so IE is
    rendering in standards mode (versus quirks mode)[2]. That will help.
    Secondly, get the notion that you can never create a 'pixel perfect design'.
    There are simply too many browsers out there for you to be able to serve all of
    them with exactly the same layout. And that doesn't really matter, because your
    visitor is going to see your site with only one browser anyway. If it works good
    and the looks are okay, you've accomplished your goal - transferring your
    information accessible and usable.

    That said:
    Annoying wrongs in the layout of IE can be corrected, without effecting the
    layout in recent graphical mainstream browsers, more compliing ones. You can for
    example use the child selector to set a different style for the two kinds.

    for IE:
    div {
    width: 100px;
    padding:10px; }

    for all others:
    body>div {
    width:80px;
    padding:10px; }



    [1] A full doctype declaration includes the URL where the DTD is at, like
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

    [2] See
    <http://www.positioniseverything.net/articles/doctypes.html>
    <http://www.alistapart.com/stories/doctype/>
    <http://www.mozilla.org/docs/web-developer/quirks/>
    <http://hsivonen.iki.fi/doctype/>

    --
    ,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
    | weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
    | webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
    |zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
    `-------------------------------------------------- --<--@ ------------'
     
    Barbara de Zoete, Mar 4, 2005
    #4
  5. Jens Lenge

    Toby Inkster Guest

    Jens Lenge wrote:

    > I admit I don't really understand the full meaning of the DOCTYPE syntax.
    > What is the difference between using "loose.dtd", "srict.dtd", or no
    > trailing URL at all?


    Google: Quirks Mode.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
     
    Toby Inkster, Mar 4, 2005
    #5
  6. On Fri, 04 Mar 2005 05:51:06 +0100, Jens Lenge wrote:

    > "mscir" <> wrote:
    >
    >> This renders the same in my Firefox 1.0.1, Netscape 7.2, IE 6. Does it
    >> work in your browsers? If so, post an example of something that doesn't
    >> work in your browsers.

    >
    > Your code worked perfectly, so I was able to track it down: It's obviously a
    > matter of the Doctype!
    > When you use (as you did)...
    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    > "http://www.w3.org/TR/html4/strict.dtd">
    >
    > ...then IE renders exactly as Firefox. When you use (as I did)...
    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    >
    > ...then IE renders differently (you can easily check that in your example).
    >
    > I admit I don't really understand the full meaning of the DOCTYPE syntax.
    > What is the difference between using "loose.dtd", "srict.dtd", or no
    > trailing URL at all?
    > Which option should I use these days (and why)?
    >
    > Could you please give me some hints (or link me to a corresponding
    > explanation)?
    >
    > Jens


    The differences are...

    strict.dtd - the one I use, is the strictest interpretation of the 4.01
    document type. There are no depreciated tags in the document. It is pure
    html 4.01.

    loose.dtd refers to documents that are a little looser. The document may
    be based on 4.01, but some older tags are in the document. The majority
    of the document should be 4.01, but there will also be 4.0, 3.2 and
    possibley previous versions of html within the document. The idea is you
    are transitioning to pure 4.01, but are not quite there yet.

    See the W3C.ORG site for their complete description.

    Carolyn
     
    Carolyn Marenger, Mar 4, 2005
    #6
  7. Jens Lenge

    Richard Guest

    On Fri, 4 Mar 2005 04:28:56 +0100 Jens Lenge wrote:

    > Hello world,
    >
    > I am pretty sure this is a typical newbie CSS question, but I couldn't
    > find a solution yet.
    >
    > Obviously Firefox 1.x and Internet Explorer 6.x interprete the "width"
    > attribute differently (don't know how other browsers do it): If you define
    > a div with an absolute width of 100px and a padding of 10px, then IE will
    > take the width as 100px total including the padding, while Firefox will
    > make it 100px plus the padding (so 120px in total).
    >
    > How the hell can I make my div have the exact same width on all browsers?
    > It seems to work when setting the padding to 0px, but this would require
    > an extra (inner) div for the text content. Isn't there a more elegant
    > solution?
    >
    > Jens


    Padding adds more space to give the surrounding text a bit more room.
    So firefox is correct.
    If the division is not wide enough for the padding, it automatically
    expands.
    You could try using padding-right and padding-left instead of "padding" and
    see if that helps.
     
    Richard, Mar 4, 2005
    #7
  8. Jens Lenge

    Jens Lenge Guest

    "Richard" <Anonymous@127.001> wrote:

    > Padding adds more space to give the surrounding text a bit more room.
    > So firefox is correct.
    > If the division is not wide enough for the padding, it automatically
    > expands.
    > You could try using padding-right and padding-left instead of "padding"
    > and
    > see if that helps.


    Thank you. I have found that the incorrect rendering of IE is a matter of
    pushing it into "Quirk Mode" via Transitional/Loose DTD.
     
    Jens Lenge, Mar 4, 2005
    #8
  9. Jens Lenge

    Jens Lenge Guest

    "Barbara de Zoete" <> wrote:

    >> Hello world,

    > It's just me


    Well, at least a part of the world... ;o)

    > After you've correctly marked up your page (no extra divs needed), you
    > style the thing with css and keep FireFox as your primary browser to test
    > the looks. When done, open it in IE and prepare for the shock :)


    That's exactly how I usually do it... including the shocks. :eek:)

    > One thing you should do is give a full doctype declaration[1], so IE is
    > rendering in standards mode (versus quirks mode)[2]. That will help.


    Yes, thank you. That's the difference.

    > Secondly, get the notion that you can never create a 'pixel perfect
    > design'.


    In terms of fonts size and height of elements, yes. But in terms of
    fixed-width layouts it should be possible to create an almost identical look
    on all standard conforming browsers plus market leader IE. I'm at least
    after making it work with the latest versions of Internet Explorer 6,
    Firefox/Mozilla, and if possible Safari and Opera (the more the better).

    However, I am NOT going to achieve a 'perfect' look on outdated browsers (IE
    5.x and before, Netscape). I would like to stick with standard conforming
    HTML/CSS and avoid browser-specific hacks whereever possible.

    Thanks again,
    Jens
     
    Jens Lenge, Mar 4, 2005
    #9
  10. Jens Lenge

    Jens Lenge Guest

    "Carolyn Marenger" <> wrote:

    > [very helpful doctype explanation]


    Thank you for the background!
    Now I know a little more about what I am trying to do.
    (However, seems I will need to come back a few times until I get it
    running...)

    Greetings from Germany,
    Jens
     
    Jens Lenge, Mar 4, 2005
    #10
  11. Jens Lenge

    Jens Lenge Guest

    "Toby Inkster" <> wrote:

    > Google: Quirks Mode.


    Yes, that brings some light into the darkness.
    Thank you, I didn't know the term "quirks mode" before.
     
    Jens Lenge, Mar 4, 2005
    #11
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Eric
    Replies:
    4
    Views:
    790
    clintonG
    Dec 24, 2004
  2. Replies:
    6
    Views:
    585
    Jonathan N. Little
    Mar 18, 2006
  3. AF
    Replies:
    17
    Views:
    629
    Nije Nego
    Aug 9, 2006
  4. richard
    Replies:
    12
    Views:
    787
    dorayme
    Mar 9, 2010
  5. Larry Lindstrom
    Replies:
    19
    Views:
    1,356
    Jonathan N. Little
    Jun 12, 2012
Loading...

Share This Page