Noobish question regarding IE css "hacks"

Hi everyone, I hoe you are all well.

I am requesting some assistance with my CSS due to problems with how IE is rendering my website. I was foolish enough to use only firefox to test my website when I was creating it, and now I have seen it in IE I would really like to sort it out... however the method I have been told to use is not working at all...

I ultimatly wanted to get it looking the same in IE as it looks in firefox but after trying to change some of the values with no effect I decided to do some simple testing to see if the method was working at all (I tried changing the background of the div that is causing me hassle and it didn't change at all) and found it was 100% unresponsive to my changes.

I would be grateful if someone had the time to look over my website and see what you think the problem might be and suggest a more effective solution to my problems. My website is http://www.danielalexanderreid.com

Thank you all in advance!

Hi Daniel,

you really shouldn't use hacks, but rather browser specific style sheets. these can be achieved through the use of conditional comments:
http://www.quirksmode.org/css/condcom.html

have a go at that and klet us know how you get on.

Also if you look at these tools: http://www.webforumz.com/beginner-re...dd-ons-for.htm then you will find on efor FF called IE tab, this allows you to see how your site will look in IE without having to install it directly. very handy for testing.

Stew

__________________
WelshStew Site Admin
If you think I've helped, click the "Thanks"
tierney rides tboard - uk site | xtreme wales - extreme clothing
WebForumz - facebook | LinkedIn

Hey Daniel

The problem lies in your CSS errors. You must ensure that each declaration ends in a semi-colon before the next, even if they are on separate lines.

Also, // is not a valid CSS comment. You must always enclose comments using /* and */.

Lastly, there is no property align in CSS. Instead, you use text-align for containers, and float for elements (read up on floats).

In fact, you shouldn't even be using tables at all. There's no need. Use <div>'s instead and style them accordingly.

I would also recomend doing a 'universal' reset, so that all browsers start off equal (each browser will apply it's own default padding and margins if unspecified). Use:

Code: Select all

* {
margin: 0;
padding: 0
}

This resets all tags (using the wildcard *) to zero margins and paddings. Put this at the very start of your CSS, then you can override it later if need be.

(Another hint: you can just use 0 instead of 0px - they're the same).

Stew, Thanks for that link! That was the exact kind of thing I was looking for to begin with but google failed me and suggested the "hacks" to me instead hehe...

aso186, Thanks for the guidance, I did try to get everything looking right using divs but I have to admit I gave up very quickly because the learning curve seemed too steep to do something that i could already create using tables... lazy I know but I am on a deadline so I just went with my gut feeling! Once this project is out the way I do plan on sitting down with a book or even just the vast amount of examples and tutorials online and learn how to use CSS more efficiently.

Thanks again!

if you start here:
http://www.webforumz.com/beginner-re...how-to-use.htm
and here:
http://www.webforumz.com/beginner-re...ml-and-css.htm
then you should get a good foothold on css

good luck

__________________
WelshStew Site Admin
If you think I've helped, click the "Thanks"
tierney rides tboard - uk site | xtreme wales - extreme clothing
WebForumz - facebook | LinkedIn