Hmm.. The website I'm developing here: www.visionartisan.com/site works just fine in Firefox 3 and at 1280x800.. But in IE6 the footer is out of alignment... And in IE7 at 1024x768 the navigation div overlaps the content div...

 

Anyone know what's wrong?

 

 

Thanks,

Meshach

First of all can I ask why you're adding a "/" at the end of every tag? And not just the singular tags that don't need closing like <link />, <br /> and <img />.

 

Personally I think you need to rethink the entire layout, when the page is re-sized then the menu is dragged under the other DIV. It needs a more solid layout. I've also thought of every way to align that, and without removing 'auto' and using precise pixels, there's nothing else to suggest. Stuff will always go wrong when using auto. I've tried adding a div container etc and it just won't work, sorry.

 

I'd start again.

Lot of errors in the code there.

First of all can I ask why you're adding a "/" at the end of every tag? And not just the singular tags that don't need closing like <link />, <br /> and <img />.

 

Personally I think you need to rethink the entire layout, when the page is re-sized then the menu is dragged under the other DIV. It needs a more solid layout. I've also thought of every way to align that, and without removing 'auto' and using precise pixels, there's nothing else to suggest. Stuff will always go wrong when using auto. I've tried adding a div container etc and it just won't work, sorry.

 

I'd start again.

 

Hmm.. I need to study up on XHTML more. Any suggestions on how I can improve?

 

Lot of errors in the code there.

 

What do you suggest I do?

Well first of all, the only time you need to add a "/" at the end of the tag is in situations where the tag wouldn't be closed otherwise, tags like images, line breaks and links, for example:

 

<img src="images/header.gif" alt="header" />
<br />
<link rel="stylesheet" href="style.css" type="text/css" />

 

Normal code will look like this:

 

<!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" xml:lang="en" lang="en">
<head>
	<title>TITLE</title>
	<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
	<div id="container">
		<div id="menu"><img src="images/menutest.gif" alt="menu" /></div>
		<div id="content">
			<h1>Test Content</h1>
			Testing the text area of the page<br />
			Testttt
		</div>
		</div id="footer">Copyright © 2008</div>
	</div>
</body>
</html>

 

Just make sure that all tags are closed, that you use the "/" in the right place, and keep all tags lower case, this will help you to keep the website valid. Whilst developing a website, you should constantly check HERE, to make sure that your work is valid.

 

You should do this constantly as it makes it a lot easier to fix and find what the problem is. You should also do this for your stylesheets (link can be found on the W3). To keep this valid, just make sure that you nest everything correctly and use valid attributes for each type.

 

If you're trying to have a XHTML strict page, then avoid using styling attributes within html files, use classes within the stylesheet for borders etc.

 

With your website in particular, I'd refrain from keeping it seperate as it'll just cause the site areas to overlap, try using the float:;, that way you can keep it all nested in one central div.

Have you considered running your code through a validator.

 

http://validator.w3.org

 

This will point out the majority of your coding issues but will not spot things like untidy code and code that is not needed, i'm afraid thats up to you