Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.5a is a product of Lussumo. More Information: Documentation, Community Support.
-
Hello!
Following is my markup that works well on all the browsers except the new genie in town Firefox 3.0
Its just because of the style 'padding-right:6px;' given in my wrapBtnOrng Class... but I dont know how do I have a check that if the browser is FF 3 then remove the padding, any help guys.. ?
Thanks.
Markup for my button:
<button class="wrapBtnOrng" type="submit">
<span class="lft">
<span class="md"> My Button
</span>
</span>
</button>
CSS:
.wrapBtnOrng {
background:transparent url(../images/lightbox_btn_orng_right_0.gif) no-repeat scroll right center;
border:0pt none;
cursor:pointer;
margin:0px;
overflow:visible;
white-space: nowrap;
padding:0px;
background: none;
height:1%;
padding-right:6px;
margin:5px;
}
.wrapBtnOrng span.md{
background:transparent url(../images/lightbox_btn_orng_center_0.gif) repeat-x scroll left center;
display:block;
height:22px;
margin-left:6px;
padding:0px 10px;
padding-left:8px;
line-height:19px;
font-family:Lucida Grande, Arial;
font-size:12px;
font-weight:bold;
color:#fff;
}
.wrapBtnOrng span.lft{
background:transparent url(../images/lightbox_btn_orng_left_0.gif) no-repeat scroll left center;
display:block;
height:22px;
white-space: nowrap;
} -
no reply.....
-
Try "button.wrapBtnOrng". FF3 has button, input[type="reset"], input[type="button"], input[type="submit"] {padding: 0px 6px 0px 6px;} and for you to properly override FF3's native style, you need to have a rule that has higher precedence.
-
Tried lot of things, finally there wasn't any CSS solution that worked everywhere, so I had to change the markup and css again, this is my solution that works on every browser (it does contain extra markup elements, but I had no other solution)
Markup:
<button class="wrapBtnOrng" type="button">
<span class="md">
<span class="rt">
<em>The Button</em>
</span>
</span>
</button>
CSS:
button{
margin:5px 1px;
width:auto;
overflow:visible;
border:0;
cursor:pointer;
font-weight:bold;
text-align:center;
background:none;
padding:0px;
}
button span{
position:relative;
display:block;
white-space:nowrap;
}
button em{
display:block;
font-family:Lucida Grande, Arial;
font-weight:bold;
font-size:12px;
line-height:19px;
padding:0px 18px;
height:22px;
color:#fff;
}
/*Right Image*/
button.wrapBtnOrng span.rt {
background:url(../images/lightbox_btn_orng_right_0.gif) right no-repeat;
}
/*Middle Image*/
button.wrapBtnOrng span.md{
background:url(../images/lightbox_btn_orng_center_0.gif) repeat-x center;
}
/*Left Image*/
button.wrapBtnOrng em{
background:url(../images/lightbox_btn_orng_left_0.gif) left no-repeat;
}
1 to 4 of 4