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.
Related
This has probably been asked a million and one times, but I would appreciate it if someone could explain the behavior of the divs to me..
I have a container div which I am aligning in the center of the page, which has a gap between the top and the top of the page. I want it to be flush against the top of the page. I am assuming that there is some sort of margin or padding that I need to remove but I can't think what it could be. Even with nothing in the div there is still a gap.
<body>
<div id='mainContent'>
</div>
</body>
body
{
background-color:black;
background-image:url("img/background.jpg");
background-repeat:repeat;
}
#mainContent
{
width:1200px;
height:500px;
background-color:#FFFFFF;
margin-left:auto;
margin-right:auto;
margin-top:0px;
}
Here is a JSFiddle to give you an idea of what I mean.
Can someone please explain why the div is pushed down as it is? Is there a robust solution that doesn't affect any content that is put in the div??
NOTE: If the screen width is smaller than the div width, there will be a gap on the left hand side aswell.
You need to reset the default margin of the body that is 8px aprox.
body,html {
margin:0;
padding:0;
}
The Demo http://jsfiddle.net/H76bq/3/
For default all elements has some properties:
http://www.w3.org/TR/CSS21/sample.html
You can reset this in your own css.
You could use a star selector and reset everything so that you can set everything yourself:
* { margin: 0; padding: 0; border: none; }
Or if you wanted to use a master reset stylesheet you could use Jonathan Neal's Normalize CSS via Google CDN.
Normalize.css is a customisable CSS file that makes browsers render all
elements more consistently and in line with modern standards. We researched
the differences between default browser styles in order to precisely target
only the styles that need normalizing.
Just put this in your head:
<link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />
Add margin: 0px; to body like below. The reason is because body by default introduces a margin.
body{
background-color:black;
background-image:url("img/background.jpg");
background-repeat:repeat;
margin: 0;
}
Demo Fiddle
It can also been caused by line-height property.
So set the line-height to as you wish!
I had similar problem and I solved it by setting negative margin. You could test the below setting.
#mainContent {... margin-top:-25px;}
I have two styles defined:
img.feedback-sprite-22{
display:block;
background:url(../img/feedback-sprite-22.png) 0px 0px scroll;
height:22px;
border:0 !important;
padding:0;
margin:0 !important;
z-index:0;
}
img.feedback-sprite-22:hover{
background-position:0px -22px;
}
img.fb {
display:inline;
margin:auto 0;
border: none !important;
vertical-align: middle;
}
And I display the image like so:
<img class='fb feedback-sprite-22' height='22' width='65'>
Works great in ff & chrome but not ie (i've tested ie10 and ie8). IE shows the image (is it a simple gradient), but also shows the square img missing box (see below). Any ideas how to fix this? Thanks in advance.
Because you have no src in your img tag, which is needed.
Use div <div class="fb feedback-sprite-22"></div> instead of img. And define width and height in css. If you realy want to do it using css...
But in my opinion you should use clear img - like <img src="/img/feedback-sprite-22.png" alt=""> and not background in css for element like this.
If its just a gradient, why not using a CSS, gradient?
http://www.colorzilla.com/gradient-editor/
With support for every broweser including IE6-10
So the answer, I've discovered, as Choinek pointed out, is that IMG obviously has to have 'src' defined for IE. I assigned it to blank.gif and all is good. Since I already use a blank.gif on the site, it isn't another image to load.
However, I really like the idea of using a CSS gradient. This would reduce the number of images (always good).
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. ;)
My website is left-aligned in IE 8 and 9 when it should be centered like it is in Chrome and Firefox. I have tried standard solutions like the one below with no luck. There are multiple style sheets on the page -- perhaps there's a conflict? Any help would be appreciated...
*{
margin:0;
padding:0;
}
body{
text-align:center; /*For IE6 Shenanigans*/
}
#wrapper{
width:960px;
margin:0 auto;
text-align:left;
}
Although you define the following CSS in your style.css stylesheet-
#wrapper{
width:960px;
margin:0 auto;
text-align:left;
position:relative;
}
There is no corresponding element with an ID of wrapper on the page, your #header, #nav, anonymous content and #footer divs are all direct children of the document body.
The link as a child of the h1 with ID "logo" almost certainly needs to have a left value (probably of zero) added in addition to the existing "top" value as it is overlapping your phone number.
You also appear to be encoding the conditional comments added as the first child of body in IE8 as -
<!--[if lt IE 8]--> <!--[endif]-->
Is appearing in the page.
Have you tried using either Chrome Developer Tools or Firebug (for Firefox) to inspect your code?
I tried to vertically align some content into div box. to achieve this I have found some CSS that works perfect. Except for you know who it doen't: IE8. When using the display attribute with the value 'table-cell', IE is creating an invisible cellpadding/cellspacing.
.item_box{
display: table-cell;
padding:0px;
margin:0px;
width:160px;
height:160px;
text-align: center;
vertical-align:middle;
}
the two lines 'padding' and 'margin' do affect only FF, Chrome, Opera. I need it to be '0' padding/spacing to preserve the main layout. Any clue how to solve this for IE?
thanks a lot
Regarding your "invisible cellpadding/cellspacing", try experimenting with "border-collapse:collapse;" on your surrounding "display:table" container css.