Menu
Hello, I am having a problem with my alpha filters. I know they’re IE proprietary, but I also have Moz Opacity, so I’m hoping that should be good enough. Anyway, here’s the CSS:
[code]h1 {
color: #fff;
font-family: arial;
margin: 0;
padding: 0;
}
h1.btitle {
background: url(“images/circles.png”) top left no-repeat;
min-height: 31px;
margin: 0;
padding: 0 0 0 45px;
}
p {
font-family: times;
color: #fff;
padding: 0;
margin: 10px 0;
}
body {
background: #1f4f6f;
margin: 0;
padding: 0;
}
img {
display: block;
}
a {
color: #c00;
text-decoration: none;
}
a:hover {
color: #f00;
text-decoration: none;
}
div#page {
background: #069 url(“images/bk.png”) top right no-repeat;
border: 1px solid #000;
border-top: 0;
width: 700px;
padding: 0;
margin: 0 auto;
}
div#title {
height: 150px;
width: 700px;
margin: 0;
padding: 0;
}
div#nav {
border: 1px solid #000;
border-right: 0;
border-left: 0;
height: 1.5em;
width: 700px;
font-family: arial, times, sans;
}
div#nav ul {
background: #000;[color=red]
-moz-opacity: 0.35;
filter: alpha(opacity=35);[/color]
height: 1.5em;
margin: 0;
padding: 0;
}
div#nav ul li {
display: block;
float: left;
list-style-type: none;
text-align: center;
width: 100px;
height: 1.5em;
line-height: 1.5em;
color: #ff0;
margin: 0;
padding: 0;
}
div#nav ul li a {
display: block;
color: #69c;
font-weight: bold;
text-decoration: none;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
div#nav ul li a:hover {
color: #fff;
}
div#content {
width: 680px !important;
width: 700px;
background: #069;[color=red]
-moz-opacity: 0.75;
filter: alpha(opacity=50);[/color]
color: #fff;
padding: 10px;
margin: 0;
}
div#footer {
width: 700px;
height: 5px;
padding: 0;
margin: 0;
clear: both;
background-color: #036;
}
And the HTML:
[code]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<meta http-equiv=”content-style-type” content=”text/css” />
<meta http-equiv=”content-type” content=”application/xhtml+xml; charset=iso-8859-1″ />
<meta http-equiv=”content-script-type” content=”text/javascript” />
<meta http-equiv=”imagetoolbar” content=”no” />
<meta name=”robots” content=”all” />
<meta name=”copyright” content=”Copyright 2004 Daniel Tomasiewicz” />
<meta name=”author” content=”Daniel Tomasiewicz” />
<meta name=”description” content=”Daniel Tomasiewicz’s personal Website and blog. Come check out my personal website and see what’s new in my world.” />
<meta name=”keywords” content=”xhtml, css, design, web, layout, standards, biography, Daniel, Tomasiewicz, blog” />
<meta name=”rating” content=”general” />
<meta name=”revisit-after” content=”5 days” />
<meta name=”doc-class” content=”living document” />
<link rel=”stylesheet” type=”text/css” media=”screen” href=”styles.css” />
<title>Untitled Document</title>
</head>
<body>
<div id=”page”>
<div id=”title”></div>
<div id=”nav”>
<ul>
<li><a href=”index.php” title=”Home” accesskey=”h”>Home</a></li>
<li><a href=”blog.php” title=”Blog Archives” accesskey=”b”>Blog</a></li>
<li><a href=”about.php” title=”About” accesskey=”a”>About</a></li>
<li><a href=”bio.php” title=”Biography” accesskey=”i”>Biography</a></li>
<li><a href=”profile.php” title=”My Profile” accesskey=”p”>Profile</a></li>
<li><a href=”contact.php” title=”Contact” accesskey=”c”>Contact</a></li>
<li><a href=”links.php” title=”Links” accesskey=”l”>Links</a></li>
</ul>
</div>
<div id=”content”>
<h1 class=”btitle”>Blog header</h1>
<p>Blog entry<br />Blog entry<br />Blog entry<br />Blog entry<br />Blog entry<br />Blog entry<br />Blog entry<br />Blog entry<br />Blog entry<br />Blog entry<br /></p>
</div>
</div>
</body>
</html>
The opacity works fine in Gecko browers, but not IE. Can someone tell me what I’ve missed? Thanx,
-Dan