Div height is different in IE/Firefox

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!

 

Found a solution:

#boxJarig {
float: left;
margin: 15px 0px 0px 0px;
padding: 0px;
border: 0px;
width: 613px;
}
* html #boxJarig {
margin-bottom: -22px;/*or -21px*/
}

 

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.

 

Have you tried using XHTML Strict instead of transitional?

 

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.

 

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

 

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.

 

Firefox will always show what you wrote. IE makes it up as you go along. Always, always use Firefox as your reference browser.

 

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?

 

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.

 

sorry there, i've just registered and i cant post live links yet. but the problem has just been solved, but thx anyway