6 replies [Last post]
sarahsreading
Offline
newbie
Virginia Beach, VA
Last seen: 12 years 51 weeks ago
Virginia Beach, VA
Joined: 2008-02-05
Posts: 9
Points: 0

Hey everyone,

I've run into a problem with floating divs not displaying correctly in IE. I know, I know, you get this all the time. Smile The floating element (#left-image) is appearing correctly, but the element that appears beside it (#main-txt) is not...at least in IE. It is being shoved underneath the floated element instead of appearing to the right of it. In all browsers, it's working correctly.

I am not having any issues with my other floated element (#right-image) or the element that it is floating to the right of (#nav).

I've been researching for hours, and I keep seeing that the answer is to decrease the width of the div that is beside the floated div, but I've done this to no avail. The other answer I've found is to change all margins to 0, but I already have that covered.

Any other suggestions? If it helps, you can check out my working demo at http://www.todayshomemaker.com/mmlc.

Here is the HTML:

MorningStar Music Learning Center

MorningStar is a privately-owned music learning center focused on helping each student achieve their musical goals. We believe that every student has the capacity to learn and perform beautiful music regardless of his or her background. We also believe that learning the gift of music can not only be rewarding, but fun!

We employ enthusiastic instructors with a variety of styles and experiences - but most importantly, a passion for teaching. With flexible scheduling, performance opportunities, convienient location, and individualized curriculum we believe Morningstar to be the premier music learning center in the Tidewater area.

All content © 2008 MorningStar Music Learning Center.
Do not use without permission. Site design by S.Joy Studios

And here is the CSS:
/* CSS Document */

html, body, form, fieldset {
margin: 0;
padding: 0;
font: 100% georgia, verdana, arial, sans-serif;
}

h4, h5, h6, pre,
blockquote, ul, ol, dl, address {
margin: 0;
padding: 0;
}

h1, h2, h3 p {
margin: 1em, 0;
line-height: 1.1em;
}

li, dd, blockquote {
margin-left: 1em;
}

li {
padding-bottom: 5px;
}

form label {
cursor: pointer;
}
fieldset {
border: none;
}

input, select, textarea {
font-size: 100%;
}

h1 {
padding-bottom: .5em;
line-height: 1.2em;
}

#container {
width: 800px;
border: black solid thin;
background-color: white;
background-image: url(images/main-bg.gif);
background-repeat: no-repeat;
margin: 10px auto;
}

#logo {
width: 572px;
height: 93px;
margin: 10px auto;
background-image: url(images/logo-web.gif);
background-repeat: no-repeat;
padding: 5px;
}

#logo a .hotspot {
width: 572px;
height: 93px;
position: absolute;
}

#body-contain {
border: black solid thin;
width: 745px;
background-image: url(images/contentfill.gif);
margin: auto;
}

#nav {
padding-top: 7px;
padding-bottom: 7px;
}

#nav li {
list-style-type: none;
display: inline;
font-size: 1.2em;
font-weight: bold;
color: #CCCCCC;
}

#nav a, #nav a:link, #nav a:visited {
text-decoration: none;
color: #666666;
}

#nav a:hover {
text-decoration: none;
color: #333333;
}

#right-image {
float: right;
background-image: url(images/violin-trans.gif);
background-repeat: none;
width: 183px;
height: 400px;
}

#left-image {
background-image: url(images/main-pics.jpg);
background-repeat: none;
width: 126px;
height: 281px;
float: left;
margin-top: 25px;
margin-left: 15px;
}

#main-txt {
width: 350px;
height: 345px;
padding-top: 20px;
padding-left: 175px;
font-size: .95em;
line-height: 1.2em;
}

#main-txt-longer {
width: 500px;
padding-top: 20px;
padding-left: 175px;
padding-bottom: 20px;
font-size: .95em;
line-height: 1.2em;
}

#copy {
font-size: .8em;
margin: 15px auto;
width: 800px;
text-align: center;
}

.hidden {
position: absolute;
left: -9999px;
}

.blank-list {
margin-top: 35px;
font-size: 1.15em;
line-height: 1.3em;
list-style-type: none;
}

legend {
display: none;
}

hr {
width: 50%;
}

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 22 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

When you gave #main-text a

When you gave #main-text a width, it set hasLayout. That means it no longer slides under the float, but lies beside it—except there's not enough room, 350px width + 175px left padding.

Instead of width and padding, use margin-left: 175px, and margin-right: 200px. Delete the width.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

sarahsreading
Offline
newbie
Virginia Beach, VA
Last seen: 12 years 51 weeks ago
Virginia Beach, VA
Joined: 2008-02-05
Posts: 9
Points: 0

THANK YOU. That is

THANK YOU. That is absolutely beautiful. I've always wandered about the hasLayout property. This is the first time it has affected me (at least that I can tell). Guess that's what I'll be researching next. Smile Again, thank you, thank you, thank you!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 22 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

See

See http://www.satzansatz.de/cssd/onhavinglayout.html

That's the best documentation on hasLayout available to us—probably to IE developers, too. Smile

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 9 years 18 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Haslayout

Haslayout is one of the banes of the webmaster world. Esp with IE7. Thank ye gods it's gone in IE8...

Here's another Haslayout site, which I've used as a reference: http://haslayout.net/haslayout

Hey Gary I've tried using the bbCodes for wrapping urls around text but they remained visible instead.

[ url = "http://blah.... "] text [ /url ]
(spaces added cause bbCode might still disappear in here)

What am I doing wrong? Same code works elsewhere.

I'm no expert, but I fake one on teh Internets

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 4 days ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Stomme poes, don't use the

Stomme poes, don't use the quotes around the url

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 9 years 18 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Thanks Wolf!

Thanks Wolf!

I'm no expert, but I fake one on teh Internets