3 replies [Last post]
JAGNikJen
JAGNikJen's picture
Offline
Regular
Fort Worth, TExas
Last seen: 14 years 5 days ago
Fort Worth, TExas
Joined: 2006-10-20
Posts: 33
Points: 0

Please help...

My nav links work in Firefox, but not in IE6. The crazy part is, there's a link in the main content area that works in either browser.

I've spent the better part of day Googling my issue to avail. So I thought I'd try a forum of CSS/HTML gurus, and from the quick responses I've seen after seemingly just from a glance at the html or css, I've come to the right place.

I've validated both the HTML and the CSS in W3C's validators and both passed. I have the correct doc type, as far as I can tell, based on my travels through the Internet today.

The URL is:
http://www.jagarchive.com/The%20New%20JAG%20Archive%20Files/index.htm

The CSS is below.

Just FYI: The only links that will actually go anywhere are: Web Master, Disclaimer, and More... links.

Any insight would be greatly appreciated.

Thanks,

Jen

/* CSS Document */

* {
margin: 0;
padding: 0;
}

body {
color: #C00;
background-color: #000;
font: 11px verdana, tahoma, arial, helvetica, sans-serif;
margin-bottom: 20px;
}

div#header {
background: url(Images/NewJAGHomeGraphic2006.png);
margin: 20px 0 0 20px;
height: 239px;
width: 700px;
}

div#main {
height: 100%;
min-height: 254px;
width: 470px;
margin: -250px 0 0 250px;
}

div#footer {
background: url(Images/NewJAGHomeGraphic2006Footer.png);
margin: 10px 0 20px 20px;
height: 42px;
width: 700px;
}

ul {
height: 100%;
width: 163px;
margin: 10px 0 0 20px;
padding-left: 20px;
line-height: 1.5em;
}

p {
line-height: 1.5em;
}

p.main {
color: #999;
background-color: #000;
margin-bottom: 10px;
width: 460px;
}

p.hide {
color: #000;
background-color: #000;
margin-bottom: 10px;
width: 460px;
}

a:link {
color: #FC0;
background-color: #000;
}

a:visited {
color: #C00;
background-color: #000;
}

a:hover {
color: #FC0;
background-color: #000;

}

a:active {
color: #999;
background-color: #000;
}

h3 {
font-family: papyrus, tahoma, verdana, arial, helvetica, sans-serif;
font-weight: bold;
background-color: #000;
color: #C00;
font-size: 1.5em;
margin-bottom: 5px;
width: 460px;
}

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

Add float: left to your menu

Add float: left to your menu and make the margin for #main margin: 0 0 0 250px. You don't need the height: 100% on either.

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

JAGNikJen
JAGNikJen's picture
Offline
Regular
Fort Worth, TExas
Last seen: 14 years 5 days ago
Fort Worth, TExas
Joined: 2006-10-20
Posts: 33
Points: 0

THANK YOU!

Tyssen,

I can't thank you enough. I did exactly as you instructed and it worked like a peach, even fixing another issue I was having.

Although, I'm scratching my head as to why adding the float makes the links work.

Thank you, thank you, thank you...

Jen

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

Without the float, #main was

Without the float, #main was actually overlapping your menu. Adding position: relative and a z-index to stack your menu above #main would've also worked but the way to have two block level elements side by side is to float one (or both).

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