CFHutton
03-15-2006, 11:41 PM
I'm working on my first css positioned page (though I've used css for a while). It's really just a convert of an old page. anywho, the active state on my links seems like it does next to nothing in any browser but ie. Since I've sorta learned a lot of unrelated stuff in this process, I've tried to use some of it in my code, so I'm sure it will make any good css coders wretch. Nonetheless, here's my stylesheet:
body {
text-align: center;
padding: 0;
margin: 0;
background: rgb(51,51,51);
font-family: Verdana, Helvetica, Arial, sans-serif;
color: rgb(216,187,148);
}
#mainwrapper {
position: relative;
width: 80%;
}
#maindiv {
position: relative;
background: black;
border: 1px rgb(216,187,148) solid;
padding: 5px;
width: 770px;
height: 600px;
color: rgb(216,187,148)
font-style: italic;
font-variant: small-caps;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
}
#top {
position: absolute;
top: 8px;
left: 8px;
background: rgb(0,0,0) url(images/TopGraphic3black.jpg);
z-index: 1;
border: 0;
padding: 0;
width: 755px;
height: 140px;
}
#menu {
position: absolute;
background: url(images/menubackdrop.jpg) repeat-y;
top: 225px;
left: 40px;
font: 12px bold italic;
width: 175px;
height: 250px;
z-index: 4;
margin: 0;
padding: 0;
}
#menu ul {
position:relative;
list-style: none;
padding: 0;
margin: 0;
}
#menu li {
margin: 0;
padding: 0;
}
#menu li a {
display: block;
background-color: black;
color: rgb(216,187,148);
width: 125px;
height: 25px;
font-variant: small-caps;
text-decoration: none;
border: 1px solid rgb(61,61,61);
margin: 3px;
padding: 3px 0 0 0;
}
#menu li a:visited {
color: rgb(216,187,148);
}
#menu li a:hover {
background-color: rgb(216,187,148);
color: rgb(0,0,0);
}
#menu li a:active {
background: rgb(216,187,148);
color: black;
}
#linked {
position: absolute;
top: 165px;
left: 160px;
width: 590;
height: 400;
background: rgb(216,187,148);
background-image: url(images/jerpic.jpg);
background-position: center center;
background-repeat: no-repeat;
border: 2px rgb(61,61,61) ridge;
}
#copyright {
position: absolute;
left: 240px;
top: 570px;
font-size: 10px;
}
The page code is this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="description" content="Providing professional dental care in the , area"></meta>
<meta name="keywords" content="Dental, , nc"></meta>
<title>Dr. , D.D.S. PA</title>
<link rel="Shortcut Icon" href="xxx.ico"></link>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>
<div id="maindiv">
<div id="top">
</div>
<div style="position: absolute; text-align: left; top: 37px; left: 20px; z-index: 4; color: rgb(216,187,148); background: black; font-size: 12px; width=175px; height=60px; margin: 0; padding: 0;">
address<br>
address<br>
address</div>
<div id="menu">
<p></p>
<ul>
<li><a href="homeframe.htm" target="I1">Home</a></li>
<li><a href="staff.htm" target="I1">Our Staff</a></li>
<li><a href="general.htm" target="I1">General</a></li>
<li><a href="cosmetic.htm" target="I1">Cosmetic</a></li>
<li><a href="before.htm" target="I1">Before/After</a></li>
<li><a href="directions.htm" target="I1">Directions</a></li>
<li><a href="contact.htm" target="I1">Contact Us</a></li>
</ul>
</div>
<div id="linked">
<iframe name="I1" width="588" height="391" marginwidth="1" marginheight="1" frameborder="0" src="homeframe.htm">
Your browser does not support inline frames or is currently configured not to display inline frames.
</iframe></div>
<div id="copyright">Copyright © 2006 Dr. D.D.S. PA * All Rights Reserved.
</div>
</div>
</div>
</body>
</html>
Hope I did this right. Maybe there's a simple reason like active doesn't work in firefox/netscape/opera, but I've missed it apparently.
Also, I've seen people reference using the > property to send different code to older models of IE. Anyone give me a link to a good source to understand how to do that and why?
Any other critiques/tips greatly appreciated.
Thanks,
cfh
body {
text-align: center;
padding: 0;
margin: 0;
background: rgb(51,51,51);
font-family: Verdana, Helvetica, Arial, sans-serif;
color: rgb(216,187,148);
}
#mainwrapper {
position: relative;
width: 80%;
}
#maindiv {
position: relative;
background: black;
border: 1px rgb(216,187,148) solid;
padding: 5px;
width: 770px;
height: 600px;
color: rgb(216,187,148)
font-style: italic;
font-variant: small-caps;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
}
#top {
position: absolute;
top: 8px;
left: 8px;
background: rgb(0,0,0) url(images/TopGraphic3black.jpg);
z-index: 1;
border: 0;
padding: 0;
width: 755px;
height: 140px;
}
#menu {
position: absolute;
background: url(images/menubackdrop.jpg) repeat-y;
top: 225px;
left: 40px;
font: 12px bold italic;
width: 175px;
height: 250px;
z-index: 4;
margin: 0;
padding: 0;
}
#menu ul {
position:relative;
list-style: none;
padding: 0;
margin: 0;
}
#menu li {
margin: 0;
padding: 0;
}
#menu li a {
display: block;
background-color: black;
color: rgb(216,187,148);
width: 125px;
height: 25px;
font-variant: small-caps;
text-decoration: none;
border: 1px solid rgb(61,61,61);
margin: 3px;
padding: 3px 0 0 0;
}
#menu li a:visited {
color: rgb(216,187,148);
}
#menu li a:hover {
background-color: rgb(216,187,148);
color: rgb(0,0,0);
}
#menu li a:active {
background: rgb(216,187,148);
color: black;
}
#linked {
position: absolute;
top: 165px;
left: 160px;
width: 590;
height: 400;
background: rgb(216,187,148);
background-image: url(images/jerpic.jpg);
background-position: center center;
background-repeat: no-repeat;
border: 2px rgb(61,61,61) ridge;
}
#copyright {
position: absolute;
left: 240px;
top: 570px;
font-size: 10px;
}
The page code is this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="description" content="Providing professional dental care in the , area"></meta>
<meta name="keywords" content="Dental, , nc"></meta>
<title>Dr. , D.D.S. PA</title>
<link rel="Shortcut Icon" href="xxx.ico"></link>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>
<div id="maindiv">
<div id="top">
</div>
<div style="position: absolute; text-align: left; top: 37px; left: 20px; z-index: 4; color: rgb(216,187,148); background: black; font-size: 12px; width=175px; height=60px; margin: 0; padding: 0;">
address<br>
address<br>
address</div>
<div id="menu">
<p></p>
<ul>
<li><a href="homeframe.htm" target="I1">Home</a></li>
<li><a href="staff.htm" target="I1">Our Staff</a></li>
<li><a href="general.htm" target="I1">General</a></li>
<li><a href="cosmetic.htm" target="I1">Cosmetic</a></li>
<li><a href="before.htm" target="I1">Before/After</a></li>
<li><a href="directions.htm" target="I1">Directions</a></li>
<li><a href="contact.htm" target="I1">Contact Us</a></li>
</ul>
</div>
<div id="linked">
<iframe name="I1" width="588" height="391" marginwidth="1" marginheight="1" frameborder="0" src="homeframe.htm">
Your browser does not support inline frames or is currently configured not to display inline frames.
</iframe></div>
<div id="copyright">Copyright © 2006 Dr. D.D.S. PA * All Rights Reserved.
</div>
</div>
</div>
</body>
</html>
Hope I did this right. Maybe there's a simple reason like active doesn't work in firefox/netscape/opera, but I've missed it apparently.
Also, I've seen people reference using the > property to send different code to older models of IE. Anyone give me a link to a good source to understand how to do that and why?
Any other critiques/tips greatly appreciated.
Thanks,
cfh