CSS - Unique Css Mouse-over Effect

The web page that I am having a problem editing is:
www dot postalstampssale dot com

We are having a problem getting the mouse over effect on the three (3) jpg images in the upper right hand corner.

We have added the appropriate CSS mouse over coding just under the <TITLE> are on the top. We have a;sp added the CSS coding at the end of the page.

However, we can not figure out how to attach the proper coding to each image. The current coding is:
<img src="Images/Canada/Canada_Scott_356_Front.jpg" width="90" height="60" alt="" border="0" align="right">
<img src="Images/Germany/Germany_Scott_65.jpg" width="89" height="62" alt="" border="0" align="right">
<img src="Images/Bermuda/Bermuda_Scott_55.jpg" width="54" height="64" alt="" border="0" align="right">

Can someone please suggest how to modify the above coding.

Thank you in advance.

i wanted to get the hover to cover the entire box around the a-link ,but it dosent work .

if anyone can see my errors, please help!

PHP Code:
<div align="center" id="topNav">
<span class="link" onmouseover="this.className='link2';" onmouseout="this.className='link';"><a href="http://www.idologic.com/company/index.php">Company</a></span>
<span class="link" onmouseover="this.className='link2';" onmouseout="this.className='link';"><a href="http://www.idologic.com/services/index.php">Services</a></span>
<span class="link" onmouseover="this.className='link2';" onmouseout="this.className='link';"><a href="http://www.idologic.com/resellers/index.php">Resellers</a></span>
<span class="link" onmouseover="this.className='link2';" onmouseout="this.className='link';"><a href="http://www.idologic.com/dedicated_servers/index.php">Servers</a></span>
<span class="link" onmouseover="this.className='link2';" onmouseout="this.className='link';"><a href="http://www.idologic.com/network/index.php">Network</a></span>
<span class="link" onmouseover="this.className='link2';" onmouseout="this.className='link';"><a href="http://www.idologic.com/support/index.php">Support</a></span>
<span class="link" onmouseover="this.className='link2';" onmouseout="this.className='link';"><a href="http://www.idologic.com/billing/index.php">Billing</a></span>
</div> 





and the css

PHP Code:
#topNav {
    width: 750;
    height: 22px;
    margin-bottom: 1px;
}
/* Navigation */

.link     {
    text-align: center;
    background-color: #444444;
    color: #FFFFFF;
    font-family: Verdana, Arial, sans-serif;
    font-size: 10px;
    list-style: none;
    width: 25.4px;
    height: 12px;
    margin-bottom: 0px;
    padding-left: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 15.4px;
    text-transform: uppercase;
}

 .link2    {
    text-align: center;
    background-color: #CC0033;
    color: #FFFFFF;
    font-family: Verdana, Arial, sans-serif;
    font-size: 10px;
    list-style: none;
    width: 25.4px;
    height: 12px;
    margin-bottom: 0px;
    padding-left: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 15.4px;
    text-transform: uppercase;
}

.link a {
    text-align: center;
    background-color: #444444;
    color: #FFFFFF;
    font-family: Verdana, Arial, sans-serif;
    font-size: 10px;
    width: 24px;
    height: 12px;
    margin-bottom: 0px;
    padding-left: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 15.4px;
    text-transform: uppercase;
}
 a.link:hover{
    text-decoration: underline;
    color: #FFFFFF;
    background-color: #CC0033;
    width: 25.4px;
    height: 12px;
    margin-bottom: 0px;
    padding-left: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 15.4px;
    text-transform: uppercase;

}
/* Navigation */ 





i'm trying to make a site with only css, other than this little problem its working.

Hey DevShed,

I'm having issues with the CSS, and floats. I basically float everything to the left, and I'm having issues on the very far right with a space I cant fill basically, and on the left side I'm missing the 1px border from my wrapper div.

The "user" div is supposed to be a few pixels wider, I chopped off some pixels because when I made it longer it dropped down to below the "adheader" div.

Here's my current code;

index.php
PHP Code:
<body>
        <div id="wrapper">
            <div id="topnav"></div>
            <div id="banner">
                <img src="images/banner.jpg" />
            </div>
            <div id="header"></div>
 
            <div id="left_content">
                <div id="newsheader">Latest news</div>
                <div id="box_1">
                    <img src="images/news.jpg" />
                </div>
                <div id="box_2">
                    This is content blah blah blah
                </div>
                <div id="bottom_left">
                </div>
                <div id="bottom_right">
                </div>
            </div><!--end of left_content-->
            <div id="right_content">
                <div id="adheader"></div>
                <div id="user"></div>
                <div id="main_content"></div>
            </div><!--end of bottom_right-->
        </div><!--end of container-->
    </body> 





