The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Button size problem

View previous topic View next topic Go down

Solved Button size problem

Post by Luffy on November 18th 2014, 11:22 am

Hello,

My buttons on my editor seem to look fine but my other members have problems with the height of the buttons. Here are some images that members send me to view their problem. Any ideas why they are looking at the buttons like this:



Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Solved Re: Button size problem

Post by Ange Tuteur on November 18th 2014, 11:36 am

Hi MrMind,

Could you provide the CSS that you used for the buttons ?

Thanks

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Button size problem

Post by Luffy on November 18th 2014, 11:58 am

Code:
#page-body button, #page-body input[type="button"], #page-body input[type="file"]::-webkit-file-upload-button, #page-body input[type="reset"], #page-body input[type="submit"] {
background: #ddd;
border: 1px solid #C2C2C2;
border-radius: 2px;
box-shadow: 0 1px 1px rgba(204,204,204,0.18);
color: #666;
cursor: pointer;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff',endColorstr='#eee',GradientType=0);
font-size: 11px;
height: 11px!important;
padding: 5px 7px 18px 8px;
}
#quick_reply .frm-buttons, dd.dd-textarea {
float: right;
width: 88.5%;
}
#quick_reply .frm-buttons {
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
background-color: none;
border: none;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top: 0;
float: right;
margin: 0 7% 0 auto;
padding: 5px;
text-align: center;
width: 82%;
}






Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Solved Re: Button size problem

Post by Ange Tuteur on November 18th 2014, 12:24 pm

See if this fixes the problem :
Code:
#page-body button, #page-body input[type="button"], #page-body input[type="file"]::-webkit-file-upload-button, #page-body input[type="reset"], #page-body input[type="submit"] {
background: #ddd;
border: 1px solid #C2C2C2;
border-radius: 2px;
box-shadow: 0 1px 1px rgba(204,204,204,0.18);
color: #666;
cursor: pointer;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff',endColorstr='#eee',GradientType=0);
font-size: 11px;
padding: 5px 7px 18px 8px;
}
#quick_reply .frm-buttons, dd.dd-textarea {
float: right;
width: 88.5%;
}
#quick_reply .frm-buttons {
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
background-color: none;
border: none;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top: 0;
float: right;
margin: 0 7% 0 auto;
padding: 5px;
text-align: center;
width: 82%;
}

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Button size problem

Post by Luffy on November 18th 2014, 1:36 pm

Hello,

Still nothing changed. Ok all button codes in my CSS are the below (note that those codes you send are already in it at the beginning):
Code:
#page-body button, #page-body input[type="button"], #page-body input[type="file"]::-webkit-file-upload-button, #page-body input[type="reset"], #page-body input[type="submit"] {
background: #ddd;
border: 1px solid #C2C2C2;
border-radius: 2px;
box-shadow: 0 1px 1px rgba(204,204,204,0.18);
color: #666;
cursor: pointer;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff',endColorstr='#eee',GradientType=0);
font-size: 11px;
padding: 5px 7px 18px 8px;
}
#quick_reply .frm-buttons, dd.dd-textarea {
float: right;
width: 88.5%;
}
#quick_reply .frm-buttons {
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
background-color: none;
border: none;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top: 0;
float: right;
margin: 0 7% 0 auto;
padding: 5px;
text-align: center;
width: 82%;
}
#page-body input[type="button"]:hover,#page-body input[type="submit"]:hover,#page-body input[type="reset"]:hover,#page-body input[type="file"]::-webkit-file-upload-button:hover,#page-body button:hover{background:#fefefe}
#page-body input[type="button"]:active,#page-body input[type="submit"]:active,#page-body input[type="reset"]:active,#page-body input[type="file"]::-webkit-file-upload-button:active,#page-body button:active{background:rgb(238,238,238);background:-moz-linear-gradient(top,rgba(238,238,238,1) 0%,rgba(255,255,255,1) 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(238,238,238,1)),color-stop(100%,rgba(255,255,255,1)));background:-webkit-linear-gradient(top,rgba(238,238,238,1) 0%,rgba(255,255,255,1) 100%);background:-o-linear-gradient(top,rgba(238,238,238,1) 0%,rgba(255,255,255,1) 100%);background:-ms-linear-gradient(top,rgba(238,238,238,1) 0%,rgba(255,255,255,1) 100%);background:linear-gradient(to bottom,rgba(238,238,238,1) 0%,rgba(255,255,255,1) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#eee',endColorstr='#fff',GradientType=0 );box-shadow:inset 0 -1px 1px rgba(0,0,0,0.09)}
.pun .frm dd.frm-input,.pun .frm dd.frm-input input,.pun .frm dd.frm-textarea{width:82%;margin-right:-5% !important}
fieldset.frm-set dl dt{display:block;width:225px!important;float:left;font-weight:700;text-align:right}
.pun .frm div.posting-block dd.frm-textarea{width:94% !important;margin-left:-25px !important}

An image from a member that checked if something changed after the new codes:

Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Solved Re: Button size problem

Post by SLGray on November 18th 2014, 9:32 pm

Is this happening in all browsers?


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35641
Reputation : 2374
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

Solved Re: Button size problem

Post by Luffy on November 18th 2014, 10:26 pm

