CSS - Css Image Replacement Not Working In Ie

Hey everyone,

I'm trying to convert a jscript rollover setup to using CSS sprites.

I have setup the following sprite:

[IMG]eagleonedims.com/images/navmap.jpg[/IMG]

I cannot figure out how to have the <li> sections replace the entire ba6nner with a shifted-down sprite upon rollover. The shifted sprite just appears within the boundaries of the respective<li> section. The reason for needing this is to include the cloud effect which overlap the other li sections. Basically, upon rollover I need the ENTIRE navmap.jpg image to be shifted by 88px down. The image is 1000px wide and each sprite is 88px tall.

Thanks for any help!

CSS:
Code:

#navmap {
	width: 1000px;
	height: 88px;
	background: url("images/navmap.jpg");
	margin: 0;
	padding: 0;
	position: relative;
}

#navmap li {
	margin: 0;
	padding: 0;
	list-style: none;
	position: absolute;
	top: 0;
}

#navmap li, #navmap a {
	height: 88px;
	display: block;
}

#home {left: 141px; width: 110px;}
#about {left: 251px; width: 120px;}
#pricing {left: 371px; width: 120px;}
#quote {left: 491px; width: 120px;}
#contact {left: 611px; width: 120px;}
#login {left: 731px; width: 128px;}

#home a:hover {background: url("images/navmap.jpg") 0px -88px no-repeat;}
#about a:hover {background: url("images/navmap.jpg") 0 -176px no-repeat;}

HTML:
Code:

<ul id="navmap">
  <li id="home"><a href="index.php">Home</a></li>
  <li id="about"><a href="about.php">About</a></li>
  <li id="pricing"><a href="pricing.php">Pricing</a></li>
  <li id="quote"><a href="quote.php">Quote</a></li>
  <li id="contact"><a href="contact.php">Contact</a></li>
  <li id="login"><a href="login.php">Login</a></li>
</ul>    

ok, so it's not exactly image swapping, but i'm trying to get this thing to work in Firefox (works in IE). My xhtml is as follows: Code:

<div class="foot">
	<img src="images/menubase.jpg" alt="see | hear | speak" />
		<a href="#" id="menu_see"> </a>
		<a href="#" id="menu_speak"> </a>
		<a href="#" id="menu_hear"> </a>

And the CSS: Code:

a#menu_see {
	position: absolute;
	left: 50%;
	top: 0px;
	width: 66px;
	height: 44px;
	margin-left: -105px;
	background: url(../images/holderMenuSee.gif) no-repeat fixed right top;
}
a#menu_see:hover {
	background: url(../images/menuSee.jpg) no-repeat fixed right top;
}
a#menu_speak {
	position: absolute;
	left: 50%;
	top: 0px;
	width: 74px;
	height: 44px;
	margin-left: -37px;
	background: url(../images/holderMenuSpeak.gif) no-repeat fixed right top;
}
a#menu_speak:hover {
	background: url(../images/menuSpeak.jpg) no-repeat fixed right top;
}
a#menu_hear {
	position: absolute;
	left: 50%;
	top:0px;
	width:61px;
	height: 44px;
	margin-left: 40px;
	background: url(../images/holderMenuHear.gif) no-repeat fixed right top;
}
a#menu_hear:hover {
	background: url(../images/menuHear.jpg) no-repeat fixed right top;
}

the page is located [ here ]

Hello. I have a site I would in the past have used an I-frame for content so it could be added and automatically place a scrollbar if needed. I also used them when a client needed me to set up user editable content [php would be set to populate the html page showing in the frame]

I'm sure there's a better way to do this now, but I haven't figured it out being so new to css.

one application I'd like to use this in is this site: http://greentypeoftube.com/div/home1.html

in the 'content' area.

last I checked there's no cross platform/browser way to control the color and style of scrollbars. it's been a few months since I checked though.

if anyone has info on that as well, I'd love to hear about it.

thankyou, you will be my hero although I am unable to sing like the girl who sang the hero song in the movie.

s

I found some neat css code to display an image file to the user, but text to the search engines (which count more for internal linking when it comes to seo).



The sample code I found uses an h3 tag and is as follows:
Code:

<h3 id="header">
	<span>Revised Image Replacement</span>
