Buttons are square or rounded depending on browser used?

tfboy

I spent a bit of time this evening editing my paypal buttons to have nice rounded corners so their style is identical to the existing style and slideshow buttons. I was doing this in Firefox.

After uploading and aligning them in firefox using webdev, I decided to do a quick healthcheck on IE and all of a sudden, the smugmug buttons are all square / have right-angled edges :huh

I log in to smugmug on IE, and no change there - still square edges. So it looks like Firefox gives round edge buttons, and IE gives square ones!

Is this normal? Is there anyway I can control whether the buttons are square or rounded ?!?

edit:

A gallery as seen in Firefox:



The same gallery in Internet Explorer:


edit2: not sure why a little white dot has appeared between the buttons on the IE version either

Andy

Yes. Behold the beauty of Firefox and Safari, and the not-so-pretty that is IE. I'm sorry

Square corners in IE.

jfriend

To add a little explanation to what Andy said, Firefox and Safari have implemented parts of CSS3 which includes the ability to specify rounded corners without using custom graphics. IE has not - thus a difference in raw capability. You can look at this page in different browsers to see: http://www.css3.info/preview/rounded-border/.

The buttons Smugmug uses are created by the YUI library that Smugmug includes in all your pages and it dynamically figures out which browser capability it has and adapts.

You could create your buttons as YUI buttons too and then they would look identically to the Smugmug buttons on all platforms. I would need to know a little more about what you're trying to do and see a representative page before I could suggest further exactly how you would do that, but it isn't hard. I've added all sorts of YUI buttons to pages before.

For example, this code adds a button that says "Download Image" is styled similarly to Smugmug's buttons and calls a javascript function "InitiateDownloadImage" when it's pressed:

var downloadButtonInfo =
        {
            id: "downloadButtonId",
            label: "Download Image...",
            container: parentDiv,
            type: "button",
            className: "sm-button sm-button-small themesButton glyphButton",
            onclick: { fn: InitiateDownloadImage }
        };
        
        var dButtonObj = new YAHOO.widget.Button(downloadButtonInfo);

More on that particular code if you want a full fledged example is here:

tfboy

Ahh ok, that explains it, thanks.

I'll have a play. Thanks for the link, John, I'll have a play with it to see if I can figure it out. If not, I'll be back here

tfboy

OK, so I've had a play, added the -moz-border-radius: 5px and -webkit-border-radius: 5px but nothing.

Having another read of the CSS3 page, it looks like this only works with borders. So does that mean I have to define a table or something in which I put the button and then cornering the edges of the table effectively clips the pic contained inside it?

jfriend

tfboy wrote:

OK, so I've had a play, added the -moz-border-radius: 5px and -webkit-border-radius: 5px but nothing.

Having another read of the CSS3 page, it looks like this only works with borders. So does that mean I have to define a table or something in which I put the button and then cornering the edges of the table effectively clips the pic contained inside it?

Perhaps you aren't getting my suggestion. Why create your own button from scratch with your own HTML and own CSS? Use a YUI button like my example shows and the drawing of the button will already be done for you exactly to match the Smugmug buttons. All you have to do is add a little javascript code snippet to add the button. In the example above, change the label from "DownloadImage..." to what you want it say and change the fn: from InitiateDownloadImage to your own JS function and set the container to be the parent DIV you want the buttons located in. If you need help with doing it that way, let me know. I would just need to know a little more about what you want the button to do when it's pressed.

tfboy

jfriend wrote:

Perhaps you aren't getting my suggestion. Why create your own button from scratch with your own HTML and own CSS? Use a YUI button like my example shows and the drawing of the button will already be done for you exactly to match the Smugmug buttons. All you have to do is add a little javascript code snippet to add the button. In the example above, change the label from "DownloadImage..." to what you want it say and change the fn: from InitiateDownloadImage to your own JS function and set the container to be the parent DIV you want the buttons located in. If you need help with doing it that way, let me know. I would just need to know a little more about what you want the button to do when it's pressed.

Ahh ok. So they already exist? Great.
But where can I find them ? (can't search yui here as I guess it's too short a string?) Re-reading your original post, there's a "YUI library"? Sounds interesting
edit: OK, so it's a Yahoo User Interface library. Found it http://developer.yahoo.net/yui but not sure where to go from here.

