Solved

Site looks good on Firefox & Chrome, but not on IE

Posted on 2014-04-21
7
469 Views
Last Modified: 2014-04-22
Hi, on this site: pamstevensonjewellery.com

On FF 28.0, it looks good. Same on Chrome 34.0. But on IE 9, the boxes showing the products don't line up correctly. I went to browserstack.com and they show the same thing, down to IE8. They also show it good on Chrome and Firefox back a few versions.

I'm really hoping there's like one or two lines of CSS to alter to fix this. I'm looking forward to your help!
0
Comment
Question by:mel200
  • 4
  • 2
7 Comments
 
LVL 5

Expert Comment

by:Pasha Kravtsov
ID: 40013685
Usually IE8/9 display weird looking CSS. The best thing to do is to stop supporting ie8/9. IE 8 will always look bad no matter how hard you try.
0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 40013803
The issue probably has to do with the site not validating.  Please see http://validator.w3.org

I think if you attack this one by one, your problems will go away.

Your comments should look like
<!-- -------------  Header -------------   -->
and not
<!--------------Header--------------->

You have a closing p tag that was not opened.... make sure you close your tags in the same order they are opened.  

Every browser handles errors a bit differently and that is your problem.
0
 

Author Comment

by:mel200
ID: 40013924
Thanks, I'll go through the validator, don't know why I didn't think of that...
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

Author Comment

by:mel200
ID: 40013929
Ok, here's where we hit a mystery. On line 43, it does not say <!--------------Header----------- ----> it looks like this:

screenshot
0
 

Author Comment

by:mel200
ID: 40013932
oh, I get it, it should look like:
<!---Header-->
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 40013933
It should just be 2 dashes followed by a space.

<!--    something  -->

Open in new window


or

<!-- -----------something------------  -->

Open in new window

Notice the one space after then 2nd dash on the left and one space before the --> on the right.
0
 

Author Comment

by:mel200
ID: 40014952
Got it, thanks!
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

Title # Comments Views Activity
Gulp not seeing Changes 4 38
Form Submit falis 6 26
Website Interactive tool that will do calculations 3 31
How can I convert HTML files to .pdf files? 9 30
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

895 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

13 Experts available now in Live!

Get 1:1 Help Now