gap between header buttons

[bigbird_3156]

Hi,

 

I'm trying to put a gap between the three buttons on the header of my site.

 

Ive been able to add css that allows a gap between them, but the gap is about 10px regardless of how I change the settings... I only want 2 or 3 px ....

 

this is what I've done in header:

echo tep_draw_button( HEADER_TITLE_MY_ACCOUNT , 'person', tep_href_link(FILENAME_ACCOUNT, '', 'SSL')) .   
					 '<a class="button_gap">' .  tep_draw_button(HEADER_TITLE_CART_CONTENTS . ($cart->count_contents() > 0 ? ' (' . $cart->count_contents() . ')' : ''), 'cart', tep_href_link(FILENAME_SHOPPING_CART)) . '</a>' . 
					 '<a class="button_gap">' . tep_draw_button(HEADER_TITLE_CHECKOUT, 'triangle-1-e', tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL')) . '</a>';

and this is the css

.button_gap {
border: none;
padding: 2px;
}

Ive also tried margin-right: 2px; but it seems to make no difference....

 

if I don't have the border: none; line in then I get a border around the gap box the same as the border of the button - but if I use the border: none command then I loose the border on the right side of the actual button as if the button is being overlapped by the gap (if that makes sense).

 

Obviously I have missed the point somewhere...

 

can anyone help?

[auzStar]

@@bigbird_3156

 

Hi Peter,

 

The class info needs to be sent to the function that draws the button via the params parameter. If that makes sense.

 

Try this:

echo tep_draw_button(HEADER_TITLE_MY_ACCOUNT , 'person', tep_href_link(FILENAME_ACCOUNT, '', 'SSL'), 'secondary', array('params' => 'class="button_gap"')) .
	 tep_draw_button(HEADER_TITLE_CART_CONTENTS . ($cart->count_contents() > 0 ? ' (' . $cart->count_contents() . ')' : ''), 'cart', tep_href_link(FILENAME_SHOPPING_CART), 'secondary', array('params' => 'class="button_gap"')) .
	 tep_draw_button(HEADER_TITLE_CHECKOUT, 'triangle-1-e', tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'), 'secondary', array('params' => 'class="button_gap"'));

css:

.button_gap {
  margin-left: 2px;
}

cheers :santa:

 

 

[bigbird_3156]

@@auzStar

 

Thanks for that, but I applied what you sent me, and it did nothing, as in the buttons are flush up against each other like they were originally.

 

I put some extreme values in the css to make sure (20px etc) and it made no difference.

[♥kymation]

This code in includes/header.php creates a jQuery buttonset out of those three buttons.

<script type="text/javascript">
  $("#headerShortcuts").buttonset();
</script>

Remove that and the buttons will separate. You may need to add more separation to make them look good.

 

Regards

Jim

[auzStar]

Thanks @@kymation,

 

Forgot about the jquery code. Works once that is removed. Should have tested first. :thumbsup:

 

@@bigbird_3156

 

Still use the code I provided above. You shouldn't be wrapping buttons with the <a> tag.

 

cheers