PDA

View Full Version : <!--[if IE 6]> Command...


Rob_Che
06-05-2008, 08:50 PM
So. I'm familiar with this style of code:

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

But is there a way of changing this command to read a certain class in your css and ignore another.
EG: I want IE browsers to use GIF background rather than a PNG.

Can you help...

Cheers... Rob.

davidj
06-06-2008, 06:17 AM
you would have your gif calls in the specific.CSS

the logic will determine whether to use the iespecific.CSS or others

Cary
06-06-2008, 07:13 AM
Also, place the conditionally included link after the regular style sheet links so its rules will be used, and don't use shorthand. Use "background-image:url(...)" instead of "background:url(...)" since it's only the image you need to change, not whether it repeats or not, or how it's positioned, etc.

Rob_Che
06-06-2008, 09:57 AM
you would have your gif calls in the specific.CSS


Cheers DJ.

Also, place the conditionally included link after the regular style sheet links so its rules will be used...

I'm totally new to this command so...
I would add the "IF IE" condition at the bottom of my main-layout style sheet so that the browser reads it last ? Is that correct?

Is there a way I can direct it to a specific part of a style sheet (by line for example) rather than a whole new sheet ?

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="line 32/main-layout.css" />
<![endif]-->


Cheers guys... this could save my sanity ! :)

Rob_Che
06-06-2008, 12:58 PM
Ok looked a little longer at this (and read the replies properly!).
So I would add a link to a new style sheet that contains the IE6 commands (ensuring the link to it was AFTER the existing css links in my <head>. Yeah?

I would then add an alternative style for "#content-wrapper" that includes the alternative background image... correct ?

So because this style sheet link was after the existing one it will read it afterwards and replace any behaviours that I specify in the "IE Only" css.

phew.

Rob_Che
06-07-2008, 08:38 AM
Here's what I've done (that hasn't worked :p )

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Doncaster Live Magazine</title>
<style type="text/css" media="screen"></style>
<link href="css/main-layout.css" rel="stylesheet" type="text/css">
<link href="css/nav.css" rel="stylesheet" type="text/css">
<!--[if IE 6]>
<link href="css/ieonly.css" rel=stylesheet" type="text/css" />
<![endif]-->
</head>


I've added a style sheet that has the style;

/* CSS Document */
/* IE Hacks */
#content-wrapper {
float:left;
width:710px;
margin-left: 45px;
display: inline;
background: url(../images/paper-main.jpg) repeat-y;
height: 1%;
overflow: auto;
}

I was hoping this #content-wrapper would override the #content-wrapper in the main-layout.css . . . obviously not . . .

Can someone point me in the right direction ?
Cheers
Rob

Cary
06-07-2008, 09:24 AM
Hi Rob,

You've got this:

<link href="css/ieonly.css" rel=stylesheet" type="text/css" />

It's missing a quote and it shouldn't have the slash at the end, so you should have this:

<link href="css/ieonly.css" rel="stylesheet" type="text/css">

Your main-layout.css should have this:

#content-wrapper {
float:left;
width:710px;
margin-left: 45px;
display:inline;
background: url(../images/paper-main.png) repeat-y;
}

Then your ieonly.css only needs this:

#content-wrapper {
background-image: url(../images/paper-main.jpg);
}

Rob_Che
06-07-2008, 09:31 AM
Cheers Cary - At least I was close ! :)
Sorry for the sloppy coding, wasting your time there.
I wasn't sure whether it would need the whole #content-wrapper style or just the element I was changing..

Your main-layout.css should have this:

#content-wrapper {
float:left;
width:710px;
margin-left: 45px;
display:inline;
background: url(../images/paper-main.png) repeat-y;
}

The height and overflow styles were there so that the bg repeated in IE6 (although this change may resolve that) I'll try it both ways...

I'll try that this evening... appreciate your help as always :)
Rob

Cary
06-07-2008, 09:37 AM
Your welcome :)

Rob_Che
06-07-2008, 04:38 PM
http://512.png.browsershots.org/5f37b965cbb161cd9333dd8cead01608.pngOh dear god, it works!!

Rob_Che
06-07-2008, 04:40 PM
http://512.png.browsershots.org/5f37b965cbb161cd9333dd8cead01608.png

davidj
06-07-2008, 05:37 PM
thats nice

Rob_Che
06-07-2008, 07:04 PM
Cheers DJ

unless it was a sarcastic...
"Hey DJ it works !"
"That's nice." :)

Feel free to head over to my other dsign thread to help me solve a few remaining issues !

Rob

davidj
06-07-2008, 09:18 PM
dont do sarcastic

if its shite ill tell ya

domedia
06-09-2008, 01:25 PM
The browser will just read all your CSS. So if it reads a CSS rule which defines the same CSS rule over and over again, it will just apply the last thing it read. So not much magic ;)

Rob_Che
06-09-2008, 03:39 PM
Magic to little old me !

I didn't realise these things existed til I came here...
I'm only learning - I've been winging it for years !