CSS problem: Firefox renders correctly after refresh 4

[Wishdiak]

Hopefully someone here can help, since I've been trying to correct this for over a week, and I just can't seem to get it to work.

Some background: I'm overhauling a web site for a local TV station. The old site design is pretty abyssmal. I decided to throw the whole thing out and go in an entirely new direction. Now, I'm dealing with their parent company's standards for web design. I modified their stylesheets, and got things to look pretty much the way I want.

The problem: In IE, everything displays correctly. This is good, since it's 90%+ of our user base. At the office, we're mandated to use the Mozilla suite browser or Firefox. In either, the display works, but only after a refresh. If I navigate away, clear cache, and go back, the browser loads one div in the wrong place.

I'd really rather not link directly to the files, although I could provide some code snippets. I just don't want to throw up a hundred lines of code here and say "Help me!", since I expect that I'm just missing something simple.

Has anyone come across a situation where IE renders things correctly, but Firefox/Mozilla doesn't? Luckily, my boss is on vacation, so I have a few more days to figure this out before it goes live, but it will be embarassing if it doens't render correctly for her.

Wishdiak
A+, Network+, Security+, MCSA: Security 2003

http://www.wishdiak.com

 

[Vragabond]

Very hard to say, even with a code snippet. The best (and possibly the only) way to approach this is to get the website address. This way we could see for ourselves and experience the problem. A short snippet would probably not be enough to replicate the problem.

As for ever seeing this problem, I must say I haven't. A good thing to try (if you do not have it already) is to give your <img> tags width and height -- this way nothing on your page needs to load before its position is determined. Other than that, we would need to know a bit more about your page. At least what you're using -- CSS positioning or tables or something else?

 

[Wishdiak]

Vragabond,

Thanks for the reply, and you're right. As I expected, a code snippet probably wouldn't be enough to replicate the problem.

I feel silly even asking this question here, but I don't have any peers that could look at it and say "Aha! Here's the problem!", so I'm really on my own.

I expect that quite a bit of the stylesheet I'm using is somewhat awkward, but I've had to tweak it from what I was given by our parent company. From my boss's perspective, only functionality and design matter. She's not interested in clean code, so at this point I'm not too worried about it either.

I suppose that there's no real harm (except possibly to my ego) in posting the URL. I can always change it later if it's a concern. I'm also having some issues with getting clean photos to use in the graphics, but that's another issue.

The current URL for the site is

http://www.wggb40.com/test/new design/index.shtml

Wishdiak
A+, Network+, Security+, MCSA: Security 2003

http://www.wishdiak.com

 

[ChrisHunt]

I don't think there can be anything technically wrong with your style sheet - if there was, you wouldn't be able to fix it by refreshing. After all, it's the same CSS after the refresh. More likely it's a rendering bug in FF.

You've got a lot of absolute positioning in there, which often confuses browsers. I'd be inclined to try using floats instead, where possible. It shouldn't be too difficult with a fixed-width site.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[Foamcow]

Looking at it quickly I am guessing that adding sizes to your img tag for the header graphic will fix the problem.

FF has no idea where to start the content UNTIL that image loads and it knows how deep it is. Once it's loaded there is no problem, hence the refresh fixes it.

The navbar appears to be in the right place because it is absolutely positioned.

Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r

 

[Wishdiak]

Thanks for your input everyone.

Foamcow: It was right in front of me the whole time. Adding a height attribute to #banner was spot on.

#banner {
display: block;
margin: 2px 0px 0px 2px;
width: 800px;
height: 100px;
}

Thanks again, everyone.

Wishdiak
A+, Network+, Security+, MCSA: Security 2003

http://www.wishdiak.com

 

[kaht]

This has absolutely nothing to do with your question, rather it is just something I noticed when I looked at the site. The "programming" link does not have a title attribute while all the other links do. Just an observation.

-kaht

...looks like you don't have a job, so why don't you get out there and feed Tina.

 

[ChrisHunt]

Actually, I'd lose all those title attributes in the sidebar - what's the point of them when they say the same thing as the link text does?

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[Wishdiak]

kaht & ChrisHunt,

Thanks for your input. I probably will get rid of them.

The navigation bar is another thing that I just modified without putting much thought into it, since a certain style is mandated.

Wishdiak
A+, Network+, Security+, MCSA: Security 2003

http://www.wishdiak.com