IE CSS Layout problem

April 22, 200917 yr

Hi

I'm having a problem getting an image at the bottom of my layout to line up in IE. Works fine in other browsers. Could someone have a look and see if they can help.

Heres the page online

here's the xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<link rel="stylesheet" type="text/css" href="reset.css" />
<link rel="stylesheet" type="text/css" href="nav.css" />
<link rel="stylesheet" type="text/css" href="main.css" />
<title>English Solved - English Tuition</title>
</head>

<body>

<div id="container">

<div id="head">
<h1>English Solved - English Tuition</h1></div>

<ul id="nav">
<li id="nav_home"><a href="#">Home</a></li>
<li id="nav_tuition"><a href="#">Tuition</a></li>
<li id="nav_resources"><a href="#">Resources</a></li>
<li id="nav_contact"><a href="#">Contact</a></li>
</ul>

<div id="content">
   <h2>English Tuition - Online & One to One </h2>
   <ul class="list1">
     <li>Tuition for all levels of English Study </li>
     <li>Qualified Tutor</li>
     <li>On location Tuition - Glasgow area</li>
     <li>Online tuition - Worldwide</li>
     <li>Competitive rates</li>
     <li>Programmes tailored for individual needs</li>
     <li>Adult learning - help with reading and writing</li>
     <li>EFL</li>
   </ul>
</div>
<div id="promo">
 <img src="images/stairs.jpg" width="320" height="300" />
</div>
<div id="footer">
<p>Home | Tuition | Resources | Contact </p>
</div>

</div>

</body>
</html>

and here's the css

body {
   background:url(images/bfade.png) repeat-x;
background-color:#EDF0FF;
font-family:"Trebuchet MS", Verdana, Arial, Helvetica;
font-size: 0.9em;
font-style: normal;
color:333333;
line-height: 1em;
text-align:center;
}

h1,h2,h3 {
   color: #0DA3DD;
padding:50px 0 22px 39px;
margin:0;
font-size:1.6em;
font-weight:600;
}

ul, li {margin-left: 0; padding-left: 0;}

.list1 {
   margin-left:55px;
font-size:1.1em;
line-height:2em;
}

#container {
   width:900px;
text-align:center;
margin:0 auto;
padding:0;
}

#head {
   margin: 0;
   padding: 0;
width:900px;
   height: 166px;
   background:url(images/head.png) no-repeat;
   text-indent: -9999px;
}

#content {
   width:580px;
min-height:467px;
height:auto;
text-align:left;
background:#fff;
margin:0;
padding:0;
float:left;
}

/* for Internet Explorer */
/*\*/
* html #content {
   height:467px;
}
/**/

#promo {
   width:320px;
height:auto;
background-color:#fff;
padding:167px 0 0 0;
float:left;
margin:0;
}

/* for Internet Explorer */
/*\*/
* html #promo {
   max-height:462px;
}
/**/

#footer {
   width:900px;
background:#EDF0FF url(images/botcur.png) no-repeat;
margin:0;
padding:0;
float:left;
}

#footer p {
   padding:35px 0 0 0;
   color:#666;
font-size:0.9em;
}

Cheers

April 22, 200917 yr

I can't view it in IE 6 sorry (maybe you could screenshot?) but first impressions is that you're suffering from IE's problem with two simultaneous floats.

As well as the "float: left" on #content and #promo, add "display: inline" to both.

April 22, 200917 yr

Actually, quickly thinking about it again, a better way would be to make the image a background of the container div, and set the "background-position" to bottom right.

That way, you're accounting for the different size of copy on the left. If you change the font-size of this copy atm your layout breaks.

April 22, 200917 yr

Hmmm, I dont have IE, so cannot be much of a help.

But, From reading your code...

I recomend, putting the div id=content and div id=promo inside a wrapper.

example:

<div id="content-wrap">
<div id="content">
<p>Content here</p>
</div>

<div id="promo">
<p>Content here</p>
</div>

</div> <!-- Close Content Wrap -->

then what you could also do, instead of adding loads of padding to the promo div, so the image is at the bottom,

just do this:

#content-wrap {
background: url(images/stairs.jpg) bottom center no-repeat;
}

If the divs inside content-wrap are floating dont forget to add a Clear fix to fix a Firefox bug.

Hope this works...

April 22, 200917 yr

Author

Hi Wes & Pedro

Thanks for the quick replies. Your 2nd post worked for IE but screwed up the rest, cheers for trying. Pedro your fix worked perfect here it is

thanks both of you, it's been driving me daft.

Cheers

David

April 22, 200917 yr

Cool, glad to help.

April 22, 200917 yr

