In Internet Explorer 7 part of the content doesn't display at all

HTML & CSS
1

I have tested my client’s website in Internet Explorer 7, and the part of the content didn’t display at all. Also the Map heading only displays partially, in Internet Explorer 7. Please see this image to get an idea of what I am talking about: http://i41.tinypic.com/2jb2sme.jpg. Could someone please help me fix this? Thanks in advance.

Here is the html:

<div id="contentWrapper">
		<div class="headings">
			<div class="contentLeft">
<h2>Facilities</h2>
<div class="row">
<ul>
<li>5 Artesian Thermal Pools on site for guests to use (1 cold pool during summer months)</li>
<li>New spacious 1 &amp; 2 bedroom villas</li>
<li>Basic Ensuite Cabins</li>
<li>Tennis Court</li>
<li>Kiosk (Meals available daily)</li>
</ul>
<p><a title="Read more about our facilities" href="#">Read more…</a></p>
</div>
</div>
<div class="contentMiddle">
<h2>Attractions</h2>
<div class="row">
<h3>Public Transport</h3>
<p>Local bus service picks up 3 times per day at the entrances of the park.</p>
<p>Is accessible by train and coach travel and we are happy to provide transfers to/from the local station terminal.</p>
<p><a title="Read more about our attractions" href="#">Read more…</a></p>
</div>
</div>
<div class="contentRight">
<h2>Map</h2>
<div class="row"><a href="#" rel="lightbox"><img class="alignnone size-full wp-image-26" title="Map small" src="http://domainname.com/website/wp-content/uploads/2011/10/map-small.jpg" alt="Map small" width="220" height="167" /></a></div>
<p>&nbsp;</p>
</div>
			<noscript>It appears that your web browser does not support JavaScript, or you have disabled scripting. If you have Javascript enabled in your browser, you will be able to view our slideshow. Please enable Javascript in your browser.</noscript>
		</div>
</div>

Here is the css:

#contentWrapper {
	width: 100%;
	overflow: hidden;
	margin-top: 10px;
	color: #025c90;
	margin-bottom: 1em;
}

#contentWrapper p {
	margin-bottom: 1em;	
}

#contentWrapper a {
	color: #025C90;
	text-decoration: underline;	
}

#contentWrapper a:visited {
	color: #A9D0E6;
	text-decoration: none;	
}

#contentWrapper a:hover {
	text-decoration: underline;
}
2

Some how the css didn’t display the my post. So here it is again:


#contentWrapper {
	width: 100%;
	overflow: hidden;
	margin-top: 10px;
	color: #025c90;
	margin-bottom: 1em;
}

#contentWrapper p {
	margin-bottom: 1em;	
}

#contentWrapper a {
	color: #025C90;
	text-decoration: underline;	
}

#contentWrapper a:visited {
	color: #A9D0E6;
	text-decoration: none;	
}

#contentWrapper a:hover {
	text-decoration: underline;
}

.headings {
	background: url('images/titlebar.gif') no-repeat;
	width: 850px;
	height: 40px;
}

h2 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 22px;
	float: left;
	width: 30%;
}

#textWrapper {
	width: 100%;
	overflow: hidden;
}

.contentLeft {
	float: left;
	width: 30%; /* 283px */
	margin-left: 10px;
	margin-top: 10px;
	margin-right: 25px;
}

.contentLeft ul {
	margin-left: 30px;
	margin-right: 10px;
	margin-bottom: 1em;
}

.contentLeft li {
	list-style: disc;
}

.contentMiddle {
	float: left;
	width: 30%;
	margin-top: 10px;
	_margin-right: 5px;
}

h3 {
	font-weight: bold;
	font-size: 12px;
}

.contentRight {
	float: right;
	width: 30%;
	margin-top: 10px;
	line-height: 0.8em;
}

.contentRight p {
	background: url('images/click-to-enlarge.gif') no-repeat;
	width: 220px;
	height: 24px;
}

.row {
	width: 283px;
	margin-top: 3em;
}
3

