471,594 Members | 1,985 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,594 software developers and data experts.

Firefox renders my page differently when I hit the refresh button!

Motoma
3,237 Expert 2GB
Hi everyone,
I am having an issue with my website http://motomastyle.com in Firefox. When I first navigate to the site, the posts I have made start below my navigation bar. After hitting the refresh button a few times, the page will finally render properly, as it does in IE, Opera, and Safari.
I was wondering if this is due to the way I have my site laid out, or if this is some bug in the rendering engine.
Finally, does anyone know of a way for me to correct this issue? It is really bugging me.
Thanks for your time,
Motoma
Oct 20 '07 #1
9 2532
drhowarddrfine
7,435 Expert 4TB
Validate and fix your 7 html errors. You have some misplaced/missing <a> tags. See if that fixes it but I did not see the problem myself.
Oct 20 '07 #2
Motoma
3,237 Expert 2GB
Validate and fix your 7 html errors. You have some misplaced/missing <a> tags. See if that fixes it but I did not see the problem myself.
Balls!
My last post screwed up validation...I guess it's still a work in progress.
Now that it is fixed, I am still having the issue.

What monitor resolution are you running on?
It's really weird: here's how I can reproduce it:
Using the web developer toolbar, I resize the browser to 800x600.
I open the link in a new tab, via middle click.
Navigating to my page shows the content areas have been pushed down below the navigation bar.
Hitting refresh brings the content area back up beside the navigation.
Oct 20 '07 #3
drhowarddrfine
7,435 Expert 4TB
I saw it this time. Last time I think I might have clicked twice and viewed the second one which would be the 'corrected' version.

Two notes while I look at this:
1) In your css you say: html body{ which means "the descendant of html which is body. It doesn't hurt anything there, I don't think, but I'm used to seeing: html, body{ with the comma making it "html AND body".

2) You use 'display:table' which does not work in IE, fyi.

3) Your rounded corners have disappeared and that's what I'm looking into.
Oct 20 '07 #4
drhowarddrfine
7,435 Expert 4TB
Ok, I see you don't put the rounded corners in every corner so that's not an issue.

On your banner image, you have a height set but no width. Set that to something that will fit inside its container and see if that solves it.
Oct 20 '07 #5
Motoma
3,237 Expert 2GB
Ok, I see you don't put the rounded corners in every corner so that's not an issue.

On your banner image, you have a height set but no width. Set that to something that will fit inside its container and see if that solves it.
I'm not sure that is going to work out for me...
My intent with the variable width banner is to get the banner image to span the entire page regardless of the width of the browser window.
To get an idea, take note of the banner while widening and narrowing the browser window.
Are you suggesting a fixed width, or do you think 100% would be fine?
Oct 20 '07 #6
drhowarddrfine
7,435 Expert 4TB
I just wanted you to try it temporarily to see if the problem goes away. If Firefox creates space for an image without being given dimensions, any areas that follow may get messed up because they may no longer fit. You gave a height to it but no width. So I'm wondering if setting a width makes that problem go away.

We don't want the graphic getting squeezed if you set it to the width of the container so something else will need to be done there but I can't look right now.
Oct 20 '07 #7
Motoma
3,237 Expert 2GB
I just wanted you to try it temporarily to see if the problem goes away. If Firefox creates space for an image without being given dimensions, any areas that follow may get messed up because they may no longer fit. You gave a height to it but no width. So I'm wondering if setting a width makes that problem go away.

We don't want the graphic getting squeezed if you set it to the width of the container so something else will need to be done there but I can't look right now.
I don't know why I argued with you in the first place rather than trying it. I set the width to 100% and it is rendered properly now.
Thinking about it now, it makes a small amount of sense; even though that div goes across the full length of the screen, it really has no content in it. Therefore, when it initially gets sized it would have an effective width of 0, until it blows up to the size of the containing div. This narrow initial size could then be interpreted as the width of the divs below it; resulting in the area being to small, and thus the layering effect.
Still no idea why it rendered differently after hitting refresh!
Oct 20 '07 #8
Motoma
3,237 Expert 2GB
Oh, and thank you very much for the help!
Oct 20 '07 #9
drhowarddrfine
7,435 Expert 4TB
The reason it works after hitting refresh is Firefox now knows the size because it's in the cache.
Oct 20 '07 #10

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

7 posts views Thread by Drew Martin | last post: by
20 posts views Thread by B Wooster | last post: by
12 posts views Thread by Brad | last post: by
reply views Thread by Anwar ali | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.