I have a containing an <a> containing an <img>.
All elements are styles with border,padding,margin set to 0.
The size of the image is the size of the div, as shown in firebug.
Firebug shows the a link does not extend to the whole size of the img or div. Instead it occupies some space at the bottom, and extended 3 pixels below the div.
How do I get rid of them? The a tag has text-decoration: none;
Thanks.
mention display:block in the image style
img{
display:block;
}
updated jsFiddle File
Related
I have two div id's. One has has an image in it and the other has a background image. There is an unwanted space in between these two divs. In the dreamweaver design view it appears as if there is no space, but if I make it live or preview in browser the space appears again.
This is the css for the divs
#header {
text-align: center;
padding: 0px;
margin: 0px;
}
#content {
background-image:url(img/ContentBox.png);
background-repeat: no-repeat;
background-position:center;
padding: 0;
margin: 0;
}
This is my body html (ignore the multiple line breaks, this is just so I can see the bg img in the div)
<body>
<div id="header"><img src="img/Header.jpg" /></div>
<div id="content"><br><br><br><br><br><br><br></div>
</body>
Images have a default display setting of inline. This causes them to flow inline with text, vertically-aligned with the baseline. All text is vertically-aligned with the baseline by default as well, unless you change it by setting vertical-align to something else on its containing element.
What is baseline?
The baseline floats above the bottom of the actual line. Look at the lower-case letter g. The bottom of the top circle is the baseline. That's where the images are getting aligned.
You can solve this multiple ways, but here are a couple:
Vertical Alignment
Again, image elements are set to display: inline by default. Assuming you don't want to change this, you need to adjust how the image element aligns vertically on the current line of text.
The vertical-align CSS property sets the vertical alignment of an inline element on the current line of text. It doesn't set it relative to the container.
Therefore, you can set the vertical-align property to middle, top, or bottom, and as long as the image element is larger than the line-height of the current line of text, it will not have the extra space below it.
However, you need to remember what I just said about line-height. In the event that your line-height is larger than your image element, vertical-align will do more than remove that extra spacing: it will actually align the image element on the line accordingly. See this jsFiddle to see an example of how a line-height greater than the height of the image will affect the result.
So, keeping with the HTML that you provided, to set the vertical alignment, you'd do the following CSS rule:
#header img {
vertical-align: bottom; /* or top or middle */
}
Displaying as Block Level
Another option would be to change the image element to display as a block level element. I don't recommend this approach unless you know you want a block level image.
Block level elements automatically fill to their container, and don't flow inline with text or other inline elements. Also, if you set a float on the image, this would force it to be block level.
So, you have two options to display as block level:
#header img {
display: block;
}
or
#header img {
float: left; /* You could float right too */
}
http://74.52.155.226/~projtest/team/harmeet/smoke51/products.html
That is the design that i am currently working on. If you inspect element on the banner below the navigation you can see that the 10px solid white border is taking some gap below the image. I am puzzled as to where is that coming from as logically the border should surround the image only no matter what the height of image is.
you can put display: block; on your <img>
That is because your image in the div.innerbanner is inline (images are inline be default). The space you seen is the descender height.
You need to create a block element of the image to prevent any descender height to show. Try adding this to your CSS:
div.innerbanner img { display: block; }
I have a background image that is positioned correctly on the background of a ul li item.
I want to position it just off the edge of the lime container, however when I do position it correctly it cuts off any part of the image not inside the container.
How can I make it show even if it is outside the container, and not cut off like this?
Desired result
CSS
body ul#main_navigation li li:hover > a, body ul#main_navigation li li.over > a
{
background-image:url(/images/nav_arrow_right.png);
background-repeat:no-repeat;
background-position: 197px 12px;
background-color: #0F0;
color: #FFF;
}
You cannot have a background-image protrude from any element. You could use a span attached to the element, or attach the background image to the element next to it, giving the illusion that it is part of the original element.
Personally I would use a span with a background image inside the element positioned to sit outside of the div.
I dont think you can have an image that breaks the bounds of the container. You could try making the li slightly wider, to accomodate the arrow image and then move the child element to the left.
Or you could just put the arrow as a background on the child element.
Why do not you put this image as background of the first list item of the sublist?
I want to get rid of the space below my header logo in Garland.
I know the header is 80 pixels tall, but when I try changing that value it messes up other things.
I want to reduce the dark colored section below my logo (which is empty) by 20 pixels, and also get rid of the lighter colored section that appears just above the main column (and is about 20 pixels tall).
You can see my site on http://www.energyjustice.net.
Remove the background css properties on the "right corner" and "left corner" divs. Next, remove just the url section in the background property in the "squeeze" div.
Add this to the "squeeze" div:
margin-top: 45px;
Replace the padding in the "left-corner" div with this:
padding: 0px 25px 5em 35px;
Now, you can lower the pixels in the height property of the "header" div to bring everything up. Finally, you'll need to shrink the red background image that appears in the "wrapper" div with a simple paint program so that it doesn't clash with the rest of the content.
*Or if you want a quick and dirty fix, change the background property in the "wrapper" div to
background: #FBF9F2 url(body.png) repeat-x 2% -1.4%;
I want to set a background image in a div class, and want to add some text on the image, with 5px padding but my text is overflowing, please see my css and demo here http://jsfiddle.net/LcQzG/ and help me with it. Thanks.
You should set a width and add
word-wrap:break-word;
example : http://jsfiddle.net/LcQzG/6/
Either make the background image higher, make the text smaller, make the box wider or add this to add a scroll bar:
overflow: auto;
or to hide the overflowing text:
overflow: hidden;
You need to set a width on the containing div. The width would be the width of the image - 10px (the sum of the left and right padding).