global.css
PHP Code:
#wrapper {
    margin: 0px auto;
    padding: 0px;
    width: 977px;
    border-left: 1px solid #B1B1B1;
    border-right: 1px solid #B1B1B1;
}
 
#topnav {
    background: #F0F0F0;
    background-image: url('images/top_back.gif');
    background-repeat: repeat-x;
    margin: 0px;
    padding: 0px;
    width: 977px;
    height: 18px;
}
 
#banner {
    background: #282828;
    background-image: #url('images/banner.jpg');
    border-bottom: 5px solid #D2D2D2;
    margin: 0px;
    padding: 0px;
    width: 977px;
    height: 72px;
}
 
#left_content {
    background: #6D6D6D;
    background-image: url('images/div_back.gif');
    background-repeat: repeat-x;
    border-right: 1px solid #FFF;
    padding: 0px 0px 0px 0px;
    width: 476px;
    height: 100%;
    float: left;
}
 
#newsheader {
    background: #6D6D6D;
    background-image: url('images/div_back.gif');
    background-repeat: repeat-x;
    margin: 0px 0px 0px 0px;
    padding: 0px;   
    width: 476px;
    height: 29px;
}
 
#right_content {
    background: #282828;
    padding: 0px;
    margin: 0px;
    width: 495px;
    height: 100%;
    float: left;
}
 
#box_1 {
    background: #6D6D6D;
    padding: 0px;
    margin: 0px;
    width: 476px;
    height: 249px;
}
 
#box_2 {
    background: #DADADA;
    padding: 0px;
    margin: 0px;
    width: 476px;
    height: 96px;
}
 
#bottom_left {
    background: #DADADA;
    background-image: url('images/div_back.gif');
    background-repeat: repeat-x;
    border-right: 1px solid #FFF;
    padding: 0px;
    margin: 0px 1px 0px 0px;
    width: 236px;
    height: 29px;
    float: left;
}
 
#bottom_right {
    background: #DADADA;
    background-image: url('images/div_back.gif');
    background-repeat: repeat-x;
    border-left: 1px solid #FFF;
    padding: 0px;
    margin: 0px;
    width: 237px;
    height: 29px;
    float: left;
}
 
#lnewscontent {
    background: #DADADA;
    border-right: 1px solid #FFF;
    padding: 0px;
    margin: 0px;
    width: 476px;
    height: 96px;
}
 
#adheader {
    background: #6D6D6D;
    background-image: url('images/div_back.gif');
    background-repeat: repeat-x;
    border-right: 1px solid #FFF;
    border-left: 1px solid #FFF;
    margin: 0px 0px 0px 1px;
    padding: 0px;   
    width: 209px;
    height: 29px;
    float: left;
}
 
#user {
    background: #6D6D6D;
    background-image: url('images/div_back.gif');
    background-repeat: repeat-x;
    border-left: 1px solid #FFF;
    margin: 0px 0px 0px 1px;
    padding: 0px;   
    width: 281px;
    height: 29px;
    float: left;
} 





Here's a basic idea of what I'm going for:
img683.imageshack.us/img683/6540/layoutsamp.gif

PLEASE help me, I've been going at this for hours. I'm out of ideas!

Hey all,

What are your techniques for making unique horizontal rules?

At the moment I am using this code to separate content:

Code:

/* CSS */
.line {
	height: 5px;
	background-image: url(../img/bg_3x7.gif);
	background-repeat: repeat-x;
	background-position: left top;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 5px;
	margin-left: auto;
	padding: 0px;
 }

Html:

Code:

<div class="line"></div>

The above code works great for all non IE-PC browsers... when I view on PC with IE, there appears to be 5px of padding added to top and bottom... is very annoying... IE is a POS, I hate IE...

Anyway, does anyone have any suggestions for a more universal way to get a unique <hr /> on a page? I would prefer something that will be an exact height in any browser/platform.

Cool cool cool,
Thanks!
Cheers
Micky

I'm perplexed. I have a div,
Code:

<div class="classname">

containing a table in muliple pages. I tried applying css style to the div using .classname{ css }, backgroundcolor took affect but color and font-size didn't, its works on others pages though. So I tried Code:

<table style="color: red; font-size: 12px;">

This worked! I can't understand why the css would not affect the div itself. Talk about annoying. If anyone has any possible explanations, I'd like to hear. css are assigned to individual div's. body has backgroundcolor only.