How Does My Site Look with Your Browser?

I have the latest versions of Internet Explorer and FireFox. I only use FireFox.

Before I launched my new site, Coupons To Your Inbox, I made sure it was rendered exactly the same by both of my browsers. This is how it's meant to look:



However, today I saw how my site looks in Internet Explorer 6: totally skewed!

- The opt-in box on the right-hand side is presented below the main box on the left
- The main box on the left is displayed very narrow
- The transparent logo at the top of the page is rendered grey instead of see-through

Can you guys tell me how my site looks for you, please? Does it look like it's meant to? If it doesn't, please tell me which browser and operating system you use and how I might be able to fix the problem.

 

this site is ok in FF 2.0.0.14

 

Opera 9: looks fine
Safari 3.1: looks fine
firefox 2.0: looks fine
IE 7: looks fine
IE 8: First link in the nav bar is about 10px higher then the others

 

Thanks, guys, especially Crath!

I know how to fix the problem with IE 8. Does anyone know how I can fix the problem with IE 6?

And, are there any other browsers that should be tested?

 

Looks ok in FF 2.0.0.14, problem exists in IE6 as you mentioned...

You can check how your site looks in various browsers through this site
browsershots.org

 

Jam4,

Thank you very much for that Browsershots.org service. I added to your DP reputation.

 

crisp and clean on my firefox and IE browsers nice work running off a laptop with IE 6.0 and firefox

 

Not exactly. Some padding is off. Why don't you just download the 2 othe rbrowsers you need?

Opera
Safari

Browsershots takes too long to do anything.

 

Looking at it using IE8, there is loads of white space at the bottom, even more than when viewing it in IE7. Also the "Coupons by Category" part of the menu floats slightly higher than the others.

Otherwise it looks ok.

 

Yeah looks ok

 

Looks fine in Opera and FF

 

Blueparukia beat me to it. : )

Building a site, you need more than 2 browsers.

Second but more important: do NOT test your site against IE8!!!!!!!!!!!!!!!!!!!!

I need more exclamation points....
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

IE8 is out for people to take good, working, valid, well-built sites who work in all stable browsers, and finding bugs that are still in IE8 (it be beta, matey, yarr). Do NOT change your site to look good in IE8-- because then your page will NOT look great in IE8 when it's a stable-releaserd browser (almost guarenteed, if the site otherwise had looked goood in everyone else).

Though it's possible IE8beta can point out an error, but I wouldn't use it for that.

IE6, I'd have to look at... teh Internets were out and are back at work but still out at home, thus no access to my server argh.

Extras:

Looking in Tredosoft IE6 (win xp if you're interested, you should get them if you can), the greyish background on the logo is just IE6 not understanding alpha transparency in PNGs... either replace it with a gif only for IE6 and below (easily done usually) while the smarter browsers get the png, or you could resort to PNGfix, a javascript to do the job. Actually, since your background gradient png is the same from left to right, you could easily get away with the logo as a non-transparent png with the gradient as a background on top of the other gradient too. Even better.

Second, IE6 uses any excuse to make floated stuff drop down. Read this: http://www.sitepoint.com/forums/showpost.php?p=1374925&postcount=15
If IE6 thinks there's not enough room, it drops the float. There might really not be enough room, or another bug like 3pxjog or doubled-float-margins is making there not be enough room. Remember that other browsers will let content stick out a bit (so if there's really not enough room, FF etc will let the float stay in place most of the time, letting it stick out a bit... if there's really really not enough room, then it'll drop it) while IE6 wants to stretch the container to hold the content... but apparently doesn't do it for floats.

Third, I never saw the menu in FF1.5 on the Linux machine or on FF2 on 'Blows. Why? You must be using a script to make it appear, and I have NoScript. Bad. couponstoyourinbox.js makes the menu for people with JS enabled. Some people don't, or surf through a firewall that doesn't let it in... and of course, currently teh googles can't deal with JS, so they'll never be able to surf through your menu. This may change in the future, since there are some spam bots who have learned to read some JS, but don't count on it anytime soon.

Bleh, I done : ) Otherwise, looks good.

 

looks fine in FF and in IE 6

 

Thanks for the help, guys. Much appreciated.

Stomme Poes, I thank you especially. Some really great advice. I added to your DP reputation!