Solved

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

Posted on 2014-04-21
7
479 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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 

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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

776 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