Separate CSS page for IE7 cooperation

  • (3 Pages)
  • +
  • 1
  • 2
  • 3

39 Replies - 15259 Views - Last Post: 17 August 2011 - 02:52 PM

#1 kevinsmock   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 30
  • Joined: 13-August 11

Separate CSS page for IE7 cooperation

Posted 15 August 2011 - 06:10 PM

Okay, so I'm facing a problem that I'm sure many people have had in the past. I have a scrolling DIV with a background image. When viewed on Safari and FF it works just fine, the content flows down the DIV and the image stays in the back. Then, of course, I pull it up in IE7 and when I scroll down the DIV, the image duplicates as the content flows and it's such an eye sore. Can someone please tell me how to make a separate CSS page for IE7. THANK YOU! I'm going crazy.

Is This A Good Question/Topic? 0
  • +

Replies To: Separate CSS page for IE7 cooperation

#2 EnvXOwner   User is offline

  • D.I.C Lover
  • member icon

Reputation: 358
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Re: Separate CSS page for IE7 cooperation

Posted 15 August 2011 - 06:33 PM

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

Was This Post Helpful? 0
  • +
  • -

#3 Syfer   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 190
  • Joined: 08-October 10

Re: Separate CSS page for IE7 cooperation

Posted 15 August 2011 - 06:43 PM

Check this site

http://www.thesitewi...xcludecss.shtml

hope it helps

This post has been edited by Syfer: 15 August 2011 - 06:44 PM

Was This Post Helpful? 0
  • +
  • -

#4 kevinsmock   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 30
  • Joined: 13-August 11

Re: Separate CSS page for IE7 cooperation

Posted 15 August 2011 - 07:10 PM

Okay, I have that in my HTML between <head> and </head>. For the style sheet itself, my coding so far is...

#Table_01 #content {
        background-image: url (http://www.firstwheelfilms.com/home-images/Home_05.jpg) no-repeat;
        position: relative;
        overflow-y: scroll;
        overflow-x: auto; 
}


Again, what I'm trying to accomplish here is for the background image inside the DIV to stay stationary as you scroll through while the content flows up and down. Does anybody know what I need to include inside the style sheet to accomplish this in IE7? Thanks.
Was This Post Helpful? 0
  • +
  • -

#5 EnvXOwner   User is offline

  • D.I.C Lover
  • member icon

Reputation: 358
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Re: Separate CSS page for IE7 cooperation

Posted 15 August 2011 - 07:17 PM

? Are you wanting the image to stay in the exact same spot, even when they scroll the page. If you do, you need the position to be fixed, and set a top, left, etc for it.
Was This Post Helpful? 0
  • +
  • -

#6 kevinsmock   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 30
  • Joined: 13-August 11

Re: Separate CSS page for IE7 cooperation

Posted 15 August 2011 - 07:24 PM

View PostEnvXOwner, on 15 August 2011 - 07:17 PM, said:

? Are you wanting the image to stay in the exact same spot, even when they scroll the page. If you do, you need the position to be fixed, and set a top, left, etc for it.


Yes I do want it to stay in place when scrolling. Thank you, sir.
Was This Post Helpful? 0
  • +
  • -

#7 EnvXOwner   User is offline

  • D.I.C Lover
  • member icon

Reputation: 358
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Re: Separate CSS page for IE7 cooperation

Posted 15 August 2011 - 07:29 PM

No problem. If you need examples or any more assistance, don't hesitate to start a new topic.
Was This Post Helpful? 0
  • +
  • -

#8 kevinsmock   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 30
  • Joined: 13-August 11

Re: Separate CSS page for IE7 cooperation

Posted 15 August 2011 - 07:45 PM

View PostEnvXOwner, on 15 August 2011 - 07:29 PM, said:

No problem. If you need examples or any more assistance, don't hesitate to start a new topic.


I set the position as fixed but I don't see what the top, left, bottom, and right properties are going to do for the position or attachment of the background. Care to explain?
Was This Post Helpful? 0
  • +
  • -

#9 EnvXOwner   User is offline

  • D.I.C Lover
  • member icon

