Shouldn't Firefox be better than IE?

[PlanetKarl]

My site seems perfectly fine, until I load it up in Firefox. In firfox, it seems to render very slowly meaning the page flickers when I try to scroll.

I have done all the XHTML conformity check and everything is fine. Also, my title seems to ignore the size CSS and comes out small in Firefox.

I always though firefox was supposed to be better?

I am at www.planetkarl.com

[Faglork]

Don't know how you did an "XHTML conformity check", because your site does NOT validate:
http://validator.w3.org/check?verbos...lanetkarl.com/

and your CSS cannot be validated:
http://tinyurl.com/dvf3t

Apart from that, I do not notice any "flickering" with FF 1.5 on WIN 98.

hth,
faglork

[Tim]

Originally Posted by PlanetKarl

My site seems perfectly fine...
I have done all the XHTML conformity check and everything is fine.

Actually you have six errors in your XHTML and one of those prevents your CSS from validating. Cleaning up you code might speed up loading but I didn't notice any slowness.
Your first page looks fine and more or less the same in Firefox and IE. For me, the title appears bigger in Firefox and I think the normal flickering effect is simply exaggerated by using white text on a dark background.

Firefox is much better than IE in every respect. Ideally, you should design for Firefox and debug for IE.

Edit: Sorry for repeating Faglork's comments, that'll teach me to answer the phone!

[26global]

I didn't notice any flickering but your site took about 10+ seconds to load which for me is way too long. I'm not sure why site loaded slow. I am in Oslo, Norway on a fast connection. I'm using firefox 1.5 also.

Peace,

Jeff

[PlanetKarl]

Thanks for all your help... sorry those XHTML errors are from stuff I just added in the last couple of days, and I fixed them up.

In Firefox, it seems only my page is slow, I cannot seem to find any other pages on the web that are slow. Perhaps my computer does not like my site?

[PlanetKarl]

By the way, I am using Firefox 1.5 on Windows XP sp2.

I don't seem to know how to validate my CSS.

[DrTandem1]

Your page is slow because it is almost 200kb in file size.

[dharrison]

It was quite slow loading in my Mozilla FireFox.

I would say clean up your code and move the inline scripts to external files. It should reduce your filesize.

HTH

[johngroup]

Using FF and a fast conect, the page rendered well. At 218K+, it could slow some people down.

[PlanetKarl]

Thanks always for all your help everyone.

As for inline scripts, the only ones I have are my google ads, or am I missing something?

I have reduced the muber of posts per page, and it seems to help a little, but not really significantly.

Also, I cannot figure out why my title is still small in Firefox, but OK in IE. My CSS file is as such:

body {
background: #320000 url(images/hintergrund.gif) repeat-x fixed; 
text-align: center; 
padding: 1em 0;
font: 60% verdana, sans-serif;
}

a {
color: #ffc;
}

a:hover {
color: #fff;
text-decoration: none;
}

hr {
display: none;
}

img {
border: none;
	margin-top: 0px;
	margin-right: 3px;
	margin-bottom: 0px;
	margin-left: 3px;
}

ins {
text-decoration: none;
border-bottom: 1px dashed #eee;
}

acronym, abbr, dfn {
border-bottom: 1px dashed #eee;
font-style: normal;
}

blockquote {
border-left: 5px solid #320000;
margin: 1em 0;
padding: 10px;
background: #600000;
width: 470px;
}

code, pre {
color: #f93;
font-family: verdana, sans-serif;
}

.bild-links {
float: left;
margin: 0 15px 3px 0;
}

.bild-rechts {
float: right;
margin: 0 0 3px 15px;
}

.center {
text-align: center;
}

.description {
font-size: 1.2em;
}

.search-button {
font-size: 1em;
font-weight: bold;
border: 1px solid #300000;
background: #800000;
color: #ffc;
padding: 1px 2px;
}

