Chrome CSS problem

[Tracie-marie]

I'm completely self taught - and probably wrongly have learned by trial and error so I have absolutely no idea where I have gone wrong here, I think something in my CSS gets read differently by Chrome than other browsers.

I'm redoing my website
http://www.acrodancer.com/Test_Site/completed/AcroDancer.html

In IE the sizing is great but in chrome everything is shrunk down and way too tiny to read.

Is there a reason this would be happening?

Thanks.

[Tracie-marie]

I should probably point out that when I open it from my computer it looks beautiful it is only once I upload it to my server that the issue begins....

[MidiMagic]

It may be IE that is causing the trouble.

Try designing it for chrome, and then adjusting to make it work for IE.

One big difference:

IE puts the width and height attribute outside any margins, borders, and padding.

The W3C standard and other browsers puts the width and height attributes inside margins, borders and padding.

The trick is to not put width or height styles on the same tag that has margin, border, or padding styles. If both are needed, use nested tags.

[Tracie-marie]

Thanks for the quick reply.

I will have a tweak and see if it works.

I am somewhat confused though as it works in Safari and FF and Mozilla and I would have thought that if I had problems with Chrome it would have shown up in these as well. But it looks just as good in these as it does with IE.

So before I go redoing the whole thing - is it possible that it's just chrome or is it a fluke (is there such a thing?) that it's working on these but not Chrome?

Thanks again.

[shaya4207]

I am somewhat confused though as it works in Safari and FF and Mozilla and I would have thought that if I had problems with Chrome it would have shown up in these as well. But it looks just as good in these as it does with IE.

Interesting, since Chrome uses Safari's 'WebKit'

On another note, it looks the same on my computer accross all browsers

[Tracie-marie]

Thank you - I just jumped on a friend's computer and Chrome is almost exactly the same as the other browsers. The only difference being that the font for my links has mysteriously changed itself in Chrome.

This is different to the problem I'm having with Chrome on my PC so I'm a bit confused.

While I'm no longer in a panic I would very much like to make sure my site is consistent and understand where I've gone wrong for future projects.

Any ideas as to where this inconsistency is coming from would be greatly appreciated.

Thanks again.

[NettSite]

This may sound dumb, but have you checked what the "Zoom" setting is on your Chrome browser, on the little wrench drop down menu?

[Tracie-marie]

It's not dumb and no I hadn't I fixed that this afternoon which leaves me only with the other issue - the styling for my links.

The font is showing up differently on my husband's and friend's computer with Chrome - basically working but wrong font.

As I said I'm no longer in a panic but would like to understand what I've done wrong for future.

Here is the code that I am using to style my links:

#flowtabs li a {
	background:#1d1e21;
					display:block;
					height: 25px;    	
					padding-bottom:35px;
					margin:0px;
				/* font decoration */
					color:#0000FF;
					font-size:14px;
					font-family:Forte;
					line-height:33px;
					text-align:center;
					text-decoration:none;
}

Is it possible that it is once again just their settings and my code is fine? I would very much like that :)

Thanks for your help

[teedoff]

Might I also suggest a trip to the code validator?

You have just a few errors, nothing major, but a couple I noticed were just bad coding practices. In particular, the way you style images width and height. It should be:

<img src="someImage.jpg" width="300" height="300" />

Instead of separating width and height with an ampersand.

....width="300"&height="300" />

[Tracie-marie]

Thanks so much will try the validator and fix my coding errors.

Much appreciated.

[teedoff]

No problem. Inconsistant browser rendering is often caused by invalid code. Fixing validation errors should always be one of the first steps to debuggin current and potential errors and cross browser issues.

Also always make sure you're using a valid doctype.