Page looks fine in FF, but is off in IE now! 1

rexolioISback · Sep 27, 2006

Sorry for back to back posts...

Well, I thought I had everything licked.

I've got the page looking exactly the way I want in Firefox, but there's a small gap in Internet Explorer that I cannot figure out.

Firefox (perfect!):

http://216.53.190.120/ff2.jpg

IE (small gap):

http://216.53.190.120/ie2.jpg

Here's the code:

Code:

<html>
<head>
<title>Home</title>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
}

HTML {
    height: 100%;
}

BODY {
    background-image: url('bg.gif');    
    background-color: #ffffff;
    font-family: "Verdana", "Tahoma", "Arial", "Helvetica", sans-serif;
    font-size: xx-small;
    color: #000;
    line-height: 13px;
    height: 100%
}

#wrapper {
    width: 975px;
    margin: 0 auto;
}

#cwrapper {
    width:    973px;
    height: 100%;
    margin: 0 auto;
    border-left: 1px solid gray;
    border-right: 1px solid gray;
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
    border-collapse: collapse;
    background-color: #fff;
    overflow: hidden;
}

#mainbox {
    background: #AA112D;
    width: 542px;
    height: 244px;
    float:left; 
    background-color:#AA112D
}

#promobox {
    width: 431px;
    height: 122px;
    background-color: #FCFAC1;
    float: right;
    margin: 0px;
}

#subpromobox {
    width: 295px;
    height: 122px;
    background-color: #E16D80;
    float: left;
}

#listsbox {
    width: 136px;
    height: 652px;
    background-color: #832B39;
    clear: right;
    float: right;
}

#listsbox p {
    margin: 0px 0px 0px 6px;
}

#subfeatures {
    width: 837px;
    height: 100%;
    clear: left;
    float: left;
}

#subsection1 {
    width: 255px;
    height: 151px;
    float: left;
}

#subdivVert1a {
    width: 1px;
    height: 151px;
    float: left;
    background-image: url(divider.gif); 
    background-repeat: repeat-y; 
}

#subsection2 {
    width: 286px;
    height: 151px;
    float: left;
}

#subdivVert1b {
    width: 1px;
    height: 151px;
    float: left;
    background-image: url(divider.gif); 
    background-repeat: repeat-y; 
}

#subdivHoriz1 {
    width: 542px;
    height: 1px;
    clear: left;
    float: left;
    background-image: url(divider.gif); 
    background-repeat: repeat-x; 
}

#subsection3 {
    width: 294px;
    height: 299px;
    float: left;
}

#subsection4 {
	width: 255px;
	height: 147px;
	float: left;
}

#subdivVert2a {
	width: 1px;
	height: 147px;
	float: left;
	background-image: url(divider.gif); 
	background-repeat: repeat-y; 
}

#subsection5 {
	width: 286px;
	height: 147px;
	float: left;
}

#subdivVert2b {
	width: 1px;
	height: 147px;
	float: left;
	background-image: url(divider.gif); 
	background-repeat: repeat-y; 
}

#subdivHoriz2 {
	width: 837px;
	height: 1px;
	clear: left;
	float: left;
	background-image: url(divider.gif); 
	background-repeat: repeat-x; 
}

</style>
</head>
<body>

<div id="wrapper">

    <div id="contentwrapper">
        <div id="mainbox">Main</div>
        <div id="promobox">Promo</div>
	<div id="listsbox"><p>List</p></div>
        <div id="subpromobox">SubPromo</div>
        
        <div id="subfeatures">
            <div id="subsection1">Section 1</div>
            <div id="subdivVert1a"></div>
            <div id="subsection2">Section 2</div>
            <div id="subdivVert1b"></div>
            <div id="subsection3">Section 3</div>
            <div id="subdivHoriz1"></div>
            <div id="subsection4">Section 4</div>
            <div id="subdivVert2a"></div>
            <div id="subsection5">Section 5</div>
            <div id="subdivVert2b"></div>
            <div id="subdivHoriz2"></div>           
        </div>
        
        
        
    </div>


</div>

</body>
</html>

Thanks in advance!

Vragabond · Sep 27, 2006

Although I cannot reproduce the same result (as demonstrated in the other thread) using your code and your pictures do not working at the moment, I think I know what is troubling you. IE in all its wisdom will always create enough space to fit some text into a division, regardless of the fact that division holds no text. Given that, the solution is simple. Just let IE know, that the text size in that box is somewhere around 0.

Code:

#subdivHoriz1 {
    width: 542px;
    height: 1px;
    clear: left;
    float: left;
    background: red url(divider.gif);
    background-repeat: repeat-x;
    [b]font-size: 0;[/b]
}

rexolioISback · Sep 28, 2006

Awesome - that did it, Vragabond! Thanks so much!!! I gave you a star!

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Page looks fine in FF, but is off in IE now! 1

rexolioISback

Programmer

Vragabond

Programmer

rexolioISback

Programmer

Similar threads

Part and Inventory Search

Sponsor