Evening,
HTML:
<input type="text" class="search" value="Search"><input type="button" class="searchimg" value="Search" />
CSS:
input.search {
font-size: 1em;
color: #383838;
margin: 7px 0 0 7px;
padding: 3px;
border: 1px solid #969696!important;
background: #FEFEFE!important;
height: 16px;
width: 250px;
}
input.searchimg {
text-indent: -99999px;
width: 24px;
height: 24px;
display: inline;
background: url(../images/search.jpg) 0 0 no-repeat;
border: 0px;
margin: 7px 0 0 0;
}
(search.jpg dimentions: 24x24px, 1px border is part of image, not CSS! http://img267.imageshack.us/img267/6779/searchr.png)
Top version shows how it's supposed to render, the bottom picture is showing how it is actually rendering, in all broswers. It is 2px higher than it's supposed to be. I'm not really sure why it's doing this.
Thanks.
Try removing the line margin: 7px 0 0 7px;
Try vertical-align:top on input.search { ... } this should work because your input is affected by (previous?) inline styles.
For the future: it's easier to operate on elements styled with display:inline-block and it's well supported in browsers (IE 7 needs an small hack, IE 6 should be dead already).
Related
This is what i´m trying to achieve:
But I can´t make the background be as long as the text while keeping the shadow with the whole content... I just get this:
As you can see it makes two shadows... this is my markup and css:
<span class="interior_title">Samsung, HP Pop-Tops Do Double Duty <br>Rich Jaroslovsky</span>
span.interior_title{
background: #c7c7c9;
font-size: 50px;
color: #2f2f31;
width: 550px;
font-family: 'chaletcomprime';
margin: 0 auto;
text-transform: uppercase;
line-height: 47px;
padding: 0px 15px;
margin-left: 90px;
-moz-box-shadow: 0 0 7px #000;
-webkit-box-shadow: 0 0 7px #000;
box-shadow: 0 0 7px #000;
}
Any ideas on how to do it?
Example
It's close to what you want.
I made it like this. Two elements floated left one under the other one. Same style only the width is different.
<span class="one">Extra line here bal bal bal </span>
<span class="two">Line TwoM<span>
Now the problem here was the extra shadow that was casting on .two, I fixed that by using
.two:before{
background: tan;
content: "";
height: 10px;
left: 0;
position: absolute;
top: -10px;
width: 100%; }
Don't worry about IE, because :before work on IE8 as for the box-shadow it stops at IE9.
1st sorry if the title is not 100% at the pont, i really have no idea how to compose it.
Anyway here is a simple problem with 100% width layout. I have a form that is inside a fluid container, it has - 1 input, 1 select, 1 button, they all are align inline (horizontal)
the problem when i minimize the window the button and then the select list they move down. which i dont want that.
Here is a example in the fiddle http://jsfiddle.net/4GSLE/ you can minimize the html part and you will see the problem.
How to make them to be in one line and not to move down?
.main {
max-width: 1200px;
margin: 0px auto;
background-color: #eee;
line-height: 50px;
padding: 10px;
}
form {
padding: 0 0 0 0;
margin: 0 0 0 0;
display: block;
}
.clear {clear: both;}
input, select {
float: left;
height: 50px !important;
padding: 0 10px;
width: 66% !important;
border: 1px solid #d6d8db;
margin-right: 20px;
}
input.button {
height: 54px !important;
padding: 0 10px;
margin-top: -1px !important;
width: 125px !important;
border: 1px solid #d6d8db !important;
background: #333;
cursor: pointer;
color: #fff;
}
select {
width: 200px !important;
height: 52px !important;
}
html:
<div class="main">
<form>
<input type="text" name="" value="search" />
<select>
<option>select</option>
</select>
<input type="submit" name="" value="Search now" class="button" />
</form>
<div class="clear"></div>
</div>
Some CSS tweaking to the form, input, and select selectors should do the trick.
form {
padding: 0;
margin: 0;
display: block;
white-space: nowrap;
}
input, select {
display: inline-block;
height: 50px;
padding: 0 10px;
width: 66%;
border: 1px solid #d6d8db;
margin-right: 20px;
}
Demo Here
Side note: Unless you really need them, all those !important declarations will end up causing more trouble than solving issues. I'd avoid !important as much as possible.
i'm trying to customize a text input with css, i want the text inside it to have a margin of 10px to the left so i use:
#text{
text-indent: 10px;
border: 1px solid #333;
outline: none;
padding: 0;
margin: 0;
width: 168px;
height: 20px;
border-radius: 4px;
}
It works in all browsers except for IE10 which seems to ignore the text-indent property, how can i fix it?
<input type="text" id="text" />
you can use padding-left, it works on all browsers:
#text {
padding: 0 0 0 10px;
border: 1px solid #333;
outline: none;
margin: 0;
width: 158px; //decrease width with the same padding vale so that the width would stay the same
height: 20px;
border-radius: 4px;
}
If you want to use a special rule for IE, adding display: inline-block and a line-height, along with the text-indent rule, will fix this as well. This is an old trick for both IE7-9 as well.
input.special {
text-indent: 150px;
display:inline-block;
line-height: 18px;
}
Does the trick.
This is good if you are using liquid or responsive widths and you don't want to have to adjust your input's width on account of the padding.
I'm trying to get some elements to move slightly when the user mouses over them (they form buttons on a navbar). However, my code doesn't seem to work. The text in the boxes should also be clickable but that doesn't seem to work either. Here's the code:
#navbar {
position: relative;
width: max-width;
height: auto;
margin-left: 2%;
}
.nav_tab{
background-image: url('dark_exa.png');
border: 2px dashed grey;
/* rounded borders of 5px in firefox */
-moz-border-radius:10px;
/* rounded borders of 5px in chrome and other browsers */
-webkit-border-radius:10px;
/* rounded borders of 5px in browsers that support css3 */
border-radius:10px;
/* shadows for different browsers */
-moz-box-shadow: 0 0 0 3px black, 2px 1px 4px 4px rgba(10,10,0,.5);
-webkit-box-shadow: 0 0 0 3px black 2px 1px 4px 4px rgba(10,10,0,.5);
box-shadow: 0 0 0 3px black, 2px 1px 6px 4px rgba(10,10,0,.5);
position: relative;
height: auto;
width:20%;
z-index: -1;
margin-left: 2%;
margin-right: 2%;
top: -30px;
display: inline-block;
}
.nav_tab:hover{
position: relative;
top: +5px;
}
h1 {
font-size:40px;
text-align: center;
color: white;
font-family: "Gabriela";
margin: 20px;
margin-top: 130px;
}
h2 {
font-size:30px;
text-align: center;
color: white;
font-family: "Gabriela";
margin: 10px;
margin-top: 40px;
}
And the HTML:
<div id="navbar">
<div class="nav_tab"><h2>Zues</h2></div>
<div class="nav_tab"><h2>Jack</h2></div>
<div class="nav_tab"><h2>Denise</h2></div>
<div class="nav_tab"><h2>Joel</h2></div></div>
I'm not entirely sure what's going on here, though I presume it's some kind of parent-child issue.
Thanks.
The link is not clickable because you gave the .nav_tab class a negative z-index value just adjust it to a value => 0 and it'll work.
The z-index: -1; of the .nav_tab css it's your problem, it makes the container behind the page so any mouse event won't work (hover, pointer, etc) remove it and your ready to go:
see the jsfiddle demo:
http://jsfiddle.net/QmVFR/64/
I am using Fx 9 and my following code breaks in it while it works in all other browsers including IE9.
EDIT
Please note that I just want to know about this particular code breaking not interested in how to actually get work done because I am learning CSS not doing work for any client.
HTML
<form id="sform" action="index.htm">
<input class="sfield" type="text" value="Search..." />
<input class="sbutton" type="button" value="Go" />
</form>
CSS
#sform {
display:inline-block;
border: solid 1px #d2d2d2;
padding: 10px 10px;
border-radius: 2em;
box-shadow: 0 1px 0px rgba(0,0,0,.1);
background: #f1f1f1;
letter-spacing: -4px;
}
:not(#sform){
letter-spacing: -4px;
}
.sfield {
padding: 6px 35px 6px 8px;
border: solid 1px #bcbbbb;
width: 202px;
border-radius: 2em;
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}
.sbutton {
color: #fff;
background: #5f5f5f;
margin-left: -52px;
border: solid 1px #494949;
height: 27px;
width: 27px;
border-radius: 2em;
}
http://jsfiddle.net/UfK6K/8/
The behavior of your testcase will depend on the precise font size the user has set and the font that gets used. It will also depend on how the UA decides to handle negative letter spacing; the spec allows it to be capped or ignored altogether. From http://www.w3.org/TR/CSS21/text.html#spacing-props :
This value indicates inter-character space in addition to the default space between characters. Values may be negative, but there may be implementation-specific limits.
Add position: absolute; to .sbutton.
Is that the desired outcome?
Why use letter-spacing there anyway? I don't see the logic behind this decision.
I think you may have to rework that code, try with something like this, it's cleaner and it should work in all browsers, IE8+ just fine. Adjust to your needs:
html
<form id="sform" action="index.htm">
<input class="sfield" type="text" value="Search..." />
<input class="sbutton" type="button" value="Go" />
</form>
css
#sform, .sfield, .sbutton {
border-radius: 100px;
padding: 10px;
}
#sform {
position: relative;
display: inline-block;
background: #999;
border-radius: 100px;
}
.sfield {
border: 1px solid #999;
width: 300px;
}
.sbutton {
position: absolute;
right: 10px;
border: 0;
background: black;
color: white;
}
explanation:
Letter spacing increases or decreases the space between characters in a text and it seems you're using it to add padding.
Then, an absolute position element is positioned relative to the first parent element that has a position other than static.
Try removing all your letter-spacing and you'll see that the changes in the layout are minimal.
Take a look at my example and by logic you'll figure it out why it works.
example:
http://jsfiddle.net/elclanrs/7KGkJ/1/