In my fieldset I have labels next (side) to my textboxes, but for some reason, they are towards the top and not middle. Here is my CSS for the fieldset:
fieldset {
clear: both;
font-size: 100%;
border-color: #000000;
border-width: 1px 0 0 0;
border-style: solid none none none;
padding: 10px;
margin: 0 0 0 0;
}
label
{
font: bold 12px Verdana, Arial, Helvetica, sans-serif, MS UI Gothic;
float: left;
width: 12em;
text-align:right;
vertical-align:text-bottom;
}
What am I missing?
Try adjusting the line-height property for the label element. You may need to increase or decrease it.
To me this is the most frustrating thing about css...
Zack is right it will probably take some tweaking with the line-height, sometimes lots of tweaking (like 20px). i think that floating the element causes line height to be difficult??
if you want it in the middle of the line you should set vertical-align:middle; too.
hope this helps...
Related
I am coding CSS from scratch for the first time and I am getting a lot of trouble to make it the perfect way.
As you can see in this image, the blue menu in the top has a white border.
My current css code for nav is:
nav, footer {
font-family: "rogue-sans-ext", sans-serif;
font-style: normal;
font-weight: 700;
border-width: 0px;
padding: 0px 0px 0px 0px;
}
nav {
background-color: #005EFF;
width: 100%;
position: static;
top: 0;
left: 0;
text-align: center;
font-size: 25px;
}
By the way, I can't figure out how to center vertically the text of the nav items. I have tried the vertical-align option, the line-height method and the absolute positioning and negative margin, but none seems to work properly.
Thanks,
mikeysantana
Probably, your problem is given by the default body padding value applied by browser.
Try applying this style:
body, html {
margin: 0;
padding: 0;
}
I have some body and page settings that are keeping everything nicely centered in my site, which is my objective.
However, I also have some text in the center, which currently is sprawled along the entire width of the page when it's long. Every time I try to set a css width property, like max width, it decides to go haywire with it's positioning, and land itself far left of the center.
I guess there's some issue with my overall page center positioning, and setting any type of width property to a div.
EX of things nicely centered, but sprawling text: https://www.flickr.com/photos/77598212#N03/34191523510/in/dateposted-public/
and when I try to set any sort of width:
https://www.flickr.com/photos/77598212#N03/34191523450/in/dateposted-public/
I'd appreciate any and all thoughts. Thank you. -Wilson
the css:
*{
margin:0;
padding:0;
}
body{
text-align:center; /*For IE6 Shenanigans*/
}
button {
color: #900;
font-weight: bold;
font-size: 150%;
text-transform: uppercase;
}
h1{
margin-top:20px;
font-size: 250%;
overflow:hidden; /* older browsers */
font-family: hobeaux-rococeaux-sherman, sans-serif;
}
img {
max-width:500px;
max-height:340px;
box-shadow: 1px 5px 5px grey;
border-style: groove;
border-width: 1px;
margin-top:20px;
}
#ShowText{
overflow:hidden; /* older browsers */
word-wrap: break-word;
padding-top: 100px;
font-size: 18px;
font-family: vendetta, serif;
line-height: 25px;
}
If you have a fixed width on a block element then simply give it margin: 0 auto; to center it.
I'm having a weird error with padding. I am creating a two-columns layout and when I try to add a padding to the footer div it takes more space than I want. I have already looked for this problem but couldn't find no useful answer.
For instance, if I put up 1 pixel on the code:
#footer {
margin: 0.5em auto 0em auto;
background-color: #5f544d;
font-family: "Trebuchet MS";
width: 760px;
text-align: center;
padding: 1px 0.5em;
line-height: 1.1em;
}
I end up getting more than 1 pixel of a padding, as seen here:
The top and bottom paddings have more than 1px of height.
So my question is what could be causing this problem?
I've put up a piece of the code in a fiddle and the problem is still there, so I guess the code I've included will be enough to solve this problem, if it isn't just tell me.
Fiddle link: http://jsfiddle.net/KhxAW/4/
The issue is with your <p> tag. It has a margin space above and below. I recommend you reset the <p> tag margins somewhere in your CSS code.
#footer {
margin: 0.5em auto 0em auto;
background-color: #5f544d;
font-family: "Trebuchet MS";
width: 760px;
text-align: center;
padding: 1px 0.5em;
line-height: 1.1em;
}
You aren't using pixels for your units in the padding declaration... You are using EM's. 1EM is equal to the PX size of the font of the parent element. So if your font size is 12px, 0.5em is 6px.
Just change your units to PX...
#footer {
margin: 0.5em auto 0em auto;
background-color: #5f544d;
font-family: "Trebuchet MS";
width: 760px;
text-align: center;
padding: 1px 5px;
line-height: 1.1em;
}
Just Replace Your Footer Div With This One->
<div id="footer">
<p style="display:inline">Three Rings for the Elven-kings under the sky, seven for the Dwarf-lords in their halls of stone,
Nine for Mortal Men doomed to die, one for the Dark Lord on his dark throne, in the Land of Mordor
where the Shadows lie. One ring to rule them all, one ring to find them, one ring to bring them all
and in the darkness bind them, in the Land of Mordor where the Shadows lie.</p>
</div>
If you include the following in your code styles
p.margin
{
margin: 0px;
}
and then inside your <p> tag you include the class="margin" like this:
<p class="margin">Three Rings for the Elven-kings ... </p>
You will be able to set the padding in the <div> tag without interference
from the <p> tag.
I'm making Fluid + responsive layout where layout scale up and down on browser/screen re-size.
If I use font-size of body is in % percentage then is it good to use em for all things ,
font-size
width
margin
padding
border-width
border-radius
Or I should use em only for font-size?
My aim is to keep everything is in proportion when things scale up and down.
I'm little confused when I should use em and when %. My font-size of body is 62.5%
Using em used to be considered a good practice for accessibility before every browser supported zooming. Now I have found that it is mostly useful for easily declaring relative font sizes in specific scenarios (perhaps yours).
I've found that relative sizing does not yield aesthetically pleasing results on borders because some browsers will try to literally use a floating point value derived from the em or percentage calculation and the result will be fuzzy (try it).
I use percentages heavily in most of my layouts. I've found that a couple of generic percentage based styles can cover a multitude of layout needs (such as a style for a 50/50 split, 33/67, 25/75, etc. etc.).
I personally find percentages more intuitive to deal with. An element with a width of 100% will always take up 100% of its parent (with the right box-sizing, of course) and it's easy to read that in your code. An element that is 15em wide might take up 50% or 150% of its parent; it's not directly obvious and I find it harder to keep track of (but maybe that's just me).
Here are a few baseline styles. These haven't been tested on every possible browser/device but they are used in production applications:
* {
border-style: none;
border-color: inherit;
border-width: 0;
padding: 0;
margin: 0;
vertical-align: baseline;
}
BODY {
font: 11px/1.5 "Trebuchet MS", Arial, Verdana, sans-serif;
color: #404040;
background-color: #fff;
}
H1 {
font-size: 1.8em;
margin: .1em 0 .1em 0;
color: #2B265B;
}
H2 {
font-size: 1.6em;
margin: 0 0 .25em 0;
color: #303030;
}
H3 {
font-size: 1.4em;
margin: 0 0 .25em 0;
color: #3b5998;
}
H4 {
font-size: 1.2em;
margin: 0 0 .1em 0;
color: #666;
}
P {
margin: 0 0 1.5em 0;
font-size: 1.1em;
}
INPUT, SELECT, TEXTAREA {
border-style: solid;
vertical-align: middle;
margin: .2em 0 .2em 0;
border-radius: .3em;
-moz-border-radius: .3em;
}
INPUT[type="text"], INPUT[type="password"]{
border-color: #85a3bf;
width: 16em;
padding: .2em;
border-width: 1px;
}
INPUT[type="file"] {
border-color: #85a3bf;
width: 32em;
padding: .2em;
border-width: 1px;
}
INPUT[type="text"]:focus, INPUT[type="password"]:focus, TEXTAREA:focus {
border-color: #0066cc;
}
INPUT[type="submit"], INPUT[type="button"] {
border-color: #DDDDDD #BBBBBB #999999;
border-width: 1px;
background: #eee url([URL]) repeat-x;
padding: .2em .8em .2em .8em;
text-shadow: 1px 1px #fff;
}
INPUT[type="submit"]:hover, INPUT[type="button"]:hover {
background: #eee url([URL]) repeat-x;
}
INPUT[type="submit"]:active, INPUT[type="button"]:active {
background: #eee url([URL]) repeat-x;
}
INPUT[type="checkbox"], INPUT[type="radio"] {
margin: 0px .5em .1em .5em;
vertical-align: middle;
}
INPUT[type="image"] {
border: 0;
margin: 0;
}
SELECT {
padding: .1em;
border-width: 1px;
border-color: #DDDDDD #BBBBBB #999999;
background: #eee url([URL]) repeat-x;
}
TEXTAREA {
border-width: 1px;
border-color: #85a3bf;
padding: .3em;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
for my projects i do it this way:
browser default font sizes are 16px
setting html { font-size:100.01%;}. the 0.01% reduces the errors of the rounding off. a general "round-up" to solve the case where resizing makes the text very small at times
using this tool: http://pxtoem.com/ you can easily convert px to ems without a hitch.
so if i set body {font-size: 75%;}, the font size is 12px since 75% of 16 is 12.
px is best used for general layouting of the page like sections of the pages, margins, padding. the problem with px is, especially in browser like IE6 that have te "smallest, smaller, normal, large, and larger" text scaling, px unit fonts don't resize. however, in the advent of full page zoom, we don't need this text scaling. pages zoom, content AND text unlike the old days.
ems are best used in padding and margins of text as well as the font size of the text. in the case of the IE text scaling, ems DO resize in response to that.
percent? i don't use them or rarely in some cases.
there is a difference in how firefox and chrome render the padding in css.
what appears correct in chrome is extra padded in firefox. is there a way to solve?
.button {
font-family: helvetica, arial;
font-size: 64px;
width: 70px;
height: 45px;
font-weight: bold;
padding: 0px;
padding-top: 25px;
background-color: #000;
color: #fff;
text-align: center;
float: right;
margin: 7px 10px 0 0;
}
If your .button is a button this might be a mozilla inner focus thing... try this?
.button::-moz-focus-inner { border: 0; padding: 0; margin:0; }
Firefox and Chrome render padding exactly the same way. Your problem is elsewhere.
Are you using a reset CSS? If not, the default line-height declaration might be interfering with the rendering of your button.
For one, your height is way smaller than your font-size. Since you don't have overflow specified, your height will always be extended to at least font-size (or whatever your line-height specifies).
If your .button class is actually a <button> element, also apply superUntitled fix.
The focus-inner fix works but I also add negative top and bottom margins to get it to the right height. e.g.:
*::-moz-focus-inner {
padding: 0;
border: 0;
margin-top:-1px;
margin-bottom:-1px;
}
I used to love Firefox, but it has become a bloated mess and fell off my Christmas list years ago.
You are actually correct - there is a bug in Firefox where the button element's line height cannot be changed with the CSS line-height property.
See this link for details: http://www.cssnewbie.com/input-button-line-height-bug/
The solution is to use padding instead of line-height.
u can set a different padding for firefox
.button {
padding:0;
}
#-moz-document url-prefix() {
.button {
padding:10px;
}
}
The way that worked for me was to set the height of the object so that firefox, chrome and opera render it the same way, and remove all padding.
.footertext6{
float: left;
padding-top:10px;
width: 160px;
height:102px; */setting height here*/
background-color:#ffffff;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 15px;
border-top-right-radius: 50px;
}