The image is scaling based on browser width only in chrome but it is not working in IE and Mozilla Firefox.
thumb img is working in all the browsers but only .play img max-width is not working
Here is my
HTML
<div class="contai">
<div> <img src="1.png" style="max-width:100%" /></div>
<div class="thumb">
<img src="2.jpg" />
<div class="play"> <img src="videoImagePlay.png" /></div>
</div>
</div>
CSS
.contai{
width:100%;
}
.thumb{
border: 1px solid rgb(226, 226, 226);
position:relative; float:left; width:38%
}
.thumb img{
max-width:100%
}
.play{
position:absolute; top:30%; left:35%
}
.play img{
max-width:50%
}
play class right : 0
as like this
.play{
position:absolute; top:30%; left:35%; right:0;
}
Live demo http://jsfiddle.net/puS7u/
see this fiddle. it may help you.
This might help someone in the future:
If the image has a parent which is a table (doesn't matter how high up in the node tree) then max-width will not work in FF or IE unless you have a specific pixel defined max width on the table. This does however work fine in Chrome.
The logic seems to be that FF and IE thinks that tables always should expand according to the content, disregarding max-width: 100%.
Not obvious which browser has the "correct" or best implementation.
Related
while there is no "src" attribute in the tag or the "src" linked to a resource which dose not existed,there'll display a border out of the tag.
just like this
//html code:
<div class="example" style="height:70px;width:100px">
<img src="404error.html">
</div>
//↑↑↑ in firefox
//↑↑↑ in chrome
// css code
.example img{
display:inline-block
height:30px;
margin:20px;
}
how can I hide this border // border:none; is useless
besides,there is another stange phenomenon.
That is,when I set "line-height" to a tag,the border of img which i said will move down,so it looks not around the picture at all.
and it just appear in chrome,but not in firefox.
like this.
//↑↑↑ in firefox
//↑↑↑ in chrome
//css code
.example img{
display:inline-block
height:30px;
margin:20px;
line-height:70px; //this is the difference
}
p.s. i use the "line-height" just for the words not the imgs.when i set .img{line-height:0;}it returns.i just want to know why.and how to hide the border.
thanks.
https://jsfiddle.net/s3Lvr9bs/1/
<div class="example">
<object data="https://developers.google.com/+/images/branding/button-gplus.png" type="image/jpg">
<img src="404error.html" alt="" />
</object>
</div>
.example {
display:inline-block;
background:#444;
border-radius: 5px;
padding:5px;
min-width:30px; min-height:30px;
}
object {display:block;}
You need:
img alt="" (hides in Firefox)
object data (gets the url for image)
object display block, to remove margins.
I have a footer with social media icons. I want the icons arranged in a 3 x 3 grid
like below.
# # #
# # #
# # #
I also want it centered in a div. The issue that I'm running into, is that when I float the elements left to keep them on the same line my
margin-left:auto;
margin-right:auto;
Doesnt work, and they just align left. I need a solution that will work for mobile since my whole site is responsive.
Here is the HTML
<div class="d-all m-all" id="mainFooter">
<div class="d1-d4 m-all" id="socialMedia">
<div id="centerIcons">
<img src="images/fb_icon_vi.png"><img src="images/tw_icon_vi.png"><img src="images/in_icon_vi.png">
</div>
</div>
<div class="d5-d8 m-all" id="contact">
Contact
</div>
<div class="d9-d12 m-all" id="awards">
awards
</div>
</div>
And here is the CSS
#mainFooter{
background-color:black;
height:250px;
}
#socialMedia{
background-color:green;
}
#socialMedia img{
display:block;
}
#centerIcons{
background-color:yellow;
width:50%;
margin-left:auto;
margin-right:auto;
height:75px;
}
#centerIcons img{
margin-left:auto;
margin-right:auto;
}
The whole site can be seen HERE
I guess you want to something like this, right?
#socialMedia img {
display: inline-block;
}
#centerIcons{
background-color:yellow;
width:50%;
height:75px;
max-width: 171px;
margin: 0 auto;
}
#centerIcons img{
/* nothing is needed */
}
Explanation:
display: inline-block; will keep as block but not opening a new line
since #centerIcons is a DIV element, it is a block element, to make use of centering effect with margin: 0 auto; a width control is needed
so max-width: 171px; will constraint its width to a maximum of 171px (icon width 57px * 3), you may adjust as you need
Note:
About display property, please refer to W3C's visual formatting model.
About box model specification, you may refer to W3C's box model.
Depends on your browser compatibility plan, max-width does not supported in IE8 below and IE8 have some bugs. For details, you may refer to online compatibility chart like this.
If you are using jQuery and really mean to support IE6-8, you may consider using polyfill such as Scott Jehl's Respond.js
Edit: I think #Matt Smith's answer is what you want, I may have misinterpreted your meaning. Anyway, for your reference.
<img> is a replaced inline element (by default). The image elements sit beside each other like words. Therefore there's no need to change their display type to block (as you have done in the live demo).
I want the icons arranged in a 3 x 3 grid
In order to achieve that, you could wrap each 3 images by a wrapper, and add text-align: center to that element to align the inline images horizontally.
EXAMPLE HERE.
<div id="centerIcons">
<div class="wrapper">
<img src="images/1.png">
<img src="images/2.png">
<img src="images/3.png">
</div>
<div class="wrapper">
<img src="images/4.png">
<img src="images/5.png">
<img src="images/6.png">
</div>
<div class="wrapper">
<img src="images/7.png">
<img src="images/8.png">
<img src="images/9.png">
</div>
</div>
.wrapper {
text-align: center;
}
Add text-align: center to the #centerIcons {} rule and display: inline-block to your #centerIcons img {} rule:
#centerIcons img {
text-align: center;
}
#centerIcons img {
display: inline-block;
}
#one{
border:2px solid black;
border-radius:10px;
background-color:yellow;
padding-top:20px;
padding-left:20px;
padding-bottom:20px;
padding-right:20px;
height:180px;
width:62%;
margin:auto;
}
.im1{
height:180px;
width:200px;
}
<div id="one">
<img src="inspirational1.jpg" alt="picture1" class="im1"/>
<img src="inspirational2.jpg" alt="picture2" class="im1"/>
<img src="inspirational3.jpg" alt="picture3" class="im1"/>
<img src="inspirational4.jpg" alt="picture4" class="im1"/>
<img src="inspirational5.jpg" alt="picture5" class="im1"/>
</div>
The code above woks perfectly when I'm working im my desktop, but as soon as I open in my laptop all the images are all over the place. I would like to fit them in the div making sure they don't go everywhere if open the website in a new browser, or scree. Any advice is more than welcome please
http://jsfiddle.net/LYL2S/1/
#one{
border:2px solid black;
border-radius:10px;
background-color:yellow;
padding:20px;
margin:auto;
width:620px;
}
.im1{
height:180px;
width:200px;
}
If I understood right you can use float instruction for your images
in css add this line:
#one img { float:left; }
where #one is the the container div
or using class on the images:
im1 {float:left;}
and after your container add a div with class .clear where clear {clear:both;}
Since your saying just for css.. you can't do it dynamically like if the number of images change..
However with just css and a fixed amount of images, like the 5 you showed in your question, you can just use percentages instead , like this
.im1 {
width: 19%;
}
Because 100% width of parent / 5 images = 20% , but sometimes you want to set a little lower to make sure some browsers don't render it incorrectly, so they all fit on the same line.
Also, since your using an id #one for the parent, you might need to use
#one .im1 {
width: 19%;
}
instead
I have 3 images. When hovering one an image goes on top of the hovered one.
Here's my code:
HTML
<a class="toggle"><img src="" style="position:absolute"><img src=""></a>
<a class="toggle" style="margin-left:30px;margin-right:30px"><img src="" style="position:absolute"><img src=""></a>
<a class="toggle"><img src="" style="position:absolute"><img src=""></a>
CSS
a.toggle img:hover {
opacity:0.1;
filter:alpha(opacity=10); /* For IE8 and earlier */
}
Everything works fine with Firefox and Chrome.. Problem is with Internet Explorer (also IE 10). The middle image is positioned weirdly!
Check out the fiddle with IE to see the problem http://jsfiddle.net/6nebL/
How can I fix this in a clean way and without adding complexity to the code?
set a to inline-block:
a {
display: inline-block;
}
fiddle updated:
http://jsfiddle.net/6nebL/3/
Here, I've updated your CSS and HTML to be a bit more ... friendly. The CSS:
.toggle img:hover {
opacity:0.1;
filter:alpha(opacity=10); /* For IE8 and earlier */
}
.toggle {
display:inline-block;
vertical-align:middle;
width:150px;
position:relative;
margin:0 30px;
}
img {
position:absolute;
top:0;
left:0;
}
And HTML is just without the inline styles.
Here is the updated jsFiddle.
<div class="commentator grid_3">
<img src="http://img.gawkerassets.com/img/183mxcnx46v2cjpg/avt-large.jpg" alt="commentator">
<span class="commentator-name">Joshua</span>
</div>
So I set commentator-name vertical-align to Top.It works in firefox but not in chrome and safari.
Can someone help me out??I dont want to use position absolute when I have a perfect choice...
please add the display:inline-block to span tag.lik this:
.commentator-name{
display:inline-block;
vertical-align: top;
}
please view the demo.
Vertical line image with in div works on Chrome and Safari. The code is:
<div class="image-wrap">
<img src="xyz.png"/>
</div>
and
.image-wrap {
display:table-cell;
width:400px;
vertical-align:middle;
}