MSIE Displays 3 col page incorrectly-some info falls under one column

**SydneyGO** · 09-11-2007, 08:32 AM

I'm a relatively new designer; using templates and PVII etc - I have a site where all sub pages seem to display fine, except the home page; which takes all the content from the left column including the navigation and shoves it over to display under the far right column. I can't determine where i have the problem; can someone help me?
Here's the code for the home page (the site is www.homebirthexperience.com)

<!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>
<SCRIPT TYPE="text/javascript">

</SCRIPT>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description"Content="HomeBirth Experience - Where Families Begin. Kellie Moeller, CNM President of HomeBirth Experience Welcomes You and Your Family"><meta name="keywords"Content="Home Birth, Doula, Midwife, Kellie Moeller, Pat Jones, B.I.R.T.H., Birth, Water Birth, Birth Center, Obstetric, Gynecological, Houston, Woman's Work, Rice Village, http://www.footholdservices.com, Cynthia Schultz">
<title>HomeBirth Experience, Inc.</title>
<link href="p7ap/p7ap_06.css" rel="stylesheet" type="text/css" media="all" />
<link href="p7dejavu/p7dj02.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="p7ap/p7APscripts.js"></script>

<style type="text/css">

</style>
</head>

<body>
<div id="">
<h5 align="center" class="style17"><span class="style18">Kellie Moeller Certified Nurse Midwife <span class="style19">I</span> 713.529.5131</span></h5>
<div id="tagline">
<div align="center" class="style10"></div>
</div>
</div>
<div id="wrapper">
<div id="layoutcrown"> </div>
<div id="leftcolumn">
<div class="content">
<p align="center">Kellie Moeller<img src="kelliehomepagepic.jpg" alt="Kellie Moeller Photo" width="111" height="124" border="2" /></p>
<p align="left" class="note style6">A sample of <em><strong>HomeBirth Experience's</strong></em> Beautiful Birth Stories<br />
Shelby's Birth...<a href="HomeBirth Experience Testimonials.html#Shelby" onclick="return popup(this,'homebirthexperiencetestimonials')"><em >more</em></a><br />
Fisher's Birth...<a href="HomeBirth Experience Testimonials.html#Fisher" onclick="return popup(this,'homebirthexperiencetestimonials')"><em >more</em></a></p>
<p class="note">Are you a new client? Click <a href="file:///Macintosh HD/Users/Foothold/Sites/Docs/hbenewclpkt.pdf" target="_blank">here</a> to download and print the New Client Packet to bring to your first appointment. </p>
<p align="center"><span class="style15">Kellie Moeller Certified Nurse Midwife <br />
—<br />
2401 Rice Blvd. Houston, Texas 77005<br />
713.529.5131 </span><br />
<strong><a href="mailto:info@homebirthexperience.com">email</a></strong></p>
<p align="center" class="content"><strong>News and Events</strong></p>
<ul><li><a href="http://www.boldhouston.com" target="_blank">"Birth" a play by Karen Brody</a> - Showing August & September</li><li><a href="http://www.houbirth.org" target="_blank"> B.I.R.T.H Fair</a> - Because everything begins at Birth!</li></ul>
<p align="justify" class="note"><strong>Homebirth:</strong><a href="Docs/Homebirth is safe.pdf" target="_blank">Is it safe?</a><br />
Read about the largest home birth study on births attended by Certified Professional Midwives, published in the British Medical Journal. It found home birth is safe for low risk women and involves far fewer interventions than similar births in hospitals.</span></p>
</div>
</div>
<div id="midcolumn">
<div class="content">
<p align="center"><img src="hbelogordthbnl.png" alt="HomeBirth Experience Logo" width="115" height="101" /></p>
<p align="justify" class="style22"><strong>Kellie Moeller, Certified Nurse Midwife and President of <em>HomeBirth Experience, Inc. </em> welcomes you and invites you to enjoy the HomeBirth Experience website, it was created with you in mind. We look forward to answering your questions about your pregnancy, your baby's birth and the exciting journey you're taking! </strong></p>
<p align="justify" class="style22">When a birth is at home, it becomes the intimate, private, natural process it's meant to be.</p>
<p align="left" class="style22">Birth as a medical process in a medical facility creates little privacy or family decision making and takes away many choices families later wish they had the freedom to make.</p>
<p align="justify" class="style22">With <em><strong>HomeBirth Experience</strong></em>, mothers move around, change positions and describe their birth experience as less painful and less stressful. In fact, they say it is the <em><strong>Family Event</strong></em> it should be.</p>
<p align="justify" class="style22">Kellie's birth parents are encouraged to educate themselves about pregnancy and birth so they will make well-informed choices and decisions throughout pregnancy and birth.</p>
<p align="justify" class="style22"><strong>We provide Obstetric and Gynecological Healthcare.</strong> <strong>Whether your birth takes place at your home or a birth center, <em><strong>HomeBirth Experience</strong></em> will be with you every step of the way.</strong></p>
<p align="center"><em><a href="Services & Resources.html">What you can expect:<br />
Prenatal Care with HomeBirth Experience</a></em></p>
</div>
</div>
<div id="rightcolumn">
<div id="p7ABW1" class="p7AB">
<div class="p7ABtrig">
<h3><a href="javascript:;" id="p7ABt1_1">HomeBirth Experience</a></h3>
</div>
<div id="p7ABw1_1">
<div id="p7ABc1_1" class="p7ABcontent">
<ul class="menulist"><li><a href="index.html">Home</a></li><li><a href="Services & Resources.html">Services & Resources </a></li><li><a href="About & Contact.html">About & Contact</a></li></ul>
</div>
</div>
<div class="p7ABtrig">
<h3><a href="javascript:;" id="p7ABt1_2">HomeBirth - <span class="style3">What You Need to Know</span></a></h3>
</div>
<div id="p7ABw1_2">
<div id="p7ABc1_2" class="p7ABcontent">
<ul><li><a href="file:///Macintosh HD/Users/Foothold/Sites/Docs/choose.pdf" target="_blank">Freedom to Choose </a></li><li><a href="file:///Macintosh HD/Users/Foothold/Sites/Docs/responsibility.pdf" target="_blank">Where to Start </a></li><li><a href="file:///Macintosh HD/Users/Foothold/Sites/Docs/hbenewclpkt.pdf" target="_blank">New Client Packet</a></li></ul>
</div>
</div>
<div class="p7ABtrig">
<h3><a href="javascript:;" id="p7ABt1_3">Contact Us </a></h3>
</div>
<div id="p7ABw1_3">
<div id="p7ABc1_3" class="p7ABcontent">
<p>We're located at Woman's Work in the Rice Village:</p>
<p><span class="style5">2401 Rice Blvd.<br />
</span><span class="style5">Houston, Texas 77005</span></p>
<p><span class="style4"><span class="style5">Office</span>:<br />
<span class="style6">713.529.5131</span><br />
<span class="style5">e mail:<br />
<span class="style6">info@homebirthexperience.com</span></span></span></p>
<p> </p>
</div>
</div>
<script type="text/javascript">

