Forum Moderators: not2easy
I am working on checking my website with the built in tools with Adobe's Dreamweaver CS3 and I am having four issues that I can not seem to resolve. Two of these issues I am sure I can solve with some more research on my own, but since I am writing a post about the other two I might as well ask about theses as well.
The first two issues are dealing with the css for the slimbox. These issues are dealing with unsupported value, and four unsupported properties. I have posted a question on the developers forum of Slimbox as well, but I figured someone else might have a solution here as well. Here is the error messages I am getting, followed by the css code where the error comes from:
Error Messages
Unsupported value: 'fixed'
4X - Unsupported property: outline
CSS for Unsupported Valve
#lbOverlay {
position: fixed;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #000;
cursor: pointer;
}
CSS for Unsupported Properties
#lbPrevLink, #lbNextLink {
display: block;
position: absolute;
top: 0;
width: 50%;
outline: none;
}
#lbCloseLink {
display: block;
float: right;
width: 66px;
height: 22px;
background: transparent url(../Images/Slimbox/closelabel.gif) no-repeat center;
margin: 5px 0;
outline: none;
}
The other two issues are dealing with the Expanding Box Problem, and the Doubled Float Margin Bug. I have tested my website in IE6, IE7, and Firefox 3 and they all seem to be displaying properly, but I would still like to resolve these issues. I have tried playing with different combination's, but most of these seem to create more errors. On a side note the div layout is similar to another page that I have created that has reported no errors as well.The only different between then is that ContentMain div below is divided into 3 smaller divs. I can post that layout upon request.
HTML
<!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 Element Text]</title>
<!-- CSS -->
<link href="CSS/screen.css" rel="stylesheet" type="text/css" media="screen" />
<link href="CSS/slimbox.css" rel="stylesheet" type="text/css" media="screen" />
<!-- Javascripts -->
<script type="text/javascript" src="Scripts/mootools.js"></script>
<script type="text/javascript" src="Scripts/slimbox.js"></script>
<script type="text/javascript" src="Scripts/imagerollover.js"></script>
<script type="text/javascript" src="Scripts/imageswap.js"></script>
<script type="text/javascript" src="Scripts/imageswapper.js"></script>
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="contentMain">
<h1>3d Works</h1>
<div class="Worksthumbnail">
<a href ="GermanMaglev.html"><img src="Images/IMenu/GermanMaglev_IMenu.jpg" alt="" width="216" height="144"/></a>
<a href ="GermanMaglev.html"><span>German Maglev - WIP</span></a>
</div>
<!-- There are 5 more of these div classes Worksthumbnails -->
</div>
<div id="footersubcontainer">
<div id="footerlogo">
</div>
<div id="footernav">
<!-- Nav is here -->
</div>
</div>
</div>
</body>
</html>
CSS
body{
margin:5px;
padding:5px;
background-color:#E8E8E8;
font-family: Arial, Helvetica, sans-serif;
font-size:8pt;
}
#container{
width:800px;
height:600px;
margin-left: auto;
margin-right: auto;
}
#header{
width:800px;
height:89px;
float:left;
background-image:url(../Images/Backgrounds/Header.gif);
/*background-color:#0000FF;*/
}
#contentMain{
width:800px;
height:425px;
float:left;
background-image:url(../Images/Backgrounds/Full_Content.gif);
}
#footersubcontainer{
width:800px;
height:86px;
float:left;
}
#footerlogo{
width:159px;
height:86px;
float:left;
background-image:url(../Images/Backgrounds/Logo.gif);
/*background-color:#FFFF00;*/
}
#footernav{
width:641px;
height:86px;
float:right;
background-image:url(../Images/Backgrounds/Nav.gif);
/*background-color:#663366;*/
}
.Worksthumbnail img{
width:216px;
height:144px;
}
.Worksthumbnail{
text-decoration:none;
float:left;
margin: 10px 19px 10px 19px;
}
.Worksthumbnail span{
display: block;
text-align: center;
}
Thanks in Advance
Josh
[edited by: tedster at 12:03 am (utc) on Feb. 20, 2009]
[edit reason] remove specifics from code [/edit]
In resolved the second two issues. The Expanding Box Problem was solved by adding this piece of code:"display: inline;." And for the Doubled Float Margin Bug the code is:"overflow:scroll;"
Thanks
Josh
