CODEWITHSUNDEEP
htmlcssinternet-explorer-7
user979331
user979331

Reputation: 11861

CSS / HTML IE 7 problems

I am having trouble getting something working in IE 7, works fine in all other browsers, but if you take a look at http://jamessuske.com/thornwood2/ in IE 7 you will notice two gaps inbetween the topCotent and the contentArea and the other gap between contentArea and contentBottom.

No idea on how to fix this.

HTML CODE

<div class="topContent">
<img src="images/top.gif" width="1009" height="37" border="0" />
</div><!--topContent-->

<div class="leftContent">
<img src="images/leftSide.gif" width="48" height="494" border="0" />
</div><!--leftContent-->

<div class="contentArea">

</div><!--contentArea-->

<div class="rightContent">
<img src="images/rightSide.gif" width="49" height="494" border="0" />
</div><!--rightContent-->

<div class="bottomContent">
<img src="images/bottom.gif" width="1009" height="39" border="0" />
</div><!--bottomContent-->

CSS CODE

.topContent{
width:1009px;
}

.leftContent{
float:left;
}

.contentArea{
background:#FFF;
width:912px;
min-height:494px;
float:left;
}

.rightContent{
float:right;
}

.bottomContent{
width:1009px;
}

Upvotes: 0

Views: 95

Answers (2)

sdleihssirhc
sdleihssirhc

Reputation: 42496

The <img> element is an inline element. That means that it has a vertical-align property that, by default, is set to bottom. For some reason, this causes problems when you just have an <img> contained by a block-level element (like a <div>).

That's where your gaps are coming from: For some reason, IE adds a little bit of space to the bottom of the <div> elements that contain those images. (It's also doing this to your .bottomContent element; that's just harder to notice/not as big a deal.)

The fix is as simple as this:

.topContent img, .leftContent img, .contentArea img, .rightContent img {
    display:block
}

(If, for whatever reason, you don't like/can't declare display:block, you could go with vertical-align:top instead.)

Upvotes: 1

Bala
Bala

Reputation: 691

Add height to the classes as shown below which will fix ur issue for IE7

.topContent{
  width:1009px;
  *height:37px;
}

.leftContent{
  float:left;
  *height:494px;
}


.rightContent{
  float:right;
  *height:494px;
}

Upvotes: 1

Related Questions