hover button problem in IE

chadi · #1 September 10th, 2007, 02:29 AM

I used this tutorial, http://www.filamentgroup.com/lab/buttonElement/

It works great in Firefox, but not in IE7 (not sure about 6).

See attached. The IE is the one that shows the buttons overlayed the right (sky blue colored) column, where in firefox it is aligned properly to the left.

In the link it says this

"CSS for IE 6 and 7 (conditionalize as needed):"

I have no idea what that means as I'm learning CSS now.

Please help.

The code used inside <td> is this

<button value="submit" class="submitBtn"><span>Order</span></button>

CSS code used...

Code:

/* ------------------------- */
/*     hover buttons       */
/* ------------------------- */

button { 
  border:0; 
  cursor:pointer; 
  font-weight:bold; 
  padding:0 20px 0 0; 
  text-align:center; 
}
button span { 
  position:relative; 
  display:block; 
  white-space:nowrap; 
  padding:0 0 0 20px; 
}

/*blue buttons*/
button.submitBtn { 
  background:url(../images/btn_blue_right.gif) right no-repeat; 
  font-size:1.3em; 
}
button.submitBtn span { 
  height:50px; 
  line-height:50px;
  background:url(../images/btn_blue_left.gif) left no-repeat;
  color:#fff; 
}
button.submitBtn:hover {
    background:url(../images/btn_blue_right_hover.gif) right no-repeat; 
}
button.submitBtn:hover span {
    background:url(../images/btn_blue_left_hover.gif) left no-repeat; 
}

**Buzz** · #2 September 10th, 2007, 03:25 AM

IE sometimes need the active state as well. I also added an overflow:hidden property to some of the selectors. These types of things are exceptionally difficult to troubleshoot by a simple post on a message board. A link would be much easier to test. Without a link I either have to build a page myself to test, or guess, which is what I'm doing here.

Quote:

button {
border:0;
cursor:pointer;
font-weight:bold;
padding:0 20px 0 0;
text-align:center;
}
button span {
position:relative;
display:block;
white-space:nowrap;
padding:0 0 0 20px;
}

/*blue buttons*/
button.submitBtn {
background:url(../images/btn_blue_right.gif) right no-repeat;
font-size:1.3em;
overflow:hidden;
}
button.submitBtn span {
height:50px;
line-height:50px;
background:url(../images/btn_blue_left.gif) left no-repeat;
color:#fff;
overflow:hidden;
}
button.submitBtn:hover,button.submitBtn:active {
background:url(../images/btn_blue_right_hover.gif) right no-repeat;
overflow:hidden;
}
button.submitBtn:hover span, button.submitBtn:active span {
background:url(../images/btn_blue_left_hover.gif) left no-repeat;
overflow: hidden;
}

chadi · #3 September 10th, 2007, 03:40 AM

Thanks. That didn't work well though unfortunately.

Not sure what other info you need. I gave you the full html code for the button and the css portion form the original coder

**Buzz** · #4 September 10th, 2007, 05:52 AM

Like I posted, without seeing a link to test, it's impossible to nail it down completely.

You did give the css and html.. but I'd still need to build a page, put it on a server and test in different browsers as opposed to just testing a link you provide in different browsers.

And since you mention a td tag.. I suspect your page is a mix of CSS and tables, obviously. There are some things that CSS does elegantly that just fall apart when you put them in a table and restrict them that way. I'm not saying that's your problem. But it's impossible to trouble shoot code when all I see are snippets. You could be missing something as simple as a proper DOCTYPE, you could have other CSS properties that are altering td tags and thus breaking the button. Based on your other problem, that's really what it sounds like, multiple CSS properties that alter things and you're mixing them without being aware of it.

chadi · #5 September 10th, 2007, 01:39 PM

Well, I can't post much here since this forum does not allow attachments for whatever reason.

This is part of the head area

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

Table area...

Code:

