kostenloser Webspace werbefrei: lima-city

jQuery Buttons unterschiedliche Darstellung beim Mac und PC

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   fp08

   fp08 hat kostenlosen Webspace.

   21:20, 18.5.2012

   Guten Abend,
   
   mein Problem ist wie schon im Titel erwähnt das Aussehen der jQuery Buttons.
   
   Ich habe mal eine Testseite erstellt mit 3 verschiedenen Buttons. Bisher hab ich immer mit einem Mac gearbeitet, umso größer die Enttäuschung, dass das ganze auf dem PC wieder ganz anders aussieht obwohl ich den gleichen Browser benutze.
   
   Ein Screenshot vom Mac mit Mozilla Firefox:
   http://www.imageshost.de/img/png/387f33f54934ed9292f3067f7c99228a.png
   
   
   Und vom PC aus ebenfalls mit Mozilla Firefox:
   http://www.imageshost.de/img/png/2934ddcfe777bb2c6d01c6fa0660a63f.png
   
   Der dritte "Durchsuchen" Button ist nur eine PNG Grafik als vergleich, wie ich mir die anderen Buttons wünschen würde.
   Es soll alles so aussehen wie beim Mac. Dass bei dem einen Button das Herz vorne fehlt ist Absicht. Es geht mir vielmehr um die Schriftart und den Schriftschnitt. Un das Herz beim ersten Button sollte eigentlich auch vor dem Text stehen :(
   
   Hier mal der Code der Testseite:
   

   <button style="height: 28px; cursor: default;" class="fg-button fg-button-icon-left ui-state-default ui-priority-secondary ui-corner-all">
   <span class="ui-icon ui-icon-heart"></span>Zur Freundesliste hinzufügen</button>
   <br /><br />
   <a href="#" class="fg-button fg-button-icon-left ui-state-default ui-corner-all"><span class="ui-icon ui-icon-heart"></span>Zur Freundesliste hinzufügen</a>
   <br /><br />
   <input value="Zur Freundesliste hinzufügen" type="submit" name="submit_username" id="submit_username" class="fg-button fg-button-icon-left ui-state-default ui-corner-all">
   <br /><br />
   <img src="Skins/1/images/upload.png" >

   
   
   Und ein bisschen aus der riesigen CSS Datei:
   

   .ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: bold; }
   .ui-priority-secondary, .ui-widget-content .ui-priority-secondary,  .ui-widget-header .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; }
   .ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); background-image: none; }
   
   .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #231e1c; background: #231e1c url(images/ui-bg_highlight-soft_15_231e1c_1x100.png) 50% 50% repeat-x; font-weight: normal; color: #e75d1d; }
   .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #e75d1d; text-decoration: none; }
   
   	.fg-button { clear:left; margin:0 0px 0px 0px; padding: .4em 1em; text-decoration:none !important; cursor:pointer; position: relative; text-align: center; zoom: 1; font-size:12px; }
   	.fg-button .ui-icon { position: absolute; top: 50%; margin-top: -8px; left: 50%; margin-left: -8px; }
   	a.fg-button {   }
   	button.fg-button { width:auto; overflow:visible; } /* removes extra button width in IE */
   	
   	.fg-button-icon-left { padding-left: 2.1em; padding-right:1.1em; }
   	.fg-button-icon-right { padding-right: 2.1em; }
   	.fg-button-icon-left .ui-icon { right: auto; left: .5em; margin-left: 0; }
   	.fg-button-icon-right .ui-icon { left: auto; right: .2em; margin-left: 0; }
   	.fg-button-icon-solo { display:block; width:8px; height:18px; text-indent: -9999px; }	 /* solo icon buttons must have block properties for the text-indent to work */	
   	
   	.fg-button.ui-state-loading .ui-icon { background: url(spinner_bar.gif) no-repeat 0 0; }
   	
   
   .ui-button { display: inline-block; position: relative; padding: 0; margin-right: .1em; text-decoration: none !important; cursor: pointer; text-align: center; zoom: 1; overflow: visible; } /* the overflow property removes extra width in IE */
   .ui-button-icon-only { width: 2.2em; } /* to make room for the icon, a width needs to be set here */
   button.ui-button-icon-only { width: 2.4em; } /* button elements seem to need a little more width */
   .ui-button-icons-only { width: 3.4em; } 
   button.ui-button-icons-only { width: 3.7em; } 
   
   /*button text element */
   .ui-button .ui-button-text { display: block; line-height: 1.4;  }
   .ui-button-text-only .ui-button-text { padding: .4em 1em; }
   .ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text { padding: .4em; text-indent: -9999999px; }
   .ui-button-text-icon-primary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 1em .4em 2.1em; }
   .ui-button-text-icon-secondary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 2.1em .4em 1em; cursor: default;}
   .ui-button-text-icons .ui-button-text { padding-left: 2.1em; padding-right: 2.1em; }
   /* no icon support for input elements, provide padding by default */
   input.ui-button { padding: .4em 1em; }
   
   /*button icon element(s) */
   .ui-button-icon-only .ui-icon, .ui-button-text-icon-primary .ui-icon, .ui-button-text-icon-secondary .ui-icon, .ui-button-text-icons .ui-icon, .ui-button-icons-only .ui-icon { position: absolute; top: 50%; margin-top: -8px; }
   .ui-button-icon-only .ui-icon { left: 50%; margin-left: -8px; }
   .ui-button-text-icon-primary .ui-button-icon-primary, .ui-button-text-icons .ui-button-icon-primary, .ui-button-icons-only .ui-button-icon-primary { left: .5em; }
   .ui-button-text-icon-secondary .ui-button-icon-secondary, .ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; }
   .ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; }
   
   /*button sets*/
   .ui-buttonset { margin-right: 7px; }
   .ui-buttonset .ui-button { margin-left: 0; margin-right: -.4em; }
   
   /* workarounds */
   button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra padding in Firefox */

   
   
   Ich hoffe ihr könnt mir helfen. Danke im Vorraus.
   
   LG Pamela

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. g****e

   21:55, 18.5.2012

   Ist schnell erklärt: Wie du siehst unterscheiden sich die Schriftarten, das heißt der Std Font ist anders.
   Versuch mal ne font-family anzugeben
   
   Liebe GRüße
4. Autor dieses Themas

   fp08

   fp08 hat kostenlosen Webspace.

   19:59, 20.5.2012

   Danke, das habe ich mal gemacht. Sieht etwas besser aus. Trotzdem ist die Schriftgröße und Dicke der Buchstaben (Vergleich mit "Durchsuchen"-Button) noch sehr unterschiedlich.

5. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?