I created a donate button and copied the exact code as provided, yet it is visually HUGE on my website. http://naomihattaway.com/about/mias-mission/
How do I get it down to a normal size?
In CSS i find this code when inspecting your donation button/image.
media="all"
input, select, textarea {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 5px;
color: #333;
font-family: 'Roboto Slab', serif;
font-size: 16px;
font-size: 1.6rem;
font-weight: 300;
padding: 10px;
padding: 1rem;
width: 100%;
}
By removing the "width:100%" the Button/image was normal sized then. Try this out and tell me if it helps.
Regards, Mike
Related
Letter spacing given -0.02rem by design, that's why space between caret and letter is too small in input. Is there any way to solve this problem without changing letter-spacing in css?
enter image description here
input, textarea {
width: 100%;
font-size: 14px;
font-weight: 600;
color: var(--text);
padding: 10px 12px;
caret-color: #00a2ed;
letter-spacing: -0.02rem;
border: 2px solid var(--text);
background-color: var(--articleBg);
}
I am just starting to use SlickGrid and amazed by its quality. However, when it comes to styling, I did not find any docs or examples recommending an overall styling approach. There are options and APIs scattered in various places, but it's very difficult to extract a strategy out of those. Also the grid leverages jQuery UI themes. Unfortunately those are interfering with what I am trying to achieve. We have picked up jQuery UI only for the calendar widget along with the ui-darkness theme. This theme works perfectly fine for the calendar widget, but the grid needs to override every aspect of it.
Here's a jsFiddle that shows the look I am trying to achieve: http://jsfiddle.net/nareshbhatia/3q6RD/. Just for illustration, it uses a regular HTML table. However I would like to achieve the exact same styling using SlickGrid. The CSS in this jsFiddle is essentially the requirement I have from my visual designer, e.g.
#positions-table th {
background-color: #505050;
color: #eeeeee;
text-shadow: none;
font-size: 13px;
height: 40px;
line-height: 40px;
}
Edit: I also created a jsFiddle with a starter SlickGrid implementation: http://jsfiddle.net/nareshbhatia/vJshY/. As you can see, the ui-darkness theme has completely taken over!
Within your second/last jsFiddle you can modify the CSS to have this code
.slick-header-column.ui-state-default {
background:none ;
background-color: #505050 ;
color: #eeeeee;
border: none;
padding: 0;
text-shadow: none;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 13px;
height: 40px;
line-height: 40px;
}
.slick-row.ui-widget-content, .slick-cell {
background: none;
background-color: #eeeeee;
color: #666666;
border: none;
border-bottom: solid 1px #ffffff;
font-size: 14px;
height: 60px;
line-height: 60px;
padding: 0 5px;
}
This is my site:
http://www.michelepierri.it/
I correctly see my theme in FF and IE but if I open it in Chrome menu voice are not correctly visualized:
Can you help me to resolve this problem?
After reviewing your css, I found too many unused styling please remove those and use these rules:
.menu li {
float: left;
}
.menu a {
white-space: nowrap;
border-left: 1px solid #585858;
color: #fff;
display: inline-block;
font-size: 13px;
font-weight: 700;
height: 45px;
line-height: 45px;
padding: 0 0.9em;
text-shadow: 0 1px 1px #242424;
}
Please see the attachment after doing that changes.
See I am also using the same version and for me its fine
Prevent menu options from wrapping text
Add an additional style rule to your menu links CSS so all text stays in the same line.
.menu a {
border-left: 1px solid #585858;
color: #fff;
display: block;
font-size: 13px;
font-weight: 700;
height: 45px;
line-height: 45px;
margin: 0;
padding: 0 0.9em;
position: relative;
text-decoration: none;
text-shadow: 0 1px 1px #242424;
white-space: nowrap; /* THIS ONE */
}
And add the same thing to .sub-header-menu a style definition because when I check the site even Cloud Computing is wrapped and breaks the whole situation.
Advice: It is ok that you're exploring the possibilities of CSS but you're playing a bit too much with it producing legibility problems. Letter and word spacing should only be cautiously manipulated. I'd suggest to remove majority of letter and word spacing settings.
I cannot seem to change my .CSS (the file name is loginmodule.css)
I only wanted to change the font color to black.
I have edited this in Microsoft FrontPage,notepad++, notepad and it has already change but when I look it in the browser(Firefox beta, latest patch). It didn't change at all. I know I had not made a duplicate file and I am sure it is the same file I edited and opened from a browser(Firefox beta, latest patch). Is it because of the browser or something else?
body {
color: #666666;
margin: 0px;
background: #f8f7e5 url('images/abstract-bg.jpg') no-repeat center top;; font-style:normal; font-variant:normal; font-weight:normal; font-size:11px; font-family:Verdana, Arial, Helvetica, sans-serif; padding-left:10px; padding-right:10px; padding-top:20px; padding-bottom:0px
}
.textfield {
font-size: 11px;
color: #333333;
background: #F7F7F7;
border: 1px solid #CCCCCC;
padding-left: 1px;
}
h1 {
color: blue;
margin: 0px 0px 5px;
padding: 0px 0px 3px;
font: bold 18px Verdana, Arial, Helvetica, sans-serif;
border-bottom: 1px dashed #E6E8ED;
}
h2 {
font: bold 14px Verdana, Arial, Helvetica, sans-serif;
margin: 0px 0px 5px;
padding: 0px 0px 3px;
color: #99CCFF;
border-bottom: 1px dashed #E6E8ED;
}
a {
color: #2D3954;
font-size: 11px;
}
a:hover {
color: #99CC00;
}
.err {
color: #FF9900;
}
th {
font-weight: bold;
text-align: left;
}
#content {
width: 860px;
margin: 238px auto 0;
background: #fff;
border: solid 1px #ccc;
padding: 20px;
}
If you want to be certain the file hasn't been cached by the browser, just append a query string to the CSS file declaration.
So inside your page/template, change the <link /> attribute like so
<link rel="stylesheet" type="text/css" href="/css/loginmodule.css?v=2" />
Alternatively, hold down CTRL and press F5 inside Firefox to do a hard refresh.
Browsers typically cache the CSS. Try closing all of your browser windows then viewing the file.
Things like that usually occur from browsers. I usually delete all history and clear cacheand it works fine. But make sure you have saved and uploaded the css to the correct directory. You can also try to view it in a browser that you don't use very often.
good luck.
Some times I may may want an anchor beside a submit button, but I always seem to have problems lining them up ...
a, input[type=submit], input[type=button], button {
font-family: arial;
background: #fff;
color: #777;
border: 1px solid #ccc;
font-size: 12px;
line-height: 20px !important;
padding: 5px 10px;
margin: 0;
}
http://jsfiddle.net/cXgzM/
with that, anchors are still 2 pixels short
Simply add this to your CSS:
a
{
display: inline-block;
}
I updated your example. Note that this property doesn't work in IE7 and lower. :)