I am not sure whether the padding on the bottom (look for the red pixels below the photo) is set on the image, or on the content div, but I want to get rid of it. A jsFiddle of my issue is here: http://jsfiddle.net/FERUs/
Add display: block to your images css:
#picture {
max-height:100%;
max-width:100%;
display: block;
}
More info here.
Related
would appreciate your input on this. Im quite new to CSS, so can't figure out where I've gone wrong with this.
Here's the link to the website: https://test.irinamccann.com
The problem is this: either the top-header, or video containers are bigger than the screen. The rest of the content is fine though.
First noticed on older Firefox, now I see that when you scroll the site to the side, there's a big white section on the right hand side.
Just don't know where it's coming from???
Custom CSS thats been added, that might be causing the issue (??)
.site-brand-inner {
position:absolute; height:100%; width:100%;
display: table;
}
.site-logo {
display: table-cell;
vertical-align: middle;
text-align:center;
}
#masthead {line-height:89px
}
your .site-brand-inner div has width 100% with absolute position. So it's width will be that of screen but as it has some left margin it will need space in right side and that makes it scrollable to right.
Remove the width 100% in your index page at line number 168 you'll be good to go.
.site-brand-inner {
position:absolute; height:100%; width:100%; //remove this width
display: table;
}
I have read lots of similar questions and tried to apply the answers by adding divs with position:absolute and relative aroudn the images to the code but I cannot get it to work.
http://store9711.americommerce.com/milk-glass-vases-and-candle-holders.aspx
I need to bottom align these thumbnails while keeping them horizontally centered
Is anyone able to show me how?
You will need to use the vertical-align property
CSS
.category-product .thumbnail img {
display: inline;
vertical-align: bottom; /*Add this line*/
}
.category-product .thumbnail{
display:block;
}
Also give display:block to the anchor tag to keep the image horizontally center.
.category-product .thumbnail img {
display: inline;
vertical-align: bottom; /*add this*/
}
The default Bootstrap setup (line 7 of bootstrap.min.css) on your site aligns to middle (applied to img HTML element). You'll just need to override for the category images.
This seems like it should be really simple, but I'm having a CSS moment..
One div, with three <a>'s in it, each of which have a display of inline-block and width of 33%. Why does the last one drop onto a new line?
Css
div {
width:100%;
background-color:pink;
}
a {
display: inline-block;
width:33%;
margin:0;
padding:10px 0px;
}
The result, which can be seen in this plunkr:
It's because of the whitespace between your <a> tags. If you put all of them on the same line, they will always fit. You can see the gap in the screenshot you posted. There is a space between the green and orange.
Here I have create one div box using css stlye.
Fiddle: Correct view
But if the description is small then content misaligned as below:
Misaligned box
i tried changing the position and css values, but no luck.
Can some one tell me how can I keep footer part on it's position even if the content is small.
You need to clear the floats:
.footer-working-area {
clear:both; /* this sets the element flow back to normal */
background: transparent url(...) left 5px repeat-x;
/* /\ have some padding for the img */
}
Now the footer always stays below the picture, no matter how few text content you have.
Here you have the accordingly modified example fiddle.
You can give your text a min-height...
.text { min-height: 110px; }
... or a height if you don't expect longer texts
.text { height: 110px; }
... or clear the floats as Christoph mentioned in an other answer.
Add clearfix to the .text class
.text::after {
content: "";
display: block;
clear: both;
}
EXAMPLE
I want to wrap an image into an html DIV and, since I want this to be fully scalable with the size of the window, I want to set the width of the DIV in percentage as follows:
html
<div id="wrapper">
<img src="http://openclipart.org/people/netalloy/rally-car.svg" />
</div>
css
#wrapper {
position: absolute;
width: 50%;
}
#wrapper img {
width: 100%;
}
The image should determine the height of its container. This is because the image width is set to 100% and the image height is calculated accordingly maintaining the correct aspect ratio.
The result is visible on jsfiddle: http://jsfiddle.net/lorenzopolidori/5BN4g/15/
My questions are:
Why do all modern browsers render the wrapper DIV 5px taller than the inner image?
How can I get rid of this 5px gap, while still setting all the sizes in percentage and without using javascript?
Surprisingly, this happens in Chrome (21.0.1180.89), Firefox (15.0.1) and IE8, while IE7 renders it correctly, matching the height of the DIV with the height of the image.
Check this out :
http://jsfiddle.net/5BN4g/29/
It's a line-height issue :-)
You need :
#wrapper {
width: 60%;
background-color: #aaa;
margin: 50px auto;
line-height:0;
}
#wrapper img {
width:100%;
border: 1px dashed red;
box-sizing:border-box;
}
I used box-sizing to make sure the width of the image doesn't overflow the container
................
Hi now add vertical-align:top in your img tag throw css
as like this
#wrapper img {
width: 100%;
border: 1px dashed red;
vertical-align:top; // add this line
}
live demo
OK, fiddling about, I found a good possible solution:
#wrapper img {
display: block;
width: 100%;
border: 1px dashed red;
}
Changing from the default inline display to a block display eliminates the line-height problem straight away.
This approach is also semantically correct because in this case what we really want is a single image wrapped in a DIV without any other elements in it, so the concept of line-height needs to be completely wiped off by displaying the image as a block.
It works on all major browsers: http://jsfiddle.net/lorenzopolidori/5Cpf2/3/
I think you shuold set align property to force browser show correctly img tag.
<div id="wrapper">
<img align="center" src="http://openclipart.org/image/800px/svg_to_png/74557/rally-car.png" />
</div>
DEMO
I think is because it doesn't see as a Table
i added the display:table in your code
And it looks fine now, check the link
Example Display Table
Your issue is that an image -- the <img> tag, to be exact -- is an inline element. All you need to do is set display: block on the image and the extra padding goes away. Demo.