I'm trying to get absolute 0 padding around my button.
I have tried
padding:0px;
But as you can see from the image I still have space top and bottom of the button (Blue line is border). Any suggestions?
Edit: Button code:
<asp:Button ID="WPDErrorBtn" Style="font-family:'Century Gothic'; font-size:65px; background:none; padding:0px; margin:0px; border:none; " runat="server" OnClick="WPDErrorBtn_Click" OnClientClick="showLoading();" />
Try to change the line-height to for example 65px; the chances are real that you have to try a smaller number.
Edit example
<button style="font-family:'Century Gothic'; font-size:65px; background:none; padding:0px; margin:0px; border:1px solid blue; line-height:50px;">0</button>
What is this inside border, number or picture?
try this ---> padding:0px !important;
But i think it is not padding issue, please more details...
Related
So, I have this thing where this image sits on top of anything, regardless of how much I alter the z-index. I want to make it so that the bluff tag sits on top of the .quoteicon, but no matter what I do it just doesn't work. The little quotation mark I've put inside of it shows up, but the red background of it is hidden behind.
I want it to look like this (I had to do this in photoshop, just to explain what I want.):
http://i.gyazo.com/3eddbf25f79c97fb7d646d6050c1b23a.png
But it currently looks like this (You can see the little white quotation sitting in front of it.):
http://i.gyazo.com/0859417a1746ba934896dea46acc073d.png
The CSS:
.quotewrap{
margin-bottom:30px;
}
.quoteicon{
width:60px;
margin-bottom:-58px;
padding-right:5px;
border-right:5px #F0F0F0 solid;
z-index:998;
}
.quoteicon img{
border:5px solid white;
outline:1px solid #F4F4F4;
}
.bluff{
background-color:red;
text-shadow:1px 1px black;
height:34px;
width:34px;
color:white;
font-family:arial;
line-height:34px;
text-align:center;
font-size:20px;
margin-top:-10px;
z-index:999;
}
THE HTML:
<div class="quotewrap">
<div class="quoteicon">
<img src="https://33.media.tumblr.com/avatar_d020f5726f28_48.png">
</div>
<div class="bluff">❝</div>
</div>
See this fiddle: http://fiddle.jshell.net/d3cosgc7/
You have to understand the principles of position relative and position absolute.
That will help you a lot.
Take your time and go through the fiddle, if you have any questions, let me know.
Cheers,
z-index attribute works only for containers with position: relative|absolute|fixed;
Fist of all, pls see this Question and the Demo
You can see even set the margin:0px; to the element, there's still a space between the text and the element border. It's a problem when I put Chinese and English text in one line, because the space for English and Chinese is not the same. Anybody know how to solve this?
I know it's not a big issue, but want to make it perfect to look, also want to learn more about css and html. Thank you for your attention.
You can reduce the height's lines of paragraphs with the line-height property:
* {
margin:0px !important;
padding:0px !important;
}
.di_header{
display:table;
width:100%;
}
.di_h_en{
width:30%;
height:100px;
display:table-cell;
vertical-align:bottom;
text-align:left;
border:solid 1px red;
}
.di_h_cn{
width:70%;
display:table-cell;
vertical-align: bottom;
text-align:right;
border:solid 1px red;
}
.di_h_en p{
font-size:32px;
line-height:30px;
border:dashed 1px black;
}
.di_h_cn p{
font-size:24px;
border:dashed 1px black;
}
<div class="di_header">
<div class="di_h_en"><p>I'm left</p></div>
<div class="di_h_cn"><p>I'm chinese 我是中文</p></div>
</div>
Here, I put a line-height a little smaller, so it reduces the margin with border. Play with the 30px value to see the change.
this is happening becuase both <p> contains different font-size.. you can fixed them by using line-height property.
Add the line-height in the CSS. you use 32px font-size on another p element.
.di_h_cn p{
font-size:24px;
border:dashed 1px black;
line-height:38px; /* Add this line*/
}
Here is a DEmo. http://jsfiddle.net/kheema/TkfSx/13/
Can you try using margin-bottom:0 for <p>.
Just keep font-size same for both or like mentioned above use line-height and play with it until you are satisfied.
demo:
Jsfiddle
or
Jsfiddle2
I think you want to remove the margin at the top of text inside the cell. If this is what you want then remove the height:100px from the .di_h_en{your-styles-here}
I came across a problem and I tried searching on google and here too, however, could not get the right solution. Let me be brief...
I have a div name #email_input_box which contains <input type="text" class="email_box" border="0" style="padding-left:10px; padding-right:10px; margin:0; border:0;" />
The issue is in padding the text, it works fine in other browsers, however, it does not work in IE7.
Here's my .email_box class styling
.email_box{
width:160px;
height:26px;
background:url(images/inputbox_email.png) no-repeat;
line-height:26px;
color:#969595;
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
font-style:normal;
}
and here's my div #email_input_box styling
#email_input_box{
width:180px;
height:26px;
float:left;
position:absolute;
top:60px;
}
I need help with the padding-right issue in IE7. Thanks!
input doesn't have a border attribute, remove it.
<input type="text" class="email_box" style="padding-left:10px; padding-right:10px; margin:0; border:0;" />
this may solve the problem. however even if it doesn't, it should be removed.
Also the div containing the input have a less width than the input.
.classname {
background-image:url(../../images/classname.png);
background-color:transparent;
background-repeat:no-repeat;
text-align:center;
border:none;
height:50px;
width:160px;
font-size:12px;
font-family:Tahoma, Geneva, sans-serif;
color:#CCC;
}
<div class="classname">Text</div>
Why the Text is above of image? What should I add to make it normal? I can use padding-top, but then the bottom of image will have space too if you know what I mean.
Thanks.
I created this for you, I think that's how you want to make it.
Because the image is a background for the text.
If you're trying to make an image button with text fallback, do <img src="someurl" alt="sometext" />
What do you mean by above?
I'm trying to create a "cancel" link that looks like an x with a solid red circle behind it.
Here is the CSS:
.circle {
display:inline;
padding-left:4px;
padding-right:4px;
background:rgb(196,15,24);
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.circle a {
font-size:10px;
text-decoration:none;
color:#fff;
}
This is the HTML code:
<div class='circle'>
x
</div>
It ends up looking like this: alt text http://www.freeimagehosting.net/uploads/472563dfe4.png.
How do I move the x so that it is centered within the circle? Changing the margin-top or bottom doesn't seem to work...
If you relatively position your a tag you can fix it:
.circle a {
font-size:10px;
text-decoration:none;
color:#fff;
position:relative; top:-2px;
}
Adjust the top value to your liking.
Your font must accomodate characters like É, q, X and x, etc and still be displayed over background whatever the height of the character is.
I found that using an X (or text-transform: uppercase; obviously) and font-family: monospace; was an improvement with your code, though not perfect. Solution provided by mhr is useful even with a monospace font.
I am doing something similar, and using the following to center my text:
text-align: center;
margin: auto;
position: relative;