Reputation: 358
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Re: Separate CSS page for IE7 cooperation

Posted 15 August 2011 - 07:49 PM

Well, let's say I use the following for a div:
.positioned {
   position: fixed;
   top: 50px;
   left: 80px;
}


What this means, first of all is that the position is fixed and the element will stay in the same spot. Then I set where do I want it to be positioned at. I move it from the top by 50 pixels, and I move it from the left 80 pixels. As you scroll then the div will always be 50 pixels from the top of the web browser and 80 pixels from the left, no matter how far you scroll. I hope that helps clear that up.
Was This Post Helpful? 0
  • +
  • -

#10 kevinsmock   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 30
  • Joined: 13-August 11

Re: Separate CSS page for IE7 cooperation

Posted 15 August 2011 - 08:00 PM

I'm kind of sketched now, I don't think I've done the HTML part of it correct thus far. I'll post my code...

This is my HTML:

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="IE-stylesheet.css" mce_href="#Table_01 #content" />
<![endif]-->


This is my CSS (in a separate sheet for IE7, obviously):

#Table_01 #content {
        background-image: url (http://www.firstwheelfilms.com/home-images/Home_05.jpg)
        position: fixed;
        top: 50%;
        left: 0px;
        bottom: 125px;
        right: 0px;
}


Those numbers are random b.c. at the time I wasn't sure what to do with them. Can you tell so far if I'm doing this correctly? Need more code or anything. You've been very helpful, thank you!
Was This Post Helpful? 0
  • +
  • -

#11 EnvXOwner   User is offline

  • D.I.C Lover
  • member icon

Reputation: 358
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Re: Separate CSS page for IE7 cooperation

Posted 15 August 2011 - 08:05 PM

Well, that's not enough HTML to tell me much. Can you show me the entire contents in your head tag.
Was This Post Helpful? 0
  • +
  • -

#12 kevinsmock   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 30
  • Joined: 13-August 11

Re: Separate CSS page for IE7 cooperation

Posted 15 August 2011 - 08:08 PM

This good?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style>
<!-- 
body { text-align:center; } 
#box { margin:0 auto; text-align:left; width:800px; border:0px solid black; } 
--> 
</style> 
<body>
<div id="box">
<link href="HomeStyle.css" rel="stylesheet" type="text/css" />
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="IE-stylesheet.css" mce_href="#Table_01 #content" />
<![endif]-->

Was This Post Helpful? 0
  • +
  • -

#13 EnvXOwner   User is offline

  • D.I.C Lover
  • member icon

Reputation: 358
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Re: Separate CSS page for IE7 cooperation

Posted 15 August 2011 - 08:10 PM

Thanks for showing that. I found your issue. The problem is that you're stating the body tag in the head element. The head element always goes above the body element. You also never import stylesheets in the body tag. You always do that in the head tag.
Was This Post Helpful? 0
  • +
  • -

#14 kevinsmock   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 30
  • Joined: 13-August 11

Re: Separate CSS page for IE7 cooperation

Posted 15 August 2011 - 08:17 PM

View PostEnvXOwner, on 15 August 2011 - 08:10 PM, said:

Thanks for showing that. I found your issue. The problem is that you're stating the body tag in the head element. The head element always goes above the body element. You also never import stylesheets in the body tag. You always do that in the head tag.


Okay, I tried cleaning it up a bit. How's that looking man?

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link href="HomeStyle.css" rel="stylesheet" type="text/css" />
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="IE-stylesheet.css" mce_href="#Table_01 #content" />
<![endif]-->
</head>
<style>
<!-- 
body { text-align:center; } 
#box { margin:0 auto; text-align:left; width:800px; border:0px solid black; } 
--> 
</style> 
<body>

Was This Post Helpful? 0
  • +
  • -

#15 EnvXOwner   User is offline

  • D.I.C Lover
  • member icon

Reputation: 358
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Re: Separate CSS page for IE7 cooperation

Posted 15 August 2011 - 08:39 PM

the <style></style> element should also be in the header.
Was This Post Helpful? 0
  • +
  • -

  • (3 Pages)
  • +
  • 1
  • 2
  • 3