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. 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
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.
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%;
}
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
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. Again, thank you, thank you, thank you!
See
See http://www.satzansatz.de/cssd/onhavinglayout.html
That's the best documentation on hasLayout available to us—probably to IE developers, too.
cheers,
gary
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.
Stomme poes, don't use the
Stomme poes, don't use the quotes around the url
Thanks Wolf!
Thanks Wolf!