Ok I have finished making my site and it looks fine in Internet Explorer but it is really bad in FireFox, I am new to CSS and really hope someone can help make this code work. Domestic Energy Assessor My goodness I never thought it could be this bad
It's better to design your websites arounds browers like FF, Opera..as you'll come to see that ie..well..sucks (or at least in my opinion).
Its like a class, ya know. You have one strict teacher who calls your parents and makes you do your homework on time (Firefox/Opera/Safari) and you have the other mediocre teacher who doesnt give a rats ass about what you do, lets you snooze in class (lets you code crap html). But in the END, the teacher that was a b1tch and made you do your homework made you a better student / gave you knowledge which is why you should satisfy Opera 9 / Firefox 2 / Safari 3 before IE. Some people rely on IE's lenient ways (some people get A's in a lenient teacher's class) but get pwned in a stricter browser (stricter teacher).
Thanks for that but you really have not helped me with my issue, what do I need to do to get this looking right? I thought I have followed everything right and it validates with the CSS and HTML validator so I am confused about you saying about the good and bad coding. Please explain.
Hate to say it, but I personally would start over on the css design, making it look good in FF, Opera or Safari.
A layout must work in all browsers, that's for sure. Now, try adding clear: both; to the following elements: #top-nav { clear: both; width: 800px; } #main-left { clear: both; float: left; width:400px; padding-right: 0px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; } It's hard to tell what needs to be fixed without testing, but let's see if this helps a bit. Kate
Oh awesome, thanks Katy, that is a good start, it is looking much better already Much appreciated, I just need to find out how to lower that background of the header now and I think it is all done
You're very welcome! Sometimes it's necessary to use clear: both; for example if you're opening a new element such as div. Otherwise it will be followed by the previous div and will break your layout. Also, your footer is pushed down a bit in FF. Try removing <br class="brclear" /> because you're already using clear: both; there. Kate
And you know what's even better than that? A browser-agnostic approach, designing your sites to the specification rather than a browser. This involves testing your site in each browser incrementally as you go along. Code the header? Check in IE 6/7, Firefox, Opera and Safari (covering all four major rendering engines). Coded the menu? Repeat. Content? Repeat. Sidebar? Repeat. Footer? Repeat. It'll save you a lot of time, and if done properly you'll find yourself resorting to fewer and fewer hacks each time.
Hmmm, I never thought of doing it that way, in bits and pieces. I always compete the design in FF and then do the testing in the other browsers. I think I'll try your method next time, maybe I'll become more familiar with CSS hacks that way.
I'll second what Dan said - the 'code for FF, hack for IE' mentality is inherently flawed, being much akin to having a bar that plays both kinds of music - Country and Western. While knowing all the hacks is important because eventually you will for expediency sake resort to at least one or two * html hacks, fact is if a technique will not work without diving for the hacks, TRY ANOTHER TECHNIQUE FIRST. Too often you see people diving for the hacks to make buggy, broken or just plain ice-skating uphill code work in _____ browser when they would be better served and better future-proofed by just throwing out the buggy code and writing something that works cross-browser in the first place. Designing the entire page in any one browser then hoping it will work elsewhere, or targeting one browser then hacking to another is just ******* stupid - yet it's the most common practice. The process I use that works VERY well is to first get the content that is going to be on the page... This often annoys your template kiddies but frankly, designing ANY layout before you even know what is actually going to be on the page is just special - in the same way some olympics are special. You then code just the HTML with NO presentation. Your tags wherever possible should say WHAT the content is, NOT what it should look like. The SAME GOES FOR YOUR CLASSES AND ID's. One of the whole points in modern coding, especially where CSS is involved is the removal of presentation from the HTML - as such this: <div class="center smalltext clear"> is a total /FAIL/ at intarweb. Semantic tags in the HTML are also important - and use the minimum number of tags you need to get the job done. One of the dumbest things I keep seeing is: <div id="top_menu"><div class="menu_background"><ul id="menu"> When all that's probably needed in that case is <ul id="menu"> Once you have the content in place and marked up 'clean' - THEN you start in on presentation and as Dan said, one item at a time top-down. Design the header... test, test, test. Design the menu, test, test, test - layout your columns, test test test. etc, etc, etc. There is NO excuse not to be testing all four browser engines (and two IE varients at least) for Windows XP users. Linux, Vista and OSX 'kind of' have an excuse, but not really given you can run IE under Parallels or VMWare. The browsers are ******* free - TEST THEM.