The padding, margin etc. all work, but the image won't display in IE 8, any idea why?
CSS
.arrow {
background:url(images/arrow.png) center left no-repeat;
padding-left:23px;
padding-right:10px;
border-right:0px solid #e6e6e6;
margin-right:10px;
}
HTML
<div class="arrow">
<h3><b>Headline</b></h3>
</div>
h3 CSS
h3{
font-size:14px;
text-transform:uppercase;
}
According to this link (in french), try with a space before url
background: url(images/arrow.png) center left no-repeat;
I have not personally tested, but it worked for this user
Try surrounding the url with single quotation marks (or whatever they're called).
background:url('images/arrow.png') center left no-repeat;
in case my mobile phone displays it correctly, put the background shorthand on a single line, linebreaks confuse ie.
Related
I would like to center the text in a button, however, it seems to sit too far down, at least in Chrome. Any tricks? I've tried setting line-height.
http://jsfiddle.net/BCKYp/
<button>go</button>
button{
background:yellow;
height:23px;
width:28px;
padding:0;
margin:0;
border:solid black 1px;
line-height:23px;
}
When using line-height, you need to set it equal to the font-size.
Also add vertical-align: top
button {
background:yellow;
height:23px;
width:28px;
padding:0;
margin:0;
border:solid black 1px;
line-height:13px;
font-size: 13px;
vertical-align: top;
}
http://jsfiddle.net/BCKYp/8/
Setting line-height equal to element's height is working properly if your text written in uppercase. Line-height is expected to be used as a property for styling paragraphs and using it for centering element in a div or a button you'll have to adjust it's value for every specific case.
In your case you can either adjust the line-height visually or use padding-top and padding-bottom for sizing the element.
I used padding-bottom and it works fine.
http://jsfiddle.net/BCKYp/22/
This is a case by case question, personally I would remove the height and line-height and set top and bottom padding. It also looks slightly skewed due to the nature of the character 'g' taking up more space below.
My preference would be:
button{
background:yellow;
width:28px;
padding:5px 0;
margin:0;
border:solid black 1px;
}
Here's an updated fiddle, you can adjust the padding to suit your needs. I've also added another button to show with more centred characters. Y.
I would just set a smaller line-height, but really I would use a reset css file to make sure this will have similar effects on all browsers.
line-height: 21px;
As the above will look different on the other browsers but will fix the problem for Chrome. Its an ugly solution in otherwords.
Add one more property in your css class. Add following property to your class
text-align: center;
It doesn't appear centered because g and o only extend halfway up the baseline.
http://jsfiddle.net/ExplosionPIlls/BCKYp/1/
However, you can reduce the line-height (to 11px for example) to give the illusion of moving the lower-cased letters upwards:
http://jsfiddle.net/ExplosionPIlls/BCKYp/4/
try this
don't give width and height,
http://jsfiddle.net/BCKYp/12/
button{
background:yellow;
padding:2px;
margin:0;
border:solid black 1px;
}
Currently my menu is working with div's as links. Needless to say this isn't good practice. Now I'm changing it to working with link tags but I've stumped upon a problem.
When a link is 'active', eg you're on that page, a background image is applied. This background image is centered to the right, one pixel further than the div so it overlaps a border of the div. Here's the css for the div:
background-image: url('triangle.png');
background-position: center right;
background-repeat: no-repeat;
margin-right:-1px;
z-index:100;
position:relative;
Now, applying this method to a link tag doesn't seem to work. I have got the image to move 1 pixel to the right, but even with a z-index set, the image is under the border. Here's the css for the link:
background:url('triangle.png') no-repeat center right -1px;
z-index:100;
position:relative;
Any thoughts about how come this doesn't work? I've also tried with margin-right:-1px; but this doesn't change anything.
I just noticed that when I set eg -5px in the background css, the rest of the image that should stick out of the border doesn't stick out, it just dissapears.
EDIT: Here's a jsfiddle: http://jsfiddle.net/UkYmJ/
The image isn't transparant but white, so the border should be 'gone' inside the triangle.
As far as I know, there's no such thing as "... center right "AND" -1px;" to the background properties. You either use "right" or a number value. What you can do that could work is using a percentage value higher than 100%, but that would be non precise in some cases, and I think it would not solve your problem.
If you're using, an anchor tag with a background and you want this background to overlap a border to the right, this border needs to be on a parent container and you'll shift your anchor tag (not its background) a -1px to the right (right: -1px; if you're using position: absolute on "a" tag an position: relative; on the parent).
Edit: using this css on your Fiddle, it works for me:
#menu{
width:149px;
border:1px solid red;
}
#menu a{
display:block;
padding:10px;
width:109px;
text-decoration:none;
font-family:Comic Sans MS;
font-size:large;
color:black;
}
#menu a:hover, #menu a.active{
color:#99182c;
}
#menu a.active{
background:url('http://i48.tinypic.com/1p7yg9.png') center right no-repeat;
position: relative;
right: -21px;
}
​Will still try to improve it because it's a bit messy...
I don't think that background: someColor url(something) no-repeat center right -1px; is a valid syntax. background: someColor url(something) center right no-repeat; is.
why do you need to use z-index?
try making your links display as blocks while still on a single line with a {display: inline-block}
edit: you could use calc(100%-1px) but this is only supported by IE9+ Saf6+ and still not Opera: http://caniuse.com/#search=calc (and needs a vendor prefix for some browsers).
Though you can achieve what you want to do with plain CSS2.1 ;)
I believe I have read your question properly.
I think what the problem here is that backgrounds will be clipped at the edge of the element for which it is declared. It won't shift beyond the boundaries of the A element.
You could try to add padding to your A:active to give you a little breathing room.
Your new CSS would be like so:
A:active{
background:url(24d2535.jpeg); no-repeat center right -1px;
z-index:100;
padding-right: 5px;
position:relative;
}
Let me know if that works for you.
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; }
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.
I have a div tag styled through CSS. I set the padding to 10px (padding:10px), it works just as I wanted in Firefox and IE7, but in IE6 it adds additional padding at the bottom (about 2-3px I think). Anyone has idea about what's happening here?
[update]
I just noticed this, the div tag I'm talking about has a background-image. When I removed the background-image, the extra padding on the bottom disappears. Any ideas?
[another update, code sample]
Here's the CSS applied to my div tag:
.user-info{
margin-top: 20px;
margin-right: 20px;
padding: 10px;
background-image: url("../img/user_panel_bg.png");
float:right;
border: 1px #AAAAAA solid;
font-size:12px;
}
Is there an image in your div? If there's an image, there's a bug in IE 6 that can cause white space within the div to create extra padding on the bottom
Extra padding shows up with
<div>
<img src="myimage.jpg">
</div>
Extra padding doesn't show up when you change your HTML to
<div><img src="myimage.jpg"></div>
I would highly recommend taking a look at the positioniseverything.net site and its coverage of IE issues and workarounds. Take a look at the holly hack section - I believe you will find the answer there.
[edit - added] take a look here for the 3px issue, explanation and fix
For box settings and browser difference, sitepoints box model article offers some good insight as well.
Have you tried hiding your DIV overflow? overflow:hidden;
Edit: You may also try display: inline; if you're talking about horizontal pushing.
Make sure font size is not creating the problem. Even with no text inside a container element (say for a bottom cap on a stretchable container) IE6 will still size the height of the box no smaller than the font size (even with an explicit height set.)
So, for example, if you have the HTML:
<div class="box">
<h1>Heading</h1>
<p>This is the main content.</p>
<div class="bottom"></div>
</div>
...you will need this CSS:
<style type="text/css">
.box {
background: url(bg-middle.jpg) repeat-y;
}
.box h1 {
background: url(bg-top.jpg) no-repeat;
}
.box .bottom {
background: url(bg-image.jpg) no-repeat; /* bottom cap image */
height: 10px; /* height of your bg image */
font-size: 1px; /* for IE6 */
}
</style>
potentially 'margin' or 'border' properties?
You can also look at something like a CSS reset style sheet which will let you set up defaults which should be reasonably consistent across browsers.