How to load the css according to browser?

Question

I have designed a webpage for my project which looks fine in firefox and chrome when i look into internet explorer the image position and table position everything wasn't aligned properly. Even i tried to import reset.css file(eric's recent version).This gives improper alignment tables of all the pages.

Is it good to load the css based on user agent?

   if ie:
      <link ....</link>
   else:
      <link>...</link>

How it is supposed to do?

Also, How to adjust the layout which should be adoptable across all resolution screen?

My page is looks fine when i do in 12-15 inch resolution screens.Some wider screens it doesn't look good.

How it is supposed to be handled it?

Thanks in advance.

The table issues can usually be fixed with display. What versions of ie are you going to support? — Yisela
– Yisela, Commented Aug 6, 2012 at 4:45
@pKs site is not opening ,you should remove the comma at the end — Prashobh
– Prashobh, Commented Aug 6, 2012 at 5:10

Prashobh · Accepted Answer · 2012-08-06 04:50:21Z

4

<!--[if IE 8]>
        <link rel="stylesheet" href="css/ie8.css"/>

<![endif]-->

stylesheet for ie

you can adjust the layout using media queries,what ever the resolution you can choose

something like

@media all and (min-width:500px) { … }
@media (min-width:500px) { … }

media queries

edited Aug 6, 2012 at 4:50

answered Aug 6, 2012 at 4:44

Prashobh

9,58415 gold badges66 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sandeep · Accepted Answer · 2012-08-06 04:42:43Z

2

Your can use conditional comment for IE browsers. Write like this:

<!--[if IE 8]>
  <link rel="stylesheet" href="ie8.css"/>
Special instructions for IE 8 here
<![endif]-->

Read this for more http://www.quirksmode.org/css/condcom.html

answered Aug 6, 2012 at 4:42

sandeep

93.2k24 gold badges140 silver badges156 bronze badges

Comments

Ahsan Khurshid · Accepted Answer · 2012-08-06 05:49:25Z

By using CSS Conditional Comments you may target your browsers.

By Adding following lines in your <HTML> page you may define browser specific style-sheets or java-script files.

For IE Browsers

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

For Non-IE Browsers

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

By using Media Queries you may create a responsive website's layout by targeting desired screen resolutions.

@media screen and (max-width: 699px) and (min-width: 320px) {
   div { background: blue; width: 100px; height: 100px; }
}


@media screen and (max-width: 1024px) and (min-width: 700px) {
   div { background: green; width: 300px; height: 100px;  }
}


@media screen and (max-width: 1280px) and (min-width: 1025px) {
   div { background: red; width: 600px; height: 100px;  }
}

EXAMPLE FIDDLE

You may learn in details that How to use Media Queries

Collectives™ on Stack Overflow

How to load the css according to browser?

3 Answers 3

Comments

Comments

By using CSS Conditional Comments you may target your browsers.

By using Media Queries you may create a responsive website's layout by targeting desired screen resolutions.

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

By using CSS Conditional Comments you may target your browsers.

By using Media Queries you may create a responsive website's layout by targeting desired screen resolutions.

Comments

Related