Forum Moderators: not2easy
I've been working very dilligently for the last few hours trying to figure out what could possibly be going wrong. Since it's for my own personal website (a Movable Type blog) there's really no great importance or anything, just that since I am (relatively) new to CSS I would love to know the quirks that IE will pass over and that Mozilla and Safari will go nuts over.
Here's the deal: I have one large div (#outer) centered on the page. Then there is a header (#hdr) that goes all the way across the div. Next is a large div (#content) that houses a left block and a right block (#leftside, #rightside), which both have content-type things in them. The last is a footer (#ftr), and after that the original large div is closed. Make sense? Probably not.
Anyway, the problem that I'm having is that the #content div just disappears. The left and right ones remain, but the formatting and the image is just gone, and the #ftr div comes all the way up to the #hdr. You know the score, it looks fine in IE, but not Mozilla and Safari, blah blah blah. :)
I could paste the code for you, if that helps.
______________________
#outer {
width: 700px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 0px;
text-align: left;
border-width: 0px;
border-style: solid;
border-color: #030;
}
body {
margin: 0px;
font-family: arial, sans-serif;
font-size: 12px;
color: #FFF;
background: #595959;
text-align: center;
padding: 0;
}
A{ color:#99CCFF; text-decoration:none; }
A:link{ color:#0000CO; text-decoration:none; }
A:visited{ color:#0000CO; text-decoration:none; }
A:active{ color:#0000CO; }
A:hover{ color:#FFFFFF; }
h1, h2, h3 {
margin: 0px;
padding: 0px;
}
#hdr {
background-image: url(images/1_01.jpg);
width: 700px;
height: 178px;
top: 0px;
color: #333333;
}
#content {
background-image: url(images/1_02.jpg);
background-repeat: no-repeat;
background-color: #000;
margin: 0px;
padding: 0px;
border-top: 2px solid;
border-left: 2px solid;
border-right: 2px solid;
border-bottom: 2px solid;
border-color: #FFF;
width: 696px;
}
#leftside {
float: left;
width: 456px;
border-right: 0px dashed;
}
#rightside {
float: right;
width: 235px;
border-left: 1px dashed;
border-color: #FFF;
padding-left: 4px;
}
#ftr {
width: 700px;
height: 107px;
background-image: url(images/1_03.jpg)
}
__________________
Please let me know if you need to see the HTML, or something else... also, if anyone wants to just look at my whole establishment and tell me what's wrong with it, I would welcome that, too. :)
Thanks in advance.
Is #content totally gone or is it just being covered by the left and right side div's? Are #leftside and #rightside nested within #content?
And welcome to the joys of css positioning :-)
The floats are taking their parent as the body and not the content div (until changes in css). The ftr div runs up "under" everything for similar reason. The div relationships change considerably depending on the "position" each is given. Also divs without explicit height will shrink to nothing (except in IE).
Possible solution is changes in following:
CSS:
#content {
position: absolute;
top: 178px;
width: 696px;
background: #000 url(images/1_02.jpg) no-repeat;
margin: 0;
padding: 0;
border: 2px #fff solid;
}
#ftr {
float: left;
width: 700px;
height: 107px;
margin: 2px 0 0 -2px;
border-top: 2px #fff solid;
background-image: url(images/1_03.jpg);
}
Include ftr div inside content div:
HTML:
<div id="outer">
<div id="hdr">
</div>
<div id="content">
<div id="leftside">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque adipiscing erat a lectus. Nunc tincidunt metus sit amet purus. Proin eget massa. Phasellus vel dui a tellus convallis bibendum. Vivamus hendrerit. Proin iaculis odio vitae massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque consectetuer varius urna. Sed a velit. Aliquam diam. Phasellus vel pede. Praesent pharetra urna rhoncus massa. Integer leo diam, semper sed, sagittis et, suscipit id, erat. Curabitur varius vehicula felis. Sed sit amet lorem id ligula porta luctus. Quisque vulputate lobortis massa. Maecenas nibh mi, vestibulum vel, aliquet id, varius vel, nulla. Phasellus nonummy, nulla id ullamcorper congue, urna sapien viverra massa, quis molestie justo sem at erat.
</div>
<div id="rightside">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque adipiscing erat a lectus. Nunc tincidunt metus sit amet purus. Proin eget massa. Phasellus vel dui a tellus convallis bibendum. Vivamus hendrerit. Proin iaculis odio vitae massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque consectetuer varius urna. Sed a velit. Aliquam diam. Phasellus vel pede. Praesent pharetra urna rhoncus massa. Integer leo diam, semper sed, sagittis et, suscipit id, erat. Curabitur varius vehicula felis. Sed sit amet lorem id ligula porta luctus. Quisque vulputate lobortis massa. Maecenas nibh mi, vestibulum vel, aliquet id, varius vel, nulla. Phasellus nonummy, nulla id ullamcorper congue, urna sapien viverra massa, quis molestie justo sem at erat.
</div>
<div id="ftr">
</div>
</div>
</div>
There remain some minor appearance differences between browsers but at least it displays reasonably appropriately.
Hope it points in right direction anyway.
That was so... easy. :) I can't believe I didn't try it... But I guess that's what comes when you learn something new :)
Again, I can't thank you enough. Everyone here was so nice, I just might stick around and try to learn more :)
MUCH LOVE -- Eienko <3
