CODEWITHSUNDEEP
htmlcss
Sap
Sap

Reputation: 5321

CSS not showing properly in IE(Reason was doctype defination)

I am working on this personal project and the sign-in screen of the website goes completely haywire in IE-9 Can someone please suggest me how can I fix it? The webpage is at http://www.ayeboss.com/users/login

Try opening it in FF and IE and you will see the difference. Any inputs will be highly appreciated

Upvotes: 2

Views: 1978

Answers (4)

zkk
zkk

Reputation: 207

If you are using html transitional use this:

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

If you are using XHTML 1.0 transitional go for this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

If you never want your browser to behave as an old version. Then add this:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Upvotes: 1

user555600
user555600

Reputation: 164

replace your html tag with this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Upvotes: 2

Muzammil
Muzammil

Reputation: 508

well some problems with your html and some with CSS. you are trying to use CSS3 but not completly..

1st mention DOCTYPE 2nd margin and paddings are bugy in IE.. in IE the become double to normal value. (i.e like if you set margin for Fireforx but they appear double in IE most likly.) 3rd you have use CSS3 properties ..

  • -moz-border-radius (it only works in FF) so if you want to see this property in action in IE .. try -webkit-border-radius. and read this article border-radius
  • for gradient gradient

Upvotes: 2

thirtydot
thirtydot

Reputation: 228302

Your page is being displayed in Quirks Mode, because you don't have a doctype.

Add this, the HTML5 doctype, as the very first line to resolve the problem:

<!DOCTYPE html>

You should always add a doctype to trigger Standards Mode.

Upvotes: 4

Related Questions