Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts

    Positioning issue with Strict Doctype

    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>
    Last edited by Fisher; 02-22-2009 at 04:43 AM.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    I would use an unordered list for your thumbs instead of a bunch of divs but your issue can be fixed by adding the bold.
    Code:
    #bigDynPic img {
    	border-bottom:1px solid #00FF33;display:block;
    }
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    Fisher (02-22-2009)

  • #3
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts
    Thank you so much. That worked perfectly. The "display:block" is actually in the javascript already. I wonder why it doesn't take?

    I will attempt it with an unordered list instead of the divs. Thanks for the suggestion.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello Fisher,
    What happens in the other browsers when you negative margin that up a little? Like this:
    Code:
    #bigDynPic p {
    	font-family:Verdana, Sans-serif;
    	font-weight:bold;
    	font-size:80%;
    	background:#000000;
    	color:#00FF33;
    	margin:-2px 0 0;
    	padding:2px 2px;
    }
    Edit: missed _Aero's fix... good catch there. I have an example of a something similar to what your doing but using a ul at http://nopeople.com/CSS/disjointed_r...bum/index.html
    Last edited by Excavator; 02-22-2009 at 05:11 AM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    Fisher (02-22-2009)

  • #5
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts
    Aaarrgh Excavator,

    Now you've given me even more to think about.
    I was looking for a solution which didn't involve javascript before.

    I have already converted it to a ul and it's working fine, but I might give your pure CSS method a go.

    Thanks


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •