Roberto Flores Roberto Flores - 5 months ago 20
CSS Question

CSS Styling that only Pertains to all IE and Firefox?

I am trying to target a particular css styling for IE and Firefox. Based on what I have read, I can do the following that will target all IE:

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->


However, it does not appear to work on my end.

Also, is their a way to call a styling and it only target IE? For example, let say I have the following code:

<span class="title">WHAT YOU NEED TO KNOW</span><br />
<span class="styletext">Tuesday October 24, 2014</span>


And I want to add the following css and it will only work if the site is on IE:

<span class="title random(only for IE/Firefox)">WHAT YOU NEED TO KNOW<br />
<span class="styletext">Tuesday October 24, 2014 </span></span>


Is their a way to achieve this?

Thanks

Update:

The following is the cfm file that I am using to create the website. Currently, it is not responsive but in the process in doing that soon:

HTML:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" href="css/regalmedstyle.css" type="text/css" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="css/bootstrap/bootstrap_override.css" type="text/css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
</head>
<body onUnload="closePopUpWindow()">
<cfinclude template="header.cfm">

<cfinclude template="sbar_left.cfm">
<!---Body of Page--->
<div id="mainl">
<img src="img/blah.jpg" class="sideImg" />
<img src="img/blah2.jpg" class="sideImg" />
<img src="img/blah3" class="sideImg" />
<img src="img/bah4" class="sideImg" />
</div>
<div id="mainr">
<span class="title">WHAT YOU NEED TO KNOW<br />
<span class="styletext">Tuesday October 24, 2014 </span></span>
<br />
<span class="sizetext">Susam facest, et fugit fugit doluptas simagnit opta pro qui ommodit laut magnis nis aborempor sin pro offictem qui consero blatis vellace stiore verae conseri optat.</span><br />
<div class="spacingP">
<p class="sizetext">Ri dignati ut que sitatureped ut fugia ilia ne nobit, oditas erbis. Nos, unius in iam quod ducit grae orum se. </p>
</div>
<br />
<span class="title">WHAT YOU NEED TO KNOW <br />
<span class="styletext">Tuesday October 24, 2014 </span></span>
<br />
<span class="sizetext">Susam facest, et fugit fugit doluptas simagnit opta pro qui ommodit laut magnis nis aborempor sin pro offictem qui consero blatis vellace stiore verae conseri optat.</span><br />
<div class="spacingP">
<p class="sizetext">Ri dignati ut que sitatureped ut fugia ilia ne nobit, oditas erbis. Nos, unius in iam quod ducit grae orum se. </p>
</div>
<br />
<span class="title">WHAT YOU NEED TO KNOW<br />
<span class="styletext">Tuesday October 24, 2014 </span></span>
<br />
<span class="sizetext">Susam facest, et fugit fugit doluptas simagnit opta pro qui ommodit laut magnis nis aborempor sin pro offictem qui consero blatis vellace stiore verae conseri optat.</span><br />
<div class="spacingP">
<p class="sizetext">Ri dignati ut que sitatureped ut fugia ilia ne nobit, oditas erbis. Nos, unius in iam quod ducit grae orum se. </p>
</div>
<br />
<span class="title">WHAT YOU NEED TO KNOW<br />
<span class="styletext">Tuesday October 24, 2014 </span></span>
<br />
<span class="sizetext">Susam facest, et fugit fugit doluptas simagnit opta pro qui ommodit laut magnis nis aborempor sin pro offictem qui consero blatis vellace stiore verae conseri optat.</span><br />
<div class="spacingP">
<p class="sizetext">Ri dignati ut que sitatureped ut fugia ilia ne nobit, oditas erbis. Nos, unius in iam quod ducit grae orum se. </p>
</div>
<br />
</div>
<cfinclude template="sbar_right.cfm">
</body>
<!--- <cfinclude template="footer.cfm">--->
</html>


The following is the css file. I do apologize how messsy it is. Will be cleaning it up today, just started today:

CSS:

html, body { font-family: "OpenSans", sans-serif; }

body{
position:relative;
background-color:white;
margin: 0;
padding: 0;
}

p{
font-size:10pt !important;
display:inline;
}

.spacingP{
margin-top: 6px;
}

a{
color:white;
}

ul{
list-style:none;
}

.linkFont{
font-family:TradeGothic CondEighteen !important;
}

.img-banner{
margin-left:auto;
margin-right:auto;
display:block;
}

#wrapper{
width: 940px;
margin: 0 auto;
color:grey;
}

#banner-wrapper{
display:block;
padding:0;
margin-left:auto;
margin-right:auto;
background:#FFF;
background-image: url("../img/Banner.jpg");
background-repeat: no-repeat;
padding-bottom:83px;
}

.navbar-buttons{
padding-top:20px;
padding-right:20px;
text-align:right;
list-style:none;
margin:0 auto;
overflow:hidden;
}

#mainl{
float:left;
padding:1px 0 0 0;
width:10%;
margin-right:30px;
margin-top:15px;
margin-left:20px;
}

