By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,969 Members | 1,705 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,969 IT Pros & Developers. It's quick & easy.

Two CSS file for same html page

100+
P: 119
Hi to all,

My problem is.. i am using one CSS file for my page. it works very fine for Fire fox, but if i open in IE the design which worked properly in firefox is not displaying properly in IE.

So i creating another CSS file which is comfortable with that IE window. now what i want do is

i want to check for which internet Explorer is running, if it is IE then IE.css file should execute, if Fire fox is running the page Firefox.CSS should execute.

How can i furnish this task, can any one help me please,

Thanks in advance,

Regards
magesh
Dec 11 '08 #1
Share this Question
Share on Google+
7 Replies


Dormilich
Expert Mod 5K+
P: 8,639
you can use conditional comments. more here

you may consider writing a css base file (which works for the standard complient browsers) and add the IE specific hacks via CC.

regards
Dec 11 '08 #2

100+
P: 119
Hi

Thanks for your guidance,

If possible can you tell me the name for Mozilla Firefox 3.0.4's short name? like for Internet Explorer6, we will call as IE6, ......IE5, etc..,

or where i can find the name for all browsers, since i want to use that in my page to check compatibility

Thanks in advance,

Regards
magesh
Dec 11 '08 #3

Dormilich
Expert Mod 5K+
P: 8,639
conditional comments only work in IE. usually a standard compliant CSS works across all browsers (except IE). so you only need to concern which hacks to apply for IE and include those in CC.

regards
Dec 11 '08 #4

100+
P: 119
@Dormilich
Hi,

I tried the following code but i didnt get and reaction for this in my Internet Explorer 6.

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <link href="default.css" type="text/css" rel="stylesheet" />
  4.  
  5. <!--[if lte IE 6]>
  6. <link rel="stylesheet" href="ie6.css" type="text/css" media="screen" title="IE6" charset="utf-8">
  7. <![endif]-->
  8.  
  9. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  10.  
  11. <title>Tilte of the page</title>
  12.  
  13. </head>
  14. <body>
  15. .....
  16. ......
  17. </body>
  18. </html>
  19.  

Can you please help me if any mistakes in the above sample.

thanks in advance,


Regards
magesh
Dec 11 '08 #5

Dormilich
Expert Mod 5K+
P: 8,639
I can't see an error there. the only thing possible is that the media attribute is not properly supported.....

I need to have a look at the code/page to tell more.

regards
Dec 11 '08 #6

100+
P: 119
My Template code:
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <!--[if IE 6]>
  5. <link rel="stylesheet" href="style1.css" type="text/css" />
  6. <![endif]-->
  7. <link href="style.css" type="text/css" rel="stylesheet" />
  8. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  9. <!-- TemplateBeginEditable name="doctitle" -->
  10. <title>Mysite</title>
  11. <!-- TemplateEndEditable -->
  12. <!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
  13. </head>
  14. <body>
  15. <center>
  16. <table cellpadding="0" cellspacing="0" border="0" width="1000px">
  17. <tr>
  18. <td width="500px"><img src="images/top1-1.jpg" /></td><td><img src="images/top1-2.jpg" /></td>
  19. <td><img src="images/top1-3.jpg" /></td><td><img src="images/top1-4.jpg" /></td></tr>
  20. </table>
  21. <div id="links"><table cellpadding="0" cellspacing="1" border="0">
  22. <tr><td><a href="Home.html">Home</a>  |  </td><td> <a href="Services.html">Services</a>  |  </td><td> <a href="Certifications.html">Certifications</a>  |  </td><td> <a href="Success_stories.html">Success Stories</a>  |  </td><td> <a href="Contact_us.html">Contact us</a></td></tr></table></div>
  23. </center>
  24. </body>
  25. </html>
  26.  
  27.  
This is the exact code i used to ork in my website,

Problem is i used div tag for menus id is links, i have declared everything in px for that id like top:342px; left:220px; etc..,

when i use to see this page in IE i m getting the menus little bit above the desired place, but it coming correctly in mozilla fire fox.

For such problem i planned to use two CSS file one for Fire fox and another for IE's...

This is my problem, i hope you understood my entire problem,

can you help me in this,


Thanks in Advance

Regards
magesh
Dec 11 '08 #7

drhowarddrfine
Expert 5K+
P: 7,435
@phpmagesh
FF or, more specifically, FF3.04. Technically, Mozilla says it should be called Fx but few people do that.

You will never get IE to attempt to perform like modern browsers without a proper doctype. It is in quirks mode. See the article about doctypes under HTML Insights at the top of this page. Then you will find that IE will perform much more closely to other browsers (but not quite).

In addition, you are closing some elements with this: /> . That is a XHTML end tag. Remove the slash. In some instances, a browser may quit rendering at that point but a bit.

EDIT: So, while typing all that in response to the earlier post, I read down to the last one and saw you are using the XHTML doctype so disregard all that.
Dec 12 '08 #8

Post your reply

Sign in to post your reply or Sign up for a free account.