11 replies [Last post]
dax
Offline
newbie
Last seen: 10 years 42 weeks ago
Joined: 2009-01-22
Posts: 7
Points: 0

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

dax
Offline
newbie
Last seen: 10 years 42 weeks ago
Joined: 2009-01-22
Posts: 7
Points: 0

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>

ljbailey
ljbailey's picture
Offline
Enthusiast
Scotland
Last seen: 9 years 5 days ago
Scotland
Joined: 2009-01-10
Posts: 224
Points: 59

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.

Liam Bailey is director of Galloway Web Services, a Stranraer web design company, sister of SEO copywriting services company Write About Property.

dax
Offline
newbie
Last seen: 10 years 42 weeks ago
Joined: 2009-01-22
Posts: 7
Points: 0

tried it. no luck. any ideas?

tried it. no luck. any ideas?

skoizumi
skoizumi's picture
Offline
Enthusiast
Last seen: 9 years 22 weeks ago
Timezone: GMT-7
Joined: 2009-01-14
Posts: 74
Points: 3

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

Shinya Koizumi
--------------------
I work at kmishn.com
Web Development
Web Design

dax
Offline
newbie
Last seen: 10 years 42 weeks ago
Joined: 2009-01-22
Posts: 7
Points: 0

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?

skoizumi
skoizumi's picture
Offline
Enthusiast
Last seen: 9 years 22 weeks ago
Timezone: GMT-7
Joined: 2009-01-14
Posts: 74
Points: 3

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

Shinya Koizumi
--------------------
I work at kmishn.com
Web Development
Web Design

dax
Offline
newbie
Last seen: 10 years 42 weeks ago
Joined: 2009-01-22
Posts: 7
Points: 0

I couldn't get it to work

I couldn't get it to work right in ie7. looks good in firefox though. lol.

skoizumi
skoizumi's picture
Offline
Enthusiast
Last seen: 9 years 22 weeks ago
Timezone: GMT-7
Joined: 2009-01-14
Posts: 74
Points: 3

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

Shinya Koizumi
--------------------
I work at kmishn.com
Web Development
Web Design

dax
Offline
newbie
Last seen: 10 years 42 weeks ago
Joined: 2009-01-22
Posts: 7
Points: 0

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
 

 RegisterSign In

skoizumi
skoizumi's picture
Offline
Enthusiast
Last seen: 9 years 22 weeks ago
Timezone: GMT-7
Joined: 2009-01-14
Posts: 74
Points: 3

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

Shinya Koizumi
--------------------
I work at kmishn.com
Web Development
Web Design

dax
Offline
newbie
Last seen: 10 years 42 weeks ago
Joined: 2009-01-22
Posts: 7
Points: 0

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.