Two Different Views - Chrome & IE 9

HTML & CSS
1

The two jpeg’s are both at 100%.

The display’s are different even though they are the exact same site (URL) and HTML/CSS pages.

I’m at a loss to understand.

Partial CSS . . .


#pageWrapper {
	min-width:752px;
	max-width:96em;
	
}

#masthead	{
	margin-top:4px;
	
	}

#sideBar {
	float:left;
	width:320px; 		/*actually sets the width of the sideBar content div*/
	padding-top:.75em; 	/*was 2em */
	margin-left: .5em;

}

h1		{
	padding-left:28px;
	font: 48px/52px tangerine,arial,helvetica,sans-serif;
	color:#239BF3; /* #4DF; */
	text-shadow:0 0 8px #ADF;
}

h1 span {
	display:block;
	padding-left:48px;
}

h1 span span {
	margin-top:-6px;
}

Thanks . . . Rick

2

Can you also post the HTML?

Have you run your HTML through the W3C validator?

3

IE9 doesn’t support text shadow. As for the other differences, we can’t give an answer without a link to the page.

4

The Menu sidebar in Chrome is very close to the main content as opposed to the IE9 view.

Rick

5

Hi Rick. We can see what the problem is, but we can’t debug an image. :slight_smile:

6

Looks like the text is also different sizes from the image so have you zoomed one and not the other with the browsers settings?

7

To be sure - both browsers were at 100 percent.

I am aware that IE9 doesn’t support text shadows. Not to worry about that.

My main concern is that the menu is very close to the main content in Chrome but spaced well in IE9.

I still don’t quite understand is alignment of objects within in the main content, like inheritance?

There are charts on some of my pages, 800 x 600px. I wish the charts to be the full width of the main content and to expand and contract when the user zooms in or out.

I would like to have everything in the main content align left and right as the footer widths except the masthead bar at the top which I would like a full view port width view, correct?

I hope I explained this well enough.

www.propertieswithstyle.com

Thanks all.

Rick

8

Make sure the default font and font-size is the same in both browsers. Not just the default zoom.

9

I’ll have to see where the font size is set in IE & Chrome.

I never knew of this default font size or that you could set it . . .

Rick

10

OK I found it in Chrome.

The default font was set to LARGE.

I reset it to medium and the site falls into place much better now.

Thanks.

Rick

11

You’re very welcome, Rick. Thanks for posting what you found. Glad it turned out to be and easy learning experience. :slight_smile:

12

It’s always good to test this sort of thing, as you don’t know what font size end users will have. A site can/should be coded to behave well at any font size.

13

Ralph, I can’t possibly know what the end users have their browsers default font set for.

What would I test for?

Rick

14

You basically do what you did by accident: zoom in and out of your website to see what happens. Whether your browser is set to zoom fonts only or (more commonly these days) zoom the whole page, the layout should not break. If it does, then it’s not coded as well as it could be.

EDIT: I just checked your site, and it seems to behave OK when zooming the whole site, but if the browser is set to zoom fonts only, the content breaks, with the text slipping under the sidebar. Somepeople wouldn’t care about that these days, as browsers tend to be set to zoom the whole page, but still, for me is signals potential layout problems.

15