I just wonder where is this space between the end of the image and the end of the li's are coming from:
http://bluesys.ch/lussy/
its just a simple UL > li > img
spacing from hell http://bluesys.ch/lussy/spacingfromhell.jpg
code:
div#slider {
border: 5px solid #fff;
}
div#slider ul li {
border-bottom: 1px solid pink;
}
div#slider ul li img {
border-bottom: 1px solid green;
margin: 0;
}
note that all margins and paddings are set to 0 by my reset.css
can someone help me out? I colored the borders that you can see the spacing i speak of. I use firefox.
Try setting the line-height to 0 for those images and/or LI elements. Currently you have that set to 1.4 in the body, and the img will inherit that. A brief test of setting line-height: 0 in Firebug made the images stack flush.
If you want to get rid of the gaps, you could try:
li {
margin-bottom: 0;
padding-bottom: 0;
}
You may want a special class for those li elements tho, so that the CSS that gets applied doesn't do it to ALL your li elements on the site.
But, what's wrong w/ the gap? I kind of like it. Helps frame each image...
Images are inline elements just like text and by default they are positioned on the font base line leaving space for the ascender. There are different ways to stop that:
line-height: 0 (as suggested by Robusto)
display: block
vertical-align: bottom
Related
Hi I am new to HTML and CSS so I was wondering what the difference was between
putting all of my paddings, display, list-style-types under
ul#tabs. For example if I put display:inline; inside ul#tabs, my text wont appear in the same line. I am confused as too what the difference is between putting values under #tabs li, and #tabs li a and #tabs. My guess is that any property under #tabs, will happen to anything inside including a's, p's or whatever else I included within the ID of tag and #tabs li a, does things only to <a>'s within the tab id. If this is the case what does ul#tabs li do, and why cant i put display: inline , in my ul#tabs{} portion of the code. Sorry for the long questions. Thank you.
body{
}
#Title{
position: absolute;
top:5px;
right:600px;
}
ul#tabs {
list-style-type: none; margin: 30px 0 0 0; padding: 0.2em 0.5em 0.3em 0; /* takes off bullets (list-style..) */
}
ul#tabs li {
display: inline; /* puts them on same line */
}
ul#tabs li a {
color: #42454a; text-decoration: none; /* take off underline */
padding: 0.6em 0.7em 0.8em 0.9em; /* padding within a makes space between a */
}
Drew is correct, you are looking at specificity in this example and what it applies to. Think of CSS as boxes and, in most cases, what gets changed in the outer box affects the inner boxes, too. :) If you want to affect the middle box with padding, you place your padding there, but keep in mind the inner most box will be affected as well. In that sense, you can apply values very broadly:
body{
}
#Title{
position: absolute;
top:5px;
right:600px;
}
ul#tabs {
list-style-type: none; margin: 30px 0 0 0; padding: 0.2em 0.5em 0.3em 0; /* takes off bullets (list-style..) */
color: #42454a; text-decoration: none;
padding: 0.6em 0.7em 0.8em 0.9em;
}
ul#tabs li {
display: inline; /* puts them on same line */
}
This is one way you could affect all text, and lists under #tabs, but make sure individual lists are inline.
Adding things like:
ul#tabs li {
Just makes it even more specific, as you are targeting individual list items under a list parent with the ID "tabs."
A better way to write this is:
#tabs li
It would look for an element with the ID "tabs" and see if there is list items under it. Now, if you want to be really technical, you could use a class for list items as well, such as "mylistitems," then write:
#tabs.mylistitems
This would search for an element (in this case ul) with ID "tabs," then begin looking for another element under it with the class "mylistitems." Technically, you can also do:
ul li {
}
This would target all list items. Sorry it was a long response, hopefully this gives you some unique ways to write CSS selectors.
Alright, I already asked a question about how to get my link text left-aligned: test wraps below bullet ul li. The solutions involved changing list-style-position to outside. The problem is that I also want the bullet points inside my div. Is there a simple way around this?
Add padding to the contaning div
http://jsfiddle.net/GX2yN/3/
div {
padding:0 25px;
}
OR
just to the ul
.outside
{
list-style-position: outside;
padding: 0 25px;
border: 1px solid red;
}
JSfiddle 2
I have this website I'm working on:
https://dl.dropbox.com/u/10264776/Web%20sustn.sk/odbory/fotograficky_dizajn.html
For some reason right of this box (Ctrl+F 1992) presents a weird behavior where the content of the li is pushed by few pixels, it's not is the styles, they're same for all of them, however I noticed that it's the only ul that doesn't have it's content push from one line to another like the others in the table do.
Any ideas how to fix this? All help will be greatly appreciated.
Just try to comment on style.css line 119
.list {
border-color: #BBBBBB;
border-style: solid;
border-width: 1px 0;
margin-bottom: -1px;
/*width: 560px;*/
}
By doing this your problem will solve only for that element but your width will remove from entire elements where .list is applied so you need to tweak on that particular table where 1992 is mention. It is table behavior it expands the table cells as per the text and layout or breathing space. So you need to put the width on that particular table cells.
Use like this
.list ul li
{
list-style: none;
padding:0;
margin:0;
padding-left: 1em;
text-indent: -.7em;
}
li:before
{
content: "• ";
color: red; /* or whatever color you prefer */
}
for a detailed explanation look here
http://studiobambini.com/articles/Lifestyle/bambini-future
Hover over the Fashion menu item and you will see what the issue is in IE. In chrome and firefox this works fine.
Basically what I believe is happening is some property or other is inheriting a property in IE but not in chrome. I've tried text align, i've tried setting the widths, and changing the background colours.
It almost seems like there's other elements that have a background and are covering the rest of the elements. I'm at a total loss as to what to try next.
Can I get any suggestions on items to try to fix this?
Thanks
In IE the padding is not taking correctly for the 'a' of the menu in chrome and FF its taking from line 222
#menu ul li ul li:last-child a,
#menu ul li ul li a {
background: none repeat scroll 0 0 white;
color: #8A8C8E; font-size: 13px;
height: 30px;
margin: 0 10px 10px 0;
padding: 10px 10px 10px 60px;
width: 155px;
}
I've setup a demo of my problem at the following url: http://jsfiddle.net/YHHg7/4/
I'm trying to do the following:
legend {
display: block;
border-bottom: 1px solid red;
margin-bottom: 50px;
}
However it seems all browsers ignore the display: block on a legend tag. Is this the correct behaviour for this tag or am I doing something wrong?
<legend> is a block-level element by default, so whether you include display: block there's no difference. However, it's treated specially together with <fieldset> by browsers as a label for a fieldset.
To "detach" it from the <fieldset> you can give it a non-static position, or float it, or even just play a little more with its margins. Results can be a little unpredictable, though, again due to the special treatment of both elements.
IMO the best thing you can do to control legend is just leave it as a semantic fixture only.
CSS:
legend {
display: block;
margin: 0;
border: 0;
padding: 0;
width: 100%;
}
And then use a span inside it to control all of your desired styling:
HTML:
<legend><span>Span to the rescue!</span></legend>
CSS:
legend span {
display: block;
padding: 0 20px;
border-bottom: 1px solid red;
}
Clean, semantic, and generally easily manipulated across different browsers
A legend is a block-level element by default. If I add the width back in using Chrome (Dev channel), the width of the legend is changed appropriately.
If you're instead wondering about the margin style, a legend can only have its left or right margins set, and that would place it relative to the fieldset its's contained in. If you want to add spacing to the other elements, then you would probably want to add padding to the fieldset itself.
Uncomment the width attribute if you want the red line to go all the way across.
legend {
display: block;
border-bottom: 1px solid red;
width:100%;
margin-bottom: 50px;
}