Hi
I am new to this forum and very new to CSS. I am a real novice, trying to learn from forums like this, online tutorials, and my trusty book. So, I would really appreciate all the help I can get .....in newbie terms, please.
My problems are with this page: http://homepage.mac.com/kmacardoza/Genealogy/practice.html
I made a 3 column plus footer towards the bottom of this page. I have checked it in Safari, Firefox. and IE for Mac OSX, and in Firefox and IE in Windows. The columns appear correctly in all but IE6 for Windows. In that browser, the left column travels over to be on top of the center column. How can I correct this? The CSS for it in my external sheet is this:
#left {
position:absolute;
padding:0;
width:13em;
height:300px;
color:#000;
background:#B0C4DE;
border:0;}
#footer {
position:relative;
margin-right:1em;
margin-left:0;
color:#4682b4;
background:#B0C4DE;
border:0;
padding:10px;
height:70px;
text-align:center;}
.midcontent
{
margin-left:13.5em;
margin-right:13.5em;
margin-bottom:20px;
height: 300px;
color:#333;
background:#fff;
border: 0;
padding:0;}
#right {
position:absolute;
padding:0;
right: 0;
margin-right: 3em;
width:13em;
height:300px;
color:#333;
background:#B0C4DE;
border:0;}
My other, less important, problem, but one I would like to correct, is at the top of this page. Only in Macs IE5, the vertical navigation bar extends the background colors into the image. The CSS for that is:
ul#navigation
{
margin-left: 0;
padding-left: 0;
list-style-type: none; }
ul#navigation a
{
display: block;
text-decoration: none;
background: #00008b;
color: #fff;
padding: .2em .5em;
border-bottom: 1em solid #fff;
width: 12em; }
ul#navigation a:hover
{background: #FFF;
color: #00008B;
}
ul#navigation li
{display: inline;}
img#mainlogo
{float: right;
margin-right:20%;
margin-top: 20;
}
div.content {/* style grouping for content divs */
margin: 2.5em 3%;
font: 1em;
padding: 1.5em;
}
I apologize for the long post, but I thought I'd ask both questions at one time. I have read about the clear property, but, frankly, it confuses me and I don't know where it should go. Any help would be so appreciated!
Thanks,
Kathy
3 Column problem with IE
This is a case of when not to use absolute positioning.
You're better off using floats instead. Even though your whole layout isn't in three columns, you may find something on here to help you out: http://css-discuss.incutio.com/?page=ThreeColumnLayouts
Re: 3 Column problem with IE
Thanks very much! The sites you referenced were a help to me. Now, the page is correct in all web browsers I have tested except IE for Mac X. I'll keep working on it.
Thanks again!