Is it possible to have a separate .css file for certain browsers?

I am having problems with some browsers in how they render, and in a big way. I have <td> cells that contain <div> elements, and I have the latter's height expand to the full height of the <td> by giving them height: 100%. Only in IE does the <div> always expands 10 to 15px and beyond the bottom boundary of the <td>.

Still talking about the same web page, I also have another issue where I have <a> links in the first column of <td>s, and when I hover it, I set the font-weight to bold. For some reason, the <tr> element in IE and Chrome starts expanding, causing all <div>s to grow in height at like one pixel per hover I do on the <a>. This doesn't happen on Opera and Safari.

I'm not sure how to handle this. Any advice on this matter would be greatly appreciated.
elepilAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Tom BeckCommented:
You can create conditionals in your html markup to load an additional css file if the browser is IE like this:
<!--[if IE]>
    <link rel="stylesheet" href="../quirksmode.css" />
  <![endif]-->

Open in new window

You can get more specific too using lt (less than) and gt (greater than):
<!--[if gt IE 9]>
According to the conditional comment this is greater than IE 9<br />
<![endif]-->

Open in new window


Look here:
http://www.quirksmode.org/css/condcom.html
0
elepilAuthor Commented:
Tom, thanks for responding.

I already saw that when I did a Google search. That's for IE only. My question involves multiple browsers not behaving consistently. What about for Chrome? Firefox?
0
Alexandre SimõesManager / Technology SpecialistCommented:
It's a bad practice to have separate css files to target different browsers. This brings a lot of issues maintaining them but especially when trying to correctly identify the browser and it's version (because the HTML parser might be different).
On top of that, the user agent can be faked.

Anyway, none of your issues seem to require separate files per browser. I believe we can fix them with pure css.
Can you create a jsfiddler demo of those problems?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

elepilAuthor Commented:
Alexandre, thanks for responding.

Sure, here's the fiddle link: http://jsfiddle.net/6oadvr8n/2/.

While fiddle works well for many code snippets, the expanding <div> height by 1px for each <a> hover does not happen in jsfiddle; instead, it just "jiggles". Also, I have an external script I downloaded called bowser.js which helps me detect browser types, it doesn't work in jsfiddle either; so I didn't bother including it, and the <div> heights will look odd in firefox as a result.
0
Alexandre SimõesManager / Technology SpecialistCommented:
I think there are things missing in your demo no?
I see no div's inside the td's, just an <a> that seems to be working properly.

If you can't reproduce it in jsfiddle, try Plunker. It's the closest we can get to simulate the real thing.
0
elepilAuthor Commented:
Alexandre, what do you mean there are no <div>s? Each green rectangle is a <div>. They're all <div class="ac">.
0
Alexandre SimõesManager / Technology SpecialistCommented:
Sorry, I wasn't looking at it correctly.

I did some changes, tell me if I'm on the right track:
http://jsfiddle.net/AlexCode/6oadvr8n/4/
0
Alexandre SimõesManager / Technology SpecialistCommented:
ups, maybe not mate :)
give me a bit more time :))))
I'm watching the MotoGP at the same time I need to concentrate :)
0
elepilAuthor Commented:
Your fiddle looks like this:

Your fiddle looks like this:
I had set a minimum height and fixed widths for those divs for a reason, so please don't alter the height and width. The problem is that those <div>s are exceeding past the bottom of the <td> in IE, but only in IE. You're now adjusting the heights, and it will surely affect the other browsers.

Prior to making this post, the only way I could make the <div>s fit snugly within its <td> across all browsers was to remove the padding and box-shadows. I thought maybe you knew something I didn't.

You said it was "bad practice" to have different .css files for each browser. Let me ask you this, how would you do it if you wanted a separate .CSS file for each browser? Bad practice or not, to me, that's the only solution, and I would do it only for this one single page because the rendering difference in IE is so glaringly obvious.

Humor me. If I were determined to have a separate .CSS file for each browser type, how would I go about doing that?
0
Alexandre SimõesManager / Technology SpecialistCommented:
Try this (MotoGP race is over) :)
Sorry for the messed up fiddle before.

http://jsfiddle.net/6oadvr8n/5/
0
elepilAuthor Commented:
Alexandre, this was what I just said, you made it look right in IE, but ended up making it not look right in all other browsers. All other browsers look like this now:

6-27-2015-3-09-18-PM.png
0
Alexandre SimõesManager / Technology SpecialistCommented:
Well, this one is hard :)
The problem is really the filling of rowspan cells that is not correctly calculated.
I even tried javascript solutions and it's not consistent.

So probably not even multiple css files would do the trick.

As a side note, have you looked at this? http://fullcalendar.io/
I'm not giving up but the day view of this control pretty much fits what you need.
And their approach to design the thing is very different.
0
elepilAuthor Commented:
Alexandre, it is hard. I don't know if you noticed, but Firefox does not expand all the <div>s to the full height of its parent <td>, even though the .ac class says height: 100%. We can't tell what's going on inside the browser algorithms.

If it is possible to use a different .css file for a particular browser, then it will be possible. Just as you were able to make it look right in IE, so can I, but it will affect the other browsers.

If you can show me how to use a different .css file for each particular browser, then I can do the rest. So how do you do that?
0
elepilAuthor Commented:
Also, you're the second person who has recommended that fullcalendar thing to me. It won't work with my specs, it's too limited. Besides, I'm done with mine, it's only the look and feel that I need to refine.
0
Alexandre SimõesManager / Technology SpecialistCommented:
Like I said above, identifying the browser is not a good choice.
The only thing you have is the user agent and you can access it with javascript by using:
navigator.userAgent

Open in new window

The result is a bunch of info like this for chrome:
Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.130 Safari/537.36

Based on this, to identify if it's Chrome you have to do something like:
var isChrome = /chrome/.test( navigator.userAgent.toLowerCase());

Open in new window

With this information you can dynamically "inject" the css link DOM element that you want:
document.write('<'+'link rel="stylesheet" href="path/to/the/css/file" />');

Open in new window


If you want a browser detection library, you can have a look at this one: https://github.com/WhichBrowser/WhichBrowser
It relies on what I wrote above.

It's pass 2AM here already and I need to sleep, but I would invest a bit more time trying to write that html/css in a way it can be styled properly with one single css file.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
elepilAuthor Commented:
Ah, you were going to use JavaScript to decide which src to use for the <link>. I use Bowser myself for browser detection, but I didn't think of changing the <link>. Thanks for all your help!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.