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:


avatar
Luffy
Manager
Manager

Male Posts : 4460
Reputation : 444
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

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
avatar
Ange Tuteur
Forumaster

Male Posts : 13072
Reputation : 2743
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%;
}





avatar
Luffy
Manager
Manager

Male Posts : 4460
Reputation : 444
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

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%;
}
avatar
Ange Tuteur
Forumaster

Male Posts : 13072
Reputation : 2743
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:
avatar
Luffy
Manager
Manager

Male Posts : 4460
Reputation : 444
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

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.

avatar
SLGray
Administrator
Administrator

Male Posts : 38038
Reputation : 2564
Language : English
Location : United States

http://ztwds.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.





avatar
Luffy
Manager
Manager

Male Posts : 4460
Reputation : 444
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

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
avatar
Ramdaman
Active Poster

Male Posts : 1614
Reputation : 97
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





avatar
Luffy
Manager
Manager

Male Posts : 4460
Reputation : 444
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

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
avatar
Ghost Pirate
Forumember

Male Posts : 273
Reputation : 82
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.
avatar
Ange Tuteur
Forumaster

Male Posts : 13072
Reputation : 2743
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.. :/





avatar
Luffy
Manager
Manager

Male Posts : 4460
Reputation : 444
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

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
avatar
Ange Tuteur
Forumaster

Male Posts : 13072
Reputation : 2743
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





avatar
Luffy
Manager
Manager

Male Posts : 4460
Reputation : 444
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

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 }
avatar
Ange Tuteur
Forumaster

Male Posts : 13072
Reputation : 2743
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.





avatar
Luffy
Manager
Manager

Male Posts : 4460
Reputation : 444
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

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
avatar
Ange Tuteur
Forumaster

Male Posts : 13072
Reputation : 2743
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





avatar
Luffy
Manager
Manager

Male Posts : 4460
Reputation : 444
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Button size problem

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

Topic solved and archived.
avatar
Ramdaman
Active Poster

Male Posts : 1614
Reputation : 97
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