tags:

views:

162

answers:

4

I want to fit my website in IE .I want to know how i give the name of css selector in IE like firefox.Please help me!

A: 

i did'nt undersatnd your question "name of css selector in IE",but if you have to assign the css on selector p use like (<p>hello everyone</p>) this

p { border:1px solid red; font-size:24px; }

Abhimanyu
My website is okay in fire fox. But I found in IE not the same as.So,I want to fit my web site to okay both IE and Fire fox.I use this condition <!--[if IE]><link rel="stylesheet" type="text/css" href="ieindex.css" /><![endif]--> I want to know in ieindex.css ,how I give the selector name.eg..in index.css #container { background-color: white;}in ieindex.css How I change the background-color of #container?I want to know the name of selector are the same?
thinzar
It's exactly the same as you do it in firefox, just make sure that in the IE stylesheet to make it more or equally specific so that it overrides it. E.g. div#container is more specific than #container, body #container is more specific than just #container. Otherwise, the same level of specificity is fine as long as you include the IE stylesheet second.
Karl
aye thinzar khine,yup most of the selector name is same in both IE and FF..so aaplying this peoperty creating any problem....
Abhimanyu
This is how stylesheet and style selectors specificity is calculated: http://www.w3.org/TR/CSS2/cascade.html#specificity
kmiyashiro
A: 

always call your ie css file AFTER any other css so it overwrites any previous methods. if you're still having problems, you can force a css definition to take priority with !important.

Without important, the div background would be blue, because that's the last declaration made

#mydiv{
  background-color:green;
}

#mydiv{
  background-color:blue;
}

now, using !important, you can force priority. the background will be green regardless of the order of declaration:

#mydiv{
  background-color:green !important;
}

#mydiv{
  background-color:blue;
}

if you're looking for css hacks for IE (not recommended, though sometimes essential), you can get more information from this excellent article.

hope this helps!

yuval
A: 

There is nothing wrong with the CSS code that you have shown so far, so repeating it in a style sheet specific for IE will not make any difference at all.

Generally you don't need a separate style sheet for IE. There are some rendering bugs in IE that you may have to circumvent, but that can almost always be done by tweaking the current CSS and HTML.

To find out what you need to do to make it work in IE, you should try to find the reasons for the differences. Most CSS is exactly the same, so if you don't see the effect in the page it's usually because the element is not where you think it is or doesn't have the size that you think it has. If for example the height of an element is zero, you will obviously not see it's background color.

First make sure that the page has a proper doctype, so that it doesn't render in quirks mode. This is important to make it work as close to the standards as possible in IE.

Open the error console in Firefox and view the page. It will tell you if you have any errors in the CSS code. There are standards for how to render correct code, but there is no standards for how to handle incorrect code, so if you have any errors you will get widely different results between browsers.

The plugin FireBug in Firefox is useful for seeing exactly which styles affect each element in the page, and you can even edit the CSS and see the result immediately. There is a similar tool built into IE 8 called Developer Tools. For IE 7 you can install Developer Toolbar that gives you some of this functionality. Each tool will allow you to select an element in the code and shows you exactly where it is on the page.

Guffa
A: 

Hi Aye,

To fix your website in firefox and IE you can use the below methods.

Method 1:

You can use the "if condition" that you have used. You need to mention the version of IE in the if statement. See the code below

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Browser Detection Example</title>

<style type="text/css">
body{ background:blue}
</style>

<!--[if IE 6]> <!-- for ie 6 browser -->
<style type="text/css"> 
 body{ background:red}
</style>
<![endif]-->

<!--[if IE 7]> <!-- for ie 7 browser -->
 <style type="text/css"> 
 body{ background:red}
</style>
<![endif]-->
</head>

<body>
</body>
</html>

Method 2:

You can use the css hack inside the css code itself. No need to use a separate css file. You can code in the same css. See the example below

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body{ background:blue; _background:orange;}
</style>
</head>

<body>
</body>
</html>

Note : prefix "_" before the css code it will get render in ie6...

Check out !!!

regards, Logesh Paul

Logesh Paul