Internet Explorer vs. Firefox

[Zachery]

Hi everyone.

I have been reading webproworld for a wile know and I’ve learned allot from you guy's <- thanks for all the help, but I have this little thing with IE and FF that’s rubbing me up the wrong way.

I have been designing web site's for the past 4 years in my spare time, I always design my site's to look good in IE, as most of my visitor uses IE, but lately FF is sticking it's head in my business.

Although my sites still looks reasonably ok in FF, I still have problems with the sizes of my designs, everything looks smaller (background image), EX. the last website I done..... Basically should fit on the browser page with no scrolling, in IE it fits perfect, but in FF I get clear spaces on the sides of my design.

Apart from the sizing thing, I’ve been using a DivTag with scrolling Id, so I can have all my content fit in my design, but in IE and FF the divTag seems to start at different points. (as if there is a line brake difference) I also added some code to make my scrollbar in my divTag to colour my scrollbar and this works fine in IE again but not in FF (I researched the FF Forum and they state that they will never add the capability to make that possible )<- Sucks.

http://artnebula.com/<- Example of the problems

Personally I do like FF for its inbuilt download manager, but I think they should work on that browser and make it more web designer friendly. I still prefer IE as my main design template browser.

Is there any solutions for my problems or must I just try to design around the problem.

And something ells about divTag’s with the scrolling id…. Why does the scrollbar disappear when I put a table within the tag, although scrolling still happens, the bar is not visible. < - IE problem.

And why can’t I scroll with my mouse weal inside my divTag scroll area. <- FF problem.

[mike]

Well, IE is still about 90% of the market right now, so of course it should be your primary concern. However Firefox is popular enough now to merit some consideration as well.

This forum, for example, has about 12-13% Firefox users (based on server logs). Now, depending on the 'techiness' of your audience I would guess Firefox usage at somewhere around 7% on the low end and 15% on the high end.

That isn't a huge huge percentage, but if you can take an hour or two and adjust your pages so they look good in both I would think 10% of your userbase is worth that effort.

[ADAM Web Design]

That layout won't fit in horizontally for 800x600 users, no matter what the browser. Your tables are too wide. That's a very large chunk of the market, so you may want to consider that.

I'd help you with your FF issue, but for some reason mine has decided it wants to crash today (go figure).

When it comes to the base layout, I'll design with both side by side, and I've found that FF tends to cause more problems at about a 3:1 ratio over IE (in other words, I do something from scratch, IE gets it, and FF doesn't).

Once I've got my layout down and templated into a server-side include, I use IE unless I have to use FF because it's something complex.

[speed]

I build for both Firefox and IE, it usually doesn't take much effort to make things work the same on both.

I think Mike is about right with 10% but it does vary wildly across sites, I've got one site where IE only accounts for a shade over 50% of the traffic with the remainder dominated by Mozilla/Firefox, this isn't a tech site either.

You can reduce differences in vertical spacing by defining a style for the

tag and other elements.

If you use a strict DOCTYPE you'll find that IE6 in standards mode is much closer to Firefox, there are still problems but it is better.

Regarding your website, artnebula.com, it doesn't fit either browser for me.

With my browser set to the width I usually browse at, about 900px, I have to left/right scroll in both browsers, if I run the browsers maximised I get a mass of white space to the left and bottom of the design.

[Zachery]

wow, thanks for the replays...

I will look into all the suggestions, i should really get a short course in css, as i use dreamweaver where it's all really laid out for me already. Could someone please explain abit more about the

tag and what speed meant, and what it would do. I use 100% for my main table width, this should make the page(tables) stretch and shrink when people use different screen resolutions (right). Is it possible to make the background image stretch and shrink in css for different resolutions and browsers though.

It will be really kind if someone that knows what they are doing "LOL" to look at the website and tell me what I'm doing wrong and how you would go about getting similar results.

www.artnebula.com

[speed]

Could someone please explain abit more about the

tag

If you place an IE & Firefox layout next to each other you can find that the text paragraphs don't line up, I'm assuming both browsers have the exact same width, this can be caused because of different values for top/bottom margin, therefore using something like the following in a style sheet evens out those differences:

p {
margin-top: .75em;
margin-bottom: .75em;
}

Depending on the amount of text on the page and the layout you may never notice this one.

For DOCTYPEs have a read of http://hsivonen.iki.fi/doctype/, not the page I was looking for but I'm sure someone will post some others.

I use 100% for my main table width, this should make the page(tables) stretch and shrink when people use different screen resolutions (right). Is it possible to make the background image stretch and shrink in css for different resolutions and browsers though.

Not with the current CSS commands. You might be able to do it with some fancy JavaScript, but if you do you then need to make sure that the page still displays correctly without JS.

I would say it's better to build for the lowest common denominator, 800x600 although people are moving to 1024x768, then if you want to make use of bigger displays go with a fluid layout.

It will be really kind if someone that knows what they are doing "LOL" to look at the website and tell me what I'm doing wrong and how you would go about getting similar results.

At the moment you have fixed the height of the site, I'm assuming for 1024x768, but on my nice big 1280x1024 monitor I've got unused space below the content area. This fixed height is causing me to have to scroll when I shouldn't need to, therefore I would not fix the height so that people with large monitors can see all the text and not just a letter box view (pet hate).

You need to move your style sheet and JavaScript into external files.

You have "<table width="1000" height="474" border="0">" which is causing the site to be 1000 pixels wide and resulting in the visitor having to scroll left/right this is especially problematic at 800x600, therefore I'd consider going to fluid or limiting the width to 730px or there abouts.

You have 8 syntax errors in the home page HTML, see http://validator.w3.org, these I would fix there's an article at http://www.alistapart.com/articles/flashsatay on getting pages with Flash to validate.

I would defiantly move to one of the strict DOCTYPEs, I favour XHTML, without wishing to start a war I like XHTML because it is newer than HTML, it should fit with the mobile market better, my choice read up on it and make your own decision.

The rollover effect could be done with CSS which usually results in less code on the page.

I also favour pure CSS layouts over tables, again my choice and will disagree with this.