FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

having problems with IE..

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


alalex
Im designing a site, and I do my testing in firefox, as always.. But when I went to IE after I was done, guess what.. nothing looked the way it was intended to..

I know it is because I use a lot of padding and margins and that sort of stuff, but is it possible to make some kind of separate css sheet for IE, so that the one that works in firefox doesnt get messed up when i fix it for IE??

this is the site: http://www.kdams.es
and if you enter it both in firefox and IE you will notice a big difference.. Confused
b4r4t
You can use Conditional Comments.

More about it:
http://www.quirksmode.org/css/condcom.html

But ... on most of cases there is a way to code a page which will match for all browsera (or at least 3 - Firefox, Opera, IE) ...
It just take a little longer.
When I'm coding ... i have result page opened in 3 browsers and refreshing after every change I made.
If something starts to look bad ... I know which line is the problem and try to change it Smile

For example my page (in signature) works in Opera/FF/IE and doesn't use Hacks or Conditional Comments Smile
JayBee
- don't use "margin" and "padding" in conjunction with "width" and "height" on the same element
- use floats as less as you can
- use exact pixel size as less as you can, use "em" or "ex" insted - everyone have different font-size and browsers sometimes add additional spaces somewhere

After that, there are still some problems like "min-width" and "min-height" which are better to solve with conditional comments
b4r4t
Good thing will be using "global reset"

Code:
* {margin:0; padding:0;}


This will remove all margins and paddings - You will be able to set them manualy.
This is helpful because IE and FF/Opera have diffrent dafault margins/paddings for some elements Smile
alalex
just a little question, if I change everything to em, do I have to change every single css class?
Because I changed it for two classes to see the difference, and suddenly all the font colors and ul navigation properties seemed to dissappear!
Sad
The problem resolved when I reset everything back to normal though...
JayBee
alalex wrote:
just a little question, if I change everything to em, do I have to change every single css class?
Because I changed it for two classes to see the difference, and suddenly all the font colors and ul navigation properties seemed to dissappear!
Sad
The problem resolved when I reset everything back to normal though...


The problem must be elsewhere. 1em is not 1px, if you want to make small space, you can use for example 0.3em. (for example - with normal font size is 1em=16px)




b4r4t wrote:
Good thing will be using "global reset"

Code:
* {margin:0; padding:0;}


This will remove all margins and paddings - You will be able to set them manualy.
This is helpful because IE and FF/Opera have diffrent dafault margins/paddings for some elements Smile


This is not good practice, because you must style many normal things like headlines, tables, paragraphs and lists, because they have some margin and padding. It is sometimes problematic to set it back to working. It is also additional work and you always forget something.
alalex
Thanks to all!
I'll try to change all my widths and heights to em, but I'm guessing it will take a long time! Wink

I already fixed most of the problems I was having with IE, thanks to b4r4t for the conditional css, great help! And also thanks JayBee, ill try to do all that stuff!! Smile
Runescapetown
b4r4t wrote:
You can use Conditional Comments.

More about it:
http://www.quirksmode.org/css/condcom.html

But ... on most of cases there is a way to code a page which will match for all browsera (or at least 3 - Firefox, Opera, IE) ...
It just take a little longer.
When I'm coding ... i have result page opened in 3 browsers and refreshing after every change I made.
If something starts to look bad ... I know which line is the problem and try to change it Smile

For example my page (in signature) works in Opera/FF/IE and doesn't use Hacks or Conditional Comments Smile


[Offtopic] Dang you got a nice website, i like the layout type and the tuts on the GJ [/offtopic]
Azmo
sure you can import a stylesheet if the browser is equal to IE, but the best thing to do is to learn how to code correct so your site looks just the same in whatever browser you might be using. Don't use shortcuts, take the longer, harder way, it's worth so much more when you got the knowledge to code correct for all browsers in one single css sheet Smile
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.