I have next code:
<div class="form_field">
<input type="text" />
</div>
styles
.form_field { height:22px; border:1px solid #B7AB8C; background:#FFFFEA; padding:0 5px; line-height:22px; }
.form_field input[type="text"] { width:100%; border:none; border:0; border-color: transparent; margin:0; padding:0; height:22px; line-height:22px; }
In IE7 I can't remove the border around the input field.
What are the ideas?
The best decision for myself, I identified as set a class for field "input" as recommended "tylerdurden".
And I add next properties for this field as "background:transparent; vertical-align:top;".
But I could not override the property line-height for field "input".
What are the ideas? (:
Added: I removed the property "height" for container .form_field - helped to align text vertically.
For IE7 you'll have to add a classname to the input element, or select it in a different way as IE<8 doesn't support attribute selectors.
But this css should work with the right selector:
.form_field input
{
border:0
}
But please note that using border-color: transparent; with border: none; will impact the input’s box model by removing the border dimensions.
This will alter the input’s relationship, like vertical positioning, with surrounding elements.
This is because the code below for input[type="text"] is not known in IE7 or below.
.form_field input[type="text"] { width:100%; border:none; border:0; border-color: transparent; margin:0; padding:0; height:22px; line-height:22px; }
Note: IE7 and IE8 support attribute selectors only if a !DOCTYPE is specified. Attribute selection is NOT supported in IE6 and lower.
You may want to add this to the top of your html.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
You don't need quotes around "text" in the CSS selector. Instead of all those border proerties, just do border: 0; on its own (or if you want to be thorough border: 0px none transparent but that's overkill)
Give a class to text field ;
.form_field .textInput
{
border:none;
}
Then in your html;
<div class="form_field">
<input type="text" class="textInput" />
</div>
Try this
<!--[if IE]>
<style type="text/css">
.form_field input{
filter:chroma(color=#000000);
border:none;
}
</style>
<![endif]-->
It seems IE7 doesn't want the "none" value, "0" seems to work.
Related
How do you get the :before pseudoclass to render properly? Do I need some special CSS to make this work?
This does not work and does not display anything:
http://jsfiddle.net/XzMH6/
HTML
<div id="test"></div>
CSS
#test:before{
width:100px; height:100px; background: #ddd;
display:block;
}
You need the content property.
#test:before{
width:100px; height:100px; background: #ddd;
display:block;
content: "";
}
http://jsfiddle.net/ULfeu/
try this
please add this content:"" in #test class then :before is working properly
Demo
I want to use my custom style on input[type="submit"] button with jquerymobiles button but it is not working.
My html code is:
<input type="submit" value="Button name">
My css code is:
input[type="submit"]
{
border:1px solid red;
text-decoration:none;
font-family:helvetica;
color:red;
background:url(../images/btn_hover.png) repeat-x;
}
Same style applies when I use following html code:
Button name
jQuery Mobile >= 1.4
Create a custom class, e.g. .custom-btn. Note that to override jQM styles without using !important, CSS hierarchy should be respected. .ui-btn.custom-class or .ui-input-btn.custom-class.
.ui-input-btn.custom-btn {
border:1px solid red;
text-decoration:none;
font-family:helvetica;
color:red;
background:url(img.png) repeat-x;
}
Add a data-wrapper-class to input. The custom class will be added to input wrapping div.
<input type="button" data-wrapper-class="custom-btn">
Demo
jQuery Mobile <= 1.3
Input button is wrapped by a DIV with class ui-btn. You need to select that div and the input[type="submit"]. Using !important is essential to override Jquery Mobile styles.
Demo
div.ui-btn, input[type="submit"] {
border:1px solid red !important;
text-decoration:none !important;
font-family:helvetica !important;
color:red !important;
background:url(../images/btn_hover.png) repeat-x !important;
}
I'm assume you cannot get css working for your button using anchor tag. So you need to override the css styles which are being overwritten by other elements using !important property.
HTML
Button name
CSS
.selected_btn
{
border:1px solid red;
text-decoration:none;
font-family:helvetica;
color:red !important;
background:url('http://www.lessardstephens.com/layout/images/slideshow_big.png') repeat-x;
}
Here is the demo
I have a problem with margin-top/bottom on <a> elements - it doesn't seem to work.
This is the HTML code:
<div class="pages-link">
1
2
3
....
</div>
This is the CSS code:
.pages-link {
margin:2em 0;
word-spacing:.25em;
}
.pages-link a {
background:#d7d7d7;
border:1px solid #ccc;
-moz-border-radius:3px;
-webkit-border-radius:3px;
-khtml-border-radius:3px;
border-radius:3px;
color:#333;
padding:.3em .5em;
text-decoration:none;
}
This is how the final result looks like. The problem is obvious, I want 5 or 10px of margin-bottom for the <a> elements, but the property doesn't get applied.
What am I missing?
You need to add display: inline-block; to your anchor selector. Anchors are by definition inline elements and do not accept width, height, margin etc until they are defined as block level or inline-block elements.
I think you're better of doing display:block; and float:left; because display:inline-block; is not supported in all browsers.
I need to remove the border-top: 1px solid #202020; from .contact on my contact page only, and leave as is in all other .contact instances. Is this possible? If so, how do I make these changes?
Thank you.
Give that page's body a special class like
<body class="contact-page">
Then in your css
body.contact-page .contact{
border-top:0;
}
You can add class to body or other wrapper tag like <body class="contacts-page">
Then use the following CSS .contacts-page .contact { border-top: none }
Add this lines to your http://frshstudio.com/wp-content/themes/frsh/style.css file:
.contact_contact{border-top: none;}
and your html:
<div class="contact contact_contact">
<p>
<span>Let's Chat</span>
</p>
</div>
You can always override stylesheet css with inline css. So like all the other people suggested, put .contact { border-top: none; } but do it like this
<head>
<style>
.contact { border-top: none; }
</style>
</head>
This will only disable the border on your page while all your other pages will obey the stylesheet.
How can i override img css for particular image.
Let say ,
i have css in my website like
img{
border:2px solid #ECECEC;
padding:4px;
}
i have one img with in the website say <img id="example" src="../example.png"/>
Now , i don't want to apply img css to this particular image.
How can i do that?
Thank
use the id as a selector and change the css properties you want.
#example{
border:0;
padding: 0;
}
img#example {border:none !important; }
No border for image with example id
If for some reason you can't touch the markup, you could use an attribute selector.
img[src="../example.png"] {
border:0;
padding:0;
}
add a separate class to the image
Example
<img class="example" id="example" src="../example.png"/>
.example{
border:0 !important;
padding: 0 !important;
}
Try this example:
Give it an inline style, mine worked very simply