Hi Wes & Pedro
Thanks for the quick replies. Your 2nd post worked for IE but screwed up the rest, cheers for trying. Pedro your fix worked perfect here it is

thanks both of you, it's been driving me daft.

Cheers

David

Good stuff! Pedro hit it on the head precisely.

April 22, 200917 yr

Author

I've added a contact form that uses divs and my layout is messed up, sorry to be a pain, could someone have a look.

Cheers

here's the code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<link rel="stylesheet" type="text/css" href="../reset.css" />
<link rel="stylesheet" type="text/css" href="../nav.css" />
<link rel="stylesheet" type="text/css" href="../main.css" />
<title>English Solved - English Tuition</title>
</head>

<body>

<div id="container">

<div id="head">
<h1>English Solved - English Tuition</h1></div>

<ul id="nav">
<li id="nav_home"><a href="../">Home</a></li>
<li id="nav_tuition"><a href="../tuition/">Tuition</a></li>
<li id="nav_resources"><a href="../resources/">Resources</a></li>
<li id="nav_contact"><a href="../contact/">Contact</a></li>
</ul>
<div id="wrap">   
<div id="contact">

<h1>Contact Us</h1>

<!-- Version: 1.22 - 27-Mar-2009 - contact.php -->
<!-- http://www.642weather.com/weather/scripts.php -->


<form action="index.php" id="contact_us" method="post">

	<input type="hidden" name="CID" value="1" />

	<div class="title">
			<label for="name">Full Name: </label>
	</div> 
	<div class="field">

			<input type="text" id="name" name="name" value="" size="40" />

	</div>
	<div class="title">
			<label for="email">E-Mail Address: </label>
	</div> 
	<div class="field">
			<input type="text" id="email" name="email" value="" size="40" />

	</div>	 <div class="title">

					<label for="subject">Subject: </label>
	</div> 
	<div class="field">
			<input type="text" id="subject" name="subject" value="" size="40" />
	</div>

	<div class="title">
			<label for="enquiry">Enquiry: </label>
	</div> 

	<div class="field">

			<textarea id="enquiry" name="text" cols="40" rows="6"></textarea>


	</div>

	<div class="title">
			<label for="code">Please enter the code below</label>
	</div>  
	<div class="field">
			<input id="code" name="code" type="text" />
	</div>

	<div style="width: 430px;  height: 55px; padding-left:41px;">
	 <img id="siimage" style="padding-right: 5px; border-style: none; float:left;"
	 src="../captcha-secureimage/securimage_show.php?sid=81454c386d096750ca0341a6a69f5aa6"
	 alt="CAPTCHA Image" title="CAPTCHA Image" />
	   <a href="../captcha-secureimage/securimage_play.php" title="Audible Version of CAPTCHA">
	 <img src="../captcha-secureimage/images/audio_icon.gif" alt="Audio Version"
	  style="border-style: none; vertical-align:top; border-style: none;" onclick="this.blur()" /></a><br />
	   <a href="#" title="Refresh Image" style="border-style: none"
	 onclick="document.getElementById('siimage').src = '../captcha-secureimage/securimage_show.php?sid=' + Math.random(); return false">
	 <img src="../captcha-secureimage/images/refresh.gif" alt="Reload Image"
	 style="border-style: none; vertical-align:bottom;" onclick="this.blur()" /></a>
	</div>
<p style="padding-left:41px">
	<input type="hidden" name="action" value="send" />

	<input type="submit" value="submit"/>
</p>
	<div class="thanks">
			Thanks for your enquiry
	</div>

</form>
</div>	</div>
<div id="promo">
</div>
</div>
<div style="clear:both;"> </div>

<div id="footer">
<p>Home | Tuition | Resources | Contact </p>
</div>

</div>

</body>
</html>

the css

body {
background:url(../images/bfade.png) repeat-x;
background-color:#EDF0FF;
font-family:Verdana, Arial, Helvetica;
font-size: 0.9em;
font-style: normal;
color:#333;
line-height: 1em;
text-align:center;
margin-top:20px;
}

h1,h2,h3 {
color: #333;
padding:45px 0 15px 39px;
margin:0;
font-size:1.6em;
line-height:1.6em;
font-weight:500;
}

ul, li {margin-left: 0; padding-left: 0;}

.list1 {
margin-left:55px;
font-size:1.1em;
line-height:2em;
}

#container {
width:900px;
text-align:center;
margin:0 auto;
padding:0;
}

#head {
margin: 0;
padding: 0;
width:900px;
height: 166px;
background:url(../images/head.png) no-repeat;
text-indent: -9999px;
}

