Does it to you? Hopefully not. No one here ever pointed out a problem before. I just wanted to check here in case there's any problems. I'm using a 16:9. I will post a picture if needed. The "Serving the North Kingstown..." bit is on the next line and underneath "Insured...."

I'm using a PC running Windows XPPro with a 4:3 monitor and Firefox 16.0.2. Your page doesn't look "funny". It would be helpful if you could post a screenshot showing what you see and a description of what it is supposed to look like. Include a description of your computer, operating system and browser version.

The text "Serving the North Kingston..." is over the image of the dog holding his leash. The alternate text for this dog's image could use a space between the closing quote mark and the width attribute. You could try adding the space and see if that helps.

Looks fine to me on a wide screen. But if I view it in Firefox (with text zoom set to "text only") and bump up the text size one notch, that text does drop down. You could help to prevent it by giving the contact div a set width. E.g.

Looks fine to me on a wide screen. But if I view it in Firefox (with text zoom set to "text only") and bump up the text size one notch, that text does drop down. You could help to prevent it by giving the contact div a set width. E.g.

`

#contact { width: 300px;}`

Thanks ronpat and ralph. I'm using XP and Chrome. ronpat, I tried your suggestion but it didn't do anything. I'm supposed to put a space after the quote in the alternate text before the forward slash?

ralph, I made your changes, however, now it is messed up in the tabs. Also, the tops of all feature images the border went missing. I'm also wondering now if my site looks a bit squeezed in on a widescreen. I think I need to do widen the entire width. What is the percentage of users who now use a WS monitor? Do you know?

Quick followup... Looks like you can extend the width of the page easily enough, but that will not stop the tabs from deteriorating. Using ems for the padding causes them to spread too fast, especially on the bottom. Margins and padding around buttons/tabs is better handled with px. You may want to reconsider those areas that should extend as text size changes, vs those areas that would be better served by a fixed space.

Thank you for chiming in, Mr. felgall. That may well be a long time misunderstanding. Normative vs. informative maybe? Since we wrote HTML back then, and the browser of the day was indeed Netscape, the following guidelines were relevent. - After a few quick tests, they don't seem to apply today. Progress.

Looks fine to me on a wide screen. But if I view it in Firefox (with text zoom set to "text only") and bump up the text size one notch, that text does drop down. You could help to prevent it by giving the contact div a set width. E.g.

`

#contact { width: 300px;}`

Hey ralph.

I forgot to verify after making the changes. Can you or someone verify that everything is looking fine now? Did my changes fix the problem? It looks fine now in Google Chrome except for the squished tabs and the top border on feature image. Firefox no problems at all. No problems with tabs/picture border.

Was hard to get an agreeable text size to suit both Chrome and Firefox. Ended up using .7em for font size. Too much of a space between the list and contact in Firefox, and too close in Chrome.

Okay, thanks ralph. I'll take your word for it. Your word is golden. I still don't see the black top border on the image. The other three borders yes, but not the top in Chrome.

Here's what it looks like to my eyes. Perhaps it's my Chrome settings. I could never get them perfect. I kept altering it... it will look fine on one website but then not the next. Is this what to expect with a widescreen?

Humor me, please. Over which image do you not see the black border? How much is the text being zoomed on your widescreen monitor? Have your changes been posted on your original link? Are you open to suggestions?

eLePHANT, I was in the mood to tinker and this is where it went. As a 'fluid' layout, it is very friendly with Wide Screen Monitors and users who like to Zoom text and pages.

Tested in FF 17.0.1 and IE 8 on a Windows XPP PC.

The nav tabs work as is; a new bg image (attached) adds the gradient. The tabs resize nicely, too! IE8 tabs have square corners.

I gave the page a {max-width:1400px} and {min-width:720px} for no particular reason. Change or delete to suit.

NOTE: for my convenience, I changed the paths to the images to network paths so they are read from the host site. (The exception is the new bg image for the nav tabs, of course.) You will probably want to change them back to relative paths.

The HTML has been rearranged a little to permit this layout.

The stylesheet should be given a unique name and the link to the style sheet should be renamed to point to it.

I believe the other pages on your site would work with this type of layout.

Was hard to get an agreeable text size to suit both Chrome and Firefox. Ended up using .7em for font size. Too much of a space between the list and contact in Firefox, and too close in Chrome.

em font sizes are based on the browser's default font size. When comparing a page in different browsers, it is necessary for the default font-size be the same in the browsers, otherwise the size of the text may be different in the different browsers.

eLePHANT said:

Here's what it looks like to my eyes. Perhaps it's my Chrome settings. I could never get them perfect. I kept altering it... it will look fine on one website but then not the next. Is this what to expect with a widescreen?

Sounds like you are asking if a wide screen monitor can be responsible for things that have nothing to do with any monitor, regardless of size or shape. Except for bugs in graphics cards, a monitor is a monitor is a monitor... they don't cause the problems that you are describing. Widescreen monitors just contain more viewing area (usually).

If a monitor has small, densely packed pixels, as many newer montors do, then users are inclined to Zoom text or the whole page larger so it will be large enough to read. Zooming is very device and browser dependent. Peculiar behaviors can happen, although they are more often found on "pixel perfect" page designs where no margin for device or browser differences was allowed.

I don't "zoom" things very much, so I'm not familiar with the zooming features of different browsers. I understand that some browsers remember settings for each tab and others remember settings for each site. Dunno for sure, though.

PS: Two questions, please: (1) If you try this layout, is that pesky black border visible in Chrome? (2) Did adding the space mentioned in my previous post have any effect on that border in Chrome?

I don't "zoom" things very much, so I'm not familiar with the zooming features of different browsers. I understand that some browsers remember settings for each tab and others remember settings for each site. Dunno for sure, though.

I regularly zoom pages, because I don't like small print. In the past, browsers tended to be set to zoom text only, but these days I think they are all set to zoom the whole page. This is kinder on layouts, but it's behavior I hate, personally. I'd rather the text just got bigger and not the design. A good layout won't break in this situation, but many do, which is probably why browsers now just zoom the whole damned page (which means that fixed width designs—with no max-width—quickly get too wide for the browser window :rolleyes:). I have Firefox set to zoom text only, which used to be the default. But I now use Chrome for most stuff, and it doesn't seem to have the option to zoom text only, which sucks, IMHO.

This is kinder on layouts, but it's behavior I hate, personally. I'd rather the text just got bigger and not the design. ... (which means that fixed width designs—with no max-width—quickly get too wide for the browser window :rolleyes:).

I agree completely. I've rarely had a need to zoom the whole page; tweaking the text alone was usually satisfactory.

I don't think the absence of a max-width has anything to do with the page size exceeding the browser window size. I think it's the inability of the page to be compressed into a narrower viewing screen... ie, the absence of "fluidness" to a sufficiently narrow width. I noticed that IE 8 generated a horizontal scroll bar when the zoom scaled min-width proportions were reached and I continued to zoom the page larger (like a fixed width page would do from the start).

I don't think the absence of a max-width has anything to do with the page size exceeding the browser window size.

What I meant was that, even with whole page zooming, if your site is reasonably fluid and has a max width set on the wrapper (e.g. max-width: 98%), the design stops expanding once it gets to 98% width of the browser—even if all the elements within the page keep getting larger (in which case they are forced to reflow).