I have some strange behaviour in using padding.
I have a div as a wrapper. This wrapper has a padding of 25px to both sides:
.wrapper #header #navline #log form .small {
height: 25px;
width: 180px;
padding: 5px 25px;
}
in that wrapper I have an input field with the following css:
input[type="text"],[type="password"] {
font-size: 10px;
width: 180px;
height: 18px;
line-height: 18px;
padding-left: 5px;
padding-right: 5px;
outline:none;
}
and as error class:
input.error {
background-image: url(../images/error.png);
background-repeat:no-repeat;
background-position: 160px 50%;
width: 165px;
padding-left: 5px;
padding-right: 20px;
position: absolute;
z-index: 3;
}
so I'm getting crazy through setting it up the right way. The problem is that chrome/safari and Firefox seems to be different in handling padding properties. For example when leaving height property in chrome/safari there is something like padding top/bottom automatically added to the input field. in firefox there is a different height of the input field. to show an image:
firefox:
chrome:
the main problem is that I would like to center the input field in the wrapper div. the width of the input should be 180px. this means there is 25px to each side left. the text padding is also 5px to each side. so when using padding properties the new the width of the input field is the width minus the padding. so this will be the first question. when using pading-left and padding-rightof 5px is this equal to 180px(width input field) minus 10px (padding) or is the padding 0px because of the left hand side +5px and right hand side -5px? so what will be the correct width of the input field?
Second question is regarding to the error class. In that I will add a picture and would like to increase the right hand padding from 5px to 20px. even here the question whats the width of the input field? I thought the logic behind would be 180px minus +5px left, -20px would be 165px?
Third question: I tried all method but the result was different to each browser. Is there a failure behind my logic because padding should be padding or not?
Add css3 box sizing to every element that has padding. It will fix the issue.
.text {
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
Related
Here is 8 floating blocks with equal content with some problems:
if I use padding:10px for sideblock .inner to create "border" it does not work good (padding-bottom it's look like disapeared)
if I put a cursor on block - it can't be appeared at the top, and do not move othes block
How makes block working well?
HTML:
<div class="sideblock"><div class="style-menu"><div class="inner">
Everything around you that you call life was made up by people that were no smarter than you, and you can change it, you can influence it, you can build your own things that other people can use.</div></div></div>
CSS:
.sideblock {
width: 220px;
height: 80px;
overflow: hidden;
margin: 10px;
float: left;
}
.sideblock .inner {
background: #ffffff;
padding: 10px;}
.sideblock .style-menu {
padding: 3px;
background: #157ba1;
background: linear-gradient(to right, #157ba1 0%,#5fa31c 100%);}
.sideblock:hover {
box-shadow: 0px 0px 5px #000;
overflow: visible;
height: auto;}
Here is my code - http://jsfiddle.net/2HqZV/1/
Thx for support
Well i assume you want the have the same look as when the div is hovered but then smaller? You shouldn't have to use any overflow on the div it self atfirst, it should response to your given height.
When you inspect your element you can easially see the heights of your elements.
You'll see that your .style-menu div hasn't the same height as .sideblock, to fix that you can add a inherit height to your style-menu:
.sideblock .style-menu {
height: inherit;
padding: 3px;
background: #157ba1;
background: linear-gradient(to right, #157ba1 0%,#5fa31c 100%);
}
Now when you look further you see that your padding at the .inner div element expends the actual given height. What you want is the padding to be inline. You can easially do this with box-sizing. And finally you can 'cut' the text by adding a overflow:
.sideblock .inner {
background: #ffffff;
padding: 10px;
height: inherit;
box-sizing: border-box;
overflow: hidden;
}
jsFiddle
I hope this is what you meant.
btw, i find your way of adding a border very unique ^^
Update
So to let every element that expends ignore every other element, you should take it out of the document flow. You can do this with position: absolute;. However what absolute position does is indeed ignoring all the other elements, but you want to have the same position. Because the element has no offset positioning (top, right, bottom, left) it will be placed at the left corner of your screen(acts like it is the only element in the DOM). To keep the elements position we are not changing the .sideblock but the content of that; .style-menu:
.sideblock:hover .style-menu
{
box-shadow: 0px 0px 5px #000;
position: absolute;
}
Because this element goes on top of the other, you want to add the shadow here.
Now the .sideblock element has no content because the content has become absolute and so out of the document flow. To fix this you can give this element a min-height:
.sideblock:hover
{
min-height: 80px;
height: auto;
}
jsFiddle
In IE8 my header looks like a bottom margin is set, yet margins are set to 0px. I've set a border property to test this.
I'm using DIV tags not HTML5 header, nav, etc.
Now that I'm looking at this picture, I'm noticing an extra pixel on the right as well.
#header
{
margin: 0px;
padding: 0px;
width: 800px;
height: 200px;
border: 1px solid red; /* test */
}
#nav
{
margin: 0px;
padding: 0px;
border: 1px solid black; /* test */
}
Where is the grey colour in the header coming from? If it's an image, you might want to check that its dimensions match those in your CSS definition (i.e. 800px x 200px). Otherwise, try removing any margins on the image.
Without seeing your full HTML structure, it's difficult to troubleshoot.
Like this
With only this code
<span>1</span>
http://jsfiddle.net/MafjT/
You can use this css
span {
display: block;
height: 60px;
width: 60px;
line-height: 60px;
-moz-border-radius: 30px; /* or 50% */
border-radius: 30px; /* or 50% */
background-color: black;
color: white;
text-align: center;
font-size: 2em;
}
Because you want a circle, you need to set the same value to width, height and line-height (to center the text vertically). You also need to use half of that value to the border radius.
This solution always renders a circle, regardless of content length.
But, if you want an ellipse that expands with the content, then http://jsfiddle.net/MafjT/256/
Resize with content - Improvement
In this https://jsfiddle.net/36m7796q/2/ you can see how to render a circle that reacts to a change in content length.
You can even edit the content on the last circle, to see how the diameter changes.
Using CSS3:
span
{-moz-border-radius: 20px;
border-radius: 20px;
border-color:black;
background-color:black;
color:white;
padding-left:15px;
padding-right:15px;
padding-top:10px;
padding-bottom:10px;
font-size:1.3em;
}
http://jsfiddle.net/NXZnq/
You have many answers now but I try tell you the basics.
First element is inline element so giving it margin from top we need to convert it to block element. I converted to inline-block because its close to inline and have features of block elements.
Second, you need to giving padding right and left more than top and bottom because numerals itself extend from top to bottom so it gets reasonable height BUT as we want to make the span ROUND so we give them padding more on left and right to make room for BORDER RADIUS.
Third, you set border-radius which should be more than PADDING + width of content itself so around 27px you will get required roundness but for safely covering all numerals you can set it to some higher value.
Practical Example.
The border-radius shorthand property can be used to define all four corners simultaneously. The property accepts either one or two sets of values, each consisting of one to four lengths or percentages.
The Syntax:
[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?
Examples:
border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px;
border-radius: 5px;
border-radius: 5px 10px / 10px;
I your case
span {
border-radius: 100px;
background: #000;
color : white;
padding : 10px 15px;
}
Check this Demo http://jsfiddle.net/daWcc/
In addition to the other solutions, http://css3pie.com/ does a great job as a polyfill for old internet explorer versions
EDIT: not necessary as of 2016
I'm having a CSS problem in Chrome (build: 17.0.9) with an image element that is not showing up. Please take a look at this link: http://next.lab501.ro/smartphone/nokia-n9-meego-to-go/3
In the top-right part of the main body you should see a list of pages with two image arrows acting as next and previous links. In Chrome only the next image arrow appears.
In any other browser (Firefox, IE9) everything shows up OK. What am I doing wrong?
You have to give .prev - float left [it will automatically make the element block]. is an inline element -> width, height, padding [top, bottom], margin[top, bottom] etc.. will not get applied unless its a block level element.
If you set float:left in your .prev element, it shows up, but you have to lower the right padding so it gets closer to the numbers.
In http://next.lab501.ro/wp-content/themes/new-theme/style.css, it says:
.prev {
background: url(img/nav-left.png) no-repeat scroll 0 0 transparent;
padding: 3px 12px 5px;
margin-right: 2px;
width: 23px;
height: 22px;
}
Add a float: left; to the end of that. I would also change the padding on the right side to move it closer to the numbers. I changed it to 0 in this case. The code now looks like this:
.prev {
background: url(img/nav-left.png) no-repeat scroll 0 0 transparent;
padding: 3px 0 5px;
margin-right: 2px;
width: 23px;
height: 22px;
float: left;
}
I am building a 3 column web page (header & menu bar above a left nav, main area and right sidebar with a full width footer on the bottom). I have background colors for each column but they cut off at the end of the text instead of filling the whole column. Is there a way to fill the whole column that does not rely on using a table (td)?
Here is my CSS for the general layout:
#container
{
float: left;
width: 100%; /* IE doubles the margins on floats, this takes care of the problem */
display: inline; /* this is where Ryan Brill (author of the ALA's article) and I go in "opposite directions" */
margin-left: -200px;
}
#left
{
float: left;
width: 180px; /* IE doubles the margins on floats, this takes care of the problem */
display: inline;
margin-left: 200px;
padding: 0px 0px 0px 5px;
background: url('/App_Themes/Default/images/RightColumnBackground.png') repeat left top;
}
#main
{
/* the width from #left (180px) + the negative margin from #container (200px) */
margin-left: 380px;
padding: 0px 0px 0px 5px;
}
#sidebar
{
/* this is to keep the content of #sidebar to the right of #main even if the content of "main is shorter */
padding-left: 100%; /* this is to "bring back" the #sidebar that has been moved out of the viewport because of the padding value */
margin-left: -220px;
}
I know I can set a height in the style but that pins the height to a certain number of pixels. Is there a height: fill; type option?
This is a very common problem. A good approach is to use faux columns.
Not in any CSS that'd be currently widely supported across browsers, but there are ways of approximating it.
What you need is the Perfect Liquid Layout in Percentage widths, em widths, or pixel widths.