#wrap {
min-height:467px;
height:auto;
background:url(../images/stairs.jpg) bottom right no-repeat;
background-color:#fff;
clear:both;
}

/* for Internet Explorer */
/*\*/
* html #wrap {
height:467px;
}
/**/

#content {
width:580px;
min-height:467px;
height:auto;
text-align:left;
background:#fff;
margin:0;
padding:0;
float:left;
}

/* for Internet Explorer */
/*\*/
* html #content {
height:467px;
}
/**/

#contact {
width:580px;
min-height:467px;
height:auto;
text-align:left;
background:#fff;
margin:0;
padding:0;
float:left;
}

#contact img {
border: 0px;
}

#contact .errors {
color: #ff0000;
}

#contact .correct {
color: black;
}

.title, .field, .thanks {
padding:5px 0 2px 41px

}

/* for Internet Explorer */
/*\*/
* html #contact {
height:467px;
}
/**/

#promo {
width:320px;
height:auto;
padding:0;
float:left;
margin:0;
}

/* for Internet Explorer */
/*\*/
* html #promo {
max-height:462px;
}
/**/

#footer {
width:900px;
background:#EDF0FF url(../images/botcur.png) top no-repeat;
margin:0;
padding:0;
}

#footer p {
margin:0;
padding:35px 0 0 0;
color:#666;
font-size:0.9em;
}

April 22, 200917 yr

Your footer div is not inside the Container div...

April 23, 200917 yr

Author

Hi again

I've got this page displaying correct in IE but not working for firefox etc. Could anyone have another look plz!

Sorry for my css being a bit messy, i'll need to clean it up once i get the page working.

Cheers

code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<link rel="stylesheet" type="text/css" href="../reset.css" />
<link rel="stylesheet" type="text/css" href="../nav.css" />
<link rel="stylesheet" type="text/css" href="../main.css" />
<title>English Solved - English Tuition</title>
</head>

<body>

<div id="container">

<div id="head">
<h1>English Solved - English Tuition</h1></div>

<ul id="nav">
<li id="nav_home"><a href="../">Home</a></li>
<li id="nav_tuition"><a href="../tuition/">Tuition</a></li>
<li id="nav_resources"><a href="../resources/">Resources</a></li>
<li id="nav_contact"><a href="../contact/">Contact</a></li>
</ul>  
<div id="contact">

<h2>Contact Us</h2>

<!-- Version: 1.22 - 27-Mar-2009 - contact.php -->

<!-- http://www.642weather.com/weather/scripts.php -->


<form action="index.php" id="contact_us" method="post">

	<input type="hidden" name="CID" value="1" />

	<div class="title">
			<label for="name">Full Name: </label>
	</div> 
	<div class="field">
			<input type="text" id="name" name="name" value="" size="40" />


	</div>
	<div class="title">
			<label for="email">E-Mail Address: </label>
	</div> 
	<div class="field">
			<input type="text" id="email" name="email" value="" size="40" />

	</div>	 <div class="title">
					<label for="subject">Subject: </label>

	</div> 
	<div class="field">
			<input type="text" id="subject" name="subject" value="" size="40" />
	</div>

	<div class="title">
			<label for="enquiry">Enquiry: </label>
	</div> 

	<div class="field">
			<textarea id="enquiry" name="text" cols="40" rows="6"></textarea>



	</div>

	<div class="title">
			<label for="code">Please enter the code below</label>
	</div>  
	<div class="field">
			<input id="code" name="code" type="text" />
	</div>

	<div style="width: 430px;  height: 55px; padding-left:41px;">

	 <img id="siimage" style="padding-right: 5px; border-style: none; float:left;"
	 src="../captcha-secureimage/securimage_show.php?sid=15ceb3dbe7f7a1c54f023a286b936a90"
	 alt="CAPTCHA Image" title="CAPTCHA Image" />
	   <a href="../captcha-secureimage/securimage_play.php" title="Audible Version of CAPTCHA">
	 <img src="../captcha-secureimage/images/audio_icon.gif" alt="Audio Version"
	  style="border-style: none; vertical-align:top; border-style: none;" onclick="this.blur()" /></a><br />
	   <a href="#" title="Refresh Image" style="border-style: none"
	 onclick="document.getElementById('siimage').src = '../captcha-secureimage/securimage_show.php?sid=' + Math.random(); return false">
	 <img src="../captcha-secureimage/images/refresh.gif" alt="Reload Image"
	 style="border-style: none; vertical-align:bottom;" onclick="this.blur()" /></a>
	</div>
<p style="padding-left:41px">
	<input type="hidden" name="action" value="send" />
	<input type="submit" value="submit"/>

