Alignment Issue in I.E. - New to CSS

Discussion in 'HTML' started by 1995 Cobra, Sep 8, 2006.

  1. 1995 Cobra

    1995 Cobra Guest

    Hello all, brand new to CSS thanks to some help from some folks in this
    group so I'm likely making a rookie mistake. If you go to this link
    http://www.pamschams.com/pc_beta2.asp there are essentially 3 columns
    to make up the design. I'm posting my style sheet below. The site views
    fine in Firefox and Safari, but I.E. puts the center column below the
    left and right column. Any ideas? :

    /* CSS Document */

    body, input, textarea {
    font-family:Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: black;
    background-color: white;
    margin: 0px;}

    a:link {
    color: #0066CC;
    text-decoration: none;}

    a:hover {
    color: #009900;
    text-decoration: underline;}

    #holderback {
    width: 100%;
    background-color: #ff3399;
    text-align: center;
    padding: 0px;}

    #holder {
    margin-left: auto;
    margin-right: auto;
    width: 900px;
    margin-top: 0px;
    margin-bottom: 0px;}

    #header {
    width: 800px;
    margin-top: 0px;
    margin-left: 35px;
    margin-right: 35px;
    padding: 0px 15px;
    border: 0px;
    background-color: white;
    height: 550px;
    text-align: center;
    margin-bottom: 0px;}

    #left {
    float: left;
    background-image: url(images/index/leftbar.jpg);
    background-repeat: no-repeat;
    background-position: top right;
    height: 550px;
    margin-left: 0px;
    width: 35px;
    margin-top: 0px;
    margin-bottom: 0px;}

    #right {
    float: right;
    background-image: url(images/index/rightbar.jpg);
    background-repeat: no-repeat;
    background-position: top left;
    height: 550px;
    margin-right: 0px;
    width: 35px;
    margin-top: 0px;
    margin-bottom: 0px;}

    h3 {
    font-size: 125%;
    color:#FF3399;
    text-align: left;}

    blockquote {
    text-align: left;}

    #footerholder {
    width: 100%;
    margin-top: 0px;
    padding-top: 10px;
    text-align: center;
    background-color: white;}

    #footer {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    padding: 0px;
    border: 0px;
    text-align: center;}

    Thank you.
     
    1995 Cobra, Sep 8, 2006
    #1
    1. Advertising

  2. 1995 Cobra

    BootNic Guest

    > 1995 Cobra <> wrote:
    > news:
    > Hello all, brand new to CSS thanks to some help from some folks in
    > this group so I'm likely making a rookie mistake. If you go to this
    > link http://www.pamschams.com/pc_beta2.asp there are essentially 3
    > columns to make up the design. I'm posting my style sheet below. The
    > site views fine in Firefox and Safari, but I.E. puts the center
    > column below the left and right column. Any ideas? :



    [snip]

    http://www.positioniseverything.net/explorer/threepxtest.html

    Your #header is 6px too wide for IE. (3px X 2)

    Possible work around for it:

    <link href="pc_style_2.css" rel="stylesheet" type="text/css">

    <!--[if lte IE 6]>
    <link href="pc_style_2IE.css" rel="stylesheet" type="text/css">
    <![endif]-->
    </head>

    ===
    pc_style_2IE.css content

    #header{
    width:794px;
    }
    #right{
    position: relative;
    top:0;
    right:3px;
    }
    #left{
    position: relative;
    top:0;
    left:3px;
    }

    --
    BootNic Friday, September 08, 2006 9:49 AM

    All men dream, but not equally. Those who dream by night in the dusty
    recesses of their minds, wake in the day to find that it was vanity:
    but the dreamers of the day are dangerous men, for they may act on
    their dreams with open eyes, to make them possible.
    *Thomas Edward Lawrence (of Arabia)*
     
    BootNic, Sep 8, 2006
    #2
    1. Advertising

  3. 1995 Cobra

    1995 Cobra Guest

    BootNic wrote:
    > > 1995 Cobra <> wrote:
    > > news:
    > > Hello all, brand new to CSS thanks to some help from some folks in
    > > this group so I'm likely making a rookie mistake. If you go to this
    > > link http://www.pamschams.com/pc_beta2.asp there are essentially 3
    > > columns to make up the design. I'm posting my style sheet below. The
    > > site views fine in Firefox and Safari, but I.E. puts the center
    > > column below the left and right column. Any ideas? :

    >
    >
    > [snip]
    >
    > http://www.positioniseverything.net/explorer/threepxtest.html
    >
    > Your #header is 6px too wide for IE. (3px X 2)
    >
    > Possible work around for it:
    >
    > <link href="pc_style_2.css" rel="stylesheet" type="text/css">
    >
    > <!--[if lte IE 6]>
    > <link href="pc_style_2IE.css" rel="stylesheet" type="text/css">
    > <![endif]-->
    > </head>
    >
    > ===
    > pc_style_2IE.css content
    >
    > #header{
    > width:794px;
    > }
    > #right{
    > position: relative;
    > top:0;
    > right:3px;
    > }
    > #left{
    > position: relative;
    > top:0;
    > left:3px;
    > }
    >
    > --
    > BootNic Friday, September 08, 2006 9:49 AM
    >
    > All men dream, but not equally. Those who dream by night in the dusty
    > recesses of their minds, wake in the day to find that it was vanity:
    > but the dreamers of the day are dangerous men, for they may act on
    > their dreams with open eyes, to make them possible.
    > *Thomas Edward Lawrence (of Arabia)*


    Hey, thank you for the reply. Are you able to explain or point me in
    the direction of an explanation on why it's too wide? My #holder is
    900px wide and the sum of my 3 divs is 900px wide. Is this just a
    "glitch" in I.E. or am I doing something incorrectly? Thank you again.
     
    1995 Cobra, Sep 8, 2006
    #3
  4. 1995 Cobra

    BootNic Guest

    > 1995 Cobra <> wrote:
    > news:

    [snip]
    >> http://www.positioniseverything.net/explorer/threepxtest.html

    [snip]
    >
    > Hey, thank you for the reply. Are you able to explain or point me in
    > the direction of an explanation on why it's too wide? My #holder is
    > 900px wide and the sum of my 3 divs is 900px wide. Is this just a
    > "glitch" in I.E. or am I doing something incorrectly? Thank you again.


    If the link I provided does not sufficiently explain it, perhaps you can Google
    for more.

    Perhaps something like: http://www.google.com/search?q=IE 3px bug

    --
    BootNic Friday, September 08, 2006 4:55 PM

    Hackers make toys. Crackers break them.
    *Peter Seebach*
     
    BootNic, Sep 8, 2006
    #4
  5. 1995 Cobra

    dorayme Guest

    In article
    <>,
    "1995 Cobra" <> wrote:

    > > BootNic Friday, September 08, 2006 9:49 AM
    > >


    > Hey, thank you for the reply. Are you able to explain or point me in
    > the direction of an explanation on why it's too wide? My #holder is
    > 900px wide and the sum of my 3 divs is 900px wide. Is this just a
    > "glitch" in I.E. or am I doing something incorrectly? Thank you again.


    It is a glitch in the sense that this browser goes its own way
    and adds pixels to your layout without invitation. It is
    consistent behaviour though and was, as I understand,
    deliberately planned by MS (to give some grace to layouts). The
    idea is give just IE a special and different instruction, through
    one of the techniques for doing this, namely - as Bootnic shows -
    a conditional statement that only IE takes notice of. In effect,
    if IE is adding 3 px here and there, the conditional makes sure
    that when it adds these amounts, it is adding to a dimension that
    is less 3px to what the other browsers see. In other words, IE
    gets told a width is 3px less than what is told to other
    browsers. When it adds the 3px of its own, the width concerned
    then appears like the way other browsers handle it.

    --
    dorayme
     
    dorayme, Sep 9, 2006
    #5
  6. 1995 Cobra

    1995 Cobra Guest

    dorayme wrote:
    > In article
    > <>,
    > "1995 Cobra" <> wrote:
    >
    > > > BootNic Friday, September 08, 2006 9:49 AM
    > > >

    >
    > > Hey, thank you for the reply. Are you able to explain or point me in
    > > the direction of an explanation on why it's too wide? My #holder is
    > > 900px wide and the sum of my 3 divs is 900px wide. Is this just a
    > > "glitch" in I.E. or am I doing something incorrectly? Thank you again.

    >
    > It is a glitch in the sense that this browser goes its own way
    > and adds pixels to your layout without invitation. It is
    > consistent behaviour though and was, as I understand,
    > deliberately planned by MS (to give some grace to layouts). The
    > idea is give just IE a special and different instruction, through
    > one of the techniques for doing this, namely - as Bootnic shows -
    > a conditional statement that only IE takes notice of. In effect,
    > if IE is adding 3 px here and there, the conditional makes sure
    > that when it adds these amounts, it is adding to a dimension that
    > is less 3px to what the other browsers see. In other words, IE
    > gets told a width is 3px less than what is told to other
    > browsers. When it adds the 3px of its own, the width concerned
    > then appears like the way other browsers handle it.
    >
    > --
    > dorayme


    Wow, thank you for your insite. Once again I.E. screws developers. This
    is about as good as making Flash movies have to "activate" before use.
    Thank you for the work-arounds. It is truly appreciated.
     
    1995 Cobra, Sep 9, 2006
    #6
    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. Kelwin Delaunay

    img alignment in xhtml strict and css

    Kelwin Delaunay, Apr 17, 2004, in forum: HTML
    Replies:
    4
    Views:
    10,840
    Kelwin Delaunay
    Apr 17, 2004
  2. rfq
    Replies:
    3
    Views:
    537
  3. Becky Lash
    Replies:
    12
    Views:
    672
    Becky Lash
    Nov 24, 2004
  4. tshad

    Question on CSS alignment

    tshad, Jan 31, 2005, in forum: HTML
    Replies:
    22
    Views:
    905
    Beauregard T. Shagnasty
    Feb 1, 2005
  5. Xah Lee
    Replies:
    1
    Views:
    408
    Johannes Koch
    Jul 7, 2005
Loading...

Share This Page