I'm trying to figure out how to get the text No Managers in Database vertically positioned in the containing div like the input elements are.
I tried adding padding and margin, but they didn't work. Any thoughts on how this could be accomplished?
http://jsfiddle.net/SKTRn/
CSS
#none {
display: block;
font-size: 12px;
margin: 7px 0;
padding: 5px 0;
}
Basically, you just have to add display: block; to your CSS. I just took the liberty of changing the other styles to line things up a little better (and get the font the same size as the inputs).
Related
So, I've managed to make this CSS work, but I'm not 100% sure why it does. I know that's the classic programmer's scenario. I'd like to know why it does, though, so that I can get better.
Here are the two JSfiddle cases (they're exactly the same but with one line different):
With display:block
With float:left
As you can see, the important line of CSS:
.name::before {
content: '';
background: purple;
position: relative;
float: left; /* OR -display: block;- */
height: 22px; width: 100%;
margin-top: -22px; margin-left: -11px;
padding: 0 0px 0 22px;
}
With display:block, the pseudo-element matches the width of the main element (including the borders and padding. However, with float:left, the pseudo-element actually extends the width of the main element; if you change the padding-left to 11px, the increased width disappears, but the ::before stops short and doesn't include the main element's padding+border. This makes me think that inline elements affect other elements that it doesn't share a line with, as long as they're in the same container. Is that right?
Oddly, if you make change the padding to padding: 0 11px, it doesn't extend the right side of the ::before to the edge of the main element like I thought it would. Why is that?
Thanks!
My opinion is:
display: block;
only display the element in block,
while
float: left;
does push the element to the very left of its parents.
If you want to have all the elements to be in one line,
try to use display: inline;
First of all, I do apologize I don't put my link here, it's a site for work and I'm not allowed. I'll post the relevant parts of my code if necessary though.
So the problem is pretty basic - i have one div with some images, and a header <h3> below where my content starts . No matter how much I try to create some space between the two, it doesn't work. I've tried margin and padding on both elements, changing between position relative and absolute, and throwing in lots of <br> tags. Nothing works!
What causes my two elements to be so attracted to each other? What may cause inability to create space between two elements?
Thanks!
Edit: here's my css code for the div:
.bmwrapper {
width: 720px;
position: relative;
margin-left: auto;
margin-right: auto;
z-index: 1;
}
.bmvenstre {
float: left;
text-align: left;
z-index: 1;
}
.bmhoyre {
float: right;
text-align: left;
z-index: 1;
}
So it's one big div that acts as a wrapper, and two divs (left and right) inside. The links are displayed as blocks:
a.bmlink {
display: block;
margin: 0;
padding: 4px;
font-family: Tahoma, Verdana, Segoe, sans-serif;
text-transform: uppercase;
font-size: 18px;
font-weight: bold;
letter-spacing: 2px;
color: #08A;
text-decoration: none;
z-index: 2;
}
The header below this div is just a <h3> tag, then there's some text. Hope this helps!
You can try 2 things:
1) Put the elements overflow:hidden
2) put the elemnts display:block
If number 2 messes up with your design, try putting them float:left;
Since I don't have the code I can't give you more information, but when margins/paddings do not work, it is usually because you are either applying it to an Inline item (hence number 2) or you have a container where everything inside is floating, so the container won't have the proper height (hence number 1)
Sounds like margin collapse. Here are a couple of ways you could solve this:
Give your content div a transparent border or give your content div the css declaration of overflow: auto;
Some people when they give it a 1px border they also give it a -1px margin to counter the border.
I'm new to CSS and I'm trying to understand how to fix the following line from not working for top and bottom margins. It works for side margins just fine, however:
.contents {
...
margin: 10px 10px 10px 10px;
}
Example: http://jsfiddle.net/LCTeU/
How do I fix this?
Edit:
I've also tried padding the container instead, and that just expands the container to maximum size (why?):
.container {
...
padding: 10px 10px 10px 10px;
}
Use overflow:auto on any of the elements that are involved with the collapse. For example:
article {
overflow:auto;
}
jsFiddle example
This answer is based off of the fiddle you provided.
I think your approach is incorrect in that your applying a margin to the article to space it within the parent div tag. It is better to use padding in this case, since your attempting to separate the content from its outside border. So apply:
article {
//display: block;
clear: both;
padding: 10px;
}
This will cause the article tags to increase in size, however the borders of the container div elements will now be touching. To create space between elements a margin is applied.
.rounded-box {
background-color: #959392;
border-radius: 15px;
margin: 10px 0px;
}
Working Example http://jsfiddle.net/LCTeU/4/
So just to recap, when you want to create space between two elements use margin. When you want to create space between an element and its border (or you want an element to be surrounded by whitespace) use padding.
I found a fix that does not require a padding, and does not require changing the overflow of the container element:
article:after {
content: "";
display: block;
overflow: auto;
}
The idea being that we add another element at the bottom that disrupts the collapsing margin, without affecting the height or padding.
As per the fix that Erik Rothoff suggested, which does not seem to work in Safari, first I tried the following:
article:after {
content: "";
display: inline-block;
overflow: auto;
}
This does work in Safari but takes up space which I could not get rid off, messing up the grid so much that I would need to change margins.
Then I decided to combine the two by doing the following:
article:after {
content: "";
display: block;
padding-top: 1px;
margin-top: -1px;
}
This works in Safari, has an acceptable height of 1px which is negated by the negative margin top.
(I'm looking at this site in IE 8.) As you can see the content floats center knocking the sidebar below it. It works perfectly in Chrome. I can't think why the float:left; command isn't working in IE.
#content {
margin: 5px 0 5px 5px;
font: 1.2em Verdana, Arial, Helvetica, sans-serif;
width:65%;
float:left;
}
Thanks for your help.
Tara
If you add overflow: hidden to your ul#list-nav then that will prevent the floating navigation messing up the rest of the document.
As for why the navigation is displaying strangely, it's because you're specifying your widths and layout badly. What you should be using is this:
ul#list-nav {
overflow: hidden;
}
ul#list-nav li {
width: 16.66%;
float: left;
display: block;
margin: 0;
padding: 0;
}
ul#list-nav li a{
display: block;
margin-left: 1px;text-decoration: none;
padding: 5px 0;
background: #754C78;
color: #EEE;
text-align: center;
}
That way, the width of each element is exactly 16.66%, rather than 16.62% + 1px
what i currently see in IE8 is:
the problem is that menu links are too wide in IE. You've set the width to 16.62% to each anchor in the menu and that's too wide for IE. Since the width of your content is fixed I suggest you set fixed width in pixels (132px) for these links so they fit on one line and look consistent across browsers, also removing li style setting margin: 0.5em 2em to fix positioning problem in IE.
After my fix I see this:
To me it looks like theres nothing really wrong with the content.
In ie6-ie9 the menu seems to be failing in some way.
and also the menu goes in two rows which pushes everything down. I'm not sure if that is all due to the s letter or not at this point..
Note that the extra letter s seems to be somewhere between #menu and #content .containers.
Edit2: the problem is clearly the menu a width which is too much and the menu goes into two rows.
The way menu is often done is that the ulor outer div holds the color and then the menu li are either centered within that or just plain floated to the left. this way you get the full height feel without the tourbles of the menu braking like this ( though if you do it without ignoring the width.. it is possible with too many menu items and so on. )
add clear:both; on menu container.
note: is broken in Firefox to
I have a site that I've inherited, and am going a bit insane with the CSS. There's a div that has a height of 185px - it shows in Computed Styles, and it's very obviously being applied to the divs with the same class. However, the height doesn't show up anywhere in the stylesheet, and it doesn't show up under Applied Styles or Inherited From in the element inspector. (See screenshot.) I need to get rid of the height, as it's causing some issues with truncating content (we don't want to use overflow:scroll because there are many of these divs on the page - one per database record - and that's an awful lot of scrollbars.)
The div class is search-result, and you can see in the right pane the height:185px attribute. Here's the code we actually have in our stylesheet for that class plus sub-elements:
#content .search-result {
margin-bottom: 1em;
border-bottom: 1px solid #ccc;
padding: 1em 0;
}
#content .search-result .image-box {
float: right;
margin: 0 0 1.5em 30px;
font-size: .75em;
text-align: center;
}
#content .search-result .image-box img {
border: 1px solid #eee;
margin-bottom: .5em;
}
#content .search-result ul {
list-style: none;
margin: 0 0 1em;
}
I've also run grep on the entire site install, and the text "185px" doesn't exist anywhere on the server that I can find. Where else could this "ghost" style be getting set?
Looking at your CSS, it looks like 'em' units are being utilized, which looking at chrome's element inspector, it shows the unit as 'px', even when I explicitly list it as 'em'. Check around for height values declared in 'em' as well. Also I recommend using the "Styles" dropdown below computed styles to figure out which specific rules could be setting the height.
Off the top of my head, I'd say that, because "div.search-result" has no declared height, it's expanding to the height (plus any padding, margins, borders, etc.) of the "div.image-box" and anything else that is a descendent of "div.search-result".
Possible reasons:
Height could have been set to the child elements. Check for them.
Check if any other unit of measurement, like %, em have been used.
Checking the css values in computed styles won't help you. Check in the CSS tab