Small but in IE7 website display. Fine in FF, IE8, Chrome

UltraFlux
UltraFlux used Ask the Experts™
on
Hello,

I have a small bug which I could use some help fixing as I cannot seem to locate the issue.

http://preownedweddingdresses.ca

FF - Fine
Chrome - Fine
IE8 - Fine

You can use IE8 in compatiblity mode to see the bug. I guess it has to do with this DIV tag.

<div id="container-header">

Would make my night if someone can help me!
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Wow that is one heck of a jungle of CSS code you have there. The website looks really professional as is too. I see the error when IE8 is put into compatibility mode. Looks like every in the <div id="container-header"> is moved DOWN after <div class="lefth">...</div> and before <div class="right"></div>

I really don't know if fixing the page for "compatibility mode" is a viable option as compatibility mode is a joke. Ive seen many good looking sites break apart after turning on compatibility mode...

I have no idea what needs fixing for compatibility mode to work right as the CSS and page code looks pretty good and error free for the most part.

I see some mistakes however but I dont think they are the problem...
MASTER.CSS::::
.header-nav .left { float: left; } /*?*/
.header-nav .left strong { display: block; font-size: 17px; font-weight: normal; } /*?*/
.header-nav .right { float: right; font-size:10px; text-align: right; line-height:28px; }

but you've gone around and fixed them later on anyway..
.left { width: 738px; float: left; }
.lefth { width: 550px; float: left; }

Open in new window

Author

Commented:
Well its not just in compatiblity mode.

It also breaks in IE7 as I tested in on browsershots.org...

You are right about the css jungle!

As for the IE7 issue what I don't understand is

a) works perfectly fine in IE8, FF, Chrome

b) In IE7 it seem to be positioning the background slightly higher than everything else, yet I find no reason for this to happen.

Which brings me here, toi many people still use IE7 :\
Fixed.

Strange but fixed. If anyone can explain this that would be awesome.

IE7

Clear below the header

<div class="clear"></div>

Everything else
clear:both

IE7
clear:none

strange but website showing properly now

I am using

.clear {
      clear:both;
      display: block;
      *clear:none;  // Targest IE7
}  
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Nice fix. I guess IE7 doesnt support the "clear" CSS property well enough.

I was thinking about your problem before. My fix was to change the "http://preownedweddingdresses.ca/wp-content/themes/classipress/images/header.png" so the blue area which appears in "http://preownedweddingdresses.ca/wp-content/themes/classipress/styles/default/topbarbg.jpg" already is no longer there. This because the page still looks messed up in IE6, which is installed on my other PC. Your fix is great though!!

Author

Commented:
umm can you post a screenshot in IE6 please
Heres a screenshot of what I see on IE6 on Windows XP PC
screenshot.JPG
So yea because of the background image "http://preownedweddingdresses.ca/wp-content/themes/classipress/images/header.png" already having the blue bar which is "http://preownedweddingdresses.ca/wp-content/themes/classipress/styles/default/topbarbg.jpg" there looks like theres two random bars on the page which look the same. :S :S also not to mention the DIV positions coming up completely wrong on IE6. IE has always been the pinnacle of perfection (sarcasm)

Author

Commented:
I was thinking about your problem before. My fix was to change the "http://preownedweddingdresses.ca/wp-content/themes/classipress/images/header.png" so the blue area which appears in "http://preownedweddingdresses.ca/wp-content/themes/classipress/styles/default/topbarbg.jpg" already is no longer there. This because the page still looks messed up in IE6, which is installed on my other PC. Your fix is great though!!

I dont see how making this change would alter how IE6 looks messed up.
I have considered using
http://code.google.com/p/ie6-upgrade-notification-bar/

Stats say 15% - 18% use IE6 (hard to believe!)

Author

Commented:
grrrr IE6
Lol I was abit upset when I saw the site on IE6 too. Hmmm yes that little script to show that notification on IE6 looks good. I think you should add it.

And oh yea my bgimage fix was just pointless really... I was looking into the background images you used and I noticed the bit that overlaps.

Author

Commented:
I guess my stats are not exactly right.

Overall its about 48% IE

Then it breaks down into

IE8 - 52%
IE7 - 32%
IE6 - 15%

So its only actually 15% of the IE grouping not 15% of all browsers. So I guess its more like 5% - 10% in total from IE6

Author

Commented:
Yep, installing the google script!

Thanks for the help!
No worries! But you were the one who found all the things you changed yourself lol. Happy scripting!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial