Test Site - Macs & PC's, cross browser/resolution/et

[matauri]

Designing for every PC, Mac, Browser, Resolution, Screen Size, etc can be hard at the best of times.

What we would like to propose for this thread is for people who would like to see screenshots of what their sites may look like on other computers (PC & Mac), browsers, resolutions, screen sizes, etc. This doesn't mean that you shouldn't go to the effort of downloading multiple browsers to test your sites on your computer, as this should be a standard practice anyway.

To all you members that would like to check your pages appearance, post your query here.

To all those that don't mind taking screenshots of these sites on their respective computers, place the image here. (size no larger than: 450 x 450px)

This could be a good eye opener to those that aren't aware how their pages are viewed for different users.


Cindy

[cyanide]

okay, this site www.eatseeker.ca looks good in every browser, except Safari (Mac) doesn't show the pics in the popups

[technica]

Cyanide, I tried the site in Safari, and it is confirmed that none of the pictures work on the pop up.
But on both my PC and my Mac, there was an alt tag on the second row of pictures that I am assuming shouldn't be there.... ;)

[cyanide]

Originally Posted by technica

Cyanide, I tried the site in Safari, and it is confirmed that none of the pictures work on the pop up.
But on both my PC and my Mac, there was an alt tag on the second row of pictures that I am assuming shouldn't be there.... ;)

Becky...
Thanks for your input.
Yes, I know about the alt tag LOL
Against my better judgement, the client is looking after the updating of the site.

[mtheory]

The ideal solution to universal browser compatability would be to create a code language that works and displays with all browsers in the same way.

This "least common denominator" woulsd also have to be compatable with server side languages like cgi, php, xml, asp, and cf(hint).

This "LCD" should have a 100% percent market pentration, but I'd settle for as little as 97%, still better than any single browser platform.

Any guesses?


http://mtheoryit.com
http://localshoppernetwork.com

[eightfifteen]

The problem is that Netcrap, Internet Exploder, and just about every other browser's manufacturer want to make their mark, instead of conforming to standards. Your idea is a grand one, but don't count on it soon.

[eightfifteen]

Good morning,

I just did a quick update to our site, and added a quicktime movie of a commercial we produced. Could you fine folks check it to see if it works for you?

http://www.virtualviva.com/port-client.html#ISL

It is in the Iowa Student Loan section.

Thanks.

[ashelley]

I have been informed by a few visitors to my site the text is overlapping and jumbled and hard to read. I have validated the html - tested - no errors. I have validated the CSS - tested - no errors. Checked it w/ online utilities and found it should be viewable by all browers. Still, I get these calls on occasion saying my site views poorly. Invariable, (sigh) the informant has no idea which browser or version they have, so I can't pinpoint which browser is causing the problem. I have done all I know to make it 100% browser friendly. I have SEOed a few pages, but apparently the SEOed pages view better (still with errors) than pages which have not been "cleaned up." The site is: http://www.ashelleydesign.com/. If there is someone who can tell me what the heck is wrong - I will love you for LIFE!
Thanks, Ang

[eightfifteen]

Well, I went to the site and it completelocked up my Safari. But what I did see was a bunch of overlapping text. I think the important thing to remember is that designing with CSS is not supported by all browsers, especially older ones.

[eightfifteen]

Hello -

I put together a site template for a client that is then going to plug in the text. Could you guys take a look at the home page template:

http://www.virtualviva.com/customer/KMN and the internal page - http://www.virtualviva.com/customer/KMN/internal.html

None of the links on the page are live.

On the home page, the address, URL, and the logo are to be aligned to the bottom of the page with the page adjusting as browser window rescales. There is also a "Show/Hide" script fo the rollover to show text describing the link under the horizontal line. This was a bit tricky, but I think I got it done.

** Correction** For some reason, on the index page, the boxes are not lining up with the text. They are not in the same table, but I have the cells height values matching left to right. Any ideas?

The internal page is very simple with rollovers, and the white area adjusts size as the window resizes.

Thanks

[wen_laat]

Hi,

I would really appreciate it, if someone could tell me how this site http://www.typicaldutchstuff.com looks on a Mac. Thank you so much in advance.

Wendy

[eightfifteen]

wen_laat-

First, welcome to the forums.

Second, I ran through your site quickly in Safari and in IE for the Mac, and the site looks fantastic. I didn't see anything that caused me a problem, or that looked out of place.

Nice design that's easy to find what you want.

Well done!

[wen_laat]

Thank you so much! This really pleased me to hear, as I was afraid that it might show up wrong on a Mac. You've made my day ;)

Wendy

[paulhiles]

Hi Wendy,

The site looks great.. one thing that I will point out though. You have an extra header statement in your index (home) page... so there are two doctypes, two titles, etc... they're not visible in any other pages I visited. Maybe this is added as an 'include' file? Just thought I should let you know.

Keep up the great work!

Paul

[wen_laat]

Hi Paul,

Thank you. I've checked the include file (I have a seperate one just for the index) and there was also a doc type line in that file, am going to delete that. Would it be smart to delete the metatags from the include file as well?

Just to be curious, is it bad to have 2 doctypes?

Wendy

[paulhiles]

To be as compatible as possible, I would recommend that your pages are well-formed and conform to the doctype.
You now have two </head><body> tags.. so there may still be further stuff to remove from either your index page or the 'include' file that you're using.

[wen_laat]

thank you for the hints! I've removed all the tags that were not neccesary.

Wendy

[rsadik]

Hi dear,
Can you kindly tell me how my site look on a Mac pc.
Site is http://www.arrowtravel.comand http://www.eldertravelclub.com

Thanks alot,
rsadik[/url]

[Webnauts]

Can you check this one I am still working on?
http://www.webnauts.net/index2.html

Thanks.

[eightfifteen]

Everything looks great in Safari. IE 5 for the mac has the black type, "Skip Navigation, Accesskeys, Print Version" spaced out vertically and it runs over the orange bar.

[calypso_webmaster]

Could you guys please cross this site through all the dif types of browsers..

I have checked a view and it seems fine but I hear form some people they can't get it to work..

thanks

www.calypsowebdesign.com

[eightfifteen]

Looks sweet in Safari

[scallihan]

Originally Posted by ashelley

I have been informed by a few visitors to my site the text is overlapping and jumbled and hard to read. I have validated the html - tested - no errors. I have validated the CSS - tested - no errors. Checked it w/ online utilities and found it should be viewable by all browers. Still, I get these calls on occasion saying my site views poorly. Invariable, (sigh) the informant has no idea which browser or version they have, so I can't pinpoint which browser is causing the problem. I have done all I know to make it 100% browser friendly. I have SEOed a few pages, but apparently the SEOed pages view better (still with errors) than pages which have not been "cleaned up." The site is: http://www.ashelleydesign.com/. If there is someone who can tell me what the heck is wrong - I will love you for LIFE!
Thanks, Ang

I'm getting a lot of overlapping of text and objects in Mozilla 1.7 (Windows), which is about the most standards-compliant browser available. The thing I noticed is that you don't have any DocType declaration -- that will trigger quirks mode (or "bugwards compatibility" mode), instead of standards mode in IE6, Mozilla, and NN7. You can't expect consistent results across browsers if you're telling them (by not including a DocType declaration) to ignore the current standards and reproduce earlier bugs (which are different for each browser) instead. For info on DocType declarations, see:

http://www.w3.org/TR/html4/struct/global.html#h-7.2

Steve
scallihan@thedoghousemail.com

[pixpixpix]

What used to work doesn't work any more. My detail pages such as

http://www.davidsanger.com/stock/england.html

used to have white borders around the photos in IE on the PC and now they have blue.

I am on a Mac Safari and the white borders work fine.

Looks like a CSS problem and I can't for the life of me figure it out.

Testing my detail pages at http://browsercam.com I also see it is busted in Netscape 4.8 . perhaps not a big problem.

But the blue borders on the PC really bugs me.

Any suggestions.

thanks

[paulhiles]

David, try adding this to your existing stylesheet

