Results 1 to 2 of 2

Thread: Css problem

  1. #1
    Join Date
    Aug 2007
    Posts
    1

    Css problem

    Ok, its a easy one, but the css is killing me....

    HTML Code:
    <html>
    <head>
    <meta name="description" content="Web Design, Haddonfield, New Jersey, pennsylvania, pa, nj" />
    <link rel="stylesheet" type="text/css" href="styles/style.css" />
    <title>Joseph ****inson | Web Designer</title>
    </head>
    
    <BODY>
    
    <div id="CONTAIN">
    		
    		<div id="header">
    				<div class="nav">
    				| <a href="index.html">Home</a>
    				| <a href="pages/portfolio.html">Portfolio</a> | 
    				<a href="pages/about.html">About</a> | 
    				<a href="pages/contact.php">Contact</a> | 		
    				</div>		
    		</div>
    	
    		
    		<h3><img src="images/arrow.jpg" alt="Portfolio Design"> About</h3>
    		<div id="content">
    			<div id="left">
    		<p> Is web design not your cup of tea? No problem, I am a freelance web designer here to help and assist you in establishing an exposure on the web. Unlike your typical, overpriced freelance designer, I design sites on shoe-string budgets. My pricing not only meets your budget but also your expectations. [ <a href="pages/about.html" title="Joseph ****inson Portfolio">More </a> ] </p>
    		<hr>
    		<strong> Why hire me?</strong><br>
    					<p>My idea of proper web design is very different from what your typical web design firm. Unlike my competitors, I use up-to-date css (cascading stylesheets) and xhtml standards. These <a href="http://www.w3.org/Style/CSS/">standards</a> insure that your site will work on any platform, at any resolution , on any browser . </p>
    		<hr />
    		<strong>Is your website cross-browser compatible?</strong> <br>
    					<img src="images/xbrowser.jpg" alt="Cross browser compatible Websites" />Unfortunately, many websites lack this, leaving customers in the water.
    					<hr>
    			</div> 							<! -- end the LEFT -- >
    		
    			<div id="right">
    		<p>This is the right side</p>
    			</div>							<! -- end the RIGHT -- >
    		
    			
    		
    		</div> <! -- end all the content -- >
    	<! -- Copyright &copy 2007 Joseph ****inson . All Rights Reserved. -- >
    	</div>   <! -- end the CONTAINER -- >
    
    
    </BODY>
    
    </head>
    </html>
    stylesheet.....

    HTML Code:
    /* 99CC00(green)	353535(dblack)	4F4F4F(lblack)	F2F3ED(Lightgrey) */
    
    BODY { background-color:#4F4F4F; margin:0px auto 0px auto; font-family:Georgia, serif;  }
    
    	#CONTAIN { width:984px; height:625px; margin:1px auto 0px auto; background-color:#353535; border:2px solid #9fa19b; }
    		
    		#header { margin:0px auto 0px auto; height:122px; background-image:url(../images/header.jpg); background-repeat:no-repeat; }
    			.nav { text-align:center; padding:50px 30px 0px 0px; text-align:right; }
    			.nav a:link { font-size:14pt; color:#353535; text-decoration:none;			}
    			.nav a:visited { font-size:14pt; color:#353535; text-decoration:none;			}
    			.nav a:hover { color:#F2F3ED; text-decoration:overline;				}
    				
    				/* -- to align all the pages other than main -- */
    		#content { margin:inherit; width:968px; padding:0px 5px 0px 10px; color:#F2F3ED;  }
    			#content2 { margin:inherit; width:968px; padding:0px 5px 0px 45px; color:#F2F3ED;  } /* Align client images */
    			
    			.thumbs { width:150px; height:180px; float:left; padding:5px 5px 5px 5px; border:1px solid #4F4F4F; margin:5px;  } /* controls the client images */
    				.thumbs a:link { border-bottom:5px solid #4F4F4F; }
    				.thumbs a:visited { border-bottom:5px solid #4F4F4F; }
    				.thumbs a:hover { border-bottom:5px solid #99CC00; }
    		
    		/* -- for the home layout -- */
    		#left { width:795px; height:475px; float:left; font-size:12pt; }
    			#left a:link { color:#99CC00; text-decoration:none;  font-weight:bold }
    			#left a:visited { color:#99CC00; text-decoration:none;  font-weight:bold }
    			#left a:hover { color:#F2F3ED; text-decoration:none;   font-weight:bold; border-bottom:1px dashed #F2F3ED; }
    			
    		#right { width:150px; height:400px; float:left; font-size:12pt; BORDER:2PX SOLID #99CC00; margin:0px 0px 0px 10px; }
    			#right a:link { color:#99CC00; text-decoration:none; font-weight:bold; }
    			#right a:visited { color:#99CC00; text-decoration:none;  font-weight:bold }
    			#right a:hover { color:#F2F3ED; text-decoration:none;  font-weight:bold }
    		
    		
    		
    		hr { width:785px; }
    		h1, h2, h3, h4, h5 { color:#99CC00; margin:0px 5px 5px 5px; padding-top:0px; }
    			p { margin:0; color:#F2F3ED; font-size:12pt; }
    			strong { color:#99CC00; font-weight:bold; }
    			
    			a { color:#99CC00; }
    			a:visited { color:#99CC00; }
    			a:hover { color:#F2F3ED; border:0; }
    	
    My problem: Simply in IE6 it isnt center, it firefox it is? It's probably a minor little problem. If anyone sees it let me know. Thanks

    Joe

  2. #2
    Join Date
    Feb 2006
    Location
    Salisbury UK
    Posts
    4,332
    Add this at the very top of the html file, before the <html> tag:-

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    My IE7 was also showing your page on the left instead of centralised so I didn't check IE6, it's probably the same in all IE which is using "quirks mode" instead of the CSS2 standards for padding and margins.
    Code downloaded to my PC will be deleted in due course.
    WIN7; IE9, Firefox, Opera, Chrome and Safari for Windows; screen resolution usually 1366*768.
    Also IE6 on W98 with 800*600 and IE8 on Vista 1440*900.

Similar Threads

  1. Problem with Flash on CSS
    By NahiaN in forum Web Design, HTML Reference and CSS
    Replies: 1
    Last Post: 10 Sep 2006, 05:14 AM
  2. slight problem with CSS code
    By webguy_dave in forum General Questions
    Replies: 1
    Last Post: 17 Dec 2005, 02:55 PM

Posting Permissions

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