Hi John,

Thanks for the timely and useful suggestions.

I'm exploring a few other possibilities at this time. I am confident that my

HTML code and CSS are valid, using DWCS4 in code view and not getting any red

error messages. Again, since I know my website and all pages render perfectly on

at least two computers running IE8 (and I'll try to check on at least one or two

more different computers today), I am confident the problem is in the

configuration of the specific two computers running IE8 and having the problem.

I picked up from a Forum post that there is a possible "fix" for this by

inserting meta data in the head to force IE8 into IE7 mode. Any comments on this

option?

Regards,

Tom

Hi Murray,

I just checked the problem page, and the only error was in using "&" in the

meta tag. I changed it to "and." I'll see what happens. Is this type of

minor error enough to cause a problem with IE8 rendering the CSS incorrectly?

Hard to believe if so!

Tom

Hi Murray,

My next step will be to add this code to the head to try to force the IE8

browser to render the problem page as if the browser were IE7:   

I found this on searches of "force IE8 to render as IE7," and followup comments

were generally favorable. Apparently, some standing and known issues on the way

IE8 renders. I figured I'd add this to the head section of the problem page only

(ahead of the CSS link) and see what happens.

Do you have experience with trying this fix?

Tom

Here's the code...

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Regards,

Tom

Murray,

I expect it will fix the problem, but I haven't been able to get feedback as yet

from the person who had the issue. Hope to know later today or tomorrow.

So far, no problems with my two computers using IE8.

Tom

Hi Nancy,

That's an interesting trick. For sure, by zooming text only, I can affect the

entire layout, change the text wraps and element positioning. Are you suggesting

that possibly my client may have the text set to view larger? Good possibility,

I'll follow up on this.

Thanks for the suggestion.

Tom

Hi Nancy,

Wow! I've designed about a half dozen websites and have always thought I was

doing things correctly -- using Dreamweaver CS4 with "proper" CSS. I suspect

that most people use the default settings that come with their browser in terms

of text zoom / size and leave them there. For every website I've designed, once

I've checked my design using 5 different browsers in Dreamweaver CS4, it has

worked fine when I went "live," and none of my clients complained about the look

or the layout being strange.

This was a real eye-opener for me. I opened the "problem page" of my client's

new website in IE8 and it looked normal on my computer -- as I expected. Then,

per your suggestion, in the view drop down on the browser, I set the text size

to "small" and I instantly produced the incorrect layout that my client was

experiencing! It looks like if the user changes the text viewing size / zoom, it

can cause a serious problem in how the page actually looks. This does not appear

to be the case if you leave the text zoom / size alone and just set the zoom to

make the page larger or smaller.

I'll take a look at the link you provided for cross browser compatibility.

However, what I think I actually need is a way to either ensure that the browser

is at its default text size / zoom settings when the page is opened by the

browser, or else I need to find a way to deactivate the capability to change the

text zooming / size altogether. Are either of these actions even possible?

I use a standard box model, with no absolute positioning. I use element floating

and clearing as necessary, controlling my spacing through use of margins and

padding. I use some tables if needed, but I don't lay the whole .html page out

as a table like I've seen done commonly. Is a box model considered good

practice? I took many hours of on-line training in Dreamweaver CS4 website

design, and I don't remember any comments from the trainers about this issue of

text zoom / size and its effect on totally changing the look of the layout.

Clearly, it is an issue that I need to address.

Your help and comments are greatly appreciated!

Tom

Hi Nancy,

I will go ahead and apply the font-size = 100% and line-height = 100% properties

to my CSS for the

tag. I already have zeroed out the margins and padding.

As far as my height properties, with few exceptions, I tend to use "auto" for

the height of containing elements, controlling spacing between elements with

padding and margins specified in the CSS. I can put fixed heights on the

containing elements, but I've generally found that "auto" is better to allow the

overall page height to flex, depending on content. When I specify a height, I

tend to use pixels, so I'll do that in ems from this point forward. Is there a

safer way to specify containing element height than "auto?"

Although this problem was identified by my client using IE8, I was able to

produce the problem using Firefox, so it's not an issue related only to IE.

Rather, it's related to the user changing the text size / text zoom setting on

his/her personal browser. I really need to address this proactively somehow.

Changing the body CSS will help, but in the end, if the user decides to change

text size from "medium" to "smaller," there's a potential problem.

I know I can resolve this by not using much text and embedding images that

contain text, but I need the site to be more search engine friendly for SEO.

Without the text, I'm not sure how I can do that.

Again, your help is greatly appreciated.

Regards,

Tom

Hi Murray,

I've found that I have the rendering problem on only 1 page in the website. This

page has two floated elements in the same containing element. The first (or top)

element floated right seems to stay in place, no matter what the text size is

set at by the browser. The second floated element (floated right) is the one

that moves when the text size is reduced.

Although I haven't used absolute positioning in my layouts, I've found that I

can use this property for the image element instead of floating it right. Then,

I can put a class on the paragraph text to effectively make it look like a text

wrap. I've tried this method with reduced and enlarged text, and it seems to

work.

Many  thanks for your help on this.

Regards,

Tom

Thanks for your help on this.

Regards,

Tom