Need help with IE

Hi,

I am having problems with Internet Explorer. My site www.creativeappointments.co.uk looks great in Chrome, Safari & Firefox however in IE the footer does not line up correctly with the rest of the page.

I would appreciate any advice on how to recify the problem, I have limited knowledge of programming so it may be something really simple that I am missing!

Thanks

 

1) Ignore the spammer

2) The problems with your site run pretty deep. I'm NOT seeing consistent layout across any browsers since here Opera, FF and Chrome are all showing different, much less IE.

Your problem list is fairly common stuff...

With 309 validation errors you do not have HTML, you have 100% gibberish... While certainly much of that can be attributed to silly things like unencoded ampersands in your URL's, a good deal of it is geniunely invalid markup; Things like HTML4 in your XHTML doctype, attributes like bgcolor, width, nowrap, target and align that do not even exist in STRICT doctypes (and have NO PLACE in a modern codebase), use of camelBacks on elements that don't support camelbacks, and a handful of unclosed tags... 29k of markup for 5k of plaintext - something's really not kosher in the HTML, so applying CSS to that HTML is going to be a train wreck.

On the CSS side you are setting things in manners that frankly, are known to have issues. Setting line-height on elements separate from where you set the font-size, setting the line-height and hoping it inherits, floats on elements that there is no reason to have floats on for your layout, heights on elements that seem to have fluid-type content...

There are a few easy tricks that will make your life a whole lot easier... Let's look at the code for your menu and header. In the markup you have:

	<div id="header">
		<div id="logo">
			<h1><a href="#">Creative Appointments</a>			</h1>
			<p>  helping your creative career grow<a href="http://www.freecsstemplates.org/"></a></p>
		</div>
	</div>
	<!-- end #header -->
	<div id="menu">
		<ul>
			<li ><a href="/">Home</a></li>
			<li><a href="/employers">Employers</a></li>
            <li><a href="/myjobs">Creatives</a></li>
			<li><a href="/index.php?action=search&form_display=true">Search Jobs</a></li>
			<li><a href="/p.php?p=InfoPages&file=Contact-Us">About Us</a></li>
            <li><a href="/p.php?p=InfoPages&file=prices">Prices</a></li>
			
		</ul>
	</div>
	<!-- end #menu -->

Code (markup):

Both of those ending comments could be triggering rendering bugs in IE. NONE of those div are neccessary given the appearance you are rendering... The second anchor (the one in the paragraph) is not doing anything useful since it's EMPTY, and that's not flow content so why is it a paragraph... and the h1 is a perfectly good block level container so what the devil do you need the DOUBLE wrapping div for?

The menu then also has a div for no reason, and lacks one of the classes you took the time to set up in the CSS.

Just the markup should be neutered down to something more like this:

<div id="pageWrapper">
	<h1>
		<a href="/">
			Creative Appointments
			<small>helping your creative career grow</small>
		</a>
	</h1>
	
	<ul id="mainMenu">
		<li><a href="/">Home</a></li>
		<li><a href="/employers">Employers</a></li>
		<li><a href="/myjobs">Creatives</a></li>
		<li><a href="/index.php?action=search&form_display=true">Search Jobs</a></li>
		<li><a href="/p.php?p=InfoPages&file=Contact-Us">About Us</a></li>
		<li><a href="/p.php?p=InfoPages&file=prices">Prices</a></li>
	</ul>

Code (markup):

I would add an extra pagewrapper div for all the stuff constrained to 1000px so you state it ONCE, not on header, then menu, then content, then sidebar, then footer, etc, etc, etc. I'd use your existing #wrapper but you seem to be using that for a second background image.

The CSS for those elements is equally flawed. First, use a reset. Putting margin:0 padding:0 on every declaration is a waste of your time.

Second, without all those extra DIV it becomes a HELL of a lot simpler.

h1 {
	padding:30px 0 135px 50px;
	background:url(images/
}

h1 a {
	color:#FFFFFF;
	font:normal 44px/46px georgia,"times new roman",times,serif;
}

h1 small {
	display:block;
	font:normal 23px/24px georgia,"times new roman",times,serif;
	color:#493E2B;
}

#mainMenu {
	list-style:none;
	overflow:hidden; /* wrap floats */
	height:65px; /* trip haslayout, wrap floats in IE */
	font:normal 18px/20px, georgia,"times new roman",times,serif;
	background:url(images/img04.jpg) 0 0 no-repeat;
}

#mainMenu li {
	display:inline; /* don't even waste time TRYING to style these! */
}

#mainMenu a {
	float:left;
	display:inline; /* prevent IE margin doubling */
	padding:15px 20px 14px;
	margin-left:10px;
	text-decoration:none;
	color:#FFF;
	background:#431 url(images/mainMenu.png) 0 0 repeat-x;
}

#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover {
	background-color:#000;
	background-position:0 -50px;
}

#mainMenu .current {
	background-color:#542;
	background-position:0 -100px;
}

Code (markup):

Mind you, the above is untested, but is +/- 1% of what should probably be used there, and easily half the code you were trying to use while even adding some functionality.

Hmm... You know, looking at this, img02, 03 and 04... there's NO reason for those to be separate images...

I have time tomorrow I'll revisit this and show you what I mean by that. Basically though you've got a lot of flawed methodology and overthought markup - and most of that markup isn't even valid, which is ASKING for trouble in a STRICT doctype. Just remember the basic rule - much as George Carlin used to joke "not every ejaculation deserves a name", not every element needs a classed div around it.