</script>
</div>
<h4 class="grayed">did you know...</h4>
<div class="content" id="cancel_background">
<p align="justify" class="note"><span class="style6"><strong>HomeBirth Experience Inc.</strong>: is where women and their families can find answers. HomeBirth Experience brings the safe natural experience of HomeBirth back to the family where it belongs.</span></p>

</div>
</div>
<div id="layoutbottom"> </div>
</div>
<div id="footerbox">
<div id="footer">
<p>© 2007 HomeBirth Experience all rights reserved I Site brought to you by <a href="http://www.footholdservices.com" target="_blank">Foothold Services</a> </p>
</div>
</div>
</body>
</html>

**ADAM Web Design** · 09-11-2007, 10:53 AM

Hey Cindy!

It doesn't seem to be doing it in IE7. Is this an IE6-specific issue?

At any rate, it sounds like what's called float drop. Float drop is when you have three columns that, as a collective, are too wide for their containing area. You'll have to go into your CSS and adjust any margins/padding on your three columns until you see them line up all nice and pretty.

**SydneyGO** · 09-17-2007, 12:38 AM

Quote:

Originally Posted by ADAM Web Design

Hey Cindy!

It doesn't seem to be doing it in IE7. Is this an IE6-specific issue?

At any rate, it sounds like what's called float drop. Float drop is when you have three columns that, as a collective, are too wide for their containing area. You'll have to go into your CSS and adjust any margins/padding on your three columns until you see them line up all nice and pretty.

