Please see this css code
#ContactForm .wrapper {
min-height:30px;
padding-bottom:8px;
}
#ContactForm .bg {
border:1px solid #aaaaaa;
background-color:#e9e9e9;
float:left;
}
#ContactForm .input {
width:200px;
height:12px;
background:none;
padding:6px 10px 6px 10px;
color:#000;
font:10px Arial, Helvetica, sans-serif;
}
When I test it in browser (firefox) the input block is of some height.. I try reducing the top and bottom padding value from 6 to zero but no avail.
Also reducing height from 12 to lower value does not help.
It is stubborn and fixed to some height. What could be wrong??
I can provide with other data also, if needed.
This is html code
<div class="wrapper"> <strong>Phone:</strong>
<div class="bg">
<input type="text" class="input" >
</div>
</div>
Thanks in advance
i think reducing the height from wrapper will halp.. if not the height must be controlled from some other factor.. check that..
on a look on your code this is the solution..
update us for the same..
#ContactForm .wrapper {
min-height:30px; (CHECK THIS)
padding-bottom:8px;
}
Make sure the form your input is in is has the id "ContactForm"
Remove the space between #ContactForm and .input like the following example
#ContactForm.input {
width:200px;
height:12px;
background:none;
padding:6px 10px 6px 10px;
color:#000;
font:10px Arial, Helvetica, sans-serif;
}
That should work.
Related
So, in my website, I have some text at the front. I'm trying to put a <hr> 3 pixels under the text, however even when I try to dynamically position it, the <hr> still stays in the same place. Even try positioning it in this JSFiddle:
Text on top of HR line 3px
As you could probably tell, I cannot position it... and at the moment, it kind of looks ugly.
In the full website that I made, I have a <video> html tag, which is playing. It also has a top menu so that you can choose what category of my website you want to choose. Here's a screenshot:
I'm also planning to add a button directly under the <hr>, but I think I should stick to this problem first.
What happens in your current code is that the browser defaults are p {margin: ...some value depending on browser...;}.
So you must first add your own CSS rule to overwrite it, here: #toptext p {margin: 0;}.
Then you can freely choose how to position your <hr> using its margin-top.
Note that, as you have a big font-size for the text, it keeps some space under it, so you may have to use a negative margin for <hr>, like in the example below:
#toptext {
font-family:"Open Sans", san-serif, Arial;
font-size:500%;
color:#000;
text-align:center;
position:absolute;
top:5px;
text-align:center;
left:15%;
}
#toptext p {
margin: 0;
}
#line {
height: .5px;
background-color: #03f;
margin-top: -15px;
}
<div id="toptext">
<p>MatthewTheBottleFlipper</p>
<hr id="line"/>
</div>
Hide the <hr> and try adding the line to the paragraph.
Like this:
#toptext p {
border-bottom: 1px solid red;
line-height: 66px;
}
Then adjust the line-height.
remove all the excess css overkill and lets keep life simple :)
HTML
<p>MatthewTheBottleFlipper</p>
CSS
p {
font-family:"Open Sans", san-serif, Arial;
font-size:500%;
color:#000;
text-align:center;
position:absolute;
top:5px;
text-align:center;
left:15%;
border-bottom:solid 1px #000; /* u need this */
padding-bottom:3px /* ...and this */
}
The p tag naturally has margins and padding. Just remove it, and everything will work how you want:
#toptext {
font-family:"Open Sans", san-serif, Arial;
font-size:500%;
color:#000;
text-align:center;
position:absolute;
top:5px;
text-align:center;
left:15%;
}
#line {
height:0.5px;
background-color:#03f;
margin-top: 3px /* I can't position this three pixels under text */
}
p { padding: 0; margin: 0; }
im trying to learn how to use css instead of tables. i'm starting at the basics with a block of text with same height and width
margin-right: 60%;
margin-left:10px;
margin-top: 10px;
margin-bottom:0;
border:thin;
background-color:#FFF;
font: 9pt "trebuchet ms", arial, sans-serif;
color:#003318;
display:block;
margin-left: 60%;
margin-right:10px;
margin-top: 10px;
border:thin;
background-color:#FFF;
font: 9pt "trebuchet ms", arial, sans-serif;
color:#003318;
display:block;
however, the results are not good. there's no border. how can i fix this?
I recommend the shorthand border property:
border:solid 1px black;
Try cutting the other border properties and just using that and see if that does the job.
More info: http://www.w3schools.com/css/css_border.asp
Tables are like structure groups of layers while divisions are simple layers.
Think that every division is a . The problem is how to structure your divisions. This is where stylesheets come to your rescue.
ex.:
<div class="table">
<div class="right-td"> </div>
<div class="left-td"> </div>
</divd
And in your stylesheet
div.table { width:100%; float:none; margin:0px auto;}
div.right-td { border:1px solid #000;float:rightt; width:45%; padding:6px;}
div.left-td { border:1px solid #000;float:left; width:45%; padding:6px;}
This is just an example
I am trying to make a large button with 2 lines of text that looks something like:
What I want
This is my current JSFiddle showing what I've "accomplished"
I am fairly new to asp.net and programming in general so excuse my poor CSS.
Thanks for any help that anyone can offer.
The HTML:
<div class="bigGreenButton"> <a href="/Liquor/specialorder/supplier-info">Submit a special order request <br />
for information ➧
</a> </div>
The CSS:
.bigGreenButton a{
font-family:'TradeGothic LT CondEighteen';
font-size:18px;
background-color:#60a74a;
color:white;
font-weight:bold;
padding-bottom:10px;
padding-top:10px;
padding-left:25px;
padding-right:25px;
text-transform:uppercase;
text-decoration:none;
height:auto;
width:auto;
text-align:center;
}
.bigGreenButton a:hover {
background-color:#cccccc;
}
button {
text-align: center;
padding: 0px 0px 0px 0px;
border: none;
}
Add this to your css:
.bigGreenButton a{
display: inline-block;
...
}
You can see it here.
Change display since there's not a block inside your link and set the width how you want it.
.bigGreenButton a{
...
display: block;
width: 400px;
}
Shown here
I am struggling to see why 1 input element is not dropping to line up withe the label. I have tried various options, but still the same. I have included a grab and the css and would be grateful if someone could show me my error. Thanks
.adduserform {
width:425px;
font:12px Arial, Helvetica, sans-serif;
color:#777;
background-color:#fff;
font-weight:bold;
padding: 10px;
}
.adduserform label {
display:block;
width:110px;
float:left;
font-weight:normal;
font-size:12px;
padding: 0 0 0 30px;
z-index:1000;
clear:both;
}
.adduserform .inputbox {
float:right;
border:1px solid #ccc;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
width:40%;
}
.adduserform textarea {
padding:8px 3px 2px 3px;
margin:2px 0 10px 3px;
border:1px solid #ccc;
}
.adduserform select {
float:left;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
outline:none;
clear:right;
}
+++UPDATE HTML+++++
<dl>
<dt>
<label for="AUSR_phone">Phone:</label>
</dt>
<dd>
<input id="AUSR_phone" name="AUSR_phone" type="text" size="32" maxlength="128" value = "" />
</dd>
</dl>
You're floating the input box right, but the top select is not wide enough to force the input onto a second line. The bottom two are being forced down because the area is not wide enough to accommodate both input fields.
You can try putting both your label and input/select inside a div and use float to control positioning within that div:
html:
<div>
<label>text</label>
<input type="text"/>
</div>
css:
label {float:left; width:30%; margin:0 1em; }
input, select {float:left; width:60%; }
div {overflow:hidden; width:100%;}
Put a <div> around each label and input or select combo and style the div with clear: both;. That will force a new line for each div.
little demo: http://jsfiddle.net/6sQw5/4/
edit: the float on the input is not even needed, fixed the demo.
I have a couple of buttons inside a div with a specific width, and I am facing a problem where the buttons are being rendered differently in firefox vs chrome and safari.
In firefox, the buttons are bigger and are messing up my layout.
<div id="sort_by">
<button id="sort_by_price" class="sortButton" value="1">Price</button>
<button id="sort_by_bedrooms" class="sortButton" value="1">Bedrooms</button>
<button id="compareButton" class="sortButton">Compare</button>
</div>
CSS:
button {
display:inline;
float:left;
background-color:orange;
border:1px solid orange;
border-radius:5px;
-moz-border-radius:5px;
font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
font-size:14px;
text-decoration:none;
font-weight:bold;
color:#FFFFFF;
cursor:pointer;
padding:4px 10px 3px 7px;
}
#sort_by {
width:265px;
height:35px;
border-bottom-style:solid;
border-bottom-width:2px;
border-color:#c9c9c9;
padding-top:3px;
padding-bottom:3px;
padding-left:5px;
}
Rendered in firefox:
Rendered in Chrome:
It can be seen that the buttons in firefox are bigger. How can I fix this? Thanks.
Firefox adds an extra margin/padding to button elements that cannot be changed by standard CSS, you can however add the following to make it behave
button::-moz-focus-inner {
border: 0;
padding: 0;
}