jfriend

tfboy wrote:

Ahh ok. So they already exist? Great.
But where can I find them ? (can't search yui here as I guess it's too short a string?) Re-reading your original post, there's a "YUI library"? Sounds interesting
edit: OK, so it's a Yahoo User Interface library. Found it http://developer.yahoo.net/yui but not sure where to go from here.

I am apparently not explaining it well enough. I was hoping you would adapt the code from the Download button example I've already given you. But since that was not clear, paste this code into your bottom javascript and the two buttons will appear:

YE.onContentReady("altViews", function() 
{
    var buttonInfo1 = 
    {
        id: "myAddToCartButton",
        label: "Add to Cart",
        container: this,
        type: "button",
        className: "sm-button sm-button-small themesButton glyphButton",
        onclick: {fn: function() {}}
    }
    var button1 = new YAHOO.widget.Button(buttonInfo1);
    
    var buttonInfo2 = 
    {
        id: "myViewCartButton",
        label: "View Cart",
        container: this,
        type: "button",
        className: "sm-button sm-button-small themesButton glyphButton",
        onclick: {fn: function() {}}
    }
    var button2 = new YAHOO.widget.Button(buttonInfo2);

});

The buttons aren't hooked up to do anything yet because I need to know what you want them to do when pressed.

tfboy

jfriend wrote:

I am apparently not explaining it well enough. I was hoping you would adapt the code from the Download button example I've already given you. But since that was not clear, paste this code into your bottom javascript and the two buttons will appear:

YE.onContentReady("altViews", function() 
{
    var buttonInfo1 = 
    {
        id: "myAddToCartButton",
        label: "Add to Cart",
        container: this,
        type: "button",
        className: "sm-button sm-button-small themesButton glyphButton",
        onclick: {fn: function() {}}
    }
    var button1 = new YAHOO.widget.Button(buttonInfo1);
    
    var buttonInfo2 = 
    {
        id: "myViewCartButton",
        label: "View Cart",
        container: this,
        type: "button",
        className: "sm-button sm-button-small themesButton glyphButton",
        onclick: {fn: function() {}}
    }
    var button2 = new YAHOO.widget.Button(buttonInfo2);

});

The buttons aren't hooked up to do anything yet because I need to know what you want them to do when pressed.

Got it. Sorry, I missed the bit where it actually takes the text you have in the label field to create the button.

I get the idea, but maybe it's just too complex to integrate for my purposes: it's to be used to for "buy" and "view cart" paypal buttons which are already shown as (an untidy mixture of jpeg and png) image files in red below (taken from the custom footer section)

<div id="paypalTango" style="display:none;" class="paypalButton">
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post" onSubmit="setPaypalForm(this)" >
  <input type="hidden" name="add" value="1">
  <input type="hidden" name="cmd" value="_cart">
  <input type="hidden" name="business" value="LX7FX9PMPZJ4W">
  <input type="hidden" name="item_name" value="">
  <input type="hidden" name="amount" value="">

  <input type="hidden" name="no_shipping" value="0">
  <input type="hidden" name="no_note" value="1">
  <input type="hidden" name="currency_code" value="GBP">
  <input type="hidden" name="lc" value="GB">
  <input type="hidden" name="bn" value="PP-ShopCartBF">
          
  <select class="paypalSelect" name="photoselection">
    <option selected value="10.00">High res digital file (Emailed) - GBP 10.00</option>
  </select>

  <input class="paypalBuy" type="image" [COLOR=red]src="/photos/538896275_FFTEe-O.jpg"[/COLOR] border="0" name="submit" alt="Buy">
  <img alt="" border="0" src="https://www.paypal.com/en_AU/i/scr/pixel.gif" width="1" height="1">
</form>
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
  <input class="paypalView" type="image" [COLOR=red]src="/photos/538901092_P8KcZ-O.png"[/COLOR] border="0" name="submit" alt="View Cart">
  <input type="hidden" name="cmd" value="_cart">
  <input type="hidden" name="business" value="LX7FX9PMPZJ4W">
  <input type="hidden" name="display" value="1">
</form>
</div>