CSS Styling Problem

fightapilotdean · 12-04-2012, 10:37 AM

Hi all,
I am having a little issue with css for my site, when I access the site in Google Chrome it all appears fine, formatted and set out how I want it to look, but if I then go onto Internet Explorer the CSS has no effect and the page displays without all the formatting from the CSS, does anybody have any ideas what could be wrong?
The main problem is the margin and padding for my buttons. If anyone could help it would be much appreciated

SB65 · 12-04-2012, 11:19 AM

Can you post a link to your site?

fightapilotdean · 12-05-2012, 10:35 AM

link to site http://findfriends.webatu.com/
the css file is at http://findfriends.webatu.com/css/main.css
thanks for any help in advance !
it works displays 95% fine in all other browsers apart from when you zoom in / out (Google Chrom, Opera, Firefox) but in internet explorer it has near to no formatting

rameezzahid · 12-05-2012, 02:07 PM

because my friend in Internet explorer you need to be careful to get the result of your css as you get it other browser. That's why we use separate style sheet for IE to follow its Structural requirement.

tracknut · 12-05-2012, 03:11 PM

You always need a DOCTYPE in your code. So make the top look like this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link href="css/main.css" rel="stylesheet" type="text/css">
<title>findFriends - A new social Network</title>
</head>
<body>
....

Then be sure to close out the body and html tags at the bottom:

Code:

....
</body>
</html>

That will probably do it. The validator is your friend to help find bugs!

There should be no need for separate style sheets for IE, unless perhaps you're trying to make this work in IE6/7.

Dave