span widths are the same size, but only appear as such in IE

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • dutone@hotmail.com
    #1

    span widths are the same size, but only appear as such in IE

    the two spans have a width of 75%, but in NS, safari etc... dont appear
    to be even. They only do in IE (6.0 is what I tried it in)
    sorry 4 no link

    <html>
    <head>
    <style type="text/css">
    ..header
    {
    color:#ffffff;
    display:block;
    background-color:#565fff;
    border:2px solid;
    border-color:#0000ff;
    width:75%;
    padding:5px;
    font-family:"Arial Black" ;
    font-size:22px;
    }


    ..subtext
    {
    display:block;
    font-size:15px;
    padding:4px;
    width:75%;
    BORDER-BOTTOM: #000fff 2px solid;
    background-color:#39baee;
    }
    </style>
    </head>
    <body>
    <span class="header"> heading</span>
    <span class="subtext" >sub heading</span>
    </body>
    </html>

    Tags: None
    • Steve Pugh
      #2
      Re: span widths are the same size, but only appear as such in IE

      dutone@hotmail. com wrote:
      [color=blue]
      >the two spans have a width of 75%, but in NS, safari etc... dont appear
      >to be even. They only do in IE (6.0 is what I tried it in)
      >sorry 4 no link[/color]

      If this you entire code then you have no doctype. So IE6 will go into
      quirks mode and emulate the bugs in IE5.
      [color=blue]
      ><html>
      ><head>
      ><style type="text/css">
      >.header
      >{
      > color:#ffffff;
      > display:block;
      > background-color:#565fff;
      > border:2px solid;
      > border-color:#0000ff;
      > width:75%;
      > padding:5px;
      > font-family:"Arial Black" ;
      > font-size:22px;
      >}[/color]

      So width from outside border edge to outside border edge is:
      In IE: 75%
      In standards compliant browsers: 2px + 5px + 75% + 5px + 2px
      [color=blue]
      >.subtext
      >{
      > display:block;
      >font-size:15px;
      > padding:4px;
      > width:75%;
      > BORDER-BOTTOM: #000fff 2px solid;
      > background-color:#39baee;
      >}[/color]

      So width from outside border edge to outside border edge is:
      In IE: 75%
      In standards compliant browsers: 4px + 75% + 4px

      So the same in IE5 (and IE6 as you trigger quirks mode by omitting the
      doctype) but different in browsers that follow the CSS spec.

      Steve

      --
      "My theories appal you, my heresies outrage you,
      I never answer letters and you don't like my tie." - The Doctor

      Steve Pugh <steve@pugh.net > <http://steve.pugh.net/>

        Comment

        • dutone@hotmail.com
          #3
          Re: span widths are the same size, but only appear as such in IE

          sorry i just put in some quick markup to illustrate the example. I do
          have a DOCTYPE, its Transitional HTML 4.0

          thanks

            Comment

            • dutone@hotmail.com
              #4
              Re: span widths are the same size, but only appear as such in IE

              i adjusted the px's so they where equal on both classes. Namey the
              padding...
              thanks.....

                Comment

                Previous template Next
                Working...