Solved

Display issues with IE 8 and 9

Posted on 2012-04-05
7
258 Views
Last Modified: 2012-04-10
Experts,

I have a new site that i am hoping to launch soon, however a few website testers have reported problems sporadic problems on versions of IE 8 and 9. The problem is though, i cant replicate them, when installing the same versions...

The site address is:
http://www.chic-osity.co.uk

I would be grateful if people could have a quick look and let me know any obvious display issues, and if possible suggestions for how to fix them.

Main reported issues are:
home page - bottom 6 featured boxes misaligning
My account page - buttons cut in half, and also not centered
product page - misalignment of copy and buttons

Any help would be greatly appreciated
Regards
Easynow
0
Comment
Question by:Dean OBrien
7 Comments
 
LVL 9

Assisted Solution

by:Lance_P
Lance_P earned 50 total points
ID: 37810322
Opened up fine here in IE 9 and Firefox 11. Although the website is not 'rated' so received a warning from Mcafee. :)
0
 
LVL 30

Assisted Solution

by:LZ1
LZ1 earned 50 total points
ID: 37811011
Everything looks good on Windows 7 IE 8, 9, FF, Safari and Chrome.
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 210 total points
ID: 37812821
It is possible they are running in compatibility mode when testing.

try adding:
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />

The head of the pages right after the meta character set.

Cd&
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 8

Assisted Solution

by:imantas
imantas earned 190 total points
ID: 37815416
The page does seem to have problems you mentioned. For the buttons in the "My account" page, they seem to have a style "IE 6 only" which is applied to IE9 compatability mode. Height is set to 21px instead of 50px which is used for other browsers. Not sure why this is set. These buttons also seem to be misaligned. I suggest to add
left: 0px;
text-align: center;

Open in new window

into the "buttons-set" CSS class.

Another thing I notices is that the whole page doesn't have default align set which might lead to misaligning. You should set "text-align: center" of the body element.

Furthermore, images of the 6 boxes you mentioned sometimes tends to "fall out" out of the container. You should add these properties into the CSS class of the images:
position: relative;
top: 0px;
left: 0px;
z-index: <lower value than the items that need to overlay the image>;

Open in new window


CSS class "product-price" has dimensions set to values being too low for the price to be displayed, since its "overflow" is set to "hidden", the price is cut off. You should either make it bigger or set its "overflow" to "visible".

Regarding the product page, everything seems to be really messed up because there is just not enough content on the page for the footer to be low enough on the page view, thus content and the footer collides and messes everything up, not even sure where to start correcting styles. You should somehow make sure that the content area is big enough to push the footer low enough to the bottom. Can't really tell anything about the buttons as other things need to be fixed first.

Hope this helps.
0
 
LVL 12

Author Comment

by:Dean OBrien
ID: 37825334
Thanks for all the comment, sorry for delay responding. I plan to go through and test all tomorrow when back at work.

regards
easynow
0
 
LVL 12

Author Comment

by:Dean OBrien
ID: 37827183
Lance and LZ1 - thanks for looking and providing feedback.

Cd& - thanks, the meta tag you provided solved issue, they were all related to this compatibility issue.

imantas - thank for the detailed feedback on the css, you also confirmed the compatibility issue (i couldnt find any reference to 21px for IE6 - any ideas where it is set?). I have amended the css classes where appropriate. Apart from aligning the body as this would mean manually having to set individual elements again throughout the site, where left align was needed.

The product page is now behaving as it should be (all be it not likely in IE6 and below - but im happy to ignore this given the percentage of users using those browsers nowadays.) Was the rest of the page so badly laid out?

Thanks again to all
Easynow
0
 
LVL 8

Expert Comment

by:imantas
ID: 37827398
Hi easynow111,

The height of 21px is set in this file:
https://www.chic-osity.co.uk/skin/frontend/default/default/css/styles-ie.css

Open in new window

....
button.button { height:21px; }
...

Open in new window

Which you include for IE < 8 browsers, so it's shown incorrectly for IE 7 as well, not only IE 6.

Regarding the product details page, only that page looked very bad, the rest of the website seemed more or less good.

Regards,
imantas
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
You have products, that come in variants and want to set different prices for them? Watch this micro tutorial that describes how to configure prices for Magento super attributes. Assigning simple products to configurable: We assigned simple products…

867 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now