<table style="width: 100%">
          <tr>
            <td style="padding:4px; height: 30px;" class="style5"><strong>Pricing Details</strong></td>
            <td style="border-bottom:1px solid #C3D3F1; width: 80px; height: 30px;" class="style3"><strong>
            Starter</strong></td>
            <td style="border-bottom:1px solid #C3D3F1; width: 80px; height: 30px;" class="style3">
            <strong>
            Network</strong></td>
            <td style="border-bottom:1px solid #C3D3F1; width: 80px; height: 30px;" class="style3">
            <strong>Business</strong></td>
            <td style="border-bottom:1px solid #C3D3F1; width: 80px; height: 30px;" class="style3">
            <strong>
            Ultimate</strong></td>
          </tr>
            <tr>
            <td style="text-align:left; height: 24px;">Monthly</td>
            <td class="style1" style="width: 80px; height: 24px;">$20</td>
            <td class="style1" style="width: 80px; height: 24px;">$30</td>
            <td class="style1" style="width: 80px; height: 24px;">
            $40</td>
            <td class="style1" style="width: 80px; height: 24px;">
            $50</td>
          </tr>
            <tr>
            <td style="text-align:left; height: 24px;" class="style8"><strong>Yearly (2 months free)</strong></td>
            <td style="width: 80px; height: 24px;" class="style8">$200</td>
            <td style="width: 80px; height: 24px;" class="style8">$300</td>
            <td style="width: 80px; height: 24px;" class="style8">$400</td>
            <td style="width: 80px; height: 24px;" class="style8">$500</td>
          </tr>
            <tr>
            <td style="text-align:left; height: 24px;">Setup Fee</td>
            <td class="style1" style="width: 80px; height: 24px;">FREE</td>
            <td class="style1" style="width: 80px; height: 24px;">FREE</td>
            <td class="style1" style="width: 80px; height: 24px;">FREE</td>
            <td class="style1" style="width: 80px; height: 24px;">FREE</td>
          </tr>
            <tr>
            <td style="text-align:left; height: 24px;">&nbsp;</td>
            <td class="style1" style="width: 80px; height: 24px;">
            <button value="submit" class="submitBtn"><span>Order</span></button></td>
            <td class="style1" style="width: 80px; height: 24px;">
            <button value="submit" class="submitBtn"><span>Order</span></button></td>
            <td class="style1" style="width: 80px; height: 24px;">
            <button value="submit" class="submitBtn"><span>Order</span></button></td>
            <td class="style1" style="width: 80px; height: 24px;">
            <button value="submit" class="submitBtn"><span>Order</span></button></td>
          </tr>
          <tr>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td style="padding:4px; height: 30px;" class="style5"><strong>Account Features</strong></td>
            <td style="border-bottom:1px solid #C3D3F1; width: 80px; height: 30px;" class="style3"><strong>
            Starter</strong></td>
            <td style="border-bottom:1px solid #C3D3F1; width: 80px; height: 30px;" class="style3">
            <strong>
            Network</strong></td>
            <td style="border-bottom:1px solid #C3D3F1; width: 80px; height: 30px;" class="style3">
            <strong>Business</strong></td>
            <td style="border-bottom:1px solid #C3D3F1; width: 80px; height: 30px;" class="style3">
            <strong>
            Ultimate</strong></td>
          </tr>
            <tr>
            <td style="text-align:left; height: 24px;">Host Domains</td>
            <td style="width: 80px; height: 24px;">Unlimited</td>
            <td style="width: 80px; height: 24px;">Unlimited</td>
            <td style="width: 80px; height: 24px;">Unlimited</td>
            <td style="width: 80px; height: 24px;">Unlimited</td>
          </tr>
            <tr>
            <td style="text-align:left; height: 24px;" class="style8">Disk Space</td>
            <td style="width: 80px; height: 24px;" class="style8">10 GB</td>
            <td style="width: 80px; height: 24px;" class="style8">15 GB</td>
            <td style="width: 80px; height: 24px;" class="style8">20 GB</td>
            <td style="width: 80px; height: 24px;" class="style8">30 GB</td>
          </tr>
            <tr>
            <td style="text-align:left; height: 24px;">Traffic/Bandwidth</td>
            <td class="style1" style="width: 80px; height: 24px;">300 GB</td>
            <td class="style1" style="width: 80px; height: 24px;">500 GB</td>
            <td class="style1" style="width: 80px; height: 24px;">750 GB</td>
            <td class="style1" style="width: 80px; height: 24px;">1,000 GB</td>
          </tr>
            <tr>
            <td style="text-align:left; height: 24px;" class="style8">MySQL&nbsp; / PostgreSQL Databases</td>
            <td style="width: 80px; height: 24px;" class="style8">Unlimited</td>
            <td style="width: 80px; height: 24px;" class="style8">Unlimited</td>
            <td style="width: 80px; height: 24px;" class="style8">Unlimited</td>
            <td style="width: 80px; height: 24px;" class="style8">Unlimited</td>
          </tr>
            <tr>
            <td style="text-align:left; height: 24px;">FTP Accounts</td>
            <td class="style1" style="width: 80px; height: 24px;">Unlimited</td>
            <td class="style1" style="width: 80px; height: 24px;">Unlimited</td>
            <td class="style1" style="width: 80px; height: 24px;">Unlimited</td>
            <td class="style1" style="width: 80px; height: 24px;">Unlimited</td>
          </tr>
            <tr>
            <td style="text-align:left; height: 24px;" class="style8">Dedicated IP Address</td>
            <td style="width: 80px; height: 24px;" class="style8">2</td>
            <td style="width: 80px; height: 24px;" class="style8">2</td>
            <td style="width: 80px; height: 24px;" class="style8">2</td>
            <td style="width: 80px; height: 24px;" class="style8">2</td>
            </tr>
            <tr>
            <td style="text-align:left; height: 24px;">Daily Backup (your clients included!)</td>
            <td class="style1" style="width: 80px; height: 24px;">
            <img src="../images/yes.gif" width="16" height="16" alt="Yes"/></td>
            <td class="style1" style="width: 80px; height: 24px;">
            <img src="../images/yes.gif" width="16" height="16" alt="Yes"/></td>
            <td class="style1" style="width: 80px; height: 24px;">
            <img src="../images/yes.gif" width="16" height="16" alt="Yes"/></td>
            <td class="style1" style="width: 80px; height: 24px;">
            <img src="../images/yes.gif" width="16" height="16" alt="Yes"/></td>
          </tr>
            <tr>
            <td style="text-align:left; height: 24px;" class="style8">Private Label 
            Nameservers</td>
            <td style="width: 80px; height: 24px;" class="style8">
            <img src="../images/yes.gif" width="16" height="16" alt="Yes"/></td>
            <td style="width: 80px; height: 24px;" class="style8">
            <img src="../images/yes.gif" width="16" height="16" alt="Yes"/></td>
            <td style="width: 80px; height: 24px;" class="style8">
            <img src="../images/yes.gif" width="16" height="16" alt="Yes"/></td>
            <td style="width: 80px; height: 24px;" class="style8">
            <img src="../images/yes.gif" width="16" height="16" alt="Yes"/></td>
          </tr>
            <tr>
            <td colspan="5">
            &nbsp;</td>
          </tr>
            </table>

