<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;
}
Related
I am having an issue with displaying large dimension SVG images in firefox. In chrome the image shows without any problem, But in Mozilla Firefox the image is not showing.
If I open that image alone in a separate tab the image displays, But not with html page.
png Image is working fine. Only SVG images having this issue.
I am attaching a sample code here
.box {
width:60px;
height:60px;
overflow: hidden;
margin-bottom:20px;
background:#000;
}
.box img {
height:100%;
}
<div class="box">
<img src="https://cdn1.imggmi.com/uploads/2019/5/13/17fdee32fe17f99ecc798e99a0c945e4-full.png"/>
</div>
<div class="box">
<img src="https://svgshare.com/i/D2d.svg"/>
</div>
This is the codepen link
Can any one please help me with this?
I managed to fix this issue by using object tag instead of img tag. The code looks like this,
Object Name
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 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.
I have a checkbox next to 3 lines of text. I wish to center the checkbox vertically against these lines of text:
A
[] B
C
I'm attempting to do this via div containers while resisting the immense temptation to revert to tables. Here's my code so far:
<div style="overflow:auto;">
<div style="height:57px; float:left;margin-right:15px;">
<input style="vertical-align:middle;height:100%" type="checkbox"
name="theCheckbox" id="checkboxId">
</div>
<div style="float:left;">
A<br/>
B<br/>
C
</div>
</div>
JSFiddle
While the above 'works', I'm not happy about the hard coded height. Changing 57px to 100% makes the checkbox disappear (computed height becomes 0). Removing the height style from the div alltogether also results in a disappearing checkbox. Can anyone suggest improvments or alternative solutions to achieve my goal?
EDIT: I have to support IE7+ amongst other browsers.
You could treat the elements as a table (without actually using a table) like this:
HTML
<div id="container">
<div class="tableCell">
<input type="checkbox" name="theCheckbox" id="checkboxId">
</div>
<div class="tableCell">A<br/>B<br/>C</div>
</div>
CSS
#container { display: table; }
.tableCell {
display: table-cell;
vertical-align: middle; }
See the fiddle here: http://jsfiddle.net/QpnkV/2/
For backwards compatibility think about using scripts in your dochead like this:
<!--[if lt IE 8]><script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script><![endif]-->
<!--[if IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
How about this?
HTML:
<input type="checkbox" name="theCheckbox" id="checkboxId"/>
<div id ="try">
A<br/>
B<br/>
C
</div>
CSS:
#checkboxId{
position:relative;
vertical-align:middle;
}
#try{
position:relative;
display:inline-block;
vertical-align:middle;
}
Here is the JSFiddle
You can position the checkbox vertically using absolute positioning.
For your HTML, you can simplify it as follows:
<div class="wrap">
<input class="control" type="checkbox" name="theCheckbox" id="checkboxId">
<div class="label">A
<br/>B
<br/>C
<br/>D</div>
</div>
and apply the following CSS:
.wrap {
border: 1px dotted gray;
position: relative;
overflow: auto; /* triggers hasLayout in IE7 */
}
.control {
position: absolute;
left: 0;
top: 0;
bottom: 0;
margin: auto;
}
.label {
margin-left: 20px;
}
Demo Fiddle: http://jsfiddle.net/audetwebdesign/N23qr/
The tradeoff here is that you need to hard code a value for margin-left on the .label container, which is less restrictive than specifying a height value.
Note About IE7
To get position: relative to work correctly for .wrap, you need to make sure that IE7 invokes the hasLayout property, which can be effected by applying overflow: auto. For more details, see: IE7 relative/absolute positioning bug with dynamically modified page content and specifically, http://www.satzansatz.de/cssd/onhavinglayout.html#rp
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.