Newbie - ie7 and jquery .animate() - sliding captions - animation

I'm trying to make some sliding captions, something like Mosaic, but lighter. Everything looks good in all major browsers (even if it looks slow in ie8), but nothing happens in ie7.
I'm testing with ieTester, and I have no idea if the bug comes from the software or from my code.
I'm sure you'll have some tips to help me improve it!
Thanks anyway.
HTML:
<div class="imgbox">
<img src="#" />
<a href="#" class="caption">
<div class="details">
<h6>Lorem ipsum</h6>
<p>Lorem ipsum dolor sit amet,…</p>
</div>
</a>
</div>
CSS:
.imgbox{
width: 204px;
height: 154px;
position: relative;
overflow: hidden;
float: left;
margin: 10px;
border:1px solid #999;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.8);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);}
.imgbox img{
width: 200px;
height: 150px;
padding: 2px;
overflow: hidden;}
.caption{
display:block;
position:absolute;
top:104px;
height:100%;
width:100%;
background: rgb(0,0,0);
background: rgba(0,0,0,0.6);
background: transparent\9;
zoom: 1;
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);}
JS:
$(".imgbox").hover(
function()
{$(this).children('.caption').animate({top:0},"fast");},
function()
{$(this).children('.caption').animate({top:104},"fast");}
);

Your HTML code is invalid. The a element is an inline element, and it can't contain block elements like div. Browsers have different ways of dealing with incorrect markup, and might rearrange or ignore certain tags to create elements that are valid.
Put inline elements inside the link so that they are parsed correctly, then you can use CSS to turn them into block elements:
<div class="imgbox">
<img src="#" />
<a href="#" class="caption">
<spap class="details">
<span class="h6">Lorem ipsum</span>
<span class="p">Lorem ipsum dolor sit amet,…</span>
</span>
</a>
</div>
CSS:
.imgbox a, .imgbox .details, .imgbox .h6, .imgbox .p { display: block; }
There are also some hacks in the CSS code that might not all go down well with IE7. You can comment out some of them to test if they cause problems.

