Member Avatar for amandamay

Hello,
I have built a site that looks just how I and the client wanted it in Safari and Firefox, but Internet Explorer tears it to pieces. I would post code here, but I just don't know which part of it is wrong - the site is http://www.sarahamosstudio.com

Please tell me there is a quick and easy solution and I don't have to build the thing again!!! :) I am relatively new to css and all, so please forgive the sloppiness.

  • 4 Contributors
  • 8 Replies
  • 93 Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by CassieJ

Dani AI

Generated

A few targeted checks that usually fix the "works in Firefox/Safari but breaks in IE" symptoms described by (and why / might see different results):

  1. Confirm standards mode: a missing or wrong DOCTYPE will put IE into quirks mode and change layout behavior. Validate the page with the W3C validator and read about quirks vs standards mode for details (Quirks Mode and Standards Mode, W3C Markup Validation Service).
  2. Find the overflowing element: temporarily give the main containers visible outlines or backgrounds and reduce the page to a single column to isolate the block that forces horizontal width. Common culprits are oversized images, absolutely-positioned elements, or unclosed tags. See the CSS overflow reference for how clipping behaves (overflow - MDN).
  3. Contain floats and collapsed parents: if floats make siblings shift, use a clearfix or set the parent to contain floats rather than switching to table layout. A lightweight clearfix is documented here (A Simple Clearfix).
  4. Use an IE-only patch while you debug: conditional comments let you target only IE for tweaks instead of rebuilding the whole layout ().

Using a table as a band-aid can work (as found), but fixing the root cause is more maintainable. For the hover/enlarge issue, check IE's console for script errors and validate that the rollover technique you used is compatible with the IE version you're testing. If a reproducible minimal HTML/CSS snippet is posted, a precise fix can be suggested.

Recommended Answers

All 8 Replies

Member Avatar for HI2Japan

With the exception of this comment <!--[if IE lt 6]> <![endif]--> <!--[if IE lt 6]> <![endif]--> being shown on the page I do not see what you are talking about. I am using IE7 and it does not appear to be broken apart. Maybe put a screen shot up of what you are seeing so it is easier to compare.

Member Avatar for FC Jamison

I am not seeing a problem at all in IE7.

Member Avatar for amandamay

well, after some research I tried using a separate stylesheet for ie. It is still not looking right in my explorer, but perhaps that is just a mac ie thing? i will post a screenshot. Glad to know it looks right to you though :)

I have added some images - the problem seems to be that the page is reading as absurdly wide, making everything that is right justified appear way off the page to the right.

Picture_1.png 831.96 KB Picture_2.png 705.81 KB Picture_3.png 296.65 KB
Member Avatar for HI2Japan

Just so you can see how it shows up on my screen. Some of the layout might be incorrect, but I guess you are the only one who would know that.

1.jpg 156.18 KB 2.jpg 205.06 KB 3.jpg 167.85 KB
Member Avatar for amandamay

thanks! interesting. on yours it is almost right, except i want the four images on the right pic to stay in a single straight line, and on the middle pic i want the text to lie to the right of the image.

unfortunately its not just me that knows its wrong - the client has a pretty good idea! agh!

Member Avatar for HI2Japan

Those pics appear that way whether I have the screen maximized or not. I am using 1280x1024.

Good luck.

Member Avatar for amandamay

so I guess I solved this. If anyone has ie and wouldnt mind testing it out and letting me know that would be much appreciated. My ie, running on a mac, doesn't work too great (or hardly at all).

Anyway, all I ended up doing is insert a table. The pages of the site have three pretty distinct sections, so I put in a table with three rows, and one column and set the width to 100%. And for some reason that worked. I have no idea why.

The only thing wrong now is my mouseover image enlargements don't work in ie. But I am not convinced that its not just my version acting up. I hope so. Agh!

Member Avatar for CassieJ

so I guess I solved this. If anyone has ie and wouldnt mind testing it out and letting me know that would be much appreciated. My ie, running on a mac, doesn't work too great (or hardly at all).

Anyway, all I ended up doing is insert a table. The pages of the site have three pretty distinct sections, so I put in a table with three rows, and one column and set the width to 100%. And for some reason that worked. I have no idea why.

The only thing wrong now is my mouseover image enlargements don't work in ie. But I am not convinced that its not just my version acting up. I hope so. Agh!

OK so I see your Firefox and compared to my I.e. and see what you are talking about. My ie splits the images as apposed to firefox having them spread in one l ine across the page.

Good luck!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.