Help with CSS code for buttonRow forward

[CybaGirl]

Hello can someone please help and tell me what is the right code I need to use to put a space between two buttons when the code <div class="buttonRow forward"> is used in a php file.

Previously I added the the following code:

#reviewsInfoDefault .buttonRow{
margin: 3px 0;
}

to my stylesheet to put a gap between all the buttons on the review page so that it now looks like this. As prior to adding the above code to my stylesheet file the "Go To Products Information", "More Reviews" and "Write Review buttons were sitting on top of each other.



To get this information I looked at the file tpl_product_reviews_info_default.php and at the top it says

<div class="centerColumn" id="reviewsInfoDefault">

And further on down where the buttons are located it says:

<div class="buttonRow">
<?php
        // more info in place of buy now
        if (zen_has_product_attributes($review_info->fields['products_id'] )) {
          //   $link = '<p>' . '<a href="' . zen_href_link(zen_get_info_page($review_info->fields['products_id']), 'products_id=' . $review_info->fields['products_id'] ) . '">' . MORE_INFO_TEXT . '</a>' . '</p>';
          $link = '';
        } else {
          $link= '<a href="' . zen_href_link($_GET['main_page'], zen_get_all_get_params(array('action', 'reviews_id')) . 'action=buy_now') . '">' . zen_image_button(BUTTON_IMAGE_IN_CART, BUTTON_IN_CART_ALT) . '</a>';
        }

        $the_button = $link;
        $products_link = '';
        echo zen_get_buy_now_button($review_info->fields['products_id'], $the_button, $products_link) . '<br />' . zen_get_products_quantity_min_units_display($review_info->fields['products_id']);
      ?>
</div>
<div id="reviewsInfoDefaultProductPageLink" class="buttonRow"><?php echo '<a href="' . zen_href_link(zen_get_info_page($_GET['products_id']), zen_get_all_get_params(array('reviews_id'))) . '">' . zen_image_button(BUTTON_IMAGE_GOTO_PROD_DETAILS , BUTTON_GOTO_PROD_DETAILS_ALT) . '</a>'; ?></div>

<div id="reviewsInfoDefaultReviewsListingLink" class="buttonRow"><?php echo ($reviews_counter > 1 ? '<a href="' . zen_href_link(FILENAME_PRODUCT_REVIEWS, zen_get_all_get_params(array('reviews_id'))) . '">' . zen_image_button(BUTTON_IMAGE_MORE_REVIEWS , BUTTON_MORE_REVIEWS_ALT) . '</a>' : ''); ?></div>

<div class="buttonRow"><?php echo '<a href="' . zen_href_link(FILENAME_PRODUCT_REVIEWS_WRITE, zen_get_all_get_params(array('reviews_id'))) . '">' . zen_image_button(BUTTON_IMAGE_WRITE_REVIEW, BUTTON_WRITE_REVIEW_ALT) . '</a>'; ?></div>
</div>

So by knowing the id and class I was able to use the above code in my stylesheet file to create gaps between all the buttons on the review page.

But when I try to add similar code using the following:

#createAcctSuccess .buttonRow forward,{
margin: 3px 0;
}

to my stylesheet file to create gaps on the signup success page it doesn't work for some reason.

For example this is what my signup page currently looks like after someone has successfully signed up.



Now I know in my tpl_create_account_success_default.php file at the very top it says:

<div class="centerColumn" id="createAcctSuccess">

Then down where the buttons are it says:

<div class="buttonRow forward"><?php echo '<a href="' . zen_href_link(FILENAME_ADDRESS_BOOK_PROCESS, 'edit=' . $addresses['address_book_id'], 'SSL') . '">' . zen_image_button(BUTTON_IMAGE_EDIT_SMALL, BUTTON_EDIT_SMALL_ALT) . '</a> <a href="' . zen_href_link(FILENAME_ADDRESS_BOOK_PROCESS, 'delete=' . $addresses['address_book_id'], 'SSL') . '">' . zen_image_button(BUTTON_IMAGE_DELETE, BUTTON_DELETE_ALT) . '</a>'; ?></div>
<br class="clearBoth">

So I assumed by adding the following:

#createAcctSuccess .buttonRow forward,{
margin: 3px 0;
}

To my stylesheet file this would create small gaps on my signup success page as well. But it doesn't work.

So can someone please tell me what is the right code I should be using to create a small gap between the two buttons?

Any help in regards to this will be greatly appreciated!

Thanks.

[niccol]

A few things....

First, and most important, you really really want to find out how to use firefox's web developer tools. Or chrome's version of the same thing. Don't use one of these browsers? Well you should.

These tools will allow you to highlight a element ( for instance the button) on the screen and it will tell you the structure of the page around it. WHich will let you immediately know which classess and IDs you can use.

This is much much faster than working it out by looking at the code.

Next you need to learn a little bit of css.

#createAcctSuccess .buttonRow forward,{
margin: 3px 0;
}

t

Without getting too far into a whole css tutorial this is wrong ( not sure how it works if it does)

It probably should read

#createAcctSuccess .buttonRow{
margin: 3px 0;
}

This targets all the elements with class 'buttonRow' that are inside elements with ID 'createAcctSuccess'.

[CybaGirl]

Hi Nick and thanks for getting back to me.

A few things....

First, and most important, you really really want to find out how to use firefox's web developer tools. Or chrome's version of the same thing. Don't use one of these browsers? Well you should.

I have been using Firefox since it was made. Prior to that I was an avid Netscape user :).

I also have the Firebug plugin installed and hence that is what I used to find the right ID and class information :). I didn't look at any core files until I figured out through Firebug which files did what.

Next you need to learn a little bit of css.

#createAcctSuccess .buttonRow forward,{
margin: 3px 0;
}

t

Without getting too far into a whole css tutorial this is wrong ( not sure how it works if it does)

Your right that code didn't work at all and hence why I thought I would seek some help in regards to this.

It probably should read

#createAcctSuccess .buttonRow{
margin: 3px 0;
}

This targets all the elements with class 'buttonRow' that are inside elements with ID 'createAcctSuccess'.

Thanks for the suggestion but I previously tried that prior to posting this thread and I really don't understand why it doesn't work for. As that was my first choice of code.

Another thing I have noticed if I view the buttons from the Your Account Has Been Created page in Internet Explorer 8 they sit side by side.

But in Firefox 3.6 they sit on top of each other as per the image above.

If I could get them to sit side by side in Firefox like they do in Internet Explorer I would be happier with that solution. As I think they look better sitting side by side rather than sitting on top of each other.

Thanks once again for your help on this and if you have any other suggestions I would greatly appreciate hearing them.

[niccol]

Well as ever it is going to help a lot to post a URL.

To get this information I looked at the file tpl_product_reviews_info_default.php and at the top it says

The point is that web developer tools / firebug gives you this information without having to look at the files.

The difference may be that in the create account success the two buttons are floated. This is what the class 'forward' does.

But as I say if you can post a URL it will stop us having to guess.

[mike_uk100]

To get space between the buttons on the reviews page the following code in the stylesheet works for me on 1.3.9h:

#reviewsDefault .buttonRow {
padding-bottom: 10px;
}
I'm using the CSS buttons option, margin-bottom wasn't working for me.