</h3>

/* css */
#header {
	width: 329px;
	height: 25px;
	background-image: url(sample-opaque.gif);
	}
#header span {
	display: none;
	}

(full explanation found at: http://www.mezzoblue.com/tests/revised-image-replacement/)





I tried to do so on my site using anchor text, but can't get it to work. Nothing shows up at all
Code:

<a href="Apply_Now_Surety_Bond.htm" id="blank_button"><span>Apply</span></a>



/* css */

#blank_button a{
	width: 93px;
	height: 52px;
	background-image: url(apply.jpg);
	}
#blank_button span {
	display: none;
	}

You can see that the "Apply" button does not appear at: www*bryantsuretybonds*com/new (it should be the first one on the left)

www rxconsulting com/company . html

you can see the code i used to make the links for the footer. they look perfect in DW but when i load the page the are low and to the left. i need to have the links on every page. i can remake the footer image if need be but i couldnt get the text to align right when i inserted it. please help me out. thank you

I was showing my website to friends the other day when I realized the links weren't working. It seems to be fine in earlier versions of IE as well as the Firefox versions i've tested and Safari renders the code correctly as well.

I'm baffled and unfamiliar with IE7. Could someone take a look and help me out?

ryanbuckley dot ca

Hello,

I followed this tutorial
http://csshowto.com/effects/css-image-maps-with-pop-up-tool-tips/
to create an image map with pop-up info boxes
http://sfoex.com/image-map/
but when I try to insert it on the front page
http://sfoex.com/
it doesn't work.


I'm hoping someone could give me some direction!

Thanks
T

Here are the HTML and CSS codes:

HTML:

Code:

<ul id="map">
<li>
<a class="sacramento" href="mailto:smf@sfoex.com">
<span><h1>Sacramento Office</h1><br>
1700 Enterprise blvd STE C<br>
Sacramento, California, 95691<br><br>
<b>Phone:</b> (916) 860 27277<br>
<b>Fax:</b> (916) 404 4825<br>
</span>
</a>
</li>
<li>
<a class="south-san-francisco" href=mailto:info@sfoex.com">
<span><h1>South San Francisco Office (Main)</h1><br>
212 Shaw Rd. Unit #4<br>
South San Francisco, California, 94080<br><br>
<b>Phone:</b> (650) 866 4703<br>
<b>Fax:</b> (650) 866 4723
</span>
</a>
</li>
<li>
<a class="chicago" href="contact.html">
<span><h1>Chicago Office</h1><br>
2315 S Goebbert road, # 209,<br>
Arlington Heights, IL 60005<br><br>
<b>Phone:</b> (773) 747 5987<br>
<b>Fax:</b> (773) 360 9103</span>
</a>
</li>
</ul>

CSS:

Code:

body {
margin:0;
padding:0;
}
#map {
margin:0;
padding:0;
width:279px;
height:173px;
background:url(images/map.png) top left no-repeat #FFF;
}
#map span {
font-size:12px;
font-family:helvetica,arial,"san-serif";
}
#map h1 {
font-size:16px;
margin:0;
}
#map li a {
position:absolute;
display:block;
background:url(blank.gif);
text-decoration: none;
}
#map li a span {
display:none;
}
#map li a:hover span {
position:relative;
display:block;
width:200px;
left:20px;
top:20px;
padding:5px;
border:1px solid #000;
background:#FFF;
text-decoration:none;
color:#000;
filter:alpha(opacity=80);
opacity:0.8;
}
#map a.sacramento {
top:64px;
left:10px;
width:12px;
height:12px;
}
#map a.south-san-francisco {
top:70px;
left:3px;
width:12px;
height:12px;
}
#map a.chicago {
top:58px;
left:174px;
width:12px;
height:12px;
}

I have used several image classes in my css to control the thickness of the border like so ..
img.left { border: #FF66CC solid 0.02em;
border-left: #FF66CC solid 0em;
border-top: #FF66CC solid 0em;
}
img.right { border: #FF66CC solid 0.01em;
border-right: #FF66CC solid 0em;
border-bottom: #FF66CC solid 0em;
}

But for some reason this doesn't sho up in Safari or IE5.2 (on the mac) and also I checked it on Opera 5, and it doesnt show the borders on the image?

