|
Answer» Hi,
I've been creating a mini design for a web-page as a side task.
I'm always strict on standards COMPLIANCE, but it has to render correctly in all browsers - personal preference I guess.
I created this page (sorry if there are any errors in compliance, I review when I'm done, after I'm done getting the design and functionality), but the links aren't working.
I ran it through the validator and it's supposedly VALID. The reason I'm wondering is because it renders correctly in IE, Firefox, Safari, etc.
Links only work in IE however, which from what I know hasn't always been the best browser for standards compliance. This is why I'm wondering whether it's something with my code? I checked the reference and all attributes that I used are allowed.
All links don't seem to be working. I put one in the main part of the page to see and it's not working either.
The main part is the menu. I can't get it to pop out. And when it does, the mouseout isn't quite working the way I want it to, but that's probably my fault. It only works in IE.
Here's the HTML page:
Code: [Select]<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<link rel="stylesheet" href="main.css" type="text/css" />
<script type="text/javascript" src="main.js"></script>
</head>
<body onload="hideMenu()">
<div id="container">
<div id="header">
Welcome to the Test Webpage
</div>
<div id="menu">
<a href="javascript:void()" onmouseover="showMenu()" class="menuopener">>>></a>
<div id="MenuDiv">
<div id="MenuContainer" onmouseout="hideMenu()">
<a href="index.html" class="menuitem">Home</a>
<a href="index.html" class="menuitem">Trevor</a>
</div>
</div>
</div>
<div id="container2">
<div id="content">
TEST
</div>
<div id="footer">
<p>&copy; 2010 Trevor Profitt</p>
</div>
</div>
</div>
</body>
</html>
and here's the stylesheet:
Code: [Select]body {
background-color:#006600;
text-align:center;
margin-top:5px;
}
/*Container Div*/
div#container {
width:750px;
margin:0px auto auto auto;
margin-top:0px;
text-align:left;
background-color:#006600;
position:RELATIVE;
z-index:-1;
}
/*Content DIVs*/
div#header {
background-color:#FFFFAA;
padding-left:10px;
padding-right:10px;
padding-bottom:10px;
font-size:2em;
color:#006600;
}
div#menu {
position:fixed;
background-color:#FFFFAA;
width:40px;
color:#006600;
text-align:left;
}
div#MenuDiv {
position:absolute;
top:0px;
left:0px;
border-style:solid;
border-color:#006600;
border-left-style:none;
border-bottom-style:none;
background-color:#FFFFAA;
color:#006600;
text-align:left;
}
div#menucontainer {
position:relative;
width:100%;
height:100%;
background-color:#FFFFAA;
color:#006600;
text-align:left;
}
div#container2 {
background-color:#FFFFAA;
position:relative;
left:40px;
top:-10px;
width:687px;
}
div#content {
background-color:#FFFFAA;
padding-left:10px;
padding-right:10px;
border-top-style:solid;
border-left-style:solid;
border-color:#006600;
border-width:3px;
min-height:400px;
width:687px;
color:#006600;
}
div#footer {
background-color:#FFFFAA;
padding-left:10px;
padding-right:10px;
width:687px;
border-top-style:dashed;
border-left-style:solid;
border-color:#006600;
border-width:3px;
color:#006600;
height:3em;
font-style:italic;
}
/*Menu Styles*/
a.menuitem {
display:inline-block;
border-bottom-style:solid;
border-color:#006600;
width:167px;
height:20px;
vertical-align:middle;
text-align:center;
color:#006600;
}
a.menuitem:visited {
color:#006600;
}
.menuopener {
display:inline-block;
border-top-style:solid;
width:40px;
border-color:#006600;
background-color:#FFFFAA;
color:#006600;
text-align:center;
text-decoration:none;
}
.menuopener:hover {
color:#99FF00;
}
Sorry if some of the styles aren't used, it was taken from another project and I haven't stripped out the unessecary styles.
I see two hyperlinks in your code. They are:
Home[/URL]
Trevor[/url]
Both of them simply link to the home page, i.e. to index.html. What, exactly, do you want to happen?Sorry, soybean
I'm still testing. I put two hyperlinks simply to test the layout of the menu. The page isn't in use (it may never be), it's simply a layout that I will develop further. It's just in testing stages right now.
I figured out what was causing the hyperlinks to not work. The z-index of the container div was set to -1 which prevented the links from being clicked. I changed it to 0 and it solved the problem.
|
