I have a site uploaded in both transitional and strict doctypes.
There is a "spacing" issue with the strict doctype in Firefox and I can't figure out what it is. The picture's description (alternate text) is not covering up the original text.
It works fine in IE(6) both ways. I realize I'm probably just getting lucky with IE and there is an actual problem.
transitional
strict
Please note: it is a very slow test server. Even though the file size is small, unless the dynamic gallery javascript loads you won't see the problem.
The CSS:
Code:
body {
background-color:#000000;
}
#main {
width: 950px;
text-align: left;
position: absolute;
top: 0px;
left: 50%;
margin-left: -475px;
height:490px;
}
#flashcontent {
background: url(images/noflash_image.gif) no-repeat;
float:left;
width:950px;
height:150px;
position: absolute;
top: 0px;
left: 50%;
margin-left: -475px;
text-align:right;
color:#06C;
}
/* ----- nav ----- */
#nav {
width:950px;
height:25px;
position: absolute;
top:150px;
margin:0 auto;
clear:both;
text-align:center;
}
#nav ul, #nav li {
display:inline;
list-style-type:none;
}
#nav a {
line-height:25px;
overflow:hidden;
vertical-align: text-bottom;
float:left;
width:190px;
height:25px;
background:url(images/button.gif) 0 0 no-repeat;
text-decoration:none;
font-size: 16px;
color:#00FF33;
}
#nav a:hover {
line-height:30px;
overflow:hidden;
vertical-align: text-bottom;
background-position:0 -25px;
color:#CCCCCC;
}
#left {
float:left;
width:250px;
background:#000000;
height:100%;
text-align: left;
color:#0066CC;
position: absolute;
top: 175px;
left: 50%;
margin-left: -475px;
border-top:1px solid #00FF33;
border-left:1px solid #00FF33;
border-bottom:1px solid #00FF33;
}
#middle {
float:left;
width:298px;
background:#000000;
height:100%;
text-align: left;
color:#0066CC;
position: absolute;
top: 175px;
left: 50%;
margin-left: -225px;
border-top:1px solid #00FF33;
border-right:1px solid #00FF33;
border-bottom:1px solid #00FF33;
}
#left p, #middle p {
padding:3px;
}
#thumbs {
width:400px;
top:-48px;
float:left;
text-align: left;
position: absolute;
top: 505px;
left: 50%;
margin-left: 74px;
border-right:1px solid #00FF33;
padding-bottom:5px;
}
#thumbs div {
margin:2px;
margin-left:3px;
width:92px;
height:69px;
float:left;
border-top:1px solid #333;
border-left:1px solid #333;
border-bottom:1px solid #999;
border-right:1px solid #999;
display:inline;
}
#thumbs div img {
border:none;
display:block;
margin:0px auto;
}
#footer {
clear:both;
background:#000000;
width:950px;
position: absolute;
top: 660px;
left: 50%;
margin-left: -475px;
border-top:1px solid #00FF33;
}
#filler {
background-image:url(images/main_pic.gif);
background-repeat:no-repeat;
background-position:top center;
border-bottom:1px solid #00FF33;
border-top:1px solid #00FF33;
border-right:1px solid #00FF33;
width:400px;
float:left;
height:300px;
text-align:center;
position: absolute;
top: 175px;
left: 50%;
margin-left: 74px;
}
#message {
border-right:1px solid #00FF33;
width:400px;
float:left;
height:70px;
text-align:center;
position: absolute;
top: 475px;
left: 50%;
margin-left: 74px;
color:#00FF33;
}
#bigDynPic {
border-top:1px solid #00FF33;
width:400px;
float:left;
height:300px;
text-align:center;
position: absolute;
top: 175px;
left: 50%;
margin-left: 74px;
}
#bigDynPic img {
border-bottom:1px solid #00FF33;
}
#bigDynPic p {
font-family:Verdana, Sans-serif;
font-weight:bold;
font-size:80%;
background:#000000;
color:#00FF33;
margin:0;
padding:2px 2px;
}
The xhtml:
Code:
<!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>Strict Document</title>
<script type="text/javascript" src="dyngal.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script type="text/javascript" src="swfobject.js"></script>
<div id="main">
<div id="flashcontent">
<p>Alternate text for non-flash enabled stuff here!</p>
</div>
<script type="text/javascript">
var so = new SWFObject("flash.swf", "mymovie", "950", "150", "7", "#000000");
so.write("flashcontent");
</script>
<div id="nav">
<ul>
<li><a href="strict.html">Home</a></li>
<li><a href="strict.html">Page1</a></li>
<li><a href="strict.html">Page2</a></li>
<li><a href="strict.html">Page3</a></li>
<li><a href="strict.html">Page4</a></li>
</ul>
</div>
<div id="xyz_body"> Body
<div id="left">
<h1>Heading 1</h1>
<p>Left content goes here </p>
</div>
<div id="middle">
<h2>Heading 2</h2>
<p>middle content goes here </p>
</div>
<div id="right">
<div id="filler"> </div>
<div id="message">Click on thumbnail for larger picture</div>
<div id="thumbs">
<div> <a href="images/photo1.gif"><img src="images/tn_photo1.gif" alt="Photo 1" /></a></div>
<div> <a href="images/photo2.gif"><img src="images/tn_photo2.gif" alt="Photo 2" /></a></div>
<div> <a href="images/photo3.gif"><img src="images/tn_photo3.gif" alt="Photo 3" /></a></div>
<div> <a href="images/photo4.gif"><img src="images/tn_photo4.gif" alt="Photo 4" /></a></div>
<div> <a href="images/photo5.gif"><img src="images/tn_photo5.gif" alt="Photo 5" /></a></div>
<div> <a href="images/photo6.gif"><img src="images/tn_photo6.gif" alt="Photo 6" /></a></div>
<div> <a href="images/photo7.gif"><img src="images/tn_photo7.gif" alt="Photo 7" /></a></div>
<div> <a href="images/photo8.gif"><img src="images/tn_photo8.gif" alt="Photo 8" /></a></div>
</div>
</div>
</div>
<div id="footer"> <br/>
</div>
</div>
</body>
</html>
Before you post, read our: 