a img { color: #ffffff }
a:link img: { color: #ffffff }
a:visited img { color: #ffffff }
a:hover img { color: #ffffff }
a:active img { color: #ffffff }

<edit> missed out a couple of colons - oops! </edit>

alternatively, it could be written this way...
a, a:link, a:visited, a:hover, a:active, img { color: #ffffff }

[pixpixpix]

Paul - thanks - I did update style.css and that's what I would think works but it doesn't seem to in IE under windows which is what is so puzzling

[paulhiles]

Okay, I'm not going to let this get the better of me! :o)
Time for some brute force on those links.
Try adding this to your CSS link settings David.

a:link  {text-decoration: none; color: #ffffff }
a:visited {text-decoration: none; color: #ffffff }
a:hover {text-decoration: none; color: #ff353b }
a:active {text-decoration: none; color: #ff353b }

a img { border:solid 1px #ffffff; color: #ffffff }
a:link img { border:solid 1px #ffffff; color: #ffffff; text-decoration: none }
a:hover img { border:solid 1px #ffffff; color: #ff353b; text-decoration: none }
a:active img { border:solid 1px #ffffff; color: #ff353b; text-decoration: none }

Not the most elegant solution by a long chalk, but it seems to work on both FireFox 0.9 and IE 6.0.

[pixpixpix]

Thanks Paul - looks like that's the right direction. It now works OK I believe on the thumbnails. That's great.

The only thing now is to disable borders when needed, like on the logo. I put in a class so the logo doesn't get a border, but it doesn't seem to act properly on the IE WIndows side. Mac Safari and IE are OK.


a:link {text-decoration: none; color: #ffffff }
a:visited {text-decoration: none; color: #ffffff }
a:hover {text-decoration: none; color: #ff353b }
a:active {text-decoration: none; color: #ff353b }

a img { border:solid 1px #ffffff; color: #ffffff }
a:link img { border:solid 1px #ffffff; color: #ffffff; text-decoration: none }
a:hover img { border:solid 1px #ffffff; color: #ffffff; text-decoration: none }
a:active img { border:solid 1px #ffffff; color: #ffffff; text-decoration: none }

a.noborder img { border: none; color: #ffffff }
a.noborder:link img { border: none; color: #ffffff; text-decoration: none }
a.noborder:hover img {border: none; color: #ffffff; text-decoration: none }
a.noborder:active img {border: none; color: #ffffff; text-decoration: none }

[Niko Holopainen]

Just checked on IE 6, Windows, didn't see any irregularities, can you specify where the error is and I'll join up trying to advice.

Regards,

[paulhiles]

Looks fine on Firefox and IE, how about on Macs?
On the 'noborder' class David, have you used border: none; (as above)?

The reason I ask is when I did a quick validation of the CSS, it returned a selector like this.
a.noborder img {border : medium none inherit; color: #ffffff }

[pixpixpix]

The new problem I saw was a white border around the David Sanger Photography logo top center. I fixed it by adding the class, then got a border only when the logo link was clicked on. It's a bit difficult to know for sure how it works in windows since I haven't a windows machine, so have been trying to use browsercam.com

On my own machine with Mac it works now in Safari 1.2 but not in IE 5.2 shows a turqoise border when I click on the logo.

Not having Windows is a real disadvantage since I am often blindsided by unexpected consequences of small changes.

david

ps is border: 0px a better term.

I used border: none in my http://davidsanger.com/css/style.css . Not sure where the validator draws the conclusion it does.

[paulhiles]

Originally Posted by pixpixpix

The new problem I saw was a white border around the David Sanger Photography logo top center when clicked as a link. It's a bit difficult to know for sure since I haven't a windows machine, so have been trying to use browsercam.com

You might want to take out the color:#ffffff out of the noborder active selector - see if that helps. The linked images are fine on all the browsers I've tried here on Windows.

Originally Posted by pixpixpix

On my own machine with Mac it is fine in Safari 1.2 but IE 5.2 shows a turqoise border when I click on the logo.

Weird! but then we're talking IE on a Mac here!! ;o) The only pale blue / turquoise I could see in the stylesheet is in the 'bayarea' class and that's not used in the header.

Originally Posted by pixpixpix

is border: 0px a better term.

I usually use either border:0px OR border:0;

[joesnow]

Originally Posted by rsadik

Hi dear,
Can you kindly tell me how my site look on a Mac pc.
Site is http://www.arrowtravel.comand http://www.eldertravelclub.com

Thanks alot,
rsadik[/url]

Looks cool on IE for MAc to me...