Τhis topic is now solved. Members cleared the browser and after the code Ange gave me this issue is fixed! Thank you.






Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Solved Re: Button size problem

Post by Ramdaman on November 18th 2014, 10:48 pm

Topic solved and archived.

EDIT: Topic re-opened as requested.


Last edited by Ramdaman on November 18th 2014, 11:34 pm; edited 1 time in total

Ramdaman
Active Poster

Male Posts : 1614
Reputation : 96
Language : English, Albanian, Macedonian, Russian | HTML, CSS
Location : New York City

http://ndihme.forumotion.com/forum

Back to top Go down

Solved Re: Button size problem

Post by Luffy on November 18th 2014, 10:49 pm

Thank you for the quick response Ramdaman.

This problems showed up again!
@SLGray yes to all browsers. I don't know why.. Sad






Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Solved Re: Button size problem

Post by Ghost Pirate on November 18th 2014, 11:11 pm

It's happening on more forums to with the button

Ghost Pirate
Forumember

Male Posts : 255
Reputation : 78
Language : English, Greman, Spanish

Back to top Go down

Solved Re: Button size problem

Post by Ange Tuteur on November 18th 2014, 11:31 pm

See if this works :
Code:
#page-body .button, #page-body input[type="button"], #page-body input[type="file"], #page-body input[type="reset"], #page-body input[type="submit"] {
background: #ddd;
border: 1px solid #C2C2C2;
border-radius: 2px;
box-shadow: 0 1px 1px rgba(204,204,204,0.18);
color: #666;
cursor: pointer;
font-size: 11px;
padding: 7px 8px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff',endColorstr='#eee',GradientType=0);
}
#quick_reply .frm-buttons, dd.dd-textarea {
float: right;
width: 88.5%;
}
#quick_reply .frm-buttons {
-moz-border-bottom-left-radius: 5px;
-moz-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
background-color: none;
border: none;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top: 0;
float: right;
margin: 0 7% 0 auto;
padding: 5px;
text-align: center;
width: 82%;
}
#page-body input[type="button"]:hover,#page-body input[type="submit"]:hover,#page-body input[type="reset"]:hover,#page-body input[type="file"]:hover,#page-body button:hover{background:#fefefe}
#page-body input[type="button"]:active,#page-body input[type="submit"]:active,#page-body input[type="reset"]:active,#page-body input[type="file"]:active,#page-body button:active{background:rgb(238,238,238);background:-moz-linear-gradient(top,rgba(238,238,238,1) 0%,rgba(255,255,255,1) 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(238,238,238,1)),color-stop(100%,rgba(255,255,255,1)));background:-webkit-linear-gradient(top,rgba(238,238,238,1) 0%,rgba(255,255,255,1) 100%);background:-o-linear-gradient(top,rgba(238,238,238,1) 0%,rgba(255,255,255,1) 100%);background:-ms-linear-gradient(top,rgba(238,238,238,1) 0%,rgba(255,255,255,1) 100%);background:linear-gradient(to bottom,rgba(238,238,238,1) 0%,rgba(255,255,255,1) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#eee',endColorstr='#fff',GradientType=0 );box-shadow:inset 0 -1px 1px rgba(0,0,0,0.09)}
.pun .frm dd.frm-input,.pun .frm dd.frm-input input,.pun .frm dd.frm-textarea{width:82%;margin-right:-5% !important}
fieldset.frm-set dl dt{display:block;width:225px!important;float:left;font-weight:700;text-align:right}
.pun .frm div.posting-block dd.frm-textarea{width:94% !important;margin-left:-25px !important}

I noticed there was a pseudo selector unique to Chrome causing an error.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Button size problem

Post by Luffy on November 18th 2014, 11:42 pm

Lol now it changed for me..hehe

Sorry man this is the result.. :/






Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Solved Re: Button size problem

Post by Ange Tuteur on November 19th 2014, 12:14 am

Could you send me a test account by PM ?

Thanks

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Button size problem

Post by Luffy on November 19th 2014, 12:16 am

Ofc. I just did it! Smile






Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Solved Re: Button size problem

Post by Ange Tuteur on November 19th 2014, 12:25 am

Thanks ^^

I found your problem. This rule is setting the height to 20px :
Code:
input {
  border: 1px solid #DDD8EE;
  color: #333;
  height: 20px;
}

You can override it by setting the height of the buttons to a higher value :
Code:
#page-body .button, #page-body input[type="button"], #page-body input[type="file"], #page-body input[type="reset"], #page-body input[type="submit"] { height:35px }

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Button size problem

Post by Luffy on November 19th 2014, 12:35 am

Ok that fixes my view of the buttons. Now all we have to do is to wait until some of the other members login and tell me if they can see it correctly now.






Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Solved Re: Button size problem

Post by Ange Tuteur on November 19th 2014, 12:40 am

Okay, you can let us know when you're ready. Smile

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Button size problem

Post by Luffy on November 19th 2014, 11:12 am

This is now solved as all members can see the buttons normal size!
Thank you all for your time!
Very good






Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Solved Re: Button size problem

Post by Ramdaman on November 19th 2014, 1:33 pm

Topic solved and archived.

Ramdaman
Active Poster

Male Posts : 1614
Reputation : 96
Language : English, Albanian, Macedonian, Russian | HTML, CSS
Location : New York City

http://ndihme.forumotion.com/forum

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum