Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

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

anim8or

anim8or

macrumors 65816
Original poster
Aug 16, 2006
1,362
9
Scotland, UK
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.
 
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.
 
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.
 
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.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back