#1
  1. No Profile Picture
    No. 4
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Location
    UK
    Posts
    89
    Rep Power
    11

    CSS cross browser compatability problems


    hi

    so i am trying to rebuild a site in CSS and aside from a few glitches(!) i thought that all was going well (in IE) until i looked at the site in mozilla and opera (which i've since learnt are the ones that handle it well -- oops!)

    in IE everything lays out as it should but in the two mentioned above elements just collapse onto each other, for example

    here!!

    i'm using an external style sheets and i guess the css that matters is the following...

    .textBox {
    position: relative;
    top: 0px;
    left: 20px;
    padding: 0px;
    background: #F2FCFF;
    width: 640px;
    height: 5px;
    overflow: visible;
    }

    .quoteBoxlg {
    padding: 10px;
    position: relative;
    top: 0px;
    left: 100px;
    padding: 10px;
    background: #FFFFFF;
    width: 65%;
    height: 20px;
    overflow: visible;
    }

    and

    .floatleft {
    float: left;
    margin: 0 0 15px 15px;
    }

    please help if you can!

    thanks

    jim
  2. #2
  3. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    this happens because ie rendres the overflow:visible wrong.
    http://www.quirksmode.org/css/overflow.html

    one way to fix it is to remove the
    overflow:visible, and height property
    form the .textBox and .quoteBoxlg
  4. #3
  5. No Profile Picture
    No. 4
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Location
    UK
    Posts
    89
    Rep Power
    11
    thanks Akh...

    i'll give that a go now.

    jim
  6. #4
  7. No Profile Picture
    No. 4
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Location
    UK
    Posts
    89
    Rep Power
    11
    well it's got me part of the way there so thanks for that...

    however the textBox and quoteBox elements still sit above the floatleft element.

    cheers,

    jim
  8. #5
  9. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    try to set an margin-left to the .textBox,

    ie.
    margin-left:70px;
  10. #6
  11. No Profile Picture
    No. 4
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Location
    UK
    Posts
    89
    Rep Power
    11
    It works and you are a star! thanks so much....

    jim

IMN logo majestic logo threadwatch logo seochat tools logo