Adam-thank you-so far i have added a 'fix' that seems to look good when i view the site in browser cam. (I use firefox, safari) but when the site owner looks at it she still sees the content outside of the left column some. I'm pretty sure she uses ie 6-so it confuses me that she sees it differently than the browser cam site captures it as...am i crazy or is there something i'm missing. (I am missing a lot, but think you know what i mean)

**maxxximus** · 05:09 AM

Cindy you've a bad case of float-drop.

Poor box model compliance in IE6 is main cause. Try applying a -1px margin to the dropping container and position:relative.

#rightcolumn {
float: right;
width: 215px;
font-size: .75em;
display:inline;
margin-left: -1px;
position:relative;
}

Should do the trick

Edited to add you can check how it looks in IE6 with netrenderer http://ipinfo.info/netrenderer/

**sumrtym** · 12:19 AM

Ok, I want to bring this back up to the top, as I have the same problem on a page I'm designing. The person who originally posted this problem seems to have never solved it, and the suggestion posted by maxxximus does not work.

What I find interesting, in using the netrendorer in the previous post, is that while the original posters website does not display correctly in IE6, the original projectseven deja vu site with 3 columns and menu on the left, DOES DISPLAY CORRECTLY in IE6 through netrendorer! These two sites use the exact same CSS I believe, so WHAT is making the difference?

As I said, I'm working a site of the same type, and have the EXACT same problem. I already double-checked the CSS stylesheets, and they are exactly identical. I can't for the life of me figure out what is causing the problem (and as I said, it looks like the original poster never did either.

In looking at how IE6 renders www.homebirthexperience.com, the line on the left of the center column is being covered by the background image, and it appears the entire internal center column contents are shifted slightly left. On a test of IE6 on my site, I see this to on not only my CENTER column, but also my RIGHT HAND column, and to a slightly greater extent than her page. I believe that this is starting to cut at the heart of whatever is occurring...I'm just not smart enough to figure it out / solve it. Again, I don't see any significant difference in the html code, the CSS are the same, and uploading a copy of the original projectseven page to my site and testing in IE6 shows it appears correct using MY SAME CSS.

**scutari** · 05-15-2008, 07:44 PM

Well you can be sure your website worked fine with ff3. I just tried

**LadynRed** · 05-15-2008, 08:10 PM

That link is dead.. so I can't even look at what's going on .

**sumrtym** · 05-16-2008, 12:23 AM

Quote:

Originally Posted by LadynRed

That link is dead.. so I can't even look at what's going on .

My fault, I typed it wrong...fixed it now.

Well, I suspect that her problem was the same as mine. Apparently, I had some text slightly too large in my right column, and while it works in IE 7 and firefox, it through fits to IE 6 and threw the menu to the bottom right instead of top left.

Anyway, fixed mine, although I still have a single column page with the problem. Every time I add a numbered list, it somehow goes past the column dimensions (even though the column is the full width of the page and shouldn't cause a problem). On that one, since nothing really breaks other than shifting the column slightly off, I'm leaving it alone. Messing with the actual formatting of the text just made it harder for everyone NOT using IE6 to read it.

**wayfarer07** · 05-17-2008, 10:36 AM

IE6 is like a sickly, claustrophobic child. It needs lots of fresh air and room to breath or it chokes.