#mainr{
float:left;
padding:1px 0 0 0;
margin: 20px 0 0 45px;
width:30%;
}

img.sideImg{
float:left;
margin: 10px 0 15px 7px;
}

#sidebarleft{
float: left;
width: 15%;
padding: 0; margin:0;
margin: 10px 0px 0px 0px;
}

#sidebarleft a:hover{
color:green;
}

#sidebarleft ul{
list-style:none;
padding:0;
margin:10px 0 10px 0;
}

.leftbuttons{
background-image: url("../img/Button_1.jpg");
background-repeat:no-repeat;
padding: 5px 0 8px 10px;
}

.leftbuttons a{
color:grey;
font-size:10pt !important;
}

.leftbuttons2{
background-image: url("../img/Button_2.jpg");
background-repeat:no-repeat;
padding: 7px 0 4px 7px;
}

.leftbuttons2 a{
color:grey;
vertical-align:center;
font-size: 10pt !important;
}

#sidebarright{
float: right;
width: 30%;
padding: 0; margin:0;
margin-top:15px;
}

#sidebarright a{
color:grey;
font-size:10pt !important;
}

#sidebarright a:hover{
color:green;
}

.rightbuttons{
background-image: url("../img/Button.jpg");
background-repeat:no-repeat;
padding: 14px 0 20px 11px;
text-decoration:none;
margin-left:30px;
}
.rightbuttons2{
background-image: url("../img/Button.jpg");
background-repeat:no-repeat;
padding: 9px 0 19px 11px;
}

.rightbuttonsAlert{
background-image: url("../img/Button.jpg");
background-repeat:no-repeat;
padding: 12px 0 20px 11px;
}
.rightbuttonsAlert a{
color:red !important;
}

.rightbuttonsAlert a:hover{
color:blue !important;
}

.rightbuttonsDir{
background-image: url("../img/Button.jpg");
background-repeat:no-repeat;
padding: 9px 0 20px 11px;
}
.shifttd{
padding-right:27.5px;
padding-bottom:27.5px;
}

img.buttonUlti{
float:right;
margin-top:13px;
margin-bottom:15px;
}

.shiftRes{
margin-left:27px;
padding-top:40px;
}

.departstyle{
font-size: 18px !important;
font-weight:bold;
padding-left: 9px;
padding-bottom: 5px;
font-family:calibri !important;
}

.resstyle{
font-size: 18px !important;
font-weight:bold;
text-align:left;
padding-left:15pt;
padding-bottom:7px;
font-family:calibri !important;
}

#content-wrapper{
clear:both;
margin:0;
padding:0;
}

.styletext{
font-size:8pt !important;
font-style:italic;
}

.sizetext{
font-size: 8pt !important;
}

.title{
font-size:9pt !important;
font-weight:bold;
color:blue;
}

.shiftTitle{
margin-top:5px;

}

/*MEDIA*/

@media screen and (max-width:939px){
#banner-wrapper{
margin-left:auto;
margin-right:auto;
padding:0;
background-image: url("../img/Banner.jpg");
background-repeat: no-repeat;
padding-bottom:83px;
}
}


Images showing the issue. The following is the issue in IE that shows off spacing:

enter image description here

And the following image is in Chrome:

enter image description here

As you can see, the spacing among the content is off and not sure why
Any help would be appreciated

Thanks

Answer

The issue you are facing is that different browsers have different "standard" CSS, for instance your line-height value in your pages are being interpreted differently, or are using a default setting that is specific browser to browser.

Your current method appears to be that if there is a problem in some browsers then you're trying to cancel out that exception by adding another exception, specific to that browser. This is not the best way of approaching this issue and is easy to snowball into loading more special cases for each browser.

1)

There are several options open to you to work around these inconsistencies, the easiest of which is to use CSS Normalizer which should be loaded before your CSS stylesheet and will set a standard for all browsers, to show a page's elements all the same way.

2)

Alternatively you should set in your CSS all values so you are not relying on browser default settings, such as line-height, etc. You set each and every value that you notice is being browser-interpreted inconsistently (this is sort of what Normalize does).

so for example:

span {
    line-height:1.1rem;
}

This will superceed any browser default line-height value. Use Inspector in Chrome or Firebug in Firefox to view and assess the various CSS rules affecting each element on your page.

3)

You can also try and use Vendor Prefixes as remarked here so that certain CSS rules are applied only to certain browsers, however the way these work is not set in stone and this is still the incorrect solution of trying to fix an exception with another exception.

Vendor prefixes for IE are -ms-<property>.

4)

In order to be backwards compatible with old (pre-9) IE and other older browsers then I recommend downloading and running Modernizr which will detect what CSS and styling features the browser can use and then fit the styles applied by the stylesheet to that specification.

I believe there is some ambiguous info. about if Modernizr runs well with CSS Normalizer so possibly use one or the other if there are any aspect overlap issues.


My strongest suggestion is that you use method 1 here. Method 2 is an option and method three simply an idea that may assist you.

Option 4 - Modernizr - fixed the issues with older pre-9 Internet Explorer displays.