HTML 5 Doctype declaration messes with IE
Question
I am using a jquery sliding box animation on my home page: http://sandstonetombstonesuppliers.co.za/
Now I'm using the standard HTML 5 doctype: That creates issues with my CSS in IE(8 and 9). You will see when visiting the link, the first two boxes has the text animation with transparency visible, where it should be partially hidden. Hover over the two top boxes to see what I mean
When removing it works fine, but my general layout moves to the left (not center anymore) and my menu links don't have the blue underlines anymore - see this link: http://sandstonetombstonesuppliers.co.za/index2.html
Why is it doing that?
Here is the markup of my :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Bluegig Distribution</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="shortcut icon" href="/images/favicon.ico"/>
<link rel="stylesheet" type="text/css" media="screen" href="css/slidingboxes.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie.css" media="screen" />
<![endif]-->
</head>
UPDATE: It seems like using produces the same issue with the sliding boxes as in Chrome and FF ???
Javascript:
$(document).ready(function(){
//To switch directions up/down and left/right just place a "-" in front of the top/left attribute
//Horizontal Sliding
$('.boxgrid.slideright').hover(function(){
$(".cover", this).stop().animate({left:'446px'},{queue:false,duration:500});
}, function() {
$(".cover", this).stop().animate({left:'0px'},{queue:false,duration:500});
});
//Diagnal Sliding
$('.boxgrid.thecombo').hover(function(){
$(".cover", this).stop().animate({top:'357px', left:'325px'},{queue:false,duration:500});
}, function() {
$(".cover", this).stop().animate({top:'0px', left:'0px'},{queue:false,duration:500});
});
//Full Caption Sliding (Hidden to Visible)
$('.boxgrid.captionfull').hover(function(){
$(".cover", this).stop().animate({top:'257px'},{queue:false,duration:250});
}, function() {
$(".cover", this).stop().animate({top:'357px'},{queue:false,duration:250});
});
//Caption Sliding (Partially Hidden to Visible)
$('.boxgrid.caption').hover(function(){
$(".cover", this).stop().animate({top:'120px'},{queue:false,duration:250});
}, function() {
$(".cover", this).stop().animate({top:'317px'},{queue:false,duration:250});
});
});
Thanks
2 answers
solution1
1 2013-01-31 21:03:48
Your doc type and name space declaration are messed up, to begin with. Have you tried?
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
You're setting up an html5 doctype , but then referencing the xhtml namespace . That will probably give you problems in IE...
I would generally advise making a clone of the most recent git branch of the h5bp, (html5 boiler plate) to set up all your html5 projects in. Otherwise, things can get screwy.
solution2
0 ACCPTED 2013-02-01 15:53:12
I think the issue is with the plugin. I used a different mosaic jquery plugin that works great, with the XHTML 1.0 Transitional doctype:
http://buildinternet.com/project/mosaic/1.0/
Thank You for all your help
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.