SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    MI
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS works in Gecko, not IE

    Alright, I'm attempting some image replacement here, and I got the desired effect in Gecko browsers, but it does not work in IE and it's had me scratching my head. Here's the link:

    http://www.msue.msu.edu/emergency/new/1minute.html

    Now, if you load it in a Gecko browser, then turn images off (leaving CSS on), the text underneath the "1 Minute Tips Archive" heading shows through. However, if you load it in IE, the text shows up on top of the header image rather than behind it.

    Here's the XHTML:
    HTML Code:
    <?xml version="1.0" encoding="UTF-8"?> 
    <!DOCTYPE html 
         PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    	<head>
    		<title>MSU Extension Emergency Management -- 1-Minute Tips Archive</title>
    		<link rel="stylesheet" type="text/css" href="style.css" />
    	</head>
    <body> 
    	<div id="header"> 
    		
      <h1 id="title" title="MSUE Emergency Management"><a class="headlink" href="index.html"></a><a href="index.html">MSU 
        Extension Emergency Management</a></h1>
    	</div>
    	<div id="search"> 
          <!-- Begin siteLevel HTML Searchbox Code -->
        <form method="get" action="http://sitelevel.whatuseek.com/query.go">
          <table border="0" cellspacing="0" cellpadding="0">
            <tr> 
              <td><table cellspacing="0" cellpadding="2" border="0">
                  <tr> 
                    <td class="sbar" align="left" valign="middle"> Search The Site:</td>
                    <td align="center" valign="middle"><input type="hidden" name="crid" value="2b87ca85287802c7" /> 
                      <input id="searchtext" type="text" name="query" size="17" maxlength="100" /></td>
                    
                  <td id="searchcell" valign="middle" align="right"><input type="image" src="images/searchbutton.jpg" value="Search" name="B1" /></td>
                  </tr>
                  <!--LB-->
                  <!--/LB-->
                </table></td>
            </tr>
          </table>
        </form>
        <!-- End siteLevel HTML Searchbox Code -->
    	</div>
    	
    <div id="contentouter"> 
      <div id="content"> 
        <div id="oneminutearea"> 
          <h2 id="oneminhead">1-Minute Tips Archive</h2>
          <div class="contenttext"> 
            <p>This area allows you to access previous 1-Minute Tip messages. All 
              documents are in Microsoft Word format. Also, the documents are listed 
              in the order of most recent first.</p>
            <ul class="linklist">
              <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/hurricanes07sep04.doc" onclick="window.open(this.href,'_blank');return false;">Hurricanes</a> 
                (Tue, 07 Sep 2004)</li>
              <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/extensionassistance26aug04.doc" onclick="window.open(this.href,'_blank');return false;"> 
                Extension Assistance after Storm Events</a> (Thu, 26 Aug 2004)</li>
              <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/criticalbloodshortage06jul04.doc" onclick="window.open(this.href,'_blank');return false;"> 
                Critical Blood Shortage</a> (Tue, 06 Jul 2004)</li>
              <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/animalbiosecurity14jun04.doc" onclick="window.open(this.href,'_blank');return false;"> 
                Animal Biosecurity When Exhibiting at Fairs</a> (Mon, 14 Jun 2004)</li>
              <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/morefloodresourcesfromeden09Jun04.doc" onclick="window.open(this.href,'_blank');return false;"> 
                More Flood Resources from EDEN</a> (Wed, 09 Jun 2004)</li>
              <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/floodingandwinddamageinthemid-west24May04.doc" onclick="window.open(this.href,'_blank');return false;"> 
                Flooding and Wind Damage in the Mid-West</a> (Mon, 24 May 2004)</li>
              <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/wildfireseasonpart320apr04.doc" onclick="window.open(this.href,'_blank');return false;"> 
                Wildfire Season Part 3</a> (Tue, 20 Apr 2004)</li>
              <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/michiganwildfirefactorfiction14apr04.doc" onclick="window.open(this.href,'_blank');return false;"> 
                Wildfire Season Part 2</a> (Wed, 14 Apr 2004)</li>
              <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/wildfireseasonpart102apr04.doc" onclick="window.open(this.href,'_blank');return false;"> 
                Wildfire Season Part 1</a> (Fri, 02 Apr 2004)</li>
              <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/ricin12feb04.doc" onclick="window.open(this.href,'_blank');return false;"> 
                Ricin</a> (Thu, 12 Feb 2004)</li>
              <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/whatcausesmadcow16jan04.doc" onclick="window.open(this.href,'_blank');return false;"> 
                BSE Part 2</a> (Fri, 16 Jan 2004)</li>
              <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/bsepart127dec03.doc" onclick="window.open(this.href,'_blank');return false;"> 
                BSE Part 1</a> (Sat, 27 Dec 2003)</li>
              <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/1-minutetipsnowarchived18dec03.doc" onclick="window.open(this.href,'_blank');return false;"> 
                1-Minute Tips Now Archived</a> (Thu, 02 Dec 2003)</li>
              <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/usdacountyemergencyboards02dec03.doc" onclick="window.open(this.href,'_blank');return false;"> 
                USDA County Emergency Boards</a> (Tue, 02 Dec 2003)</li>
              <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/californiawildfires28oct03.doc" onclick="window.open(this.href,'_blank');return false;"> 
                California Wildfires</a> (Tue, 28 Oct 2003)</li>
              <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/msuestafftraining17oct03.doc" onclick="window.open(this.href,'_blank');return false;"> 
                MSUE Staff Training</a> (Fri, 17 Oct 2003)</li>
              <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/familyemergencykits29aug03.doc" onclick="window.open(this.href,'_blank');return false;"> 
                Family Emergency Kits</a> (Fri, 29 Aug 2003)</li>
              <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/northeastpoweroutage14aug03.doc" onclick="window.open(this.href,'_blank');return false;"> 
                Northeast Power Outage</a> (Thu, 14 Aug 2003)</li>
              <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/methlabsincreasing21jul03.doc" onclick="window.open(this.href,'_blank');return false;"> 
                Meth Labs</a> (Mon, 21 Jul 2003)</li>
              <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/communicatingduringdisasterevents09jul03.doc" onclick="window.open(this.href,'_blank');return false;"> 
                Disaster Communication</a> (Wed, 09 Jul 2003)</li>
              <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/whatifred20may03.doc" onclick="window.open(this.href,'_blank');return false;"> 
                What if Red?</a> (Tue, 20 May 2003)</li>
              <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/2003michiganwildfirestatistics25apr03.doc" onclick="window.open(this.href,'_blank');return false;"> 
                2003 Wildfire Stats</a> (Fri, 25 Apr 2003)</li>
              <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/newmsueemergencymanagementwebsite16apr03.doc" onclick="window.open(this.href,'_blank');return false;"> 
                New MSUE Emergency Management Web Site</a> (Wed, 16 Apr 2003)</li>
              <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/wildfire06apr03.doc" onclick="window.open(this.href,'_blank');return false;"> 
                Wildfire Media Packet on the Way to MSUE Offices</a> (Sun, 06 Apr 
                2003)</li>
              <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/protectingfoodsystem18mar03.doc" onclick="window.open(this.href,'_blank');return false;"> 
                Protecting Food System</a> (Tue, 18 Mar 2003)</li>
              <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/threatconditionlowered27feb03.doc" onclick="window.open(this.href,'_blank');return false;"> 
                Threat Condition Lowered</a> (Thu, 27 Feb 2003)</li>
              <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/whotocontact21feb03.doc" onclick="window.open(this.href,'_blank');return false;"> 
                Who to Contact</a> (Fri, 21 Feb 2003)</li>
              <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/end11feb03.doc" onclick="window.open(this.href,'_blank');return false;"> 
                Exotic Newcastle Disease</a> (Tue, 11 Feb 2003)</li>
              <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/columbia03feb03.doc" onclick="window.open(this.href,'_blank');return false;"> 
                Columbia</a> (Mon, 03 Feb 2003)</li>
              <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/westnilevirus20jan03.doc" onclick="window.open(this.href,'_blank');return false;"> 
                West Nile Virus</a> (Mon, 20 Jan 2003)</li>
              <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/additioninfoonportablegenerators13jan03.doc" onclick="window.open(this.href,'_blank');return false;"> 
                Additional Information About Portable Generators</a> (Mon, 13 Jan 
                2003)</li>
              <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/portablegeneratorspart213jan03.doc" onclick="window.open(this.href,'_blank');return false;"> 
                Portable Generators Part 2</a> (Mon, 13 Jan 2003)</li>
              <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/portablegeneratorspart102jan03.doc" onclick="window.open(this.href,'_blank');return false;"> 
                Portable Generators Part 1</a> (Thu, 02 Jan 2003)</li>
              <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/riverice15dec02.doc" onclick="window.open(this.href,'_blank');return false;"> 
                River Ice</a> (Sun, 15 Dec 2002)</li>
              <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/drivewayaccess06dec02.doc" onclick="window.open(this.href,'_blank');return false;"> 
                Driveway Access</a> (Fri, 06 Dec 2002)</li>
              <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/shut-offs19nov02.doc" onclick="window.open(this.href,'_blank');return false;"> 
                Shut-Offs</a> (Tue, 19 Nov 2002)</li>
              <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/agrisecurity04nov02.doc" onclick="window.open(this.href,'_blank');return false;"> 
                Agrisecurity</a> (Mon, 04 Nov 2002)</li>
              <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/appresolved23sep02.doc" onclick="window.open(this.href,'_blank');return false;"> 
                App Resolved</a> (Mon, 23 Sep 2002)</li>
              <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/hstraining18sep02.doc" onclick="window.open(this.href,'_blank');return false;"> 
                HS Training</a> (Wed, 18 Sep 2002)</li>
              <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/msueand9-1111sep02.doc" onclick="window.open(this.href,'_blank');return false;"> 
                MSU and 9/11</a> (Wed, 11 Sep 2002)</li>
              <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/completeurl19jul02.doc" onclick="window.open(this.href,'_blank');return false;"> 
                Complete URL</a> (Fri, 19 Jul 2002)</li>
              <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/nationalextensionstaffsurvey18jul02.doc" onclick="window.open(this.href,'_blank');return false;"> 
                National Extension Staff Survey</a> (Thu, 18 Jul 2002)</li>
              <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/firewise12jul02.doc" onclick="window.open(this.href,'_blank');return false;"> 
                Firewise</a> (Fri, 12 Jul 2002)</li>
              <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/givingblood27jun02.doc" onclick="window.open(this.href,'_blank');return false;"> 
                Giving Blood</a> (Thu, 27 Jun 2002)</li>
              <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/imagine02jun02.doc" onclick="window.open(this.href,'_blank');return false;"> 
                Imagine</a> (Sun, 02 Jun 2002)</li>
              <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/Small%20Pox.doc" onclick="window.open(this.href,'_blank');return false;"> 
                Small Pox</a> (Tue, 21 May 2002)</li>
              <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/Tornado%20-%20Part%20IV.doc" onclick="window.open(this.href,'_blank');return false;"> 
                Tornados Part 4</a> (Wed, 15 May 2002)</li>
              <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/tornados-partiii12may02.doc" onclick="window.open(this.href,'_blank');return false;"> 
                Tornados Part 3</a> (Sun, 12 May 2002)</li>
              <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/Tornados%20-%20Part%20II.doc" onclick="window.open(this.href,'_blank');return false;"> 
                Tornadoes Part 2</a> (Thu, 09 May 2002)</li>
              <li><a href="http://www.msue.msu.edu/msue/emergency/EM%20Tips/tornados-parti07may02.doc" onclick="window.open(this.href,'_blank');return false;"> 
                Tornadoes Part 1</a> (Tue, 07 May 2002)</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    	<div id="footer">
    		<p>Copyright &copy; 2004 Michigan State University Extension/Michigan State University
    		<br /><a  class="navlink" href="http://www.msue.msu.edu/msue/disclaim.html" onclick="window.open(this.href,'_blank');return false;">Disclaimer</a>, <a  class="navlink" href="http://www.msue.msu.edu/msue/indicia.html" onclick="window.open(this.href,'_blank');return false;">Indicia</a>, 
    		and <a  class="navlink" href="http://www.msue.msu.edu/msue/linking.html" onclick="window.open(this.href,'_blank');return false;">Linking Information</a> - Site designed and maintained by <a  class="navlink" href="mailto:engelan1@msu.edu">
    		Andrew Engel</a>
    		<br />Michigan State University is an affirmative action equal opportunity institution</p>
    	</div>
    	<div id="navigation"> 
    		<h3>Navigation</h3>
    		<ul class="navlist">
    			<li><a class="navlink" href="index.html">Home</a></li>
    			<li><a class="navlink" href="prepare.html">Preparedness</a></li>
    			<li><a class="navlink" href="intouch.html">Get In Touch</a></li>
    			<li><a class="navlink" href="hottopics.html">Hot Topics</a></li>
    			<li><a class="navlink" href="spanish.html">En Espa&ntilde;ol</a></li>
    			<li><a class="navlink" href="sitemap.html">Site Map</a></li>
    		</ul>
    		<h3>Quick Links</h3>
    		<ul class="navlist">
    			<li><a class="navlink" href="http://www.agctr.lsu.edu/eden/" onclick="window.open(this.href,'_blank');return false;">EDEN</a></li>
    			<li><a class="navlink" href="http://www.agctr.lsu.edu/eden/Resources/onlineext.aspx" onclick="window.open(this.href,'_blank');return false;">
    			Extension Websites</a></li>
    			<li><a class="navlink" href="http://www.michigan.gov/msp/0,1607,7-123-1593_3507-15509--,00.html" onclick="window.open(this.href,'_blank');return false;">
    			Local EM Contacts</a></li>
    			<li><a class="navlink" href="http://www.redcross.org" onclick="window.open(this.href,'_blank');return false;">Red Cross</a></li>
    		</ul>
    		
      <div id="updates"> 
        <h4 id="updtitle">Updates</h4>
        <p class="updtext">9.08 - New site launched.</p>
        <p class="updtext"><a href="older.html">Older Updates...</a></p>
      </div>
    	</div>
    </body>
    </html>
    Here's the relevant CSS:
    HTML Code:
    /* 1-Minute Tips Section */
    
    div#oneminutearea {
    	background-image: url(images/1minuteback.jpg);
    	background-repeat: no-repeat;
    	position: relative;
    	z-index: 1;
    	}
    	
    h2#oneminhead {
    	position: relative;
    	z-index: -1;
    	}
    Any help is appreciated, thanks!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,379
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Actually its IE thats interpreting the css correctly here. As of css 2.1. an element is not able to be placed behind its parents background. It can be placed behind its parents content but not the parents background (source:eric meyer's definitive guide). Mozilla get it wrong this time.

    So you will need to change the way you go about it. You'll have to put the image in the foreground or remove the nesting and place the text outside the parent and position it behind the parent so they occupy the same space.

    Paul

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    MI
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul, I un nested it, works great!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •