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;
}
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.
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
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).