I've been racking my brains out to fix this but I am not an HTML/CSS expert so I'm out of my wits.
The placeholder text is shown too high from the center of the input box element.
See the following image:
How can I fix this? You can see them live at http://siliconalley.com. When you type inside the input, it actually looks alright. It's just the placeholder that is looking weird.
Your current line-height is 1, change it so it is equal to the height of your element and it becomes centered.
line-height: 30px;
Your line-height:1; declaration is causing the problem. Remove this for .navbar-search .search-query and it should be fine.
You can force the line-height style the value of auto, with that u will fix the problem in Chrome and won't mess up in IE. I've tested on FF, Chrome and IE
.search-query {
line-height: auto !important;
}
your CSS is looking Like this
Actually it is line-height problem
.navbar-search .search-query {
margin-bottom: 0;
padding: 4px 14px;
font-family: Open Sans,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 13px;
font-weight: normal;
line-height: 1;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
Change to Like this
.navbar-search .search-query {
margin-bottom: 0;
padding: 4px 14px;
font-family: Open Sans,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 13px;
font-weight: normal;
line-height: 21px; /**change the Line-height to like this**/
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
Related
I just started to learn html and css again and I am struggling with some weird stuff that I didn't see before.
I have this button
.btn {
display: inline-block;
font-size: 1em;
background: #fff;
padding: 30px 30px;
text-transform: uppercase;
text-decoration: none;
font-weight: 500;
margin-top: 10px;
color: #111;
letter-spacing: 2px;
transition: 0.2s;
}
Explore
this all good but if you pay attention there is some margin or just some space at the bottom
inside the blue square I just want to be the text height so it will be centered perfectly
I check your codes in my editor and it is correct perfectly. Your codes' problem is due to over-code or other ones.
This image is from my Chrome browser:
I am working on this website: http://box5155.temp.domains/~grownows/
In the top menu bar, I want "Get In Touch" to have the following CSS working on it so it stands out more:
font-size: 120%;
text-transform: none;
I also want a green border box around it but I haven't even figured that out yet lol.
So I've tried just doing these in CSS but those didn't work (the only thing that strangely worked is changing the font to Escafina.) I did use !important on the font-size and text-transform but that didn't work.
.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-
50.menu-item-link {
font-size: 120%;
font-family: 'Escafina';
text-transform: none;
color: blue;
}
#menu-item-50 {
text-transform: none;
font-size: 120%;
}
So then I gave the "get in touch" the title attribute "getintouch" and tried this:
.a[target="getintouch"] {
text-transform: none;
font-size: 120%;
}
Now I am stuck. I tried without a "." selector before the a too. Any suggestions?
This worked when I tested it:
li#menu-item-50.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-50.menu-item-link a {
font-size: 120%;
text-transform: none;
border: 1px solid #b4d447;
padding: 0 17px !important;
max-height: 34px;
}
Im using Contact Form 7 on my WP site, and I'm experiencing a strange issue with the submit button. Im using the following class for the button:
.ctaredbutton
background-color: #EA3939;
border-radius: 40px 40px 40px 40px;
color: #FFFFFF !important;
font-family: Proxima Nova,Helvetica,sans-serif;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.02em;
padding: 22px 30px;
text-transform: uppercase;
margin-left:20px
The button displays as expected in Firefox (http://cl.ly/SQ5Y) but there appears to be extra padding in Chrome (http://cl.ly/SPcr). The form is live at 'elitegolfusa.org/apply'
Has anyone seen this before? I've got no idea where the additional top padding has came from?
Ditch the padding on the top/bottom altogether and use line-height. Set line-height to whatever height you want the button.
.ctaredbutton{
background-color: #EA3939;
border-radius: 40px 40px 40px 40px;
color: #FFFFFF !important;
font-family: Proxima Nova,Helvetica,sans-serif;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.02em;
line-height:45px; // I added this
padding: 0 30px; // I changed this
text-transform: uppercase;
margin-left:20px
}
I have applied two different styles for two different text buttons.
.BC {
background-color : DC143C;
color: white;
font-size: 12px;
display: block;
height: 21px;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
text-align: center;
text-decoration: none;
font-weight: bolder;
}
.DE {
background-color : black;
color: white;
font-size: 12px;
display: block;
height: 21px;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
text-align: center;
text-decoration: none;
font-weight: bolder;
}
The look and feel of the buttons are great in Mozilla,chrome,Opera and Safari browser with the expected colour changes(ie the button appers with default length and the text is wrapped inside it).But in IE8 and IE9 the color is applied only upto the text what I have mentioned and adjusts itself with the buttton structure.
Can you please help me with this?
Hey used to # before in color
as like this
background-color : #DC143C;
and replace this one
.BC{background-color : #DC143C;}
I'm using the following CSS:
h2 {
font-weight: normal;
border-bottom: 1px solid #DDD;
font-size: 1.6em;
font-style: italic;
}
h2 span {
position: absolute;
top: 7px;
padding-right: 6px;
background-color: #F9F9EE;
}
When used like:
<h2><span>abc</span></h2>
Gives the following effect:
abc ------------------
The text 'abc' is the heading content while the dashed line is the border being shifted. The following approach works well so long as you only use it once on the page. My question is, how can I achievement the same effect without using absolute positioning or even perhaps line-height since I suspect either or both are the culprits.
I do remember seeing the same effect being used on a few blogs but the url slips my mind.
Thank you. :)
As Rory mentioned, using position relative on the H2 tag solves the problem without the use of an image.
h2 {
font-weight: normal;
border-bottom: 1px solid #DDD;
font-size: 1.6em;
font-style: italic;
position:relative;
}
h2 span {
position: absolute;
top: -0.8em;
padding-right: 6px;
background-color: #F9F9EE;
}
This works in the three browsers I use for testing (IE, Firefox, and Chrome).
I'm not entirely sure what you're trying to do and what the problem is exactly, but adding position: relative; to the h2 style will create a positioning container in which the span position: absolute; will calculate its values from.
I don't see the effect that you described in Firefox, only in IE6.
One way you could achieve this effect is to use a single pixel background image, tiled horizontally at 50% of the height of the div. It's not as nice, since you do have to use an image, but it should look how you want without affecting the HTML.
I'd suggest something like:
h2 {
font-weight: normal;
font-size: 1.6em;
font-style: italic;
background: url(pixel.png) repeat-x 0% 50%;
}
h2 span {
padding-right: 6px;
background-color: #F9F9EE;
}
I've checked it in IE6 and Firefox, using it multiple times on the same page. :)
My favorite way to do this is:
<fieldset class="blah">
<legend>Heading</legend>
content...
</fieldset>
and then add
fieldset.blah {border-top: 1px solid #999;}
in your CSS. Hope that helps.
Try this:
h2 {
font-weight: normal;
border-bottom: 1px solid #DDD;
font-size: 1.6em;
height: 0.75em;
margin-bottom: 1.85em;
overflow: visible;
font-style: italic;
}
h2 span {
padding-right: 6px;
background-color: #F9F9EE;
}