1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Div height is different in IE/Firefox

Discussion in 'CSS' started by haai, Jan 8, 2006.

  1. #1
    Hi

    I'm fighting with IE/Firefox for solving a css-problem.

    Please visit the page in Firefox and IE to see the difference:
    http://www.westelworld.be/wwv3/index.html

    I've made a black border around the problem.
    In firefox, you can see that the black border line is directly under the table "vandaag jarig".
    But in IE, there is a lot of space between the table "vandaag jarig" and the black borderline. I want that the black line is directly under the table, just like in firefox.

    I've been testing with heights, margins, overflows, ... but I can't find the problem.
    Does anybody see a solution?
    The url of the stylesheet: http://www.westelworld.be/wwv3/standaard.css

    Thanks a lot!
    SEMrush
     
    haai, Jan 8, 2006 IP
    SEMrush
  2. haai

    haai Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Found a solution:

    #boxJarig {
    float: left;
    margin: 15px 0px 0px 0px;
    padding: 0px;
    border: 0px;
    width: 613px;
    }
    * html #boxJarig {
    margin-bottom: -22px;/*or -21px*/
    }
     
    haai, Jan 9, 2006 IP
  3. Instromaniac

    Instromaniac Peon

    Messages:
    48
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Not sure if this will work but you should add this to #boxJarig:
    display:inline;

    Your sollution is fine too but it's a hack. If IE ever implements the box model correctly your site will look bad in IE. So if display:inline works you won't have that potential problem.
    The bug here is that IE tends to add double margins and padding to floated elements, but display:inline can usually fix that.
     
    Instromaniac, Jan 17, 2006 IP
  4. Gostt

    Gostt Member

    Messages:
    21
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #4
    Have you tried using XHTML Strict instead of transitional?
     
    Gostt, Jan 17, 2006 IP
  5. e-fun

    e-fun Peon

    Messages:
    210
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Here my solution, just setting the parent element's
    "overflow:hidden;" then it'll helps us to tighten things up as well.

    p/s: Forgive me if I call back the old thread. But, this thread can help CSS coder to repair the div height in IE (especially IE6). You can delete if you think this thread is useless.
     
    e-fun, Sep 5, 2008 IP
  6. asimov77

    asimov77 Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Thank you for that solution e-fun, it works!!

    It seems like the 'overflow:hidden;' property auto adjusts the height of the div in Firefox even without having to specify a 'height' property.

    I have no idea what overflow means, but it seems to work in ie6, ie7 and FF

    THANKS AGAIN
     
    asimov77, Dec 16, 2008 IP
  7. Yesideez

    Yesideez Peon

    Messages:
    196
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #7
    I've found IE is a lot more forgiving that Firefox when it comes to mistakes and will let you get away with a lot more whereas Firefox wants it done right.
     
    Yesideez, Dec 16, 2008 IP
  8. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #8
    Firefox will always show what you wrote. IE makes it up as you go along. Always, always use Firefox as your reference browser.
     
    drhowarddrfine, Dec 16, 2008 IP
  9. berettam92fs

    berettam92fs Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    hi guys, i think im havng a similar problem here.

    i designed a page in dreamweaver cs3 and shows perfectly fine in IE7, but in firefox it automatically creates a gap above the body area causes the text off the position.

    here is the CSS:

    @charset "utf-8";

    .clear:after {
    height:0;
    content:".";
    clear:both;
    display:block;
    visibility:hidden;
    }

    body {
    background-color: #000000;
    background-image: url(../img/backgroundcolor.jpg);
    background-repeat: repeat-x;
    margin: 0px;
    padding: 0px;
    }

    #wrapper {
    width: 980px;
    margin-right: auto;
    margin-left: auto;
    border: thin none #000000;
    margin-top: 10px;
    background-color: #AAB0B3;
    }


    #wrapper #navagation {
    height: 35px;
    color: #FFFFFF;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    font-size: 15px;
    background-color: #00234D;
    padding-left: 35px;
    background-image: url(../img/texturemetallazergun.jpg);
    }
    #wrapper #lasergunpart {
    background-color: #271E1F;
    height: 4px;
    background-image: url(../img/gunparts.jpg);
    margin-bottom: 20px;
    }

    #wrapper #bodyArea #studiopage {
    background-color: #80A84F;
    }
    #wrapper #bodyArea #studiopage #studiowrap {
    width: 407px;
    margin-right: auto;
    margin-left: auto;
    height: 500px;
    background-image: url(../img/design-page_03.jpg);
    }

    #wrapper #bodyArea #iconArea {
    background-color: #FFFFFF;
    margin-top: 20px;
    border: 1px solid #000000;
    height: 240px;
    }
    #wrapper #bodyArea #iconArea #left {
    height: 220px;
    width: 447px;
    margin-top: 10px;
    margin-left: 10px;
    float: left;
    }
    #wrapper #bodyArea #iconArea #right {
    float: right;
    height: 220px;
    width: 447px;
    margin-top: 10px;
    margin-right: 10px;
    }

    #wrapper #bodyArea {
    width: 921px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    }
    #wrapper #bodyArea #iconArea #right #studio {
    background-image: none;
    height: 106px;
    border: 1px solid #000000;
    }

    #wrapper #bodyArea #iconArea #left #securityicon {
    height: 106px;
    width: 445px;
    background-image: none;
    border: 1px solid #000000;
    }
    #wrapper #bodyArea #iconArea #left #ITicon {
    background-image: url(../img/it.jpg);
    height: 106px;
    width: 445px;
    margin-top: 5px;
    border: 1px solid #000000;
    }

    #wrapper #bodyArea #introArea {
    background-color: #FFFFFF;
    height: 110px;
    border: 1px solid #000000;
    }
    #wrapper #bodyArea #studio-fx #studio-fx-carbomb {
    height: 285px;
    width: 588px;
    margin-top: 52px;
    margin-left: 164px;
    color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    }
    #wrapper #bodyArea #studio-fx #studio-fx-carbomb #studio-fx-text {
    width: 400px;
    margin-left: auto;
    margin-right: auto;
    font-size: 21px;
    }
    #wrapper #bodyArea #studio-fx #studio-fx-carbomb #studio-fx-testbody {
    width: 400px;
    margin-right: auto;
    margin-left: auto;
    font-size: 14px;
    line-height: 25px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: lighter;
    }


    #wrapper #bodyArea #securityproducticonarea {
    background-color: #FFFFFF;
    margin-top: 20px;
    border: 1px solid #000000;
    height: 880px;
    }
    #wrapper #bodyArea #securityproducticonarea #producticonright {
    float: right;
    width: 445px;
    margin-top: 10px;
    margin-right: 10px;
    border: 1px none #000000;
    }
    #wrapper #bodyArea #securityproducticonarea #producticonright #producticontwo {
    height: 106px;
    margin-bottom: 10px;
    border: 1px solid #000000;
    }


    #wrapper #bodyArea #securityproducticonarea #producticonleft {
    width: 447px;
    padding-top: 10px;
    padding-left: 10px;
    float: left;
    }
    #wrapper #bodyArea #securityproducticonarea #producticonleft #producticonone {
    height: 106px;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    margin-bottom: 10px;
    }
    #wrapper #bodyArea #securityproducticonarea #producticonleft #producticonone #producticononeintro {
    color: #FFFFFF;
    background-color: #999999;
    width: 200px;
    float: right;
    height: 40px;
    padding: 5px;
    border: 1px solid #000000;
    margin-top: 25px;
    margin-right: 10px;
    }





    #wrapper #toplane {
    height: 11px;
    background-color: #80A84F;
    }
    #wrapper #bodyArea #iconArea #right #businessicon {
    height: 106px;
    margin-top: 5px;
    background-image: none;
    border: 1px solid #000000;
    }
    #wrapper #bodyArea #introArea #introtitle {
    height: 30px;
    width: 400px;
    margin-top: 10px;
    margin-left: 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: bold;
    color: #538037;
    }
    #wrapper #bodyArea #introArea #intro {
    height: 50px;
    width: 635px;
    margin-left: 10px;
    margin-top: 5px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #466C2F;
    }

    #wrapper #bottomlane {
    height: 35px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    background-color: #80A84F;
    background-image: url(../img/texturemetalbottom2.jpg);
    background-repeat: no-repeat;
    }


    #wrapper #titleimage {
    height: 234px;
    background-image: url(../img/security-title.jpg);
    }
    #wrapper #lasergunupper {
    height: 4px;
    background-color: #271E1F;
    background-image: url(../img/gunparts.jpg);
    }
    #wrapper #bottomrail {
    background-image: url(../img/gunparts.jpg);
    height: 4px;
    margin-top: 20px;
    }

    #wrapper #bodyArea #studiopage #studionavagation {
    height: 130px;
    width: 400px;
    margin-right: auto;
    margin-left: auto;
    }
    #wrapper #bottomnavagation {
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    color: #274E01;
    font-size: 12px;
    font-weight: normal;
    margin-top: 20px;
    }

    #wrapper #bodyArea #studiopage #studionavagation #buttondesign {
    height: 113px;
    width: 75px;
    float: left;
    }
    #wrapper #bodyArea #studiopage #studionavagation #buttonportfolio {
    width: 84px;
    height: 113px;
    margin-left: 80px;
    float: left;
    }
    #wrapper #bodyArea #studiopage #studionavagation #buttoncontact {
    height: 113px;
    width: 85px;
    float: left;
    margin-left: 70px;
    }
    #wrapper #bodyArea #studioservice {
    margin-right: auto;
    margin-left: auto;
    background-color: #80A84F;
    padding-top: 30px;
    }
    #wrapper #bodyArea #studioservice #studioheader {
    height: 21px;
    width: 290px;
    margin-bottom: 30px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #FFFFFF;
    font-size: 18px;
    letter-spacing: -1pt;
    border: 1px solid #666666;
    padding: 10px;
    margin-top: 0px;
    background-color: #7F7F7F;
    }
    #wrapper #bodyArea #studioservice #visualthumbnails {
    width: 700px;
    height: 113px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 20px;
    }
    #wrapper #bodyArea #studioservice #sutdiowrap {
    height: 440px;
    width: 700px;
    margin-right: auto;
    margin-left: auto;
    }

    #wrapper #bodyArea #studioservice #visualthumbnails #visualtitle {
    float: left;
    height: 93px;
    width: 450px;
    margin-left: 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #FFFFFF;
    padding: 10px;
    border-top-width: medium;
    border-right-width: medium;
    border-bottom-width: medium;
    border-left-width: medium;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    border-right-color: #F1F1EF;
    border-bottom-color: #F1F1EF;
    border-left-color: #F1F1EF;
    }
    #wrapper #bodyArea #studioservice #visualandweb {
    width: 700px;
    height: 45px;
    margin-top: 10px;
    margin-right: auto;
    margin-left: auto;
    }

    #wrapper #bodyArea #studioservice #visualandweb #visualintro {
    height: 45px;
    width: 315px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #FFFFFF;
    float: left;
    }
    #wrapper #bodyArea #studioservice #visualandweb #webintro {
    float: left;
    height: 45px;
    width: 315px;
    margin-left: 50px;
    font-size: 11px;
    color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    }

    #wrapper #bodyArea #studioservice #visualthumbnails #webthumbnail {
    float: left;
    height: 113px;
    width: 200px;
    margin-left: 50px;
    }
    #wrapper #bodyArea #studioservice #visualthumbnails #webtitle {
    height: 113px;
    width: 120px;
    float: left;
    margin-left: 10px;
    font-family: Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    }

    #wrapper #bodyArea #studioservice #visualthumbnails #visualleft {
    height: 113px;
    width: 200px;
    float: left;
    }
    #wrapper #bodyArea #contactwarp {
    height: 400px;
    }
    #wrapper #bodyArea #contactwarp #details {
    height: 350px;
    width: 400px;
    background-color: #FFFFFF;
    border: 1px solid #000000;
    float: left;
    margin-left: 10px;
    padding: 20px;
    font-family: Arial, Helvetica, sans-serif;
    color: #274E01;
    font-size: 14px;
    }
    #wrapper #bodyArea #contactwarp #details #telephone {
    height: 138px;
    width: 200px;
    margin-left: 180px;
    background-image: url(../img/telephone.jpg);
    }

    #wrapper #bodyArea #contactwarp #mapwrap #map {
    height: 350px;
    width: 425px;
    border: 1px solid #000000;
    margin: 20px;
    }
    #wrapper #bodyArea #youtubewrap {
    height: 350px;
    }
    #wrapper #bodyArea #youtubewrap #youtube {
    height: 340px;
    width: 560px;
    border: 1px solid #000000;
    float: left;
    }
    #wrapper #bodyArea #youtubewrap #aboutus {
    width: 295px;
    height: 300px;
    border: 1px solid #000000;
    float: left;
    margin-left: 20px;
    background-color: #FFFFFF;
    padding: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #274E01;
    }



    #wrapper #bodyArea #contactwarp #mapwrap {
    width: 465px;
    height: 390px;
    background-color: #FFFFFF;
    border: 1px solid #000000;
    float: left;
    }
    a:link {
    color: #FFFFFF;
    text-decoration: none;
    }
    a:visited {
    text-decoration: none;
    color: #FFFFFF;
    }
    a:hover {
    text-decoration: none;
    color: #AAD9E8;
    }
    a:active {
    text-decoration: none;
    color: #FFFFFF;
    }
    #wrapper #bodyArea #studiotitle {
    height: 265px;
    background-color: #000000;

    }
    #wrapper #bodyArea #viusalidentityarea {
    height: 550px;
    background-color: #FFFFFF;
    background-image: url(../img/visualidentity-area.jpg);
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    }
    #wrapper #bodyArea #viusalidentityarea #visualidentity-intro {
    height: 280px;
    width: 250px;
    margin-top: 115px;
    margin-left: 400px;
    font-family: "Bradley Hand ITC";
    font-weight: bolder;
    font-size: 17px;

    }
    #wrapper #bodyArea #viusalidentityarea #visualidentity-intro #visualidentityintro-two {
    font-size: 24px;
    font-family: "Bradley Hand ITC";
    }




    #wrapper #bodyArea #studiotitle #studiointro {
    height: 250px;
    width: 440px;
    float: left;
    margin-top: 10px;
    margin-left: 45px;
    color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-align: left;
    }

    #wrapper #bodyArea #studioiconarea {
    background-color: #666666;
    height: 140px;
    background-image: url(../img/studioiconback6.jpg);
    border-top-width: thin;
    border-right-width: thin;
    border-bottom-width: thin;
    border-left-width: thin;
    border-top-style: ridge;
    border-bottom-style: groove;
    border-top-color: #CCCCCC;
    border-right-color: #CCCCCC;
    border-bottom-color: #CCCCCC;
    border-left-color: #CCCCCC;
    }
    #wrapper #bodyArea #studioicontitles {
    height: 50px;
    background-color: #000000;
    }
    #wrapper #bodyArea #studioicontitles #studioicontitle {
    width: 200px;
    margin-left: 23px;
    height: 30px;
    float: left;
    color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-align: center;
    font-size: 12px;
    padding-top: 5px;
    }
    #wrapper #bodyArea #studiotitle #studiointro #studiointrotitle {
    height: 50px;
    width: 252px;
    margin-top: 15px;
    }


    #wrapper #bodyArea #studioiconarea #studioicon {
    height: 113px;
    width: 200px;
    margin-top: 12px;
    float: left;
    margin-left: 20px;
    border: thin ridge #FFFFFF;
    }


    #wrapper #bodyArea #studiotitle #studiotitleimage {
    height: 256px;
    width: 350px;
    background-image: url(../img/studiotitleimage.jpg);
    margin-left: 50px;
    margin-top: 9px;
    float: left;
    }
    #wrapper #bodyArea #studiotitle #studiotitleimage #studiotitlevideo {
    height: 180px;
    width: 332px;
    padding-top: 15px;
    padding-left: 10px;
    }
    #wrapper #bodyArea #securityproducticonarea #scdetails {
    width: 500px;
    margin-right: auto;
    margin-left: auto;
    height: 700px;
    }

    #wrapper #bodyArea #securityproducticonarea #producticonright #producticontwo #producticontwointro {
    height: 35px;
    width: 200px;
    float: right;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: normal;
    padding: 5px;
    margin-top: 30px;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    border: 1px solid #333333;
    color: #FFFFFF;
    background-color: #999999;
    }
    #wrapper #bodyArea #viusalidentityarea #visual-identity-back {
    height: 80px;
    width: 120px;
    margin-left: 90px;
    }
    #wrapper #bodyArea #studio-dgs-background {
    height: 430px;
    background-image: url(../img/Studio-DGS-background.jpg);
    }
    #wrapper #bodyArea #studio-dgs-background #studio-dgs-background-textarea {
    height: 290px;
    width: 330px;
    margin-top: 130px;
    margin-left: 70px;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    }
    #wrapper #bodyArea #studio-dgs-samples {
    background-color: #2E2E2E;
    height: 150px;
    }
    #wrapper #bodyArea #studio-dgs-samples #studio-dgs-sample-a {
    height: 113px;
    width: 200px;
    float: left;
    margin-top: 15px;
    margin-right: 4px;
    margin-left: 20px;
    border: 1px ridge #FFFFFF;
    }
    #wrapper #bodyArea #studio-fx {
    height: 485px;
    background-image: url(../img/lechotheater.jpg);
    }
    #wrapper #bodyArea #studio-fx-samples {
    height: 140px;
    background-color: #000000;
    font-size: 5px;
    }
    #wrapper #bodyArea #studio-fx-samples #studio-fx-samples-icon {
    height: 113px;
    width: 200px;
    margin-left: 22px;
    float: left;
    border: 1px ridge #FFFFFF;
    }


    im very new to this, anyone can help?
     
    berettam92fs, Nov 29, 2009 IP
  10. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #10
    The CSS means nothing without the html. In any case, as I said above a year ago, Firefox is showing what you wrote while IE makes it up. Never, ever trust IE to do anything right. Get it working in FF first, then hack IE.
     
    drhowarddrfine, Nov 29, 2009 IP
  11. berettam92fs

    berettam92fs Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #11
    sorry there, i've just registered and i cant post live links yet. but the problem has just been solved, but thx anyway
     
    berettam92fs, Nov 29, 2009 IP