Testing website, blank page shows up - html

When I test web site in IE 5.5, 6.0, 7.0 and 8.0 a blank page loads. The site works fine in Firefox, Safari, Opera and Chrome. I think the problem has something to do with the conditional comments.
Below is my source code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Chris Schnitzer | Home</title>
<link href="home.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function() {
$('.homewrap').hover(function() {
$(this).children('.front').stop().animate({ "top" : '200px'}, 500);
}, function() {
$(this).children('.front').stop().animate({ "top" : '0'}, 300);
});
});
</script>
<!--[if IE5]>
<style type="text/css">
/* place haslayout fix for IE 5* in this conditional comment */
#headerright, #mainContenttext, #mainContentrigheducation, #mainContentrightexpertise { height: 1%; }
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
#headerright, #mainContenttext, #mainContentrighteducation, #mainContentrightexpertise { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</syle>
<![endif]-->
</head>
<body>
<div id="container">
<div id="header">
<div id="headerleft"><!-- #BeginLibraryItem "/Library/logo.lbi" -->
<img src="assets/images/logo.png" width="135" height="77" alt="chris schnitzer logo" /><!-- #EndLibraryItem -->
</div>
<div id="headerright">
<div id="topnav"><!-- #BeginLibraryItem "/Library/topnav.lbi" --><ul>
<li>Home|What I Do|Portfolio|Contact Me</li>
</ul><!-- #EndLibraryItem --></div>
</div>
</div>
<div id="greetingandintrowrap">
<div id="greetingtext">Hello, Gutentag, Sawubona!</div>
<div id="intro">
<h4>I am Chris and thank you for taking your time to view my portfolio</h4>
</div>
</div>
<div id="mainContent">
<div id="mainContenthome">
<a href="Whatido/index.html"><div class="homewrap">
<img src="assets/images/whatidohomepgback.png" width="200" height="200" alt="What I Do" />
<img src="assets/images/whatidohomepgfront.png" class="front" width="200" height="200" alt="What I Do" />
</div></a>
<a href="portfolio/index.html"><div class="homewrap">
<img src="assets/images/portfoliohomepgback.png" width="200" height="200" alt="Portfolio" />
<img src="assets/images/portfoliohomepgfront.png" class="front" width="200" height="200" alt="Portfolio" />
</div></a>
<a href="contactme/index.html"><div class="homewrap">
<img src="assets/images/contactmehomepgback.png" width="200" height="200" alt="Contact Me" />
<img src="assets/images/contactmehomepgfront.png" class="front" width="200" height="200" alt="Contact Me" />
</div></a>
<br class="clearfloat" />
</div>
</div>
<div id="footercontent">
<p>I have a <span class="bolddarkblue">passion</span> for designing visually appealing content<span class="bolddarkblue"></span>
that <span class="bolddarkblue">communicates </span> your message whether it is for print or the web using
HTML, CSS, JQuery and Flash to design <span class="bolddarkblue">Standard Compliant</span> websites.</p>
</div>
<div id="footer"><div id="altlogo"><!-- #BeginLibraryItem "/Library/altnav.lbi" -->
<img src="assets/images/smalllogo.png" width="41" height="24" alt="chris schnitzer logo" />
</div>
<div id="altnav">
<ul>
<li>Home</li>
<li>What I Do</li>
<li>Portfolio</li>
<li>Contact Me</li>
</ul>
</div></div><!-- #EndLibraryItem -->
</div>
</body>
</html>

In your last IE conditional comment, you didn’t close the <style> element properly:
<!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
#headerright, #mainContenttext, #mainContentrighteducation, #mainContentrightexpertise { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</syle>
<![endif]-->

Related

Limit a size of an add on in a website. Html

