Site layout changes in different browsers

design

#1

I’m in the process of developing a website in which people can organize and display their currency collections. I’ve been working on it for a few months now. In that time, I never bothered to view it in a browser other than IE. I just checked it out in FF and saw that the css layout is not the same as in IE. I wouldn’t care if the difference was unnoticeable, but in FF some objects/text are overlaid on top of css elements.

Here is the site:
http://www.aero-phoenix.com/mcc/

Can I make the layout compatible with all browsers?


#2

Hi Cobra,
I’d like to help but all those nested

s are proving torturous.
Could I suggest you develop for one of the more standards compliant browsers such as Opera or Firefox and then tweak for IE if necessary?
Putting the page thru http://validator.w3.org/ may point out the errors.
Regards.

#3

The best way to do such a thing is to abide by the HTML and CSS specifications and avoid areas that non-standards-compliant browsers have trouble with (and yes, IE doesn’t give a rat’s a** about standards, unfortunately). It helps to develop on a browser that is reasonably compliant (such as Firefox, Opera, or Safari) – usually that will look alright on other browsers, as well (unless you manage to use stuff that is proprietary to those respective browsers).

And yes, it is possible to create webpages that are reasonable on all modern browsers and have reasonable failure modes on older browsers. It’s a bit more work, but on the upside, your site may actually work still several years down the road (seeing as how IE breaks quirk-compatibility in between versions, there is really no reason to develop FOR IE rather than against it).


#4

oh welcome to our hell, heheh

just like the above guys, the best advice is to base your development on a standards-compliant browser. It’ll make things much easier when it comes to using standard CSS+(x)html.
From my experience (I develop on Firefox and then tweak the sites to look the same on IE, which is easier than doing it the other way round) IE is quite a pain in the first place.

CSS layouts are very efficient, but it’s more a craft than a science. Assuring cross-browser compatibility means a lot of work (maybe even 50% of the overall design hours) and requires using a lot of “hacks” to make elements look good on most browsers. Even if it looks overwhelming, in the end it’s worth the extra effort and your visitors will thank you.

For the overlappings you’re experiencing, take into consideration that IE adds some extra paddings and margins to what the CSS says which you have to take care of. The best way to address this is to reset all styles before giving them any new formatting. this minimizes the issue afterwards.
There’s a couple of very good pre-made style resetting CSS roaming the internet. My advice is to use one of these (links below) before linking to your stylesheet. What I do is something like this:

‹link rel=“stylesheet” type=“text/css” href="/css/style_reset.css"›
‹link rel=“stylesheet” type=“text/css” href="/css/my_styles.css"›

just like that, the clean-up style first, and immediately after goes your own.

Now, where are the links I promised?

Faruk Ateş’s “Initial CSS” can be found here:
http://kurafire.net/log/archive/2005/07/26/starting-css-revisited

On the other hand, Eric Meyer’s “Reset Styles” CSS can be found here:

what’s the difference between them? fair enough that you ask :wink:

Both share the fact that they aim to minimize the impact of browser-specific CSS interpretations, and both do a pretty good job. But that’s pretty much it for the similarities.
While Eric Meyer’s CSS attempts to clear every bit of formatting for each style (so that you can start from scratch on a 100% clean stylesheet), Faruk Ateş’s Styles aim at eliminating and neutralizing the different interpretations of several tags done by different browsers.

The idea behind Ateş’s CSS is that browsers already treat certain elements (such as sub and sup tags to name a few) in the same way so he doesn’t mess with those, only with the ones that are interpreted very differently cross-browser.

Of course, this is a bit subjective, your mileage may vary with one or the other.

Personally, I use Eric Meyer’s style resetting on every project I start. I like the idea of starting from scratch on a formatless stylesheet… but that’s me.

Whichever you choose, I suggest you give those a try. They will probably not fix the whole problemm but it will be a step in the right direction

Good luck!


#5

How about I write/use a script that checks the browser of people that are on my site. If they’re not using IE, I could throw in a

or two. I know this is avoiding problem in a way, and I shouldn’t write CSS specifically for IE, but it seems like the easiest answer right now.


#6

Doing browser detection is something that you should really avoid if at all possible. Looking at your site layout, it doesn’t look like you’re doing anything that’s so exotic that you’d need to write different code just to get it working across multiple browsers.

Turning to your existing code, one thing that I notice when I’m looking at your stylesheets is that you seem to be setting the float property on a lot of elements for no apparent reason. The float property is designed to pull elements out of the normal document flow, and because of the way it goes about doing that, it ends up making it difficult to put elements exactly where want them. The result is that this isn’t a property that you should use without thinking through exactly why you need a particular element floated.

Looking at a particular example, I think the float:left that you do on #header is a good first candidate for removal. #header has a width of 100%, which means that even though you’re floating it, the float isn’t accomplishing changing the position of #header at all. What it does do is remove #header from the normal document flow, which is actually causing you a problem.

When I look at your site in Firefox, I see that “Welcome to My Currency Collection” (part of #middle-main) overlaps the blue bar above it which contains the date (#bar-date). However, if I remove the float:left property from #header, that text snaps right into place exactly where I’d expect it to be: In the big white area below the blue bar.

I would suggest that you go through your CSS and remove as many floats as possible. Over the long term, making only small and well contained changes to the normal document flow will be a lot easier to maintain than trying to deal with the totally floated system that you have right now.


#7

Cobra - I feel your pain. I am too having trouble with font sizes in IE & FF. Thanks for the help everyone.

Ryan Martin - Windermere Real Estate