Ive tried testing the site in IE7,IE8, FF and chrome and they all work fine for me but when a friend tests the site in IE7 on windows xp, the font size is too large and destroys certain aspects of the site.
This is a screenshot of what the friend see’s. Notice the shopping cart text pushes the basket down a line and the footer text pushes everything to the next line breaking the site.
At the beginning of layout.css you have saved the BOM (byte order mark) which makes the first rule look like this.
[B][/B]body {
That could make some browsers ignore the rule for body and not get the base font-size that you set.
That alone would not probably be enough to trigger the problem but if the user then had IE7 set to display larger text then I see exactly the same display that you have shown in your image.
You should not save a BOM marker in your css file anyway as it may make some browsers miss the styles altogether or at least the first rule.
m4rcx1, I think part of the problem is that you don’t allow IE users to resize the text using the built in mechanism (so their probably overwriting it to make it readable). Remember that the zoom mechanism in IE7 isn’t perfect and IE6 users have no mechanism, providing your text in PX measurements basically cripples the resizing ability and makes the content inaccessible to the visually impaired. My advice would be to ensure you scale your text and the containers height using EM units (as then even if they override the text size, the amount of available space should scale to meet it’s contents requirements). I didn’t get the issue myself in IE but I can understand why people would want to overwrite your stylesheets in that sites case to resolve the accessibility issues. You would be surprised how many people depend on the ability to resize the text (and scale the site) in order to be able to read the content of a website. Fixing the font-size to prevent such actions to keep the design pixel perfect could end up hurting some of the users of the website when it goes live - just a note in case you weren’t aware.
Looks fine on Mac FF and Safari. For IE7 you could add some conditional comments to set different font sizes.
But the reality is that some users will have text enlarged anyway, and you still need to account for that. One of your scripts is setting a height on the #shopping-bag div, and that’s a bad idea. Better to let the div expand as it needs to, and then no cart contents will be hidden.
See if you can hunt down where the JS is adding in that height setting. Do you know which file controls the cart behavior?
The shopping-bag div has an overflow:hidden property so the rest of the products are hidden by the fact that the height is set. When the user hovers over the division, the height increases revealing the rest of the products. So I think the height set is needed. However it works so I dont think I really need to tamper with it.
I could set conditional comments for IE7 but im curious as to why it would work on my computer and others fine on IE7. Ive tried enlarging the text on mine but all the necessary text is set so even when its enlarged it doesnt break.
The only thing I can think of is that they have set their browser to ignore font-sizes.
Thanks for testing, I hope more people can test for me, then at least I’ll have a “20 people have tested and say fine” get out of jail free card
I have a XP machine for testing purposes so I just took a look, and it looks good to me on IE7. I don’t get the same issues as your friend for the shopping cart and footer sign-up.
The only discrepency I’ve noticed is that on IE7, the light grey flowery background goes down to the bottom of the page, so that the “site designed by Freemand Holland” bit is sitting on that grey background instead of the dark green.
Other than that, I have noticed that when I rollover the Flash slideshows, I get that ugly dotted box and the “click to activate and use this control” message. That’s not got good. I’m not a Flash expert but I think you need to use the SWFObject method.
