My header is not cross browser compatible

I've just rolled out the final version of my site and it is now live.

I was testing in browsershots.org and in almost every browser shot my header is broken and the last div (with a shopping bag) seperated and on the next line apart from the firefox and some later ie's, im aware that you cant always have a perfect site in every browser, and some really old versions of ie etc tend to be discounted anyway. which is fine, but this is appearing in later version of browsers etc. im not worried about it looking absolutely perfect in older versions, but it does still need to be useable and presentable.

http://www.livvylou.co.uk

is anyone able to recreate this and / or do you have any suggestions on how to fix please?

If you look at it with IE8 and use the developer tools to change the browser mode to IE7, you can see it broken.

Looking at it with ffox and html validator it points out a couple of things which should not be important but who knows..

When you have an error-free site you could do a IE7-only stylesheet but first you'll have to move those inline styles out of the code and use id and classes to target the object.

brilliant, i have firebug and yslow but didnt have that. thanks so much im on it now :)

I can fix it (mostly) in IE7 by removing the height:161px from #logoWrapper and the float:left from #navEZPagesTop, which you aren't using anyway. You could put different rules for those in a IE7-specific stylesheet.

You have one little glitch in all browsers here - your header is a little less wide than the center column, causing a small 'ledge' on the right side.

Very nice job on the design.

thanks everyone, i missed that float and after a tweaks on top of that suggestion i think its similar enough now to stop panicking,

thanks again guys!

ugh scrap that, problem is still there grr!!! :frusty:

bonnit, Not sure where you see problems but here are a few I see.

You've coded your 4 Content images in a way that opens in a new Window. Is that what you want, because it could be confusing to people.

<a href="**/**index.php?main_page=index&cPath=44">Newborn Gift Boxes</a></div>

should be

<a href="index.php?main_page=index&cPath=44">Newborn Gift Boxes</a></div>

You have some code within your page that should be in the HEADER of your page.

This is the first code block:

...

All code within the above tags should be in this file:

includes/templates/YOUR_TEMPLATE/common/html_header.php

Place the code just before the closing </header> tag.
Remember though, to remove it from whatever file it is in now.

Your Shopping Cart page has coding errors starting at:

Somewhere after that, you are missing a closing </div> tag which is preventing the rest of the HTML code from loading.

thank you websiterob, i was so fixated on my front page that i hadnt even noticed that. i have absolutely no idea where that div is missing, do you know of any tools which may help? i've even compared it to the original zen copy and no joy, its not footer or anything because thats rendering fine on other pages?

it also renders fine when the shopping cart is empty ?

Off hand I would say to check this file:

includes/templates/YOUR_TEMPLATE/templates/tpl_shopping_cart_default.php

Reason being is that when I view the Cart page when empty, I see the same mistake I mentioned earlier for your Home page.

<img class="back" src="**/**includes/templates/livvylou/buttons/english/button_continue_shopping.gif" /></a><br /><br />

it was something trivial as it always is, but i thought i would post it here incase anyone else the same issue

im using edit cart mod and dsiplay shipping rates in cart mod. all working fine until recently. for some reason somewhere or other down the line my shipping estimator had been turned back on fromt the admin (db restore somewhere down the line perhaps?) which was obviously being replaced with the shippring rates mod, the fact that it was turned on meant it was effectively displaying the same thing twice, this caused the table to close behind the mod and in turn cut off the rest off my page, footer and all.

the validation error i was getting was that it was 2 unclosed divs and 1 unclosed table, it wasn't unclosed, in fact it had been closed earlier on in the page when it shouldnt have been.

i just hope this helps someone

and thanks guys for all your help :clap: