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.
Related
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...
I set height:40px and line-height:40px to a input field. It working in all browsers except chrome.
IE7 and IE8 not working properly with out line-height property. So I set this property.
Refer below image.
HTML:
Login :
<input type="text" class="inputtxt" />
CSS:
.inputtxt {
height:40px;
width:200px;
line-height:40px;
}
in Fiddle : http://jsfiddle.net/8DF7G/2/
I would suggest use padding instead of line-height.
input {
width:200px;
height:20px;
padding:10px 5px;
}
This is the code I'm working with:
<div style="width:100%; position:absolute; border:0px; background-color:#232323; color:#ffffff; padding-top:5px; padding-bottom:5px; font-size:12px" align="center">
TEST TEST TEST TEST TEST
What it does is basically add a bar to the top of your website where you can enter text similar to what you see here: http://demo.fiverrscript.com/
What needs to be changed in my code to make this appear at the bottom of the screen instead of at the top?
Add the bottom:0px to the style tag.
<div style="width:100%; position:absolute; bottom:0px border:0px; background-color:#232323; color:#ffffff; padding-top:5px; padding-bottom:5px; font-size:12px" align="center">
Also, the width:100% wont work so you should also add left:0px and right:0px;
try to change position:absolute to position:fixed and add bottom:0
<div class="wholediv">
<div class="rightdiv">
<strong>Your Company Name</strong><br />
Evergreen Terrace 742<br />
Kansas Missouri<br />
Phone: 432-653-3121<br />
sales#thetiecompany.com </div>
<div class="sitemap">
Home | Sitemap | Contact Us</div>
</div>
</div>
div div.wholediv
{
height:97px;
width:500px;
float:left;
background-color:#F0F0F0;
}
div div.sitemap
{
background-color:#F0F0F0;
position:relative;
float:right;
width:200px;
height:87px;
padding-right:10px;
padding-top:10px;
font: 0.7em Tahoma, sans-serif;
font-weight:bold;
}
div div.rightdiv
{
float:left;
position:static;
background-color:#F0F0F0;
width:200px;
height:87px;
padding-left:10px;
padding-top:10px;
font: 0.7em Tahoma, sans-serif;
}
IE displays like this.
Chrome displays like this.
You have a block-level element that has both a width and padding. That's at least one thing that's going to cause trouble in IE because of the different box-model.
More info about box models: http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug
edit after you added the images:
atleast position: static & position:relative shouldn't be needed here the way you're using them. You could start debugging by removing padding from the elements. Padding is probably the thing in IE that breaks the "sitemap"-row.
You're not including in the code the part that has the logo-image etc so can't comment on that part. I think you should read about the box-models and apply that. Also it the way position is used looks quite random, so you could study that a little bit. More info in about positioning in http://www.quirksmode.org/css/position.html
.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?