</p>
	<div class="thanks">
			Thanks for your enquiry
	</div>

</form>
</div></div>


<div id="footer">
<p><a href="../">Home</a> | <a href="../tuition/">Tuition</a> | <a href="../resources/">Resources</a> | <a href="../contact/">Contact</a> | <a href="../terms/">Terms</a><br />

Website designed by <a href="http://www.myspace.com/davidmcnee" target="_blank">David McNee</a><br />
© 2009 English Solved<br />
<a href="http://validator.w3.org/check?uri=referer">xhtml</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">css</a></p>
</div>
<div style="clear:both;"> </div>
</div>

</body>

</html>

css

body {
background:url(../images/bfade.png) repeat-x;
background-color:#EDF0FF;
font-family:Verdana, Arial, Helvetica;
font-size: 0.9em;
font-style: normal;
color:#333;
line-height: 1em;
text-align:center;
margin-top:20px;
}

h1,h2,h3 {
color: #006B97;
padding:38px 0 8px 39px;
margin:0;
font-size:1.6em;
line-height:1.6em;
font-weight:bold;
}

p {
padding:0 0 15px 45px;
font-size:1.1em;
line-height:2em;
}

ul, li {margin-left: 0; padding-left: 0;}

.list1 {
margin-left:58px;
font-size:1.1em;
line-height:2em;
font-weight:normal;
}

.list2 {
margin-left:35px;
font-size:1.1em;
line-height:1.6em;
font-weight:normal;
}

#container {
width:900px;
text-align:center;
margin:0 auto;
padding:0;
}

#head {
margin: 0;
padding: 0;
width:900px;
height: 166px;
background:url(../images/head.png) no-repeat;
text-indent: -9999px;
}

#wrap {
min-height:467px;
height:auto;
background:url(../images/stairs.jpg) bottom right no-repeat;
background-color:#fff;
clear:both;
}

/* for Internet Explorer */
/*\*/
* html #wrap {
height:467px;
}
/**/

#wrapshop {
height:1000px;
height:auto;
background:url(../images/stairs.jpg) bottom right no-repeat;
background-color:#fff;
clear:both;
}

#wrapcontact {
min-height:467px;
height:auto;
background:url(../images/stairs.jpg) bottom right no-repeat;
background-color:#fff;
clear:both;
}

#content {
width:580px;
min-height:467px;
height:auto;
text-align:left;
background:#fff;
margin:0;
padding:0;
float:left;
}

/* for Internet Explorer */
/*\*/
* html #content {
height:467px;
}
/**/

#shop {
width:900px;
height:1000px;
height:auto;
text-align:left;
background:#fff;
margin:0;
padding:0;
float:left;
}

#contact {
width:900px;
text-align:left;
margin:0;
padding:0;
float:left;
background:url(../images/stairs.jpg) bottom right no-repeat;
background-color:#fff;
}

#contact img {
border: 0px;
}

#contact .errors {
color: #ff0000;
}

#contact .correct {
color: black;
}

.title, .field, .thanks {
padding:5px 0 2px 41px

}

/* for Internet Explorer */
/*\*/
* html #contact {
height:467px;
}
/**/

#promo {
width:320px;
height:auto;
padding:0;
float:left;
margin:0;
}

/* for Internet Explorer */
/*\*/
* html #promo {
height:467px;
}
/**/

#footer {
width:900px;
background:#EDF0FF url(../images/botcur.png) top no-repeat;
margin:0;
padding:0;
}

#footer p {
margin:0;
padding:35px 0 0 0;
color:#666;
font-size:0.9em;
line-height:1.6em;
}

#footershop {
width:900px;
background:#EDF0FF url(../images/botcur1.png) top no-repeat;
margin:0;
padding:0;
}

#footershop p {
margin:0;
padding:35px 0 0 0;
color:#666;
font-size:0.9em;
line-height:1.6em;
}

April 23, 200917 yr

The error I get when I click your link in firefox is that the footer is located up the top left of the window.

To fix add the following to your #footer styles

clear:both;
margin: 0 auto;

April 23, 200917 yr

Author

thanks so much Wes. Been going round in circles! That worked a treat.

April 23, 200917 yr

thanks so much Wes. Been going round in circles! That worked a treat.

np mate

IE CSS Layout problem

Featured Replies

Create an account or sign in to comment

Recently Browsing 0

Member Statistics

Forum Statistics

Join WDF

Account

Navigation

Search

Configure browser push notifications

Chrome (Android)

Chrome (Desktop)

Safari (iOS 16.4+)

Safari (macOS)

Edge (Android)

Edge (Desktop)

Firefox (Android)

Firefox (Desktop)