2 replies [Last post]
kmac
Offline
newbie
Last seen: 15 years 49 weeks ago
Timezone: GMT-8
Joined: 2006-02-19
Posts: 2
Points: 0

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. Smile So, I would really appreciate all the help I can get .....in newbie terms, please. Smile

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

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

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

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

kmac
Offline
newbie
Last seen: 15 years 49 weeks ago
Timezone: GMT-8
Joined: 2006-02-19
Posts: 2
Points: 0

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!