Wickham · #6 September 10th, 2007, 05:06 PM

"Conditionalize" almost certainly means "put in a conditional comment". These are used where IE needs different styles to other browsers. If Firefox is displaying correctly, then this is a good sign as it is generally more standards-compliant than IE.

Remember that when you have a series of table rows, each column of td tags will be as wide as the widest td tag. So if in IE something in a row above or below the buttons is being forced out more than 80px for some reason, the td tags with the buttons will also be more than 80px. Sometimes you have to close a table and open a new one to get different td column widths but in your case they should all be 80px.

Alternatively it looks as if IE is making the left or right margins or padding of the buttons too great (perhaps a default margin which needs to be 0). As far as I can see, the buttons are inside td tags width: 80px which is presumably OK as Firefox has no problem, so perhaps the buttons inside are more than 80px wide only in IE when including margins and padding.

Check the overall width of the buttons including margins, padding and borders as if they have less width than 80px they should centralise inside the td tags. If there is still a problem, put this in your head section on every relevant page AFTER the style tags or stylesheet link if you have one and just before the </head> closing tag.



Since no one else can download your whole code, you will have to use trial and error to find out which styles need changing (it may be several) and which margins or padding need adjusting. If it's only the hover state, then find the style(s) which relate to that.

The conditional comment will only affect IE so if Firefox is OK, leave everything else.

