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
Related
I wrote in parenthesis and in all caps, the things I am confused about in my homework instructions.
This is my homework instructions:
On the first line of your "main.css" file create a comment that reads "general". Under that comment write the following
Using the universal selector set the margin and padding to zero for all elements. We are doing this to eliminate all the default margin and padding that the browsers add.
Add the css line from the templates page (on the course website) that groups some selectors and sets them all to "display block".
Skip one line and write a comment that reads "wrapper". Under that comment write a css id of "wrapper" and add the following properties.
Give it a width of 1024px
Give it a margin property with the values of 0 and auto (margin: 0 auto centers the page on the browser window. We have to have a width to allow it to show that it is centered.)
Skip one line and write a comment that reads "main".
Put a border of 1px solid #000 around the left, right bottom of the main element.
(NOT SURE IF I DID THIS PORTION CORRECTLY ^)
Add a padding of 10px to the main element. We add a padding so the content will not butt up against the edge of the main element
Using a contextual selector select all the images within the divisional element with the id of "images" and set each image height to 90px, width to 120px and a margin of 20px around the image. We are using CSS to resize our images.
(NOT SURE HOW TO WRITE A CONTEXTUAL SELECTOR TO SELECT ALL THE IMAGES WITH THE DIV ELEMENT WITH THE ID of "images")
This is what I have created but am not sure if it is correct:
/* general */
Using the universal selector set the margin and padding to zero for all elements. We are doing this to eliminate all the default margin and padding that the browsers add.
*{margin: 0; padding: 0;}
article, aside, figure, footer, header, main, menu, nav, section {display: block;}
<style>
/* wrapper */
#wrapper {width: 1024px; margin: 0 auto; }
/* main */
main{border-left: solid 1px #000; border-bottom: solid 1px #000; border-right: solid 1px #000; padding: 10px; }
div images, #images {height: 90px; width: 120px; margin: 20px; }
</style>
The wording in your homework is incredibly poor, but what I believe you're looking for is to target all elements with an ID of images contained within a DIV. This would be:
div #images {
height: 90px;
width: 120px;
margin: 20px;
}
This will target any element with the ID of images inside any DIV, even if there is an element in between them (such as <div><span><img id="images"></span></div>). Note that you can also target direct descendants with >. div > #images will target <div><img id="images"></div>, but not <div><span><img id="images"></span></div>.
Keep in mind that having multiple elements on the page with the same ID is invalid markup, and the page will fail to validate correctly. The only situation where this would be valid is if your teacher is meaning to have a single element called #images on multiple different pages. You should use classes for targeting multiple elements on the same page. It's possible your teacher meant for you to use a class, which would be div .images.
As for your border, you have done it correctly, though note that you can set all four borders at once with the shorthand border:
main {
border: solid 1px #000;
padding: 10px;
}
Also, keep in mind that your second line should also be in a comment, or else it will throw a syntax error:
/*Using the universal selector set the margin and padding to zero for all elements. We are doing this to eliminate all the default margin and padding that the browsers add.*/
Hope this helps! :)
Hi i will try to answer this the best that i can, i am only a programming student so this is my best shot :)
First of all, id's has to be unique you cant have two identical id's on the same page.
If you have etc
<div id="test"></div>
<div id="test"></div>
And you try to style it like #test{background-color: red} only the last div will actually have a red background.
But basically this is what he wants:
/*--GENERAL--*/
*{
margin:0;
padding: 0;
}
/*--WRAPPER--*/
#wrapper{
width: 1024px;
margin: 0 auto;
}
/*--MAIN--*/
main{
border-left: 1px solid #000;
padding: 10px;
}
div #images img{
height: 90px;
width: 120px;
margin: 20px;
}
Examples of contextual selector
I hope this will help you with your programming journey! :)
Code snippet (jsFiddle):
.root * {
cursor: default;
font-family: Arial;
font-size: 16px;
padding: 0px;
outline: none;
border: none;
text-align: center;
display: inline-block;
vertical-align: middle;
line-height: 0px;
}
.clickable {
background: orange;
margin: 5px;
box-sizing: content-box;
width: 100px;
height: 40px;
}
.clickable .label {
margin: 0px;
}
<div class="root" style="padding: 60px;"><!--
--><button class="clickable"><span class="label">label</span></button><!--
--><div class="clickable"><span class="label">label</span></div ><!--
--></div>
Even though the CSS directives for the button (on the left) and the div, and for their contents, are identical, the vertical positioning of these contents is completely different:
I would like to know
what other CSS setting accounts for this difference?
(Note: by "other CSS setting" I mean one that is not explicitly set in the example's CSS.)
EDIT:
I've created another jsFiddle to demonstrate why #Jim's suggestion (in his comment) does not always work. In this jsFiddle, all the CSS properties (including the inherited/computed/browser-assigned/you-name-it ones) for the .clickable and .clickable .label classes are given explicit values.
Even though these settings make no explicit distinction between buttons and divs, the observed difference in vertical positioning between buttons and divs persists.
This means that the explanation has to be that some setting (probably one that has value like auto or normal) is getting interpreted differently depending on whether the context is a button or a div. Such context-dependence contributes much to making CSS the living hell that it is.
It's your line-height: 0px; value that is affecting the div. On block level elements, the line-height properties specifies the minimum height of line boxes within the element. Elements such as buttons or other input elements, line-height has no effect.
Update
I should say that in some cases line-height is allowed to have affects on buttons.
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;
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).
I need to create a dialog box using custom images created by a designer. For purposes of this discussion, this the correct answer for my application. The dialog box must be able to withstand changes in width and height. This is easy to do with a table, but I want to maintain a table-less design, so I figured that I could do this using 3 rows of DIV's. For example, float an image to the left, float an image to the right, and put a DIV in between then with the image set to the background so that text can be entered over it.
Here is demo of my failed attempt to do this: (just one row shown)
http://www.seaburydesign.com/rounded/demo.html
As you can see, this almost working. But the DIV in the middle is only the size of the content inside of it, even though I have set the height and width. I need to keep the width flexible.
Any ideas on how to fix this?
Remove the following line:
display:inline;
Besides being useless in this case (the inline behavior is already working because of the floats) "inline" property doesn't allow you to set the element's width or height. For a clearer understanding, read w3c's article.
If you make the rounded corners of your images white instead of transparent, you can apply the background-image to the header-tag instead of the middle div. This will create the impression that the middle div has the same height as both images.
Update
If possible (depending on what browsers you need to support), you could do rounded corners with CSS3's border-radius property, instead of using images. That would be something like:
header {
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
You could also try this border-radius CSS-generator to find the properties that suit you best.
The css display: inline in your container div's voids any setting for width. Use display: block; float: left; margin: 0 XXpx; for your div (with XX being the width of the images on the sides).
Edit:
Concretely this would be:
div#yourdiv {
background-image: url("images/module_header_bg.jpg");
color: white;
display: block;
float: left;
font-weight: bold;
height: 42px;
width: auto;
}
and both img tags
img {
float: left;
}
This creates a dynamic sized box for your content, or you set width of the div to a specific value like width: 300px instead of width: auto.