5 replies [Last post]
ethan
Offline
newbie
Last seen: 17 years 7 weeks ago
Timezone: GMT-5
Joined: 2004-12-08
Posts: 6
Points: 0

Hi,

I'm having some trouble getting IE to show the shopping cart buttons on pages like best-transfer.com/transferPaper.php and best-transfer.com/heatPress_hix.php. Mozilla and Opera do pretty well, but IE doesn't recognize the boundaries properly. Any ideas?

The link declarations are basically like this:

<a href="shoppingCart?idnum=4"><img src="images/shoppingCart.gif" class="cartImg">Add to Cart</a>

And the relevant CSS code looks like this:

.addTo {
	background:#03339a;
	color:#FC0;
	font-weight:bold;
	padding:.2em .4em;

	text-decoration:none;
	border:double #ffffff;
	margin: 0 .45em;
	}
.addTo:hover
	{color:#eee;}
.cartImg {
	vertical-align:middle;

Thanks,
Ethan

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 4 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Button formatting: IE doesn't notice runover in box boundary

Hi Ethan,
I think you made a typo, in the post above you left out the class in the link.

Try setting the link to display:block that should fix the IE problem.

Hope that helps

ethan
Offline
newbie
Last seen: 17 years 7 weeks ago
Timezone: GMT-5
Joined: 2004-12-08
Posts: 6
Points: 0

Button formatting: IE doesn't notice runover in box boundary

Thanks for the suggestion, Tony. That's right, the link description on the page does include a class="addTo" declaration.

I added the display:block line to the addTo class description, and it did fix the problem with IE not recognizing the boundaries. Unfortunately, now my link stretches out all the way to the borders of the td element it's in. Is there a way to get it to show up in IE the same way it does in Firefox, with the shopping cart image hanging outside the box?

Thanks,
Ethan

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 4 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Button formatting: IE doesn't notice runover in box boundary

Hi Ethan,
What I would do is set the width and height of the link.
Ie may then expand the box to fit the content so you would have to play with negative margins to get the correct look.

ethan
Offline
newbie
Last seen: 17 years 7 weeks ago
Timezone: GMT-5
Joined: 2004-12-08
Posts: 6
Points: 0

Button formatting: IE doesn't notice runover in box boundary

Thanks again for the reply. I ended moving the cart image from inside the link to just before it, and using negative margins to get it back inside:

.addTo {
background:#03339a;
color:#FFF;
font-weight:bold;
padding:.25em .50em .25em 30px;
text-decoration:none;
border:double #ffffff;
font-size:9pt;
margin:.5em .25em;
}
.cartImg {
vertical-align:middle;
position:relative;
margin:0px -30px 0px 0px;
left:8px;
}

I put the updates in at best-transfer.com/heatTransferVinyl.php if you want to see it in both browsers, and will be repositioning the images on the other pages soon. Thanks for the help!

Ethan

ethan
Offline
newbie
Last seen: 17 years 7 weeks ago
Timezone: GMT-5
Joined: 2004-12-08
Posts: 6
Points: 0

Button formatting: IE doesn't notice runover in box boundary

Oops! To make it work properly in Opera I had to add z-index:1 to the cartImg class.