The conditional comment is for all IE versions. If you only want to change IE6 use <!--[if IE 6]>... or if only IE7 use <!--[if IE 7]>...or if all versions before IE7 use <!--[if lt IE 7]>... where the lt means less than.

You have a lot of styles in the html markup for the td tags so remember that a browser parses these styles last, so they will overide anything in a conditional comment. If the style you want to edit is in the html markup then you need to take these out of the td tags and put them in style tags or a stylesheet before the IE conditional comment. In your case the styles only seem to be width and height so as long as your conditional comment only adjusts margins or padding this will be OK.

As Buzz said, we can only guess.

chadi · #7 September 10th, 2007, 06:54 PM

Thanks everyone for your help. Wickham, your method worked but one tiny minor problem left. The actual text in IE seems a tad bit right aligned instead of centered like it should be.

Please see screen shots of firefox and IE7 comparison.

Firefox

IE7

Wickham · #8 September 10th, 2007, 07:47 PM

It looks as if you have the button positions more or less correct in IE except that they look less wide and the text inside is not quite right.

If this is the code you are trying to correct:-

<td class="style1" style="width: 80px; height: 24px;">
<button value="submit" class="submitBtn"><span>Order</span></button></td>

then I assume you have put something in the conditional comment to alter the position of the button itself. The text "Order" should be controlled by one of the styles ending in span (either the ordinary or the hover style or both) so try putting different padding for this/these style(s) in the IE conditional comment.

Padding can be negative so if it is already 0 make the padding-left: -5px and see if that changes anything (I don't think it will move the whole button).

I also notice that the word FREE is not quite central over the button in IE7 so this may be another area where trial and error with styles for the IE conditional comment is needed but I should try again to get the button position changed keeping the original width instead of making it less wide. Then the word FREE would be central and the text "Order" might not need amending either. As I said, if Firefox displays OK, then make all adjustments in the conditional comment.

chadi · #9 September 11th, 2007, 01:11 AM

I have placed the IE portion in <head> area as you explained, untouched

Code:

<!--[if IE]>
<style type="text/css">
button { margin-left: 0px; margin-right: 0px; padding-left: 0px; padding-right: 0px; }
</style>
<![endif]-->

Code:

<button value="submit" class="submitBtn"><span>View Plans</span></button></a>

**Buzz** · #10 September 11th, 2007, 02:04 AM

If youwant the text centered change this:

Code:

button span { 
  position:relative; 
  display:block; 
  white-space:nowrap; 
  padding:0 0 0 20px; 
}

by adding

Code:

text-align:center;

to it

Similar Topics
Topic	Topic Starter	Forum	Replies	Last Post
Links on hover	Brian M	Web Development & Graphic Design	6	June 29th, 2011 12:50 AM
Flash Hover	dudeking	Web Development & Graphic Design	1	February 7th, 2007 04:12 PM
Hover	jarred1234	Windows 95	1	January 12th, 2006 03:40 PM
Hover Cat	Bad Dog	Jokes Forum	5	December 18th, 2004 07:47 AM
FrontPage 2000 Hover Button Problem	struggling	Web Development & Graphic Design	7	September 13th, 2001 09:02 AM