CSS - Image Class Not Working ..

Hello,

I have created a design in photoshop which has been sliced into a number of smaller images.

I am then trying to reapply the design as a series of background <td></td> elements, using an external css. The style is:

Code:

td.tablebackground 
{ 
background-image:url('/media/headerarea/topnav_search.jpg');
background-repeat:no-repeat; 
width:40; 
height:10 
}

This works fine in IE6 but doesn't show in Firefox.

Can anybody please suggest a way around this?

I have also tried defining a class to attach to an <img> tag but this always places a border around the image even if border=0. The external css for this is:

Code:

img.tablebackground
{ 
background-image:url('/media/headerarea_red/topnav_search_red.jpg');
background-repeat:no-repeat; 
width:40; 
height:10 ;
border-style:none; // also tried border:0;
}

Many Thanks, J

I'm not sure if we are allowed to post urls here or not, didn't see anything against it but I'm sure someone will inform me if we can or can't.

Anyways I'm having problems getting the "current" class to work for the active page. I want the current page to use the rollover id.

This is a code snippet that should be enough to figure out how I am doing my navigation. I am using a single image and shifting it depending on the state it's in.


CSS Code:
Original - CSS Code .nav1 {float:left; position:relative;display:block;} .nav1 li {margin:0px; padding:0px; display:inline;} .nav1 li a {height:30px; float:left; list-style:none;} a span { position: absolute; left: -999em; }/*This hides span text for when CSS is supported*/ #home a{ float:left; background-image: url(images/nav_main_1.png); display: block; height: 30px; width: 132px; text-decoration: none; background-position: 0px -31px; } } #home a:hover, a.current{ background-image: url(images/nav_main_1.png); background-position: 0px 0px; } #news a{ float:left; background-image: url(images/nav_main_2.png); display: block; height: 30px; width: 131px; text-decoration: none; background-position: 0px -31px; } #news a:hover, a.current { background-image: url(images/nav_main_2.png); background-position: 0px 0px; }

  

 .nav1 {float:left; position:relative;display:block;}


 .nav1 li {margin:0px; padding:0px; display:inline;}


 .nav1 li a {height:30px; float:left; list-style:none;}


 a span { position: absolute; left: -999em; }/*This hides span text for when CSS is supported*/


  


 #home a{


     float:left;


     background-image: url(images/nav_main_1.png);


     display: block;


     height: 30px;


     width: 132px;


     text-decoration: none;


     background-position: 0px -31px;


 }


  


 }


 #home a:hover, a.current{


     background-image: url(images/nav_main_1.png);


     background-position: 0px 0px;


 }


 #news a{


     float:left;


     background-image: url(images/nav_main_2.png);


     display: block;


     height: 30px;


     width: 131px;


     text-decoration: none;


     background-position: 0px -31px;


 }


 #news a:hover, a.current {  


     background-image: url(images/nav_main_2.png);


     background-position: 0px 0px;


 } 

html4strict Code:
Original - html4strict Code <ul class="nav1"> <li id="home" class="current"><a href="#"><span>Home</span></a></li> <li id="news"><a href="#"><span>News</span></a></li> </ul>

  

 <ul class="nav1">


         <li id="home" class="current"><a href="#"><span>Home</span></a></li>


         <li id="news"><a href="#"><span>News</span></a></li>                    


 </ul> 

Any help is greatly appreciated, I would imagine I am missing something simple.

i am trying to get the bottom part of a table border to have a thin line below it, but this code does not work can someone please tweak it so it does.


Code:

<style type="text/css">
	.horizontalline {
	border-height: 2px;
	border-color: #FFFFFF;
	border-bottom-style: solid;
	width: 100%;
	}
</style>

<table>
<tr valign="bottom">
<td colspan="4" class="horizontalline"><div align="right">Text under image: 
<input name="top_left_text" type="text" size="60" value="abcdefg">
</div></td>
</tr>
</table>

hey,

I got a table, every <td> in the table got the css class .regular.
(<td class='regular'>).
When the user moves their mouse over a row, that row should change color. This works with the following code:
<tr onmouseover='this.className=\"hoverRow\"'>
However, this only works if the td's in that row have no class set yet. And since all td's in my table have a class set allready, i cant use this.

How can i overwrite the class of the td's by the class for the whole row?

thanks in advance

Using the following example:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">

a
{
	display: block;
}

a.one.on, a:hover.one, a:hover.one.on
{
	color: red;
}

a.two.on, a:hover.two, a:hover.two.on
{
	color: orange;
}

a.three.on, a:hover.three, a:hover.three.on
{
	color: green;
}


</style>
</head>

<body>

<a href="#" class="one">one</a>
<a href="#" class="two">two</a>
<a href="#" class="three">three</a>

<p>&nbsp;</p>

<a href="#" class="one on">one</a>
<a href="#" class="two on">two</a>
<a href="#" class="three on">three</a>


</body>
</html>

Notice how, in IE6 (works fine in FF), when the secondary style named 'on' is added, all 3 links in the 2nd set display the properties of the style:

Code:

a.three.on, a:hover.three, a:hover.three.on
{
	color: green;
}

(since it is last in the list) rather than the style specified by their respective numbers (i.e. 'one', 'two' or 'three'). Is there a way to overcome this in IE.

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

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

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;
}

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 all,

I'm really baffled as to why this code is not replacing the images on :hover in IE.

Could anyone give me a pointer or two? Thank you so much if so.

Stylesheet:

Code:

#header {
 margin-left: auto;
 margin-right: auto;
 position: relative;
 width: 950px;
 height: 100px;
 background-image: url("img/headerimg.png");
 background-repeat: no-repeat;
 text-align: left;
}

#header a:hover {
 border: none;
 opacity: 0.0;
 filter: alpha(opacity=0);
 z-index: -1;
}

Web Page:

Code:

<div id="header">
<a href="#"><img src="img/image1.png" /></a><a href="#"><img src="img/image2.png" /></a><a href="#"><img src="img/image3.png" /></a>
</div>

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...

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.

Disregard pot

I simply transposed li and a tag

thanks anyway...

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?

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); }