Hey there,
Compare Rollover buttons at top between firefox & ie7:
Link: http://www.lakeozarkboatrealty.com/main/
Heres the deal. The rollover works fine in ie7 but when I put it in a table it doesn't work right, no problems in firefox. whats my next move?
Thanks, Tim
Oops you might need
Oops you might need this:
CSS:
.rollover a { padding:12px 10px 12px 10px; font: bold 13px sans-serif;; color:#fff; background: url("http://www.lakeozarkboatrealty.com/images/button.gif") 0 0 no-repeat; text-decoration: none; } .rollover a:hover { background-position: 0 -44px; color: #fff; } .rollover a:active { background-position: 0 -44px; color: #fff; }
HTML:
<td width="71%" height="44"><span class="rollover"><a href="index.php">Homepage</a><a href="index.php?a=28&b=137">How it Works</a><a href="index.php">Browse</a><a href="index.php?a=19">Search</a><a href="index.php?a=1">Sell</a><a href="index.php?a=4">My Account</a><a href="index.php?a=28&b=143">Pricing</a><a href="index.php?a=28&b=136">Contact Us</a></span> </td>
Try this for your
Try this for your css:
.rollover td a { padding:12px 10px 12px 10px; font: bold 13px sans-serif;; color:#fff; background: url("http://www.lakeozarkboatrealty.com/images/button.gif") 0 0 no-repeat; text-decoration: none; } .rollover td a:hover { background-position: 0 -44px; color: #fff; } .rollover td a:active { background-position: 0 -44px; color: #fff; }
and this for the HTML:
<div class="rollover"> <td width="71%" height="44"><a href="index.php">Homepage</a><a href="index.php?a=28&b=137">How it Works</a><a href="index.php">Browse</a><a href="index.php?a=19">Search</a><a href="index.php?a=1">Sell</a><a href="index.php?a=4">My Account</a><a href="index.php?a=28&b=143">Pricing</a><a href="index.php?a=28&b=136">Contact Us</a></span> </td> </div>
I haven't tried it, it was immediately apparent that this might be what was wrong. If it doesn't work let me know and I'll download your background image and play around till I get it.
tried it. no luck. any ideas?
tried it. no luck. any ideas?
This should do it. you may
This should do it. you may have to clear the float.
.rollover a {
padding:12px 10px 12px 10px;
font: bold 13px sans-serif;;
color:#fff;
background: url("http://www.lakeozarkboatrealty.com/images/button.gif") 0 0 no-repeat;
text-decoration: none;
display: block;
float:left;
}
.rollover a:hover {
background-position: 0 -44px;
color: #fff;
}
.rollover a:active {
background-position: 0 -44px;
color: #fff;
}
It worked! but its
It worked! but its unaligned. and when I turn off float it stacks the buttons vertically.
View the changes: http://www.lakeozarkboatrealty.com/main/
Any ideas?
<!DOCTYPE html PUBLIC
Untitled Document
.rollover a {
padding:12px 10px 12px 10px;
font: bold 13px sans-serif;;
color:#fff;
background: url("http://www.lakeozarkboatrealty.com/images/button.gif") 0 0 no-repeat;
text-decoration: none;
}
.rollover a:hover {
background-position: 0 -44px;
color: #fff;
}
.rollover a:active {
background-position: 0 -44px;
color: #fff;
}
HomepageHow it WorksBrowseSearchSellMy AccountPricingContact Us
I couldn't get it to work
I couldn't get it to work right in ie7. looks good in firefox though. lol.
Sorry somehow I pasted the
Sorry somehow I pasted the different version.
Untitled Document
*{
padding:0;
margin:0;
}
.rollover a {
padding:12px 10px 12px 10px;
font: bold 13px sans-serif;;
color:#fff;
background: url("http://www.lakeozarkboatrealty.com/images/button.gif") 0 0 no-repeat;
text-decoration: none;
display:block;
float:left;
}
.rollover a:hover {
background-position: 0 -44px;
color: #fff;
}
.rollover a:active {
background-position: 0 -44px;
color: #fff;
}
HomepageHow it WorksBrowseSearchSellMy AccountPricingContact Us
It worked until I put it
It worked until I put it into the template.
Code:
Untitled Document
*{
padding:0;
margin:0;
}
.rollover a {
padding:12px 10px 12px 10px;
font: bold 13px sans-serif;;
color:#fff;
background: url("http://www.lakeozarkboatrealty.com/images/button.gif") 0 0 no-repeat;
text-decoration: none;
display:block;
float:left;
}
.rollover a:hover {
background-position: 0 -44px;
color: #fff;
}
.rollover a:active {
background-position: 0 -44px;
color: #fff;
}
";
images[1] = "";
index = Math.floor(Math.random() * images.length);
document.write(images
);
//done
// -->
HomepageHow it WorksBrowseSearchSellMy AccountPricingContact Us
You must love the table very
You must love the table very much.
I am not sure how can I set the height for the td
this is the first time I
this is the first time I have used tables in a layout in a long time. oh well. I suppose I will just try something else. thanks for being so helpful, skoizumi.