So I link twitter to my website. However, I cannot limit the size of the wigget. I want it to be a size of 300px by 300px. I tried to do iframe width = "300" height = "300" but it doesn't work. I want the decrease the size of the twitter wigget. How do I do it? I am trying to make http://i.imgur.com/td214sV.png looks like http://i.imgur.com/UCs7pG6.png.
The html code is posted below
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<!-- Set the viewport width to device width for mobile -->
<meta name="viewport" content="width=device-width" />
<title>
MogoTXT is a fun, easy to use celebrity-entertainment platform that allows fans to follow their favorite celebs, read and hear what they are saying, and see what they are doing!
</title>
<!-- Included CSS Files (Uncompressed) -->
<!--
<link rel="stylesheet" href="stylesheets/foundation.min.css">
-->
<!-- Included CSS Files (Compressed) -->
<link rel="stylesheet" href="stylesheets/foundationv0000004.css">
<link href="stylesheets/wb-main0000007.min.css" rel="stylesheet" type="text/css">
<script src="javascripts/modernizr.foundation.js"> </script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-18132180-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- IE Fix for HTML5 Tags -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script>
<![endif]-->
<meta property="og:description" content="MogoTXT is a fun, easy to use celebrity-entertainment platform that allows fans to follow their favorite celebs, read and hear what they are saying, and see what they are doing!" />
<meta name="Description" content="MogoTXT is a fun, easy to use celebrity-entertainment platform that allows fans to follow their favorite celebs, read and hear what they are saying, and see what they are doing!" />
<meta name="apple-itunes-app" content="app-id=602297014" />
</head>
<body>
<!-- Header and Nav -->
<div id="logonav">
<div class="row">
<div class="four columns">
<h1><img src="images/logo.png" alt="With Buddies" width="157" height="53" /></h1>
</div>
<div class="eight columns">
<ul class="nav-bar right">
<li class="has-flyout" id="games-nav"><a>Games</a>
<span> </span>
<ul class="flyout">
<li>Big Fly Baseball<sup>™</sup></li>
<li>MogoBall<sup>™</sup></li>
<li>Mogo Hoops<sup>™</sup></li>
<!--<li>Bubble Galaxy With Buddies<sup>™</sup></li>-->
</ul>
</li>
<li>Shop</li>
</ul>
</div>
</div>
</div>
<div id="mobilenav">
<nav class="clearfix">
<ul class="nav-bar right clearfix">
<li>Home</li>
<li>Big Fly Baseball<sup>™</sup></li>
<li>MogoBall<sup>™</sup></li>
<li>Mogo Hoops<sup>™</sup></li>
<!--<li>Bubble Galaxy With Buddies<sup>™</sup></li>-->
<li>About Us</li>
<li>Mogo Central/Athletes</li>
<li>Help</li>
</ul>
<img src="images/logo.png" width="157" height="53">
</nav>
</div>
<!-- End Header and Nav -->
<!-- Included JS Files (Compressed) -->
<script src="javascripts/jquery.js"> </script>
<script src="javascripts/foundation.min.js"> </script>
<!-- Initialize JS Plugins -->
<script src="javascripts/app.js"> </script>
<script src="javascripts/jquery.foundation.orbit.js"> </script>
<script type="text/javascript">
$(function () {
var pull = $('#pull');
menu = $('nav ul');
menuHeight = menu.height();
$(pull).on('click', function (e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function () {
var w = $(window).width();
if (w > 720 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
</script>
<!-- Featured Region -->.
<center>
<img src="images/big-fly-baseball.png" alt="Smiley face" width="940" height="500" />
</center>
<!-- Three-up Content Blocks -->
<div class="row" id="game-details">
<div class="eight columns main-content">
<h3 style='font-size:29px'>About Us:</h3>
<ul>
<p>MogoTXT is a San Francisco based game development studio that wants to bring back the fun and excitement of early sports games. The sports games industry has become stale and we want to change that by starting from scratch and making games that people can enjoy over and over again with their friends and other gamers. </p>
<p>We are building awesome sports games for iOS, Android, Facebook, and Micro-Consoles!</p>
<p>We build games for you to enjoy, so let us know what you want to see and play by emailing us at info#mogotxt.com</p>
</ul>
<p> </p>
</div>
<div align="right">
<iframe width="300" height="180"
src="http://www.youtube.com/embed/JLZ1_0icv1k">
</iframe>
<a class="twitter-timeline" href="https://twitter.com/gridironthunder" data-widget-id="369622317229301760">Tweets by #gridironthunder</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
</div>
<div class="row" id="tweet-details">
</div>
</div>
<div class="row" id="our-games"><img src="images/sat.png" alt="Smiley face" width="650" height="300" />
<div class="four columns mini-mogo-hoops"></div>
<div class="four columns mini-bubble-galaxy">
</div>
<script type="text/javascript">
$(window).load(function() {
$('#screenshots').orbit({
animation: 'fade',
fluid: true,
timer: true,
resetTimerOnClick: false,
advanceSpeed: 5000,
pauseOnHover: true,
startClockOnMouseOut: true,
startClockOnMouseOutAfter: 0,
directionalNav: true,
bullets: false,
});
});
</script>
</div>
<script src="http://www.mogotxt.com/Scripts/jquery.fitvids.min.js" type="text/javascript"></script>
<script type="text/javascript"> $(document).ready(function () { $('.fitvid').fitVids(); }); </script>
<div class="drop-shadow lifted">
<!-- Footer -->
<footer class="row">
<div class="twelve columns">
<div class="row">
<div class="four columns" id="footerlogo">
<h1><img src="images/Mogo_logo.png" alt="With Buddies" width="405" height="136" /></h1>
</div>
<div class="four columns sitemap">
<ul class="link-list left">
<li class="header">Games</li>
<li><li>Big Fly Baseball<sup>™</sup></li>
<li>MogoBall<sup>™</sup></li>
<li>Mogo Hoops<sup>™</sup></li>
<!--<li>Bubble Galaxy With Buddies<sup>™</sup></li>-->
</ul>
</div>
<div class="two columns sitemap">
<ul class="link-list left">
<li class="header"></li>
<li class="header"></li></ul>
</div>
<div class="two columns sitemap">
<ul class="link-list left">
<li class="header">Contact Us</li>
<li class="header support"><a href="http://mogotxt.com/privacy">Privacy Policy</li>
<li class="header support"><a href="http://mogotxt.com/terms">Terms of Service</li>
</ul>
</div>
</div>
</div>
<div class="twelve columns">
<div class="row" id="pp-tos">
<div class="six columns sitemap"></div>
<div class="six columns sitemap">
<ul class="link-list left">
<li></li>
</ul>
<ul class="link-list right">
<li></li>
</ul>
</div>
<!--<div class="six columns sitemap">
</div>-->
</div>
</div>
</footer>
</div>
</body>
</html>
You should edit in CSS via Id or class,or put this in your iframe tag:
style="position:absolute;width:300px;height:300px;"

body background image doesn't fill the page

I'm not sure what's happened as haven't changed CSS but suddenly my background image stops towards the top of the page and won't cary on to the bottom no matter what i change
here is the HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Just Joel</title>
<link href="../CSS/JJ.css" rel="stylesheet" type="text/css" />
<link href="../CSS/grogrotesque.css" rel="stylesheet" type="text/css">
<link href="../CSS/stylesheet.css" rel="stylesheet" type="text/css">
<meta charset="utf-8" />
<script type="text/javascript" src="../js/jquery-1.4.3.js"></script>
<script type="text/javascript" src="../js/jquery.corner.js"></script>
<script type='text/javascript' src="../js/slideshow.js"></script>
<link rel="stylesheet" href="../London Food Therapy/css/style.css" type="text/css" media="screen" />
<style type="text/css">
#import url("../../../CSS/JJ.css");
</style>
</head>
<body>
<div id="wrapperfull">
<div id="header">
<img src="../../../Images/Header.png" width="379" height="99" alt="Just Joel Header">
</div><!-- end header div -->
<div class="navigation">
<nav>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li><a href='#'><span>WORK</span></a>
<ul>
<li class="services1">
PRINT
BRANDING
EDITORIAL
PHOTOGRAPHY
</li>
</ul>
</li>
<li>BLOG</li>
<li>INSPIRED</li>
<li>CONTACT</li></ul>
</nav>
</div><!-- end navigation div -->
<div class="blog-container">
<div id="sidebarwrapper">
<div id="sidebar">
<div class="arrow right"></div><div class="arrow"></div>
<h1>DENTAL PERFECTION</h1>
<br>
<p>Tree Top News is a publcation produced through Highgate Woods, a heritage woodland in London</p>
<p>I produced the publication two years running, capturing the amazing nature and wildlife around he wood. I was responsible for rt direction, design and print.</p>
<script>
$(window).scroll(function(){
if($(window).scrollTop() + $(window).height() >= $(document).height() - 200){
setLeftBarPosition();
}
});
function setLeftBarPosition(){
// your code to set position of lefftbar
}
</script>
</div><!--sidebar!-->
</div>
<div class="project">
<img src="../../../Images/Dental/Dental5.jpg" alt="Kookielogo" class="image" height="378" width="580">
<img src="../../../Images/Dental/Dental4.jpg" alt="Tree Top" class="image" height="378" width="580">
<img src="../../../Images/Dental/Dental2.jpg" alt="Tree Top" class="image" height="378" width="580">
<img src="../../../Images/Canons high/Canons5.jpg" alt="Tree Top" class="image" height="378" width="580">
<img src="../../../Images/Canons high/Canons6.jpg" alt="LFT" class="image" height="378" width="580">
<div class="clear"></div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
html{
margin: 0;
padding: 0;
border: none;
height: 100%;
}
body {
margin: 0;
padding: 0;
border: none;
height: 100%;
background-image: url(../Images/Lines%20background.jpg);
background-repeat: repeat;
background-attachment: fixed;
}
in your body class you should add background-size: cover; so that it covers the entire <body>

Twitter Feed on IE, Opera, Safari

I have a page in which I've implemented the Twitter feed widget. If works nicely on Firefox and Chrome, but on IE, Opera, and Safari, it just comes up with "Tweets by #JackSchaible" and not the actual feed itself. Someone please help?
The url is www.logicanddesign.ca
Alternatively, here's my source code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Logic & Design: Home</title>
<link rel="stylesheet" type="text/css" href="styles/divs.css" />
<link rel="stylesheet" type="text/css" href="styles/fonts.css" />
<link rel="stylesheet" type="text/css" href="styles/tags.css" />
<link rel="stylesheet" type="text/css" href="styles/images.css" />
<link rel="shortcut icon" href="images/Icon-OR.png" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="scripts/animations.js"></script>
<script src="scripts/socialMediaPlugins.js"></script>
</head>
<body>
<div id="wrapper">
<header>
<img id="logo" alt="logo" src="images/Logo.png" />
</header>
<div id="divider">
<img id="headerDivider" alt="Line" src="images/Line.jpg" />
</div>
<nav>
<div class="Button" id="selectedButton">
<img id="arrowOverlay" alt="Overlay" src="images/Arrows/FadeArrow.png" />
<img id="extender" alt="Home" src="Images/Arrows/Arrow%20Body.png" />
<img id="selectedArrow" alt="Home" src="Images/Arrows/Home/Home.png" />
</div>
<div class="Button" id="aboutButton">
<img alt="About Me" src="Images/Arrows/About/About.png"/>
</div>
<div class="Button" id="abilitiesButton">
<img alt="My Abilities" src="Images/Arrows/Abilities/Abilities.png"/>
</div>
<div class="Button" id="portfolioButton">
<img alt="My Portfolio" src="Images/Arrows/Portfolio/Portfolio.png"/>
</div>
<div class="Button" id="contactButton">
<img alt="Contact Me" src="Images/Arrows/Contact/Contact.png"/>
</div>
</nav>
<div id="mainContent">
<div id="innerContent">
<p>Welcome to Logic & Design! If you are looking for work done and it has anything to do with a computer, you have come to the right place! My name is Jack Schaible and I do nearly everything computer-related. Whether it is software analysis, design, web apps, database design, web design or development, whatever your needs, I can fill them. I will take care of the technical side of things so you can focus on what matters: running your business!</p>
</div>
</div>
<div id="imageBar">
<div id="networkingIcons">
<div id="fb" class="fb-like-box" data-href="http://www.facebook.com/logicanddesign" data-width="200" data-height="75" data-colorscheme="dark" data-show-faces="false" data-stream="false" data-header="false"></div>
<a class="twitter-timeline" href="https://twitter.com/JackSchaible" data-widget-id="266804071627898880">Tweets by #JackSchaible</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<div class="g-plus" data-width="199" data-height="69" data-href="https://plus.google.com/105579960548041650339" data-rel="author" data-theme="dark"></div>
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<script src="//platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/Share" data-counter="right"></script>
</div>
</div>
<footer>
<p>© <script type="text/javascript">document.write((new Date).getFullYear());</script> Jack Schaible</p>
</footer>
</div>
</body>
</html>
It works on all of my browsers when it is accessed form a server http://localhost/twitter.html or http://www.logicanddesign.ca/ but not when viewed as html file: file:///C:/xampp/htdocs/twitter.html. This seems to be a nuance of the .js script.

Unbelievable CSS div jump

See it or yourself! The meal-category-box div has an inexplicable jump from the title to the rest of the content. We can't work it out?
My code is also shown here:
/* Begin Base */
body {
color: #245a03;
background-color: #e7f5df;
font-family: "Helvetica Neue Light", "HelveticaNeue-Light",
"HelveticaNeue", Helvetica, Arial;
font-size: 17px;
margin: 0;
padding: 0;
height: 100%;
}
<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" >
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>MealMarket</title>
<meta name="description" content="">
<meta name="author" content="" >
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" >
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap-responsive.css"/>
<link rel="stylesheet" href="/static/css/style.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='http://fonts.googleapis.com/css?family=Voces' rel='stylesheet' type='text/css'>
<script src="/static/bootstrap/js/bootstrap-alert.js"></script>
<script src="/static/js/libs/modernizr-2.5.3.min.js"></script>
</head>
<body class="">
<div id="container">
<div id="header">
<a href="/"><h1>Meal Market</h1>
<span>Share food, get food, more merry mealtimes</span></a>
</div>
<div id="main" role="main" class="container">
<div id="user-info">
<img src="/static/images/pics/profile-default.jpg">
<div id="user-column-options">
<h3 style="word-wrap:break-word;">
Matt</h3>
<p>Credits: 10</p>
<ul>
<li>Make meal</li>
<li>Find meal</li>
<!--<li>Past meals</li>-->
</ul>
</div>
</div>
<!-- End user info column -->
<div id="stream">
<!-- Start user's coming hosted meals div -->
<div class="meal-category-box">
<h4>Coming Meals that You're Cooking</h4><br />
<div class="meal-box-small">
<div class="meal-details">
<p><h5><a href="/meals/matt/22/Apr/2012/05:30">
Fungus food</a></h5>
April 22, 2012, 5:30 a.m.
</p>
<p> (View map)</p>
<p style="margin-top: 10px;">
<div style="margin-top: 20px;" class="emphasis-box">Click to attend this meal</div>
</p>
</div>
</div>
<div class="clearer"> </div>
<div class="meal-box-small">
<div class="meal-details">
<p><h5><a href="/meals/matt/21/Apr/2012/19:00">
Lentil stew</a></h5>
April 21, 2012, 7 p.m.
</p>
<p> (View map)</p>
<p style="margin-top: 10px;">
<div style="margin-top: 20px;" class="emphasis-box">Click to attend this meal</div>
</p>
</div>
</div>
<div class="clearer"> </div>
</div>
<!-- End user's coming hosted meals div -->
<div class="clearer"> </div>
<div class="clearer"> </div>
<!-- Start other coming meals div -->
<div class="meal-category-box">
<h4>Other Upcoming Meal Invites</h4>
<div class="meal-box">
<img src="">
<div class="meal-details">
<p><h5><a href="/meals/jervin/13/Apr/2012/00:30">
Great flippin' food</a></h5>
</p>
<p>April 13, 2012, 12:30 a.m.<p>
<p> (View map)</p>
<p>Cooked by
<a href="/users/jervin/">
jervin</a>
</p>
<div style="margin-top: 20px;" class="emphasis-box">Click to attend this meal</div>
</div>
</div>
<div class="meal-box">
<img src="">
<div class="meal-details">
<p><h5><a href="/meals/jervin/29/Apr/2012/04:30">
Veggie curry</a></h5>
</p>
<p>April 29, 2012, 4:30 a.m.<p>
<p> (View map)</p>
<p>Cooked by
<a href="/users/jervin/">
jervin</a>
</p>
<div style="margin-top: 20px;" class="emphasis-box">Click to attend this meal</div>
</div>
</div>
</div>
<!-- End other coming meals div -->
</div>
<div class="clearer"> </div>
</div>
<div id="clearer"> </div>
<footer class="footer">
<hr>
<ul id="footer-links">
<li>About / FAQ</li>
<li>Privacy / Legal</li>
<li>Media</li>
<li>Contact</li>
</ul>
</footer>
</div>
</div> <!-- end of #container -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/static/js/libs/jquery-1.6.2.min.js"><\/script>')</script>
<!--<script defer src="/static/js/plugins.js"></script>
<script defer src="/static/js/script.js"></script>-->
<script src="/static/bootstrap/js/bootstrap-collapse.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".collapse").collapse({toggle: false});
});
</script>
<script type="text/javascript">
// On click...
$("#cross-icon").click(function() {
$('#new-user-box p').slideUp("slow")
$('#new-user-box').slideUp("slow");
});
</script>
<script> // Change UA-XXXXX-X to be your site's ID
window._gaq = [['_setAccount','UAXXXXXXXX1'],['_trackPageview'],['_trackPageLoadTime']];
Modernizr.load({
load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
});
</script>
<!--[if lt IE 7 ]>
<script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
<script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
<![endif]-->
</body>
</html>
Remove clear: both; from the style for .meal-box-small.
#user-column-options is set to float: left;, so the clear: both; causes .meal-box-small to move below that.
How about the 70px bottom margin on your #header? (The Developer Tools: use them.)
div#header has a margin-bottom of 70px. Decrease that to lessen the space between your title and content.
Make this change in your HTML:
<!-- Start user's coming hosted meals div -->
<div class="meal-category-box">
<h4>Coming Meals that You're Cooking</h4>
<div class="meal-box">
<div class="meal-details">
Just change the div with the class meal-box-small to the class meal-box and all is fine.

Change image on hover

How can I change this exact code to do the hovering effect on mouseover?
I tried following some of the other questions and answers, but I could not really follow them.
So the HTML is:
<img src="R3.jpg" width=700 height=300 />
<div>
<img src="SSX.jpg" height=100 width=120 />
<img src="MaxPayne3Cover.jpg" height=100 width=120 />
<img src="NC.jpg" height=100 width=120 />
</br>
</div>
Now what I want to do is change the big size image when the mouse hovers over the small images.
Try this it`s so easy and the shortest one, just change the Image's URL:
<a href="TARGET URL GOES HERE">
<img src="URL OF FIRST IMAGE GOES HERE"
onmouseover="this.src='URL OF SECOND IMAGE GOES HERE';"
onmouseout="this.src='URL OF FIRST IMAGE GOES HERE';">
</a>
Try the following code. It's working
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title><br />
</head>
<body>
<p>
<script type="text/javascript" language="javascript">
function changeImage(img){
document.getElementById('bigImage').src=img;
}
</script>
<img src="../Pictures/lightcircle.png" alt="" width="284" height="156" id="bigImage" />
<p> </p>
<div>
<p>
<img src="../Pictures/lightcircle2.png" height=79 width=78 onmouseover="changeImage('../Pictures/lightcircle2.png')"/>
</p>
<p><img src="../Pictures/lightcircle.png" alt="" width="120" height="100" onmouseover="changeImage('../Pictures/lightcircle.png')"/></p>
<p><img src="../Pictures/lightcircle2.png" alt="" width="78" height="79" onmouseover="changeImage('../Pictures/lightcircle2.png')"/></p>
<p> </p>
</br>
</div>
</body>
</html>
I modified the code, like it will work with some delay in it.. But still, it is not animating..
function changeImage(img){
// document.getElementById('bigImage').src=img;
setTimeout(function() {document.getElementById('bigImage').src=img;},1250);
}
Or do like this:
<a href="SSX.html">
<img src="SSX.jpg"
onmouseover="this.src='SSX2.jpg';"
onmouseout="this.src='SSX.jpg';"
height=100
width=120 />
</a>
I think this is the easiest way.
No JavaScript needed if you are using this technique
<div class="effect">
<img class="image" src="image.jpg" />
<img class="image hover" src="image-hover.jpg" />
</div>
the you will need css to control it
.effect img.image{
/*type your css here which you want to use for both*/
}
.effect:hover img.image{
display:none;
}
.effect img.hover{
display:none;
}
.effect:hover img.hover{
display:block;
}
remember to give some class to div and mention it in your css name to avoid trouble :)
The easiest way for Roll Over image or Mouse Over image for web pages menus
<a href="#" onmouseover="document.myimage1.src='images/ipt_home2.png';"
onmouseout="document.myimage1.src='images/ipt_home1.png';">
<img src="images/ipt_home1.png" name="myimage1" />
</a>
<script type="text/javascript">
function changeImage(img){
img.src=URL_TO_NEW_IMAGE;
}
</script>
<a href="RR.html"><img id="bigImage"
onmouseover="changeImage(document.getElementById('bigImage'));"
src="R3.jpg"
width=700
height=300/></a>
<div>
<a href="SSX.html" ><img src="SSX.jpg" height=100 width=120/></a>
<img src="MaxPayne3Cover.jpg" height=100 width=120/>
<a href="NC.html" ><img src="NC.jpg" height=100 width=120/></a>
</br>
</div>
If you don't want to do Javascript you can use CSS and :hover selector to get the same effect.
Here's how:
index.html:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<title>Image hover example</title>
</head>
<body>
<div class="change_img"></div>
</body>
</html>
stylesheet.css
.change_img { background-image:url('img.png'); }/*Normal Image*/
.change_img:hover { background-image:url('img_hover.png'); }/*On MouseOver*/
Just Use this:
Example:
<img src="http://nineplanets.org/planets.jpg"
onmouseover="this.src='http://nineplanets.org/planetorder.JPG';"
onmouseout="this.src='http://nineplanets.org/planets.jpg';">
</img>
Works best with the Pictures being the same size.
Copy This
<img src="IMG-1"
onmouseover="this.src='IMG-2';"
onmouseout="this.src='IMG-1';">
</img>
Here is a simplified code sample:
.change_img {
background-image: url(image1.jpg);
}
.change_img:hover {
background-image: url(image2.jpg);
}