I found that it came from the position of the caption. I set a top position but didn't define any left or right position.
With that piece of code it now appears on ie7:
.caption{
display:block;
position:absolute;
top:104px;
left:0;
height:100%;
width:100%;
But it's still very slow on ie8 and ie7.
Anyway, problem solved!

Related

How to link 2 different elements (img and number) to 2 different urls?

How can I link image from background in css to some url (#player/deposit/) and leave amount to be linked to other url (player/wallet/)?
<div class="player-credit-info">
<a href="#player/wallet/">
<div class="player-credit-amount">
<div id="playerBalance">10000$</div>
</div>
</a>
</div>
Here is the css:
.player-credit-info {
padding: 0px 15px 0px 50px;
display: inline-block;
background: url(../images-vm/coin#2x.png) no-repeat;
background-size: 25px 22px;
background-position-x: 15px;
background-position-y: 2px;
float: right;
margin-top: 8px;
font-size: 18px;
}
I am not HTML programmer, but even it did not look complicate at first sight, I got stuck to keep both coin image and amount in the same line and to be linked to 2 different urls. I tried to exclude image in img tag, but did not get neat solution. Thank you for the help.

viewport height, whilst centralising the image within slider css

I have a slider on a homepage I am currently working on. I am trying to achieve a full viewport height that takes up the whole width for the screen.
The only way I can currently achieve this is by either stretching the image, or the image isn't centred.
The image needs to be aligned roughly centred horizontally and vertically, so customers can see the centre of the image on any width of browser, and without stretching the image out of proportion.
I have tried the background-size: cover; on the element with no success as its not a background img. the containers have 100vh currently, but the width is the issue.
The issue is located here http://joeybox.info/ . I realise with the menu and the logo above the image the 100 viewport height will rest under the "fold", however I am placing the logo and menu over the image eventually, once I have figured out the css.
I have tried many solutions found within the stack overflow forum and none work in my scenario.
My current css, after deleting the in-correct code, is:-
.bx-wrapper img {display: inherit;
height: 100vh;
max-width: inherit;}
.ewic-wid-imgs {height: 100vh;
max-width: unset;
width: unset;}
.bx-wrapper img {display: inherit;
height: 100vh;
max-width: inherit;}
html=
<div class="slider-box">
<div id="ewic-con-385">
<div style="display: none;" id="preloader-385" class="sliderpreloader">
</div>
<div style="max-width: 100%; margin: 0px auto;" class="bx-wrapper">
<div style="width: 100%; overflow: hidden; position: relative; height: 633px;" class="bx-viewport">
<ul style="width: 315%; position: relative; left: 0px;" class="bxslider-385">
<li style="float: left; list-style: outside none none; position: relative; width: 1349px; margin-right: 10px;" class="ewic-slider bx-clone">
<img title="Qw Direct Leather Keyrings" class="ewic-wid-imgs" src="http://joeybox.info/wp-content/uploads/2015/07/qw-direct-leather-keyrings.jpg">
<div class="ewic-caption"><span>Qw Direct Leather Keyrings</span></div>
</li><li style="float: left; list-style: outside none none; position: relative; width: 1349px; margin-right: 10px;" class="ewic-slider">
<img title="Qw Direct Leather Keyrings" class="ewic-wid-imgs" src="http://joeybox.info/wp-content/uploads/2015/07/qw-direct-leather-keyrings.jpg">
<div class="ewic-caption"><span>Qw Direct Leather Keyrings</span>
</div></li><li style="float: left; list-style: outside none none; position: relative; width: 1349px; margin-right: 10px;" class="ewic-slider bx-clone">
<img title="Qw Direct Leather Keyrings" class="ewic-wid-imgs" src="http://joeybox.info/wp-content/uploads/2015/07/qw-direct-leather-keyrings.jpg"><div class="ewic-caption">
<span>Qw Direct Leather Keyrings</span>
</div></li></ul></div>
<div class="bx-controls bx-has-controls-direction bx-has-controls-auto">
<div class="bx-controls-direction"><a class="bx-prev disabled" href="">Prev</a>
<a class="bx-next disabled" href="">Next</a></div><div class="bx-controls-auto"><div class="bx-controls-auto-item"><a class="bx-start active" href="">Start</a></div>
<div class="bx-controls-auto-item"><a class="bx-stop" href="">Stop</a></div></div></div></div><br>
</div>
</div>
To achieve this you could add to your image inside .bx-wraper:
.bx-wrapper img {
display: inherit;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
max-width: inherit;
}
now you need to set the parent li to relative:
.bx-wrapper ul li {
position:relative;
width:100%;
height:100%;
list-style: none !important;
margin: 0 !important;
}
and change your parent ul:
.bx-wrapper ul{
width:100%;
}
I have solved the above by changing my image slider. My new slider plugin (Envoke Supersized) uses a background image and was easier to use background-size:cover; css. Although after this full viewport height on mobile widths didn't look good with my images so I used 40vh on mobile widths.
I would recommend anyone trying to do the same to ensure your image is a background image, or replace the slider with a static background image for small browser widths.

CSS cut-off corners on image (<img> tag) without div

I'm trying to get a CSS-only solution for a cut-off bottom right corner on every image in a page.
So far, I have come up with this:
img::after {
content: url(/images/whitecorner.png);
height: 20px;
width: 20px;
display: inline-block;
float: right;
}
But the doesn't appear in the document anywhere. (I'm using the Chrome inspector).
I hope someone can point me in the right direction. Thanks in advance!
Example
You can not use ::after with img.
Same with inputs, this is because they are self closing (/>) and hold no content.
What you could do is something like this:
<div class='cut-image'>
<img src='http://placehold.it/250'/>
</div>
and then use
.cut-image::after{
/*styles*/
}
In my example I used:
HTML:
<div class='cut-image'>
<img src='http://placehold.it/250'/>
</div>
<div class='cut-image'>
<img src='http://placehold.it/250'/>
</div>
CSS:
.cut-image{
position:relative;
float:left;
margin:0 5px;
overflow:hidden;
}
.cut-image::after {
content: '';
position:absolute;
bottom:0;
right:0;
height: 0px;
width: 0px;
border-left:40px solid transparent;
border-top:40px solid transparent;
border-bottom:40px solid white;
border-right:40px solid white;
}
img is an inline element and :before or :after won't work , you'll have to wrap the img with a div
this is probably what you need:
http://jsfiddle.net/h7Xb5/1/
this is the css:
div {
width:300px;
height:300px
}
div:hover:before {
content:"";
width:300px;
height:300px;
position:absolute;
top:0;
left:0;
background:url(http://www.linobanfi.it/immagini/lino_banfi_3.jpg) no-repeat center center;
}

why does this not vertically center?

html code:
<div class="container">
<a class="ank">
<img src="http://www.w3schools.com/images/w3schoolslogoNEW310113.gif" />
</a>
</div>
css code:
.ank
{
display: block;
width: 500px;
height: 500px;
line-height: 100%;
}
img
{
vertical-align: middle;
}
.container
{
display:block;
width: 500px;
height: 500px;
border: 1px solid black;
font-size: 500px;
}
jsfiddle: http://jsfiddle.net/mfBZZ/5/
if i change the jsfiddle, so that anks line-height is 500px, and remove the font-size from container, it works.
but when i add the font-size to container of 500px, and then make the line-height in ank, 100% of that font-size, it doesn't work. it brings the image alittle lower than where it should be.
working jsfiddle: http://jsfiddle.net/eujFY/1/
UPDATE:
this solution works for me:
http://jsfiddle.net/eujFY/2/ <---- updated.
I've seen you found a solution, however it implies setting the height manually on both elements and it requires the usage of unnecessary tags.
So I suggest you to check the "display:table" (container) and "display:table-cell" (inner element) rules: http://jsfiddle.net/RxGS5/
HTML
<div class="container">
<a class="ank">
<img src="http://www.w3schools.com/images/w3schoolslogoNEW310113.gif" />
</a>
</div>
CSS
.container
{
display:table;
width: 500px;
height: 500px;
border: 1px solid black;
}
.ank
{
display: table-cell;
vertical-align: middle;
}

HTML problem, only works in Webkit

This works fine in Webkit, but when I go to Firefox (Or IE8) it totally messed up. I've been staring at this for so long that I can't find any errors at all with it, so maybe one of you guys can point out where I'm going wrong.
CSS:
body {
font-family: Georgia, serif;
margin: 0px;
padding: 0px;
background: #222;
}
header {
background: #fff url('images/header-border.gif') bottom repeat-x;
width: 980px;
margin: 0px auto;
height: 100px;
padding: 0px 0px 0px 20px;
-moz-border-radius-topright: 4px; -moz-border-radius-topleft: 4px;
-webkit-border-top-right-radius: 4px; -webkit-border-top-left-radius: 4px;
border-top-right-radius: 4px; border-top-left-radius: 4px;
}
section {
}
article {
}
footer {
clear: left;
}
nav {
width: 980px;
margin: 0px auto;
height: 70px;
padding: 10px 0px 10px 0px;
font-size: 21px;
font-weight: bold;
font-family: Arial, serif;
}
nav a {
color: #fff;
text-decoration: none;
padding: 10px;
}
nav a:hover {
background: #060606;
}
#content {
width: 980px;
background: #fff;
padding: 0px 0px 0px 20px;
margin: 0px auto;
}
nav ul li {
float: left;
list-style: none;
width: 155px;
}
#left-column, #logo {
width: 560px;
margin: 0px auto;
float: left;
}
#right-column, #share {
width: 380px;
margin: 0px auto;
float: left;
height: 100%;
padding: 0px 0px 0px 20px;
border-left: 1px solid #d9d9d9;
}
address {
display: inline;
}
a img {
border: 0px;
}
.clear-left {
clear: left;
}
And the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="text/html; charset=UTF-8" />
<title>Webtint </title>
<link rel="stylesheet" href="http://localhost/wp-content/themes/clean/style.css" type="text/css" />
<link rel="pingback" href="http://localhost/xmlrpc.php" />
</head>
<body>
<nav>
<ul>
<li>home</li>
<li>tutorials <img src="http://localhost/wp-content/themes/clean/images/arrow.gif" alt="Arrow" /></li>
<li>resources <img src="http://localhost/wp-content/themes/clean/images/arrow.gif" alt="Arrow" /></li>
<li>articles <img src="http://localhost/wp-content/themes/clean/images/arrow.gif" alt="Arrow" /></li>
<li>contact</li>
<li>follow us</li>
</ul>
</nav>
<header>
<section id="logo">
</section>
<section id="share">
</section>
</header>
<div id="content">
<section id="left-column">
<article>
<h2>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
<?php the_title(); ?>
</a>
</h2>
<time><?php the_time('F jS, Y') ?></time> by <address><?php the_author(); ?></address>
<?php the_excerpt(); ?>
<br /><br />
Read More
<?php comments_popup_link(
'<span class="boxed">No Responses »</span>',
'<span class="boxed"> 1 Response »</span>',
'<span class="boxed">% Responses »</span>'); ?>
</article>
<hr />
</section>
<section id="right-column">
<h2>Popular Posts</h2>
</section>
</div>
<footer>
</footer>
</body>
</html>
Screenshot in Firefox:
http://imgur.com/wvhI0.gif
Screenshot in Chrome: (How it's supposed to look)
http://imgur.com/sQK8S.gif
Screenshot in IE8:
http://imgur.com/7OnEJ.gif
Thanks for any help in advance :)
Basically, you're using mostly HTML5 specific elements, and they're not supported everywhere properly yet, especially IE8 out of those you listed.
For a quick look, Here's the list of elements added in HTML5.
Try using a debug tool like Firebug or the IE developer toolbar to figure out which elements are being placed wrongly and why.
Both let you hover your mouse over blocks and will highlight the corresponding HTML. You will be able to see exactly which element it is that is being placed incorrectly, and view the CSS to try and figure out why.
Johnny, does your solution also fix the incorrect rendering in Firefox 2 and Camino 1? Interesting, as I only know of the Javascript solution. Just to give you some more feedback on this: to learn more about getting HTML5 rendered properly in all major browsers, read this article by Nico Hagenburger. You can also use this script to render HTML5 in IE.
A more general article about HTML5 and CSS3 support in IE (e.g., your corners aren't rounded) in this article. For rounded corners in all major browsers (also in Opera) please read this one. There also exist general tables about support in all major browsers of HTML5 and CSS3.
EDIT: I just read an article about HTML5 pages not rendered properly when printing from within IE, because this JavaScript solution isn't loaded when printing a page. More info on doctype.com.

Resources