#container {
margin: 0 auto;
text-align: left;
width: 730px;
border-bottom: 5px solid #eee;
background: url(images/container.gif);
color: #eee;
line-height: 150%;
}

#header {
height: 205px;
background: url(images/shanghaitheater.jpg) no-repeat;
}

#header h1 {
font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;
color: #fff;
line-height: 200px;
padding: 0 15px;
}

#header h1 a {
color: #fff;
text-decoration: none;
}

#navi {
float: right;
width: 200px;
}

#navi-innen {
padding: 0 15px 10px 15px;
}

#navi h2 {
font: bold 1.4em veradana, sans-serif;
margin: .8em 0 .2em 0;
}

#navi ul {
list-style: none;
margin: .4em 0 1em 0;
padding: 0;
}

#navi ul li ul {
margin: .2em 0 .4em .5em;
}

#navi a {
text-decoration: none;
font-weight: bold;
}

#navi .navi-search {
margin-bottom: 3px;
background: #eee;
font-size: 1em;
width: 150px;
border: 1px solid #300000;
}

#content {
margin: 1em 215px 1.5em 15px;
font-size: 1.2em;
}

#content h2 {
font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;
font-size: 1.7em ;
line-height: 18px;
font-style: italic;

margin: 5px 0;
letter-spacing: 1px;
}

#content h2 a {
text-decoration: none;
}

#content h3 {
padding: 0 0 0 17px;
margin: .5em 0;
font-size: 1.4em;
}

#content h4 {
font-size: 1.3em;
padding: 0;
margin: 1em 0;
}

#content h5 {
font-size: 1.1em;
padding: 0;
margin: 1em 0;
}

#content .date {
font-size: 1em;
text-align: right;
font-weight: bold;
}

#content .meta {
font-size: .9em;
}

#content .feedback {
margin: 15px 0 15px 0;
text-align: right;
padding-bottom: 10px;
border-bottom: 1px solid #700000;
}

#commentlist li {
margin-bottom: 1.5em;
padding-bottom: 1em;
border-bottom: 1px solid #700000;
}

#commentform {
margin: 1em 0;
padding: 1em;
border: 1px solid #300000;
background: #600000;
}

#commentform textarea {
background: #eee;
}

#commentform #email, #commentform #author, #commentform #url {
font-size: 1.1em;
background: #eee;
border: 1px solid #300000;
width: 180px;
}

#footer {
clear: both;
margin: 3em 15px 0 15px;
padding: 5px;
text-align: center;
font-size: .8em;
}

With #header h1 being my page title...

[PlanetKarl]

WIth the CSS validator that Tim pointed me to, it seems to be all related to background color. Could this be a big problem?

[mugsetcmaster]

PlanetKarl:

I found while validating at w3c"s site I kept getting the same warnings. These are warnings though and not errors. Check the faq section for more detail on just what its all about.
http://www.websitedev.de/css/validator-faq

kass

[ccera]

The difference in font size in IE and FF may just be a difference in your default settings on each on your computer. It looks different on mine, too, but my font sizes are currently set VERY differently.
If I could tell you how best to adjust the css to take care of the problem, I would. :)
I'm sure someone out there can!
CiCi

[PlanetKarl]

Hi guys, I just wanted to update you with the asnwer to this problem.
I was using a background image in my main column that was tiles vertically. It was only about 10 pixels high. I think Firefox rednering is very quick, but this probably put too many elements on the screen. I simply made the background image bigger (50px) and it works smooth as silk now.

I also fixed up the CSS so that the page looks almost identical in Firefox and IE.

IE takes longer to initially render the page, but is quicker with the scrolling updates because of the way it renders.

Firefox is quicker to compose and render a page initially, and after elements change, but seems to be a bit slower with scroll refreshes.

Anyways, thats my story.

[MuNKyonline]

I think the reason the text looked different in the two browsers is because you hadn't actually defined a size for the text in your css or am I missing something?