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?
Related
I have an H2 element that I'd like underlined and with a graphic of an arrow "below" the bottom border line.
Currently, the arrow appears above and if I change the background coordinates to lower the arrow, it starts to disappear.
my code:
h2 {
background: url("images/arrow-title.png") no-repeat scroll 10px 27px transparent;
line-height: 17px;
padding-bottom: 15px;
text-transform: uppercase;
border-bottom: 2px solid #00a7a8;
}
image of what it's currently doing:
image of what I'd like to do:
and finally, a website link to a theme which does this properly. I have viewed the "inspect element" on Firefox and can't seem to adjust the CSS to make it work. :(
Website link to theme that looks correct: http://www.joomlart.com/demo/#ja_travel
What they are doing is putting a <span /> inside the <h2 /> tag and giving the span the border-bottom instead of the <h2 />
This way the <h2 /> has the arrow as a background image and since the <span /> adds a 3px padding on the bottom it is aligned perfectly.
<h2>
<span>
This is my header
</span>
</h2>
and then something like this
h2{
background: url("../images/arrow-title.png") no-repeat left center;
}
span{
border-bottom: 2px solid black;
padding-bottom: 3px;
}
Add a span inside your H2. Apply the border to that span and use padding-bottom on the H2 to adjust the arrow position.
If you prefer not to use a background image, you can try using a pseudo-element:
h2 {
line-height: 17px;
padding-bottom: 15px;
text-transform: uppercase;
border-bottom: 2px solid #00a7a8;
position: relative;
}
h2:before {
content: '\25bc';
position: absolute;
top: 100%;
left: 5em;
color: #00a7a8;
}
See fiddle reference: http://jsfiddle.net/audetwebdesign/kFSvL/
The major advantage is the simplicity of the markup:
<h2>The Header Is Here</h2>
No extra tags required!
Make the underline part of the background image. It clearly should be from a visual perspective, so it might as well be from a technical perspective.
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;
}
I am trying to create input text like below Image :
First I used CSS3 with some help like this fiddle . because of problems with old browsers I reached to don't use CSS3.
Now I coded like this :
input[type=text]
{
color: #979797;
height: 28px;
padding-left: 10px;
text-decoration: none;
background-image: url('Pictures/Input-BG.png');
background-repeat: repeat-x;
}
<input id="txtScrictAddress" value="Your Adress (required)" type="text" />
Input-BG.png is this image :
and here is the result.
Did I slice input image right ?
Input has a left border color , How should style the input in css like the image?
You just need to set a border radius and border to none. And edit your image so the dark thing is on the left side also.
input[type=text]
{
color: #979797;
height: 28px;
padding-left: 10px;
text-decoration: none;
background-image: url('http://i.stack.imgur.com/pbpVI.png');
background-repeat: repeat-x;
border-radius: 5px; /*up to date browsers support this, but you can add prefixes if you want*/
border: 0;
}
http://jsfiddle.net/TGzng/8/
if you want to use images to get something where both ends differ, you will at least need 2 images to get that. try to search for "sliding doors input css". maybe this topic on SO helps you out (but there are a million other examples out in the web and on Stackoverflow).
You need to add a border-radius to round the edges. This won't work pre-IE8 though.
input[type=text]
{
color: #979797;
height: 28px;
padding-left: 10px;
text-decoration: none;
background-image: url('http://i.stack.imgur.com/pbpVI.png');
background-repeat: repeat-x;
border:1px solid #777;
border-radius:5px
}
As for image slicing, easy way to get the left shadow part means you need to have a very wide image for the background. Or do that sliding doors thing the other person suggested.
I want to use Rounded Corner Button in my asp.net application. Do we have anything in ASP.NET 3.5 which helps us to make a rounded corner button ?
Here is the control and css that I'm using. My button is square, but it is not the case. You can create the rounded image by youself.
<asp:LinkButton ID="lbtnSignIn" class="button" runat="server" OnClick="lbtnSignIn_Click"><span>Sign In</span></asp:LinkButton>
.button
{
background: transparent url('../../Images/ButtonLeft.gif') no-repeat top left;
display: block;
float: left;
line-height: 11px; /* 21px (Button Background) = 5px (padding-top) + 11px (font-size) + 5px(padding-bottom) */
height: 21px; /* Button Background Height */
padding-left: 9px;
text-decoration: none;
font-weight: bold;
color: white;
font-size: 11px;
}
a:link.button, a:visited.button, a:active.button
{
color: white;
text-decoration: none;
margin-right: 10px;
}
a.button:hover
{
background-position: bottom left;
}
a.button span, a.button span
{
background: transparent url('../../Images/ButtonRight.gif') no-repeat top right;
display: block;
padding: 5px 9px 5px 0; /*Set 9px below to match value of 'padding-left' value above*/
}
a.button:hover span
{
background-position: bottom right;
color: white;
}
You could use the ajax control toolkit which has a rounded corners extender. Personally I have never used it in a project. I use the css3 border-radius and just let the IE users live with the square borders until their browser catches up (http://www.cssportal.com/css3-rounded-corner)
Here is the link to the control extender sample.
http://www.asp.net/ajax/ajaxcontroltoolkit/Samples/RoundedCorners/RoundedCorners.aspx
How about applying a CSS style to your button?
Sample code, demo, tutorial at Oscar Alexander
Using the code there, you can ensure all buttons get the style exactly as you want.
As p.cambell told you, the tecnique at this link works great: http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html
But you've to substitute your "button" server control with an HyperLink server control , this because, the css is applied to the "a" tag.
So, in Visual Studio, instead draw a button, draw an HyperLink with CssClass="button"
Bye!
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.