I currently have a simple form with a text input that has a blue background set by css. It all works perfectly and looks good in firefox and ie but not on an iPhone or safari? How can I arrange it so that there is an image behind the input rather than a background?
Please note, there are other images either end of the input, see - http://stack.uk.to
The only issue I see is that the CSS for your input says its height should be 48px. Your images that sit next to it are 50px in height. If you change the input's height to 50px it seems to match.
style.css:
.loginInput {
margin-right: -11px;
background: #0099FF;
padding: 0;
color: #000066;
font-size: 36px;
font-family: 'Cubano', Arial, sans-serif;
vertical-align: bottom;
height: 50px;
border: none;
}
Related
I have a html button with below CSS.
.myButton{
background: url("../images/button.png") no-repeat top left;
height: 21px;
width: 78px;
text-align: center;
color: #696969;
font-family: Arial,Helvetica,sans-serif;
font-size: 11px;
border: medium none white;
}
It renders nicely in IE. But in Fire Fox it does not render the text in center. It renders as below:
How can I align the text to center in FF. In IE it is proper?
There must be additional CSS code that applies to your button. With only the given CSS the button looks different: http://jsfiddle.net/xQmHA/
<button class="myButton">TEST</button>
You can check which style rules apply to your button from within Firefox (F12 --> CSS --> Select your button)
I changed background: url("../images/button.png") no-repeat top left to background: url("../images/button.png") no-repeat top center and is working fine....
Try this,
.myButton{
padding:0;
background: url("../images/button.png") no-repeat top left;
height: 21px;
line-height: 21px;
width: 78px;
text-align: center;
color: #696969;
font-family: Arial,Helvetica,sans-serif;
font-size: 11px;
border: medium none white;
outline:0 none;
}
You need to reset default style sheet of any browser before adding your styles. In this case I suspect it is the padding that is by default added by FF/IE that makes it not work for you.
Please find an Appropriate reset style for the Element before you add your own.
I know this has been asked a couple of times before, but not of the solutions seem to be working in this case. Basically, I want the word "play" to be centered vertically and horizontally on this button. Horizontally, the text behaves itself, but vertically, not matter what I try, it is always a little bit lower than it should, in all browsers I test it on. Does anyone have any suggestions? Thanks
<style type="text/css">
button {
font-family: Verdana, Geneva, sans-serif;
color: white;
border-style: none;
vertical-align: center;
text-align: center;
}
button:hover {
cursor: pointer;
}
button::-moz-focus-inner /*Remove button padding in FF*/
{
border: 0;
padding: 0;
}
.start {
background-color: #0C0;
font-size: 2em;
padding: 10px;
}
</style>
<button type="button" class="start">play</button>
The padding on .start is likely what you'll have to play around with, although the way it's set, it should be centering it, but you can break it out to something like padding: 8px 10px 10px 10px;
You might also check and set the line-height under .start and see if it helps.
The correct value for vertical-align is middle, not center. However I'm not sure if that'll make the difference, because it might just affect where the button itself is aligned vertically relative to surrounding text. I'm pretty sure button text is vertically centered by default, though...
there is a difference in how firefox and chrome render the padding in css.
what appears correct in chrome is extra padded in firefox. is there a way to solve?
.button {
font-family: helvetica, arial;
font-size: 64px;
width: 70px;
height: 45px;
font-weight: bold;
padding: 0px;
padding-top: 25px;
background-color: #000;
color: #fff;
text-align: center;
float: right;
margin: 7px 10px 0 0;
}
If your .button is a button this might be a mozilla inner focus thing... try this?
.button::-moz-focus-inner { border: 0; padding: 0; margin:0; }
Firefox and Chrome render padding exactly the same way. Your problem is elsewhere.
Are you using a reset CSS? If not, the default line-height declaration might be interfering with the rendering of your button.
For one, your height is way smaller than your font-size. Since you don't have overflow specified, your height will always be extended to at least font-size (or whatever your line-height specifies).
If your .button class is actually a <button> element, also apply superUntitled fix.
The focus-inner fix works but I also add negative top and bottom margins to get it to the right height. e.g.:
*::-moz-focus-inner {
padding: 0;
border: 0;
margin-top:-1px;
margin-bottom:-1px;
}
I used to love Firefox, but it has become a bloated mess and fell off my Christmas list years ago.
You are actually correct - there is a bug in Firefox where the button element's line height cannot be changed with the CSS line-height property.
See this link for details: http://www.cssnewbie.com/input-button-line-height-bug/
The solution is to use padding instead of line-height.
u can set a different padding for firefox
.button {
padding:0;
}
#-moz-document url-prefix() {
.button {
padding:10px;
}
}
The way that worked for me was to set the height of the object so that firefox, chrome and opera render it the same way, and remove all padding.
.footertext6{
float: left;
padding-top:10px;
width: 160px;
height:102px; */setting height here*/
background-color:#ffffff;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 15px;
border-top-right-radius: 50px;
}
I want to have a standard method of formatting "Show More" links in my HTML pages.
In HTML I use:
<span class="showMore">Show more details</span>
Then in the css, I have:
.showMore {
color: #0E4B82;
padding-left: 18px;
background: url("images/icons/add.png") no-repeat 0px 0px;
}
.showMore:hover {
color: #F5891D;
cursor: pointer;
}
where add.png is a 16x16 famfamfam silk icon. I use JavaScript to expand some content section using an onclick event.
This works nicely in Firefox 3.0.5 but in IE 7 the last few pixels of the icon are chopped off. I'm looking for a workaround. Using height doesn't work on inline elements like <span/>. Adding a transparent border fixes the issue in IE7:
.showMore {
border: 1px solid transparent;
color: #0E4B82;
padding-left: 18px;
background: url("images/icons/add.png") no-repeat 0px 0px;
}
But IE6 doesn't handle the transparency. Making the text bigger fixes the problem but I don't want big text. line-height doesn't work. Anyone know anything that may help?
I've solved the problem. I've no idea why but using no-repeat center left instead of no-repeat top left ensures IE doesn't chop off the bottom 2px of the icon. Why using center instead of top should result in the image being higher is strange but that's IE for you??
.showMore {
color: #0E4B82;
padding-left: 18px;
background: url("images/icons/add.png") no-repeat center left;
}
.showMore:hover {
color: #F5891D;
cursor: pointer;
}
Does
display: block;
height: 16px;
Help fix the height of the span?
I have a webpage that is using third-party HTML that I cannot change. I can however edit the CSS style sheet. I have a "sliding-doors" style button that I want to swap for the default input button on the page, but I cannot figure how to do so using only CSS.
Here is the HTML of the button:
<div>
<input type="button" style="margin: 10px 0pt 0pt; width: 60px; height: 25px; font-size: 11px;" name="search_btn" value="Search" onclick="DoSearchSalesExpanded(searchform);"/>
</div>
And here is the CSS of an existing button that I have which uses the "sliding-doors" method:
.clear {
/* generic container (i.e. div) for floating buttons */
overflow: hidden;
width: 100%;
}
a.button_oval {
background: transparent url('http://mydomain.com/projects/buttons/sliding-doors/images/bg_button_oval_a.gif') no-repeat scroll top right;
color: #222;
display: block;
float: left;
font: normal 12px arial, sans-serif;
height: 24px;
margin-right: 6px;
padding-right: 18px; /* sliding doors padding */
text-decoration: none;
}
a.button_oval span {
background: transparent url('http://mydomain.com/projects/buttons/sliding-doors/images/bg_button_oval_span.gif') no-repeat;
display: block;
line-height: 14px;
padding: 5px 0 5px 18px;
}
a.button_oval:active {
background-position: bottom right;
color: #000;
outline: none; /* hide dotted outline in Firefox */
}
a.button_oval:active span {
background-position: bottom left;
padding: 6px 0 4px 18px; /* push text down 1px */
}
You need two elements to do nested background joining (aka sliding doors): an outer (background) one and an inner (foreground, containing the end-piece of the background image). If you only have a standalone <input> you're stuck.
If you can find a way to select the <div> you mentioned, you could use that as the outer element, with the button (with its natural background colour removed) as the inner. You would have to make sure the outer div was the same width/height as the inner <input>, though, perhaps by floating it left (to activate the ‘shrink-to-fit’ behaviour that comes with floats). You would also need to account for the top margin on the button, and any padding on it.
#something div {
float: left;
background: transparent url('http://mydomain.com/projects/buttons/sliding-doors/images/bg_button_oval_a.gif') no-repeat 0 10px;
}
#something div input {
background: transparent url('http://mydomain.com/projects/buttons/sliding-doors/images/bg_button_oval_span.gif') no-repeat;
border: none;
padding: 0;
}
However, as the button in question has a fixed-pixel on-page size, you don't really need to use nested backgrounds at all. You can just make one background of the right dimensons for the button.
If you are able to use the button element instead of the input element.
The following articles are quite useful.
http://jedisthlm.com/2008/03/27/flexible-css-buttons/
http://robertnyman.com/2008/03/13/styling-buttons-and-achieving-sliding-doors-with-them/
You can still use type submit and post like an input does
However, if you are relying on using this button as a submit, just beware that when using IE. it will submit the contents of the button also which will give a security exception for .net web apps.
*Edit, found a different link as original no longer works
Your only other option would be to use javascript to dynamically insert the ...my button text... tags typically used for sliding doors buttons. However this is not recommended as it will not work with JS disabled.