I have the following css rule that I am noticing IE does not seem to handle properly. I have an anchor tag that I want the orange back-ground to extend throughout the padding specified. The bottom padding is 18px but the background color does not cover the extra spacing. Seems only IE is doing this. Is there a rule I can use so the organg covers the entire area of the tag?
.AdminLink {
background-color:orange;
padding-left:3px;
padding-right:15px;
padding-bottom:18px;
margin-top:8px;
margin-bottom:18px;
line-height:none;
color:black;
font-weight:bold;
}
bottom and top padding are not supported on inline elements (some browsers won't render it correctly). But if you add:
display:block;
float:left;
it should work, I hope it will help you. ;)
Related
I have a simple structure
<nav>
<span>
A
B
C
<span>
<nav>
and I go Godzilla on the css, e.g.
margin:0px; padding:0px; vertical-align:bottom; box-sizing:border-box;
But no matter what I try there is always this really cool 1px gap at the bottom of the element. Why is it there and how would you make it go away if you were me?
fiddle
One possible solution would be to make the <span> element inline-block. This will remove the gap
EXAMPLE HERE
nav > span {
display: inline-block;
}
Alternatively, a display of block works too. The point is that it is no longer a pure inline element.
I see what you mean, it does appear (on Firefox) without zooming in closely. I believe the problem is the default line-height given to text in browsers, which results in a bit of extra space between text lines.
With some experimentation, I found that adding these styles works:
nav {
font-size:16px; /* Default font size in Firefox, but specify just in case */
line-height:18px;
}
Here's an updated JSFiddle to demonstrate it. Seems to work properly in Firefox and Chrome. Let me know if you have any problems, though. Hope this helps!
Take a look at the following code, which is a simplified version of a bigger problem I'm having:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {border-width:0px 5px; border-style:solid; border-color:black; width:400px; margin:0; padding:0; background:red;}
div:nth-child(2) {background:green;}
p {color:yellow; text-transform:uppercase; font-size:40px;margin:0;padding:0;}
</style>
</head>
<body>
<div><p>Hello World</p></div>
<div><p>Hello World</p></div>
</body>
</html>
It should create something like this:
What the client has asked for is for the black left border and black right border to be the exact same height as the yellow text. That is, the height of the black bars should not include the extra space between the top+bottom of the yellow text and top+bottom of the container.
One way I can think of doing this is to set a fixed height on the containing div, then give the div an overflow:hidden. Next I will use a negative margin-top on the p tag.
Can anyone think of a better approach? I really don't like the approach I mentioned because my client is a design nazi and will expect things to be pixel perfect across all the different operating systems, different browsers, and different screen resolutions. From my experience, if I try to position elements by hard coding pixel values into my CSS, and those elements still need to be relative to elements that vary in size (due to dynamic content), it can be a night mare.
Are my concerns warranted? If so, is there a better way to make the borders exactly the same height as the text?
Is this what you are looking for:
jsFiddle
Just set the line-height below the height of the container so that the font occupies it without any left over space.
p{
font-size:40px;
line-height:30px;
}
You could do something like this using pseudo-elements (no <= IE8 support). Note that the border is a little larger than the font, that is just the nature of the font allowing a little space above and below (notice that both are set to 40px). This can't really be helped cross-platform/browser/etc. unless you want to make an image that is pixel perfect.
jsFiddle
HTML
<div><p class="fancy-border">Hello World</p></div>
CSS
.fancy-border {
position:relative;
}
.fancy-border:before {
content:"";
display:block;
z-index:-1;
position:absolute;
height:40px;
width:100%;
border-width:0px 5px;
border-style:solid;
border-color:black;
top:50%;
margin-top:-20px;
left:-5px;
}
give borders on P tag and set the line height of p so that there remains no space between lines then give margin between them
Okay, been struggling with this for a bit now and I have pretty much the appearance I want but am now struggling with positioning the items. Basically I want a stroked text with the stroke on the outside, meaning the webkit text stroke is useless.
So I figured I'll position two text elements on top of each other and do it that way. And that works great, except since I am using position:absolute the element essentially has no height.
The HTML looks like this:
<div class="hcontainer"
<h2>A Framework For Web Artisans</h2>
<span class="h2white">A Framework For Web Artisans</span>
</div>
The CSS like this:
h2{font-size:2em;
margin: 10px 0;
color:#234F70;
-webkit-text-stroke: 10px #531A16;
-webkit-text-fill-color:#FFF;
letter-spacing:-2px;
position:absolute;
top:10px;
left:0px;}
.h2white{font-family:dom_bold,arial black;
font-size:2em;
margin: 10px 0;
color:#FFF;
position:relative;
top:10px; left:0px;
letter-spacing:-2px;
position:absolute;}
.hcontainer{position:relative;clear:both;height:2em;}
So here's the issue. The hcontainer needs to have a set height because the element it contains is positioned absolutely therefore has no height and messes up the flow. The problem is making that height dynamic so I can space the elements properly.
I could make a separate container for each heading but that just seems a bit much. Can anyone think of a better way to do what I'm trying to do here? Or a way around the height issue?
http://jsfiddle.net/calder12/9M7YZ/
I don't really understand what it means that "The problem is making that height dynamic so I can space the elements properly." But if you want to not have to declare a height on .hcontainer, you can use a negative top margin on .h2white to place it on top of the red h2 instead of using absolute positioning. Like so:
http://jsfiddle.net/9M7YZ/10/
.h2white{
font-family:lemon;
font-weight:bold;
font-size:4em;
color:#FFF;
letter-spacing:-2px;
margin-top:-86px;
position:absolute;
}
I have the following class in my CSS style sheet:
.errormsg {
border:solid 1px Red;
padding:5px 20px 5px 20px;
margin:5px;
color:Red;
font-size:medium;
font-weight:bold;
}
When I view it in IE7, the top and bottom border is cut off the when I use this class on a span tag.
What do I need to add to get it to work in IE7?
I've noticed similar issues with this sort of thing when the Line Height is not large enough. Try increasing it slightly.
<pan> elements are going to be treated as inline elements unless you specify otherwise. Add display: block; to your CSS and go from there. The alternative would be to use a <div> to wrap the error message, since <div>s are treated as block elements by default.
Setting display: inline-block; on the <div> will fix the display issues, and the width will still adapt to the text size:
Demo
You could also spruce it up a little with a css3 text-shadow, box-shadow, and gradient with an icon from iconfinder: Demo
I am using asp:button for my asp.net project.
I wrote one css Class. It perfectly apply Css style and show image in the asp:button.
It is working fine in FF, Safari and IE8.
But the Css Class does not work in IE7, How to solve? and my Code is:
.likeImage {
background-image:url('images/LikeNew.png');
background-repeat:no-repeat;
background-position:top left;
width:65px;
height:24px;
cursor:default;
text-align:left;
padding-left:5px;
margin:0px;
padding:0px;
}
try this :
padding: 0 0 0 5px;
You used (padding-left:5px;) and (padding:0) this is not the right way.
just use
padding:5px;
Then please check.
Add border:0; in your CSS for asp:button.
Internet Explorer calculates padding towards inside of a block, while other browsers calculates padding towards outside of a block.
In IE, Actual Width = CSS width.
Others, Actual Width = CSS width + Left Padding + Right Padding.
The second one is standard CSS approved by W3C.