Two CSS file for same html page

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • phpmagesh
    New Member
    • Nov 2008
    • 119
    #1

    Two CSS file for same html page

    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
    Tags: None
    • Dormilich
      Recognized Expert Expert
      • Aug 2008
      • 8694
      #2
      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
      Last edited by Dormilich; Dec 11 '08, 08:50 AM. Reason: added info

        Comment

        • phpmagesh
          New Member
          • Nov 2008
          • 119
          #3
          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

            Comment

            • Dormilich
              Recognized Expert Expert
              • Aug 2008
              • 8694
              #4
              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

                Comment

                • phpmagesh
                  New Member
                  • Nov 2008
                  • 119
                  #5
                  Originally posted by Dormilich
                  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
                  Hi,

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

                  Code:
                  <html>
<head>
<link href="default.css" type="text/css" rel="stylesheet" />

<!--[if lte IE 6]>
<link rel="stylesheet" href="ie6.css" type="text/css" media="screen" title="IE6" charset="utf-8">
<![endif]-->

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Tilte of the page</title>

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

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

                  thanks in advance,


                  Regards
                  magesh

                    Comment

                    • Dormilich
                      Recognized Expert Expert
                      • Aug 2008
                      • 8694
                      #6
                      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

                        Comment

                        • phpmagesh
                          New Member
                          • Nov 2008
                          • 119
                          #7
                          My Template code:
                          Code:
                          <!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">
<head>
<!--[if IE 6]>
<link rel="stylesheet" href="style1.css" type="text/css" />
<![endif]-->
<link href="style.css" type="text/css" rel="stylesheet" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Mysite</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
</head>
<body>
<center>
<table cellpadding="0" cellspacing="0" border="0" width="1000px">
<tr>
<td width="500px"><img src="images/top1-1.jpg" /></td><td><img src="images/top1-2.jpg" /></td>
<td><img src="images/top1-3.jpg" /></td><td><img src="images/top1-4.jpg" /></td></tr>
</table>
<div id="links"><table cellpadding="0" cellspacing="1" border="0">
<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>
</center>
</body>
</html>
                          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

                            Comment

                            • drhowarddrfine
                              Recognized Expert Expert
                              • Sep 2006
                              • 7434
                              #8
                              Originally posted by phpmagesh
                              Hi
                              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..,
                              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.

                                Comment

                                Previous template Next
                                Working...