any ideas?

thanks for your time.

Hi, I have the following code: Code:

<div id="nav">

                           <ul class="nav">
                                	<li>
                                        <a href="/webdesign/">web design</a>
                                	</li>
                                    <li>
                                        &nbsp;|&nbsp;
                                    <li>
                                        
                                    <li>
                                        <a href="/web programming/">web programming</a>
                                   </li>
</ul>
</div>

My CSS looks like this :: Code:

#nav {
z-index:999;
position:absolute;
	margin-left:246px;
	margin-top:105px;
	background-image:url('images/common/navbar.png');
	width: 777px;
	text-transform: none;
	text-decoration: none;
	border-bottom-style: none;
}


.nav{
	background-image:url('images/common/navbar.gif');
}

The background image isn't showing up in the div or the <ul> . I've been staring at this for a while and can't figure it out. Does anyone see what I'm doing wrong? I know my path to the images is correct.

thanks
-Sean

Hi everyone,

I just worked for two days to make my menu work on IE6. Now it works perfectly on IE6, but ironically it doesn't work on IE7 anymore.

Basically, I have a two line menu bar. Each line consists of 9 squares, some are images that are links and some are just decoration images. Each line ("menu1" and "menu2") is an unordered list, with a background image of one of the menus.

When one of the link squares is hovered, I want just this square to show a different place on the bottom of the background image.

So what doesn't work?
Only IE7 doesn't recognizes the link squares as links. No hover, No link. I can't navigate anywhere in IE7...

Please help me...!!

I've attached the relevant code, added comments and colored the parts that I think might cause the problem.

html:

Code:

	<div id="globalnav">
    
		<ul id="menu1">
        	<li id="nav_home"><a href="../home/" title="Home">home</a></li>
        	<li id="nav_about"><a href="../about/main.htm" title="About us">about us</a></li>
      		<li id="nav_recruit"><a href="../recruit/" title="Recruit">recruit</a></li>
		</ul>

	  	<ul id="menu2">
       	  <li id="nav_company" name="nav_company"><a href="../company/outline.htm" title="Company">company</a></li>
       	  <li id="nav_clients" name="nav_clients"><a href="../clients/clients.htm" title="Clients">clients</a></li>
   		  <li id="nav_contacts" name="nav_contacts"><a href="../contacts/" title="Contacts">recruit</a></li>
	  	</ul>
        
    </div>

css:

Code:

@charset "utf-8";

/* English Menu bar */

/* Box for the entire menu (two rows of ul) */

#globalnav	{
	height: 130px;
	width: 675px;
	}

/* Create box and put background image for each menu line */

#globalnav ul#menu1	{
	height: 62px;
	width: 675px;
	background: transparent url(../images/menu1.jpg) top left no-repeat;
	padding: 0;
	position: relative;
	margin: 0 0 5px 0;
	}

#globalnav ul#menu2	{
	height: 62px;
	width: 675px;
	background: transparent url(../images/menu2.jpg) top left no-repeat;
	margin: 0;
	padding: 0;
	position: relative;
	}
/* Boxes for each link square on the menu */

#globalnav li {
	margin: 0;
	padding: 0;
	list-style: none;
	position: absolute;
	top: 0;
	width: 75;
	}
	
#globalnav li, #globalnav a {
	height: 62;
	display: block;
	}
	
 #globalnav a {
	line-height: 62px;
	text-decoration: none;
	text-indent: -9999px;
	display: block;
} 

/* Define the area on the background image of the ul which coressponds to each link box */

#nav_home		{left: 0; width: 75px;}
#nav_about		{left: 225px; width: 75px;}
#nav_recruit 	{left: 525px; width: 75px;}
#nav_company	{left: 150px; width: 75px;}
#nav_clients	{left: 375px; width: 75px;}
#nav_contacts	{left: 600px; width: 75px;}

/* Maybe the next part is unnecessary... */

