SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    Back in Action Winged Spider's Avatar
    Join Date
    Jun 2001
    Location
    outside my mind
    Posts
    900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Netscape CSS Problems. Not accounting for height of image.

    I have a new CSS design that I'm working on that so far has been a dream to work with. Last night I was testing with Netscape 6.0 and I found that there is a "small" ( huge ) error happening that I can't resolve.

    The page is http://66.202.82.194/test.asp
    The page works fine in IE, but screws up in Netscape 6. I haven't tested in Opera yet.

    Here's the CSS
    Code:
    /* TAGS ____________________________________________ */
    a { text-decoration: none; }
    a:hover { text-decoration: underline; }
    
    body {
    	padding-right: 0px; 
    	padding-left: 0px; 
    	padding-bottom: 0px; 
    	padding-top: 0px; 
    	margin: 0px; 
    	color: #000; 	
    	background-color: #fff;
    	font: 13px Verdana, Arial, sans-serif; }
    
    div {
    	border-top-style: none; 
    	border-right-style: none; 
    	border-left-style: none; 
    	border-bottom-style: none; }
    
    h1 {
    	color: #31659c; 
    	background-color: #fff; 
    	font-size: 20px; }
    
    h2 {
    	color: #31659C; 
    	background-color: #fff; }
    
    h3 {
    	color: #31659C; 
    	font-size: 16px; 
    	background-color: #fff; }
    
    hr { margin: 0px auto; width: 90%; color: #169C00; background-color: #fff;  }
    
    html {
    	padding-right: 0px; 
    	padding-left: 0px; 
    	padding-bottom: 0px; 
    	padding-top: 0px; 
    	margin-top: 0px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    	margin-left: 0px;
    	width: 100% }
    
    input { 
    	border: 1px solid #31659C; 
    	font: 11px Verdana, Arial, sans-serif;
    	background-color: white; 
    	color: #000; }
    		 
    p { 
    	font-family: Verdana, Arial, sans-serif; 
    	font-size: 12px; }
    
    /* CLASSES  ____________________________________________ */
    #header {
    	margin-top: 0px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    	margin-left: 0px;
    	color: #000; 
    	background-color: #31659C;
    	border-bottom: #333 1px solid; 
    	width: 100%; 
    	text-align: left; }
    
    #headers {
    	margin-top: 0px;
    	margin-right: 0px;
    	margin-bottom: 5px;
    	margin-left: 0px; 
    	background-color: #ffd963;
    	width: 100%; 
    	text-align: left; }
    #header a { color: #fff; }
    
    #head {
    	margin-top: 10px;
    	margin-bottom: 5px;
    	margin-left: 15px;
    	margin-right: 0px;
    	width: 97.5%; 
    	text-align: left; }
    
    #head .right { text-align: right; float: right; }
    	
    #leftcol {
    	padding-bottom: 3px;
    	padding-right: 3px; 
    	padding-top: 3px;
    	padding-left: 0px; 
    	margin-top: 0px; 
    	margin-left: 0px;
    	left: 0px; 	 
    	width: 180px; 
    	position: absolute;
    	font-size: 11px;  }
    
    #leftcol P { font-size: 11px; padding-left: 3px; }
    #leftcol h3 { padding-left: 3px; margin-bottom: -3px; }
    #leftcol img { text-align: center; padding-bottom: 30px; }
    
    .leftbox {
    	border-right: 1px solid #ffd963;
    	border-bottom: 1px solid #ffd963;
    	border-top: 1px solid #ffd963;
    	background-color: #f7f7f7;
    	color: #000;
    	width: 100%; 
    	margin-bottom: 30px; }
    
    .leftclick { 
    	text-align: center; 
    	width: 100%;   }
    
    #rightcol {
    	padding-right: 0px; 
    	padding-left: 3px;
    	padding-top: 3px;  
    	z-index: 3; 
    	left: 79%; 
    	padding-bottom: 3px; 
    	width: 20%; 
    	color: #000; 
    	position: absolute;
    	background-color: #f7f7f7; 
    	border-left: 1px solid #ffd963; }
    
    #rightcol P { font-size: 11px; margin-top: 2px; }
    #rightcol h3 { margin-bottom: 0px; color: #169C00; background-color: #fff;  }
    
    #content {
    	padding-right: 3px; 
    	padding-left: 3px; 
    	padding-top: 3px;
    	padding-bottom: 3px; 
    	margin-top: 0px;
    	margin-right: 24%;
    	margin-bottom: 0px;
    	margin-left: 190px; }
    	
    #content p { font: 13px Verdana, Arial, sans-serif; }
    
    .contentbox {
    	border: 1px solid #ffd963;
    	background-color: #f7f7f7;
    	color: #000; 
    	padding: 3px 2px;
    	margin-bottom: 15px;  }
    
    #footer {
    	clear: both; 
    	padding-right: 0px; 
    	padding-top: 3px; 
    	padding-bottom: 3px; 
    	border-top: #31659C 4px solid; 
    	padding-left: 0px; 
    	font-size: 11px; 	
    	width: 100%; 
    	text-align: center; }
    
    #footer .date {
    	float: left; text-align: left
    }
    #footer .contact { float: right; text-align: right; }
    
    .timedate { FLOAT: right; text-align: right; }
    	
    /* REUSABLE  ____________________________________________ */	
    .small { font-size: 10px; }
    .center { margin: 0px auto; }


  2. #2
    Grumpy Mole Man Skunk's Avatar
    Join Date
    Jan 2001
    Location
    Lawrence, Kansas
    Posts
    2,066
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You will almost certainly find it a lot easier to iron out this kind of bug if you ensure your HTML validates. As it is I couldn't see what was causing the problem, but an easy work-around would be to add a "height" property to the CSS for your #head div:
    Code:
    #head {
    	margin-top: 10px;
    	margin-bottom: 5px;
    	margin-left: 15px;
    	margin-right: 0px;
    	width: 97.5%; 
            height: 70px;
    	text-align: left; }
    Very nice design btw.

  3. #3
    Back in Action Winged Spider's Avatar
    Join Date
    Jun 2001
    Location
    outside my mind
    Posts
    900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks very much, I've fixed the problem by using a little trickery that validates fine. HTML validation is the next step in this little project.

    I never thought of using the height declaration for the head. Instead I ended up removing the float property for the sale image in the upper right and everything worked out fine.



Bookmarks

Posting Permissions

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