Basically I've got some CSS to make a menu on the right of the page, beside each item is a block (just for decoration), and when it is hovered over, changes color. Anyhow, whats going on is that only in IE, all the links on my page once visited, take the attribute from the menu.
Here is my CSS:
Code:
body {
font: 80%/1.5 Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
text-align: center;
background: #000000;
margin: 0;
padding: 0px;
}
a:link {
color: #c2d4f8;
text-decoration:none;
}
h1 {
border-left: 18px solid #500A0A;
border-right: 5px solid #500A0A;
padding-left: 1em;
font-size: 1em;
width: 50px;
margin: 20px 0 20px 0;
}
h2 {
border-left: 15px solid #500A0A;
border-right: 4px solid #500A0A;
padding-left: 1em;
font-size: 1em;
width: 50px;
margin: 20px 0 20px 0;
}
h3 {
border-left: 10px solid #500A0A;
border-right: 2px solid #500A0A;
padding-left: 1em;
font-size: 1em;
width: 50px;
margin: 20px 0 20px 0;
}
h4 {
border-left: 6px solid #560C09;
padding-left: 1em;
font-size: 1em;
width: 40px;
margin: 20px 0 20px 0;
}
ul {
margin: 10px;
padding: 0;
list-style: none;
}
ul li {
padding: 0 0 0 17px;
margin: 0 170px 5px 0;
background: url(../i/gm_ulbul.gif) no-repeat;
line-height: 1.3em;
text-align: justify;
}
#wrapit {
width: 600px;
margin: 0px auto;
padding: 0;
background: url(../i/gm_wrapbg.jpg) no-repeat bottom;
}
#header {
margin: 0;
padding: 0;
height: 235px;
background: url(../i/gm_heading.jpg) no-repeat;
}
#nav ul {
margin: 0;
padding: 0;
}
#nav li {
margin: 0 0 10px 0;
padding: 0;
list-style-type: none;
background: none;
}
#nav a, a:visited {
border-left: 10px solid #500A0A;
padding: 4px 4px 4px 14px;
font-size: 11px;
font-weight: bold;
color: #500A0A;
display: block;
background: transparent;
width: 100px;
text-decoration: none;
}
#nav a:hover {
border-left: 10px solid #C2D4F8;
color: #C2D4F8;
}
#contentwrap {
width: 500px;
margin: 0 auto;
text-align: left;
padding: 0 0 30px 0;
background: transparent;
}
#left {
width: 350px;
padding: 0;
margin: 0;
float: left;
}
#left p {
text-align: justify;
}
#nav {
width: 120px;
padding: 0;
margin: 0;
float: right;
}
#footer {
clear: both;
padding: 10px 0 40px 0;
margin: 0 20px 0 20px;
text-align: left;
border-top: 1px solid #560C09;
font-size: 80%;
}
And my little menu thing:
Code:
<div id="nav">
<h3>Menu</h3>
<ul>
<li><a href="index.htm">Home</a></li>
<li><a href="about.htm">About</a></li>
<li><a href="#">Cars</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div></div>
|