CSS issues in Chrome

HTML & CSS
1

http://www.urlgone.com/9667b9/

Hi,

I’m having a couple of issues on my site, but only in Chrome, which is surprising since usually it’s IE that I can’t get to work properly.

  1. The clickable images in the body of the home page have borders in IE and FF as I want them to, but none appear in Chrome. Any idea what might be the issue here? I know that my stylesheet is a bit of a mess, but I must be missing a few lines somewhere.

  2. The forms in the header and left column are misaligned with the text image next to them, again only in Chrome. I’m guessing this is a CSS issue but I really have no idea where to start with this.

Just in case, here’s the relevant section of header.php:

<table border="0" width="100%" cellspacing="0" cellpadding="1">
  <tr class="headerNavigation">
    <td class="headerNavigation">&nbsp;&nbsp;<?php echo $breadcrumb->trail(' &rsaquo; '); ?></td>
        <?php 
  //---PayPal WPP Modification START ---//
  $show_user_options = tep_paypal_wpp_show_user_options(); 
?>  
    <td align="right" class="headerNavigation">
<?php if ($show_user_options) { ?>
      <a href="<?php echo tep_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>" class="headerNavigation"><?php echo HEADER_TITLE_LOGOFF; ?></a>  |  
<?php } ?>
      <a href="<?php echo tep_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>" class="headerNavigation"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a>  |  
      <img src=images/cart_icon.gif align="top" alt="shopping cart" width="25" height="21" style="margin:-2px -4px -2px -2px;">
      <a href="<?php echo tep_href_link(FILENAME_SHOPPING_CART); ?>" class="headerNavigation"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a>  |  
      <a href="<?php echo tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>" class="headerNavigation"><?php echo HEADER_TITLE_CHECKOUT; ?></a>  |
      <?php echo tep_draw_form('quick_find', tep_href_link(FILENAME_ADVANCED_SEARCH_RESULT, '', $request_type, false), 'get') . BOX_HEADING_SEARCH . tep_draw_input_field('keywords', '', 'size="10" maxlength="30" style="width: ' . (BOX_WIDTH-90) . 'px"') . ' ' . tep_hide_session_id() . tep_draw_hidden_field('search_in_description' , '1') . tep_image_submit('button_search.gif', BOX_HEADING_SEARCH, 'align="top"') . '</form>';?>&nbsp;&nbsp;
    </td>
<?php //---PayPal WPP Modification END ---// ?>
  </tr>
</table>

Thanks

2

Hi,

You haven’t defined any rules for the borders on linked images so you just get whatever the browsers defaults are.

In some browsers linked images are automatically given a 2px border (whoever thought that was a good idea was mistaken) and are coloured using the color from the current anchor text color (usually blue for non visited links).

You are changing the anchor text on hover and therefore those browsers that have provide a border on the linked colour use the hover color also because that’s where they get their colour from but not specifically as a hover rule.

The cross browsers solution is to define the border on linked images yourself and then change the border color on hover.

e.g.


td.main a img{border:2px solid blue}
td.main a:hover img{border:2px solid #abd}

Or add a class to the images in question etc.

3

For the inputs try vertically aligning them.


.boxText input{vertical-align:middle!important}

Form elements always vary cross browser though and there’s not always a great deal you can do about it.

4

Hi Paul,

Thanks so much for your detailed explanations. I added the td.main classes and that seems to have just about done the trick. Is there some default padding or margin that’s added to images by certain browsers? IE and FF appear the same now, but the small space between the top image and the next row of 3 images has disappeared in Chrome. Is this simply a matter or defining a new margin or padding in these new classes?

And you’re right, it seems like there will always be some cross browser dilemma with forms. The code you gave me fixed one of them though, the email form in the left column.

All in all, still a big improvement. I appreciate the assistance.

5

Hi,

It doesn’t look like you have any specific rules for the spacing so again its probably down to browsers defaults and whitespace.

Try something like this.


td.main a img {
    border: 2px solid #072B8A;
[B]    margin: 2px 0;
    vertical-align: top;[/B]
}
6

Thanks for all the help Paul! My site looks much better and I’ve learned a bit of CSS along the way.

Happy New Year!

Nick

7

One last thing Paul… actually I made a new class using this format you’d suggested, .headerNavigation input, and it’s fixed my misalignment problem in the search form as well!

So you’ve helped me tremendously on all of these issues. Thanks again!