#nav_home		{background: transparent url(../images/menu1.jpg) 0 0 no-repeat;}
#nav_about		{background: transparent url(../images/menu1.jpg) -225px 0 no-repeat;}
#nav_recruit	{background: transparent url(../images/menu1.jpg) -525px 0 no-repeat;}
#nav_company	{background: transparent url(../images/menu2.jpg) -150px 0 no-repeat;}
#nav_clients	{background: transparent url(../images/menu2.jpg) -375px 0 no-repeat;}
#nav_contacts	{background: transparent url(../images/menu2.jpg) -600px 0 no-repeat;}

 /* Hovered menu items  */
/* the background image in the link box should change to a diffetent part on the big image, which isn't normally shown - doesn't work in IE7 */ 

#nav_home a:hover {background: transparent url(../images/menu1.jpg) 0 -62px no-repeat;}
#nav_about a:hover {background: transparent url(../images/menu1.jpg) -225px -62px no-repeat;}
#nav_recruit a:hover {background: transparent url(../images/menu1.jpg) -525px -62px no-repeat;}
#nav_company a:hover {background: transparent url(../images/menu2.jpg) -150px -62px no-repeat;}
#nav_clients a:hover {background: transparent url(../images/menu2.jpg) -375px -62px no-repeat;}
#nav_contacts a:hover {background: transparent url(../images/menu2.jpg) -600px -62px no-repeat;} 

/* Active menu items */
/* This part just makes the page we are currently in appear as hovered - works fine in all browsers */

body#home #nav_home			{background: transparent url(../images/menu1.jpg) 0 -62px no-repeat;}
body#about #nav_about		{background: transparent url(../images/menu1.jpg) -225px -62px no-repeat;}
body#recruit #nav_recruit	{background: transparent url(../images/menu1.jpg) -525px -62px no-repeat;}
body#company #nav_company	{background: transparent url(../images/menu2.jpg) -150px -62px no-repeat;}
body#clients #nav_clients	{background: transparent url(../images/menu2.jpg) -375px -62px no-repeat;}
body#contacts #nav_contacts	{background: transparent url(../images/menu2.jpg) -600px -62px no-repeat;}

By the way - before changing it, I had all the squares in a table. Worked on IE7, but not IE6.

Oh and I'm using transitional DTD. is that ok?

This is driving me nuts!

I have done everything I think that they says I should do but it is not working...here is the table style I am using if I use normal border styles it works ok...please can someone tell me where I am going wrong...thank you!

.nik {
background-color: #FFEAA1;
padding-left: 1em;
padding-right: 1em;
border-image: url(border.png) 0% 30% 0% 30% repeat;
}

oh and the image size is 100px x 100px

Kriss

Disregard pot

I simply transposed li and a tag

thanks anyway...

Am trying to solve an annoying IE problem:

I have a menu which I has a background image which should appear when rolled over. Unfortunatly this works on Firefox but not IE. In internet explorer, nothing changes when the menu item is rolled over ( hovered ) .. any ideas?

The code is:

Code:

#item, #item2, #item3, #item4 {
height:24px;
width:147px;
border:1px solid #dddddd;
padding-top:14px;
padding-left:15px;
}
#item:hover, #item2:hover, #item3:hover, #item4:hover { color:white; }
#item:hover { background-image:url(homeRollover.png); }
#item2:hover { background-image:url(aboutusRollover.png); }
#item3:hover { background-image:url(servicesRoll.png); }
#item4:hover { background-image:url(contactusRoll.png); }

I'm trying to set the background image of my header and for some reason its not being applied at all.

CSS:
Code:

#header
{
    background: url('../Images/Master/Header_Background.jpg');
    color: White;
    width: 1000px;
    height: 150px;
    position: relative;
}

The image is the same height and width of the header. I know the image is there because I can use the same url in an <img> tag and it shows up fine. The header is inside a container which I'm not setting any background attributes at all. I'm not setting any for the body either. I don't know why the image isn't showing.

Thanks.

Okay, I have this weird problem.

If I put my background style inline, it works. If I put it in the stylesheet as the first rules in my file, it doesn't work.

Here are the rules.

Code:

/* the below line is the first line in the file, this comment is not present in the file */
body{
background-image:url('image/metal.png');
background-repeat: repeat;
margin:0;
padding:0;
}

Again, inline as
Code:

<body style="background-image:url('image/metal.png');">

it works, but in the stylesheet file, it doens't. The rest of the rules in the stylesheet work, just this one does not...