Site-specific: Firefox and IE CSS features
I am trying to learn CSS. I went to great lengths to get it right. All my pages are checked and they look correct in Firefox and mostly correct in Chrome. IE is everywhere, however. In relation to Firefox in IE (in order of importance), the following is wrong:
- the main body box is located below where the left boxes end
- the top right dropdown (hover over "Settings") is completely disabled in Weeds (in Chrome it is disabled but in a different way)
- It assumes the Recipes tab has no visible bottom border
- the search button is tilted relative to the search box
- logged out version: top-right login items are oblique
Links, functionality, etc. Not guaranteed to work on these pages. These are just static shots to show the layout.
Can anyone point me in the right direction for what I am doing wrong?
source to share
You need to Reset your CSS (Dean, above recommends Eric Meyer Reset CSS). I prefer Yui Reset CSS (I really like their own Reset / Fonts / Grids CSS). As part of this, you must also use standards mode.
Finally, you need to know that some things will be different in browsers. Therefore, if you come across this situation, it either works around it or lives with it.
source to share
Which version of IE are you using? It looks like most of your problems can be caused by IE Box Model Error.
source to share
I never start a new website design in css without Eric Meyer's first Reset CSS .
It resets all differences across all browsers, so you have a level playing field to start with. From there, everything should be the same across all browsers.
source to share