75 views and still no answer, surely someone knows the solution to the problem by now.

4

Ensure that anywhere you have a <p>, <h1,2,3,4,5,6>, <span>, <div> etc… that it has a line-height with at least a 2px greater height then the font size as IE7 doesn’t automatically understand font sizes unlike in IE8 and modern browsers.

5

Posting a link will increase your chances of a reply.

The 40px fixed height on .headings looks a good candidate for content concealment.

6

You can see the problem in the image he supplied, like i explained in my previous post he needs to set line heights as IE7 doesn’t respect the font size automatically.

7

If you follow the link to the site the OP supplied in a previous thread, and view in IE7, you’ll see that the child divs of .headings are hidden by the fixed height.

8

You’re both right :slight_smile:

Remove the height from .headings and then increase the line-height in contentRight to 22px (at least).

9

Thanks guys for replying. I did remove the height from .headings and increased the line-height in .contentRight. I haven’t tested it in Internet Explorer 7 as yet, because now the titlebar.gif from .headings is missing. Could someone please tell me how I can bring titlebar.gif back?

10

I have another problem with the same website. The problem is a gap between .mainMenu and #slider/#welcome. I have decided to add the website to this reply, so here it is: http://gwydircarapark.com.au/website/.

Here is my css:


#mainWrapper {	
	overflow: hidden;
	display: block;
	width: 850px;
	height: 432px;
	margin-bottom: 1em;
}

#mainWrapper img {
	display: block;
	vertical-align: top;
}

.mainMenu {
	list-style: none;
	background: url('images/navbar.gif') no-repeat;
	width: 850px;
	height: 36px;
	padding-top: 4px;
}

.mainMenu li {
	display: inline;
}

.mainMenu a, .mainMenu a:visited {
	color: #FFF;
	text-decoration: none;
	margin-left: 20px;
}

.mainMenu a:hover {
	color: #FFF;
	text-decoration: underline;
	margin-left: 20px;
}

#slider {
	float: left;
	width: 558px;
	background: #719fba;
}

#welcome {
	float: right;
	width: 292px;
	color: #FFF;
	background: #265B8E;
	padding-top: 25px;
	line-height: 27px;
	margin-bottom: 1em;
	vertical-align: top;
}

#welcome p {
	margin-bottom: 1em;
	padding-left: 12px;
	margin-top: 16px;
	font-size: 14px;
	margin-right: 6px;
}

h1 {
	padding-left: 12px;
	font-size: 32px;
	font-family: Georgia, "Times New Roman", Times, serif;
}

Here is my html:

<div id="mainWrapper">
	<div class="mainMenu">Main menu goes here</div>

<div id="slider">
	Slideshow is here
</div>

<div id="welcome">
	<h1>Welcome</h1>
	<p>Welcome text goes here</p>
</div>
</div>
11

On your mainMenu class change the height from 36 to 32

12

Thanks SgtLegend that fixed the gap. I just have to solve the other problem now, which was mentioned earlier in this post.

13

The .headings class background-repeat is set to no-repeat, simply change it to repeat-x and it will show up fine again.

14

Thanks for that SgtLegend, but unfortunately your suggestion didn’t work. Could you please suggest something else?

15

Because .headings contains only floated elements, it collapses. To allow it to clear the floats, give it overflow:auto;

16

You haven’t cleared the floats. Add overflow:hidden to .headings.


.headings {
    background: url("images/titlebar.gif") repeat-x  0 0;
    overflow: hidden;
    width: 850px;
}
17

Wonderful that worked. Thank you Victorinox.

18

Thanks Paul, I have read what you said and have changed my code.

19

Now .contentRight appears down the page in Internet Explorer 6, not where it is supposed to be.

20

Its probably the ie6 double margin bug on contentLeft. Add display:inline to cure it (see css faq on floats).


.contentLeft {display:inline}

If that doesn’t fix then check your measurements of the three floats and make sure they all fit. Remember that percentages usually get rounded up in IE6 and therefore can be too big to fit.