Firefox 3 disagreeing with Google Chrome, Safari, and Opera

I'm currently designing the website historicdowntownstuart.com.
It's being developed in wordpress.
I can not figure out why it is rendering oddly in Google Chrome,
Safari, and Opera but not in Firefox.
Anyone know a way to fix this?

Thanks for the help in advance.

On Mar 12, 7:53*pm, Jeff <jeff_th... (AT) att (DOT) net> wrote:

affinitydesi... (AT) gmail (DOT) com wrote:
I'm currently designing the website historicdowntownstuart.com.
It's being developed in wordpress.
I can not figure out why it is rendering oddly in Google Chrome,
Safari, and Opera but not in Firefox.
Anyone know a way to fix this?

This looks the same to me in FireFox and Safari 3.2.1 windows. Usually
they track closely. You've got a bit much going on so I'm not sure what
doesn't work, but I wouldn't be surprised!

* *IE6, on the other hand is badly broke. Good luck with that!

* *Jeff



Thanks for the help in advance.

Yeah, I stopped developing for IE 6. The navigation and header logo
are pushed further down then they should be. The navigation is
supposed to line up with the green and appear as tabs.

affinitydesigns (AT) gmail (DOT) com wrote:

I'm currently designing the website historicdowntownstuart.com.
It's being developed in wordpress.
I can not figure out why it is rendering oddly in Google Chrome,
Safari, and Opera but not in Firefox.
Anyone know a way to fix this?

You appear to be trying to fit content into a background image and fixed
sized boxes. Don't. It won't work.

Try increasing your font size one single notch. The menus start to overlap.

You also have 26 HTML errors and 19 CSS errors although most of the latter
relate to opacity.

On Mar 12, 7:06*pm, "rf" <r...@z.invalid> wrote:

affinitydesi... (AT) gmail (DOT) com wrote:
I'm currently designing the website historicdowntownstuart.com.
It's being developed in wordpress.
I can not figure out why it is rendering oddly in Google Chrome,
Safari, and Opera but not in Firefox.
Anyone know a way to fix this?

You appear to be trying to fit content into a background image and fixed
sized boxes. Don't. It won't work.

Try increasing your font size one single notch. The menus start to overlap.

You also have 26 HTML errors and 19 CSS errors although most of the latter
relate to opacity.

I've gone over the validation and none of it is relating to the actual
layout, just to the javascript slideshow and other content that isn't
my main focus at the moment.
I've done something similar before and it's worked, I just cannot for
the life of me figure out what is causing the css to alter between
firefox and chrome, opera, and safari. I fixed it for IE because I can
use conditional statements, but I cannot get FF3 to agree with other
browsers.

affinitydesigns (AT) gmail (DOT) com wrote:

I'm currently designing the website historicdowntownstuart.com.
It's being developed in wordpress.
I can not figure out why it is rendering oddly in Google Chrome,
Safari, and Opera but not in Firefox.
Anyone know a way to fix this?

This looks the same to me in FireFox and Safari 3.2.1 windows. Usually
they track closely. You've got a bit much going on so I'm not sure what
doesn't work, but I wouldn't be surprised!

IE6, on the other hand is badly broke. Good luck with that!

Jeff

Thanks for the help in advance.

affinitydesigns (AT) gmail (DOT) com wrote:

On Mar 12, 7:06 pm, "rf" <r...@z.invalid> wrote:
affinitydesi... (AT) gmail (DOT) com wrote:
I'm currently designing the website historicdowntownstuart.com.
It's being developed in wordpress.
I can not figure out why it is rendering oddly in Google Chrome,
Safari, and Opera but not in Firefox.
Anyone know a way to fix this?

You appear to be trying to fit content into a background image and
fixed sized boxes. Don't. It won't work.

Try increasing your font size one single notch. The menus start to
overlap.

You also have 26 HTML errors and 19 CSS errors although most of the
latter relate to opacity.

I've gone over the validation and none of it is relating to the actual
layout, just to the javascript slideshow and other content that isn't
my main focus at the moment.
I've done something similar before and it's worked, I just cannot for
the life of me figure out what is causing the css to alter between
firefox and chrome, opera, and safari.

Neither can I.

It appears you have a margin around the h1 containing the logo. Stick
* {margin: solid 1px red} at the bottom of your CSS and have a close look.

Did you increase your font size to see what happens?

I fixed it for IE because I can
use conditional statements, but I cannot get FF3 to agree with other
browsers.

If you have to resort to conditional comments to get IE7 to work then IMHO
your design is flawed.

affinitydesigns (AT) gmail (DOT) com wrote:

On Mar 12, 7:53 pm, Jeff <jeff_th... (AT) att (DOT) net> wrote:
affinitydesi... (AT) gmail (DOT) com wrote:
I'm currently designing the website historicdowntownstuart.com.
It's being developed in wordpress.
I can not figure out why it is rendering oddly in Google Chrome,
Safari, and Opera but not in Firefox.
Anyone know a way to fix this?

This looks the same to me in FireFox and Safari 3.2.1 windows.
Usually they track closely. You've got a bit much going on so I'm
not sure what doesn't work, but I wouldn't be surprised!

IE6, on the other hand is badly broke. Good luck with that!

Jeff



Thanks for the help in advance.

Yeah, I stopped developing for IE 6.

An odd stance. Last months stats for my busiest site (45,000 hits per month)
indicate 18% of those hits come from IE6. Even Firefox only tops that a
little bit at 21.7%

I don't *actively* develop for IE6 but I make damn sure the site is not
totally broken. The technology I use here is called "graceful degradation".

affinitydesigns (AT) gmail (DOT) com wrote:

I'm currently designing the website historicdowntownstuart.com.
It's being developed in wordpress.
I can not figure out why it is rendering oddly in Google Chrome,
Safari, and Opera but not in Firefox.
Anyone know a way to fix this?

Thanks for the help in advance.

Seems to be the <BR class="clear"> between #toppanel and #header.

At least on Safari 4b, setting it to display: none allows the logo to
line up as expected. Doesn't seem to want to acknowledge height: 1px;
Not sure if line-height:1px might help - can't figure out on Safari how
to add to existing CSS.

On Mar 12, 8:18*pm, "rf" <r...@z.invalid> wrote:

affinitydesi... (AT) gmail (DOT) com wrote:
On Mar 12, 7:53 pm, Jeff <jeff_th... (AT) att (DOT) net> wrote:
affinitydesi... (AT) gmail (DOT) com wrote:
I'm currently designing the website historicdowntownstuart.com.
It's being developed in wordpress.
I can not figure out why it is rendering oddly in Google Chrome,
Safari, and Opera but not in Firefox.
Anyone know a way to fix this?

This looks the same to me in FireFox and Safari 3.2.1 windows.
Usually they track closely. You've got a bit much going on so I'm
not sure what doesn't work, but I wouldn't be surprised!

IE6, on the other hand is badly broke. Good luck with that!

Jeff

Thanks for the help in advance.

Yeah, I stopped developing for IE 6.

An odd stance. Last months stats for my busiest site (45,000 hits per month)
indicate 18% of those hits come from IE6. Even Firefox only tops that a
little bit at 21.7%

I don't *actively* develop for IE6 but I make damn sure the site is not
totally broken. The technology I use here is called "graceful degradation".

This sites purpose is to appeal to a local audience. It has been alive
for about two years and less than 1% of visitors are using IE6. On
this particular build, it is not worth the time to correct it.

On Mar 12, 8:35*pm, Steve Broski <stevebro... (AT) gmail (DOT) com> wrote:

affinitydesi... (AT) gmail (DOT) com wrote:
I'm currently designing the website historicdowntownstuart.com.
It's being developed in wordpress.
I can not figure out why it is rendering oddly in Google Chrome,
Safari, and Opera but not in Firefox.
Anyone know a way to fix this?

Thanks for the help in advance.

Seems to be the <BR class="clear"> between #toppanel and #header.

At least on Safari 4b, setting it to display: none allows the logo to
line up as expected. Doesn't seem to want to acknowledge height: 1px;
Not sure if line-height:1px might help - can't figure out on Safari how
to add to existing CSS.

Thank you, that was the trick. Adding the line-height 1px; to the
class fixed the spacing error and lined both safari and firefox up. I
appreciate your help. I'll be sure to keep that in mind in future
designs.