I am using the following CSS on anchor tags with specific classes. Works OK except that long link text is forced into new lines. I guess this has to do with the width...
a.interactive {
background:url(../images/icons/icon_interactive.png) left center no-repeat;
padding-left:30px;
height:25px;
width:25px;
display:inline-block;
text-decoration: none;
vertical-align:text-center;
}
try this
a.interactive {
background:url(../images/icons/icon_interactive.png) left center no-repeat;
height:100%;
width:100%;
display:inline-block;
text-decoration: none;
vertical-align:text-center;
}
you need to maximize the width for that use 100% width or maximum width your design allow you.
a.interactive {
/*...*/
white-space: nowrap;
}
Related
Is it possible to vertically center the text on the autocomplete options I get?
As u can see the text it is on the top of the box and i apparently cannot move it vertically:
https://jsfiddle.net/tL2f6hoa/1/
.ui-menu .ui-menu-item a{
background:red;
height:3em;
}
Instead of setting a height for the object you can set a padding instead to get the same effect.
.ui-menu .ui-menu-item a{
background:red;
padding: 10px 3px;
}
Hope it Helps. Cheers!
Repeat-x property for CSS is not working as required.
I have a 50px image (to be used as background image).
I take a 200px div and set the 50px image as background with repeat-x css property.
The problem I am facing is 4 images (4 * 50px = 200px) are correctly drawn and a little portion of the image is also drawn at the end. As I think this extra portion should not be drawn. Please help.
css property:
{
width:200px;
height:27px;
position:absolute;
background:url(./img/common/bg_grid.jpg) repeat-x left top;
background-size:50px 27px;
}
from above link you may find correct background image
There is a certain level of margin or padding that is inheriting its default value from the nested/parent elements. You need to reset them in order to get what you are looking for.
From your above code, For Instance,
{
width:200px;
height:27px;
position:absolute;
background:url(./img/common/bg_grid.jpg) repeat-x left top;
background-size:50px 27px;
padding:0; /* Reset values */
margin:0; /* Reset values */
}
EDIT:
As per the updated fiddle provided by the OP, below is the solution.
WORKING DEMO
The CSS Code Change:
<div style="width:900px;height:27px;position:absolute;top:150px;right:100px;background:url(http://i.stack.imgur.com/5ebiu.jpg) repeat-x left top;overflow:hidden;background-size:45px 28px;background-repeat: space;margin:0;padding:0"></div>
Hope this helps.
try this one
.content
{
display:block;
position:relative;
float:left;
width:1000px;
background:#ccc;
height:300px;
}
http://jsfiddle.net/c9j2D/7/
I'm using this code to display sprite driven icons (if graphics are available only the icons should show up, for other devices the text is supposed to help):
Markup:
<span class="icon ok">OK</span>
CSS:
.icon { display:block; width:16px; height:16px; padding-left:40px; overflow:hidden; background:transparent url(sprite.png) 0px 0px no-repeat; }
.ok { background-position: -16px 0px; }
The sprite itself is working fine in any browser, but the text shows up in Opera and Chrome for some reason because the padding in conjuction with overflow:hidden won't work as supposed.
Any ideas how this could be improved?
Thanks in advance....
The standard way of hiding images by shifting them out of sight is to use text-indent:-9999em or something similar. It needs to really big for Opera and ems work well as they'll scale with any change in font size. Also it's a good idea to set line-height:0; font-size:0; for ie which sometimes likes to add extra space. You shouldn't need the padding to hide the text if you use text-indent.
Try negative text-indent instead.
.icon { display:block; width:16px; height:16px; text-indent: -9999px; background:transparent url(sprite.png) 0px 0px no-repeat; }
I don't know if you need just icon (16x16 box) or icon with descriptive text. Anyway, if you need just 16x16 box, you can hide text just by
.icon { display:block; width:16px; height:16px; background:transparent url(sprite.png) 0px 0px no-repeat; text-indent:-9999px; }
I have set an image 32x32px as a list style image like this:
.class li{
list-style-image:url(../images/site/img.png);
}
It works great but the problem is the text is on the bottom of the list item (because the image is 32px high the list item is also 32px high). I would like to have the text vertically centered so it looks good.
I tried:
.class li{
line-height:1em;
}
But that didn't help.
You can use the vertical-align property to specify centered alignment. Like so:
.class li {
vertical-align: middle;
}
The list-style-image tag should be applied to the list itself, and not the list item as you have. So it would be..
ul.class{
list-style-image:url(../images/site/img.png);
}
I find it rather difficult to get the image exactly to where I want when relying only on list-style to do the work.
Therefore I prefer placing the image as background inside the LI tag like so
ul {list-style-type:none}
ul li {list-style-type:none;
background:url(image.png) 1px 4px no-repeat;
margin:0;
padding-left:20px}
This results in the image being placed 1 pixel to the right and 4 pixels to the bottom measured from the top left corner of the area covered by the LI tag. margin:0 is required to avoid indentation of the LI contents, as we do this with the padding:20px to make room for the image to the left of the LI contents.
I tried all of the above and nothing worked so I did this
.coreUL li{
display:block;
list-style:none;
background-image:url(../images/factoryIcons.png);
background-repeat:no-repeat;
background-position:left 8px;
padding-top:10px;
padding-left:50px;
height:100px;
}
Now that works like a charm -- infact this also gives me more control on the exact place where i wanted to put my li images . The images I used were 32 X 32 px in size so I gave them a little extra padding by making that 50px;
i hope this helps.
Setting your line-height to the height of the element will align text vertically. So if you <li> height is 32px then set your line-height to 32px.
.class li { height:32px; line-height:32px; list-style-image:url(img.png); }
#mindmyweb, yes indeed your solution works. But your example was a bit too decorated with 100px high lines, so here is a more modest example.
The image should be a 20x20 png bullet, centered, wıth bevel etc, with 3px shadow edge area.
.post li, .page li {
background-image: url("images/bullet-square-big-red.png");
background-position: left 2px;
background-repeat: no-repeat;
list-style: none outside none;
margin-bottom: 12px;
padding-left: 25px;
padding-top: 0;
}
Works exactly same in firefox 24, chrome 30, ie>=7.
Two problems, both caused by IE7
www.myvintagesecret.com
1) I have a Div called .postheader that holds the title and another div called .clip . As you can see, the clip should hover over the content and not push it down. (use any other browser to test). Its currently giving me a huge gap when it should only go as long as the text does.
.postheader {
background:url(images/posthead.png) no-repeat;
min-height:100px;
max-height:600px;
padding-right:25px;
overflow:visible;
}
.clip {
width:214px;
height:275px;
float:right;
position:relative;
}
Any ideas? I can make the max height smaller, but that causes the .clip div to be cut off.
2) In the sidebar, there are a bunch of items called .sidebaritem. They have a background image that is only not showing up in IE7. I can't figure this one out.
.sidebar-item
{
background:url(images/sidebar.png)top center no-repeat;
font-size: 12px;
margin-bottom: 20px;
padding-left: 18px;
padding-right:10px;
padding-top:8px;
min-height:200px;
}
1) Try this. I think using position:absolute instead of float:right will solve the problem.
.postheader {
background:url(images/posthead.png) no-repeat;
position:relative;
}
.clip {
width:214px;
height:275px;
position:absolute;
top:0;
right:25px;
}
2) Hmm.. It could be the space after closing ).
background:url(images/sidebar.png) top center no-repeat;
3) Response to comment: In that case... You should redo the background. Create wrappers with backgrounds only and put your content inside. Clip should be the top div inside wrapper and float to right. Do something like...
<div class="itemTopBg"><div class="itemBottomBg"><div class="itemLeftBg"><div class="itemRightBg">
<div class="clip">...</div>
... content with no bg... just text...
</div></div></div></div>
I think I solved 1) with these changes
.clip drop float right, change position to absolute, and give it a right of 0.
.postheader add position relative
.postheader h2 width of around 400px
Seemed to work in IE7 and firefox, not sure how it looked in other browsers though.