IE/Opera displays text centre justified when it should be left justified!!! HELP!!!

Discussion in 'Web Design and Development' started by anim8or, Apr 25, 2008.

  1. anim8or macrumors 65816

    anim8or

    Joined:
    Aug 16, 2006
    Location:
    Scotland, UK
    #1
    Hello All!

    My problem lies with the justification of the text in the header and left column of the page i am designing. www.trevorjonesart.com/2008/

    I am using Dreamweaver on the mac and FF and Safari displays the text correctly justified to the left but IE and Opera displays it centre justified.....

    What am i doing wrong?

    Is there any way to correct this as the guy i am designing for is a PC user and uses IE to view his site, as do most of his clients, friends etc.

    I am fairly novice at HTML but will give some coding a go if anyone can suggest a fix.
     
  2. nomade macrumors member

    nomade

    Joined:
    Dec 2, 2006
  3. elppa macrumors 68040

    elppa

    Joined:
    Nov 26, 2003
    #3
    The quick and dirty way to do it is this:

    Find all the places where you have this:

    HTML:
    <div align="center">
    And replace it with this

    HTML:
    <div align="left">
    Then change the very first <div align="left"> back to <div align="center">, so the page content is centred.

    To be honest though I think you are making life difficult for yourself. The markup is a mixture of tables/css for layout, which isn't a good idea generally.

    Also, you link to two stylesheets, none of which exist on the server, then have two separate style tags in the header. Put all your styles in one place for ease of debugging.
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    The style sheets "../../table1.css" and "style.css" don't exist. Also your linked lightbox.css needs to be inside the head tag, which may be causing issues as well. I see in one of your attributes you're using angle brackets (<) which is not allowed and very likely causing problems (see below snippet).

    Snippet:
    HTML:
    title="The Last Game <br /> 30cm x 30cm Oil and Thread on
    There' a number of other validation errors too, but I think I covered some of the bigger things that are wrong on the page.
     
  5. elppa macrumors 68040

    elppa

    Joined:
    Nov 26, 2003
    #5
    Hi,

    I hope you don't mind, but I redid your site without tables as an exercise:

    I did remove the site index because it was a duplicate of the navigation on the left.

    Eventually you'll want to pull the style sheet out and put it in a separate file.

    Tested in Safari 3, FF2, Opera 9 and IE 7.

    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    	<title>Trevor Jones - Abstract & Figurative Artist</title>
    
    	<style type="text/css">
    		body {
    			font-family: Geneva, Arial, Helvetica, sans-serif;
    			background: #DBC49A;
    			margin: 0;
    			padding: 0;
    		}
    
    		#wrapper {
    			width: 860px;
    			margin: 0 auto;
    		}
    		
    		#main {
    			float: left;
    			background: #C2B996;
    		}
    
    		h1 {
    			font-size: 50px;
    			color: #3F1213;
    			margin: 0 0 10px;
    			padding: 0;
    		}
    
    		h1 span {
    			font-size: 18px;
    			color: #87332F;
    		}
    
    		a {
    			text-decoration: none;
    			color: #64322B;
    		}
    
    		a:hover {
    			color: #999999;
    		}
    
    		#left-nav {
    			width: 175px;
    			padding: 10px;
    			float: left;
    		}
    
    		#left-nav  ul {
    			margin: 0;
    			padding: 0;
    			list-style: none;
    		}
    
    		#left-nav > ul > li {
    			font-weight: bold;
    			text-transform: uppercase;
    			margin-left: 10px;
    			margin-top: 15px;
    		}
    
    		#left-nav ul ul li {
    			font-weight: normal;
    			text-transform: none;
    			margin-left: 20px;
    		}
    
    		#footer {
    			clear: both;
    			padding: 20px 0;
    			font-size: 12px;
    			text-align: center;
    		}
    			
    		#content {
    			width: 640px;
    			margin-left: 220px;
    			padding-top: 20px;
    		}
    		
    		.gallery a img {
    			display: block;
    			float: left;
    			margin-right: 10px;
    			margin-bottom: 10px;
    		}
    	</style>
    
    	<script type="text/javascript" src="js/prototype.js"></script>
    	<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
    	<script type="text/javascript" src="js/lightbox.js"></script>
    
    	<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
    
    </head>
    
    <body>
    	<div id="wrapper">
    		<h1>trevorjonesart.com <span>abstract and figurative artist</span></h1>
    		
    		<div id="main">
    			
    			<div id="left-nav">
    				<ul>
    					<li><a href="home.html">Home</a></li>
    					<li>
    						<a href="about.html">About</a>
    						<ul>
    							<li><a href="resume.html">resume</a></li>
    							<li><a href="statement.html">statement</a></li>
    							<li><a href="news.html">news</a></li>
    						</ul>
    					</li>
    					<li>
    						<a href="gallery.html">Gallery</a>
    						<ul>
    							<li><a href="figurative.html">figurative</a></li>
    							<li><a href="abstract.html">abstract</a></li>
    							<li><a href="landscape.html">landscape</a></li>
    						</ul>
    					</li>
    					<li><a href="thesis.html">Thesis</a></li>
    					<li>
    						<a href="exhibitions.html">Exhibitions</a>
    						<ul>
    							<li><a href="eventphotos.html">event photos</a></li>
    							<li><a href="video.html">video</a></li>
    						</ul>
    					</li>
    					<li><a href="contact.html">Contact</a></li>
    					<li>
    						<a href="links.html">Links</a>
    						<ul>
    							<li><a href="artists.html">artists</a></li>
    							<li><a href="galleries.html">galleries</a></li>
    							<li><a href="information.html">information</a></li>
    						</ul>
    					</li>
    				</ul>
    		</div>
    			
    			<div id="content">
    				<div class="gallery">
    					<a href="paintings/paint1.jpg" rel="lightbox[paintings]" title="The Last Game 30cm x 30cm Oil and Thread on Canvas"> <img src="thumbs/paint1thumb.jpg" width="150" height="150" border="0" alt="Paintings: image 1 of 8" /></a>
    					<a href="paintings/paint2.jpg" rel="lightbox[paintings]" title="paint2"><img src="thumbs/paint2thumb.jpg" width="150" height="150" border="0" alt="Paintings: image 1 of 8" /></a>
    					<a href="paintings/paint3.jpg" rel="lightbox[paintings]" title="paint3"><img src="thumbs/paint3thumb.jpg" width="150" height="150" border="0" alt="Paintings: image 1 of 8" /></a>
    					<a href="paintings/paint4.jpg" rel="lightbox[paintings]" title="paint4"><img src="thumbs/paint4thumb.jpg" width="150" height="150" border="0" alt="Paintings: image 1 of 8" /></a>
    				
    					<a href="paintings/paint5.jpg" rel="lightbox[paintings]" title="paint5"><img src="thumbs/paint5thumb.jpg" width="150" height="150" border="0" alt="Paintings: image 1 of 8" /></a>
    					<a href="paintings/paint6.jpg" rel="lightbox[paintings]" title="paint6"><img src="thumbs/paint6thumb.jpg" width="150" height="150" border="0" alt="Paintings: image 1 of 8" /></a>
    					<a href="paintings/paint7.jpg" rel="lightbox[paintings]" title="paint7"><img src="thumbs/paint7thumb.jpg" width="150" height="150" border="0" alt="Paintings: image 1 of 8" /></a>
    					<a href="paintings/paint8.jpg" rel="lightbox[paintings]" title="paint8"><img src="thumbs/paint8thumb.jpg" width="150" height="150" border="0" alt="Paintings: image 1 of 8" /></a>
    				</div>
    			</div>
    			
    		</div>
    		
    		<div id="footer"><p>© (Trevor jones) All Rights Reserved</p></div>
    	</div>
    </body>
    </html>
    
    Markup and CSS all valid.
     

Share This Page