Can someone tell me how to scroll the content.
For example I have a link like this
content3
When the user click that link I would like to scroll the content to div content3.
Can someone tell me how to do this using jQuery?
Here is my full code.
<div class="container">
<div class="nav">
<ul>
<li><a class="active" href="#">content1</a></li>
<li>content2</li>
<li>content3</li>
<li>content4</li>
</ul>
</div>
<div id="content">
<div id="content1" class="content1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="content2" class="content2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="content3" class="content3">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="content4" class="content4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
You don't need jQuery to do this - simply use href="#content3" to scroll to the element with an id of "content3".
Using scrollTop :
Example :
<a scrollTo="content3" href="#">click me to scroll to the div "content3"</a>
$(document).ready(function(){
$('a').on('click',function(){
$("#container").animate({ scrollTop: $('#'+$(this).attr('scrollTo')).offset().top }, 1000);
});
});
jQuery has scrollTop and scrollLeft methods to do this.. if it is merely vertical scrolling, then scrollTop(yVal) will do the trick
http://api.jquery.com/scrollTop/
Don't know what you are attempting to do, but go check out wowslider.com
Using the $('body').scrollTop atribute like so:
$('#button1').click(function(){
var element = $('#content1'),
elemTop = element.offset().top, // You get the element top to know where to move the window
windowTop = elemTop + 20; // You can add some pixels so the element dont be shown on the very edge
$("html, body").animate({
scrollTop: windowTop // Animate the change so it doesnt seem invasive
}, "fast");
}
});
Try this...
$('a').on('click', function (){
$('html,body').animate({
scrollTop: $('#'+$(this).text()).offset().top},
'slow');
});
See this JsFiddle Example
Greetings...
Based on your markup it appeared you wanted to use the anchor text to determine where to scroll. If you click the content1 link it will scroll you to <div id="content1">.
$('.nav ul li a').click(function(){
$('html, body').animate({
scrollTop: $('#' + $(this).text()).offset().top
}, 2000);
});
Heres a fiddle as an example: http://jsfiddle.net/ZG3zh/
In order to scroll with HTML you need to set the href of the anchor #+'id of element' you are scrolling to.
Example:
I want to scroll to <div id="scrollHere">Hello World</div>
using an anchor tag or a use the code, Click Me!
Related
Trying to get this script to work (basically want the user to scroll the html page I made, and when it reaches a certain point, to have the text change colour).
Here's what I've done so far:
jQuery(document).ready(function(){
if(jQuery(window).scrollTop() > 20){
jQuery(".changeme").addClass("changeme2");
}
});
The css:
.changeme{
height: 300px;
}
.changeme2{
color: blue;
}
and the HTML:
<html>
<head>
<title>Scroll effect</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script>
<script type="text/javascript" src="scroll.js"></script>
</head>
<body>
<div class="changeme">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="changeme">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="changeme">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</body>
</html>
Its something very simple, but I cant get it to work. Any ideas?
The code is working perfectly but you are not detecting the document on the scroll, use below code snippet for reference.
<script>
jQuery(document).ready(function(){
jQuery(document).scroll(function(){
if(jQuery(window).scrollTop() > 20){
jQuery(".changeme").addClass("changeme2");
}
});
});
</script>
First, get an updated version of jQuery if you can. And the shorter $ instead of jQuery can also make it much easier to use jQuery.
To do something when you interact with the page you should listen for events. In this case listen for the scroll event. You can listen for events with the on method.
$(document).ready(function() {
let $window = $(window);
let $changeMe = $('.changeme');
$window.on('scroll', function() {
if ($window.scrollTop() > 20) {
$changeMe.addClass('changeme2');
} else {
$changeMe.removeClass('changeme2');
}
});
});
I am using GSAP. I am getting the issue on the smooth scroll.
I have two pages. home.php and aboutus.php. I have one menu and I am adding dynamically on all the pages.
I am on the home page and if I click on contactus then smooth scroll is working and my URL is http://localhost:8080/example/smoth1.php#contactus
Now my issue is, I am on aboutus page and when I click on contactus i am getting the URL http://localhost:8080/example/aboutus.php#contactus
It's not redirecting on the homepage because I have contactus section on the home page.
I tried <li>Contactus</li> but then my smothscroll not wokring.
Would you help me out in this?
$(document).ready(function() {
var controller1 = new ScrollMagic.Controller();
controller1.scrollTo(function(target) {
TweenMax.to(window, 3, {
scrollTo: {
y: target - 65, // scroll position of the target along y axis
autoKill: true, // allows user to kill scroll action smoothly
},
ease: Cubic.easeInOut
});
});
// Bind scroll to anchor links
$(document).on("click", ".smothscrollclass a[href^='#']", function(e) {
var id = $(this).attr("href");
if ($(id).length > 0) {
e.preventDefault();
// trigger scroll
controller1.scrollTo(id);
// If supported by the browser we can also update the URL
if (window.history && window.history.pushState) {
history.pushState("", document.title, id);
}
};
});
});
.col1 {
min-height: 1000px;
}
<div>
<ul class="main_list smothscrollclass">
<li>Home</li>
<li>Contactus</li>
<li>Aboutus</li>
</ul>
</div>
<div class="col1" id="home">
<h2>Home</h2>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
<div class="col2" id="contactus">
<h2>Contactus</h2>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/plugins/ScrollToPlugin.min.js"></script>
<script src="https://scrollmagic.io/scrollmagic/uncompressed/ScrollMagic.js"></script>
I have a tab panel using jQuery and everything works properly, except the link with data-anchor inside a tab content that should be switch to a specific tab. The tab switching is working but the tab content is not displayed.
How to fix this?
HTML:
<div class="tab-panels">
<ul class="tabs">
<li class="active" rel="panel1">panel1</li>
<li rel="panel2" id="custpanel2">panel2</li>
<li rel="panel3">panel3</li>
<li rel="panel4">panel4</li>
</ul>
<div class="panel active" id="panel1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="panel" id="panel2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="panel" id="panel3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="panel" id="panel4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<a href="custpanel2" data-anchor="#custpanel2">
Click here
</a>
</div>
</div>
JS:
$('.tab-panels .tabs li').on('click', function(){
var $panel = $(this).closest('.tab-panels');
$panel.find('.tabs li.active').removeClass('active');
$(this).addClass('active');
var panelToShow = $(this).attr('rel');
$panel.find('.panel.active').fadeOut(300, showNextPanel);
function showNextPanel(){
$(this).removeClass('active');
$('#'+panelToShow).fadeIn(300, function(){
$(this).addClass('active');
})
}
});
//Link inside tab content
$('[data-anchor="#custpanel2"]').on('click', function(e){
e.preventDefault();
var $panel = $(this).closest('.tab-panels');
$panel.find('.tabs li.active').removeClass('active');
$('.tabs li:nth-child(3)').addClass('active');
var panelToShow = $(this).attr('rel');
$panel.find('.panel.active').fadeOut(300, showNextPanel);
function showNextPanel(){
$(this).removeClass('active');
$('#'+panelToShow).fadeIn(300, function(){
$(this).addClass('active');
})
}
});
var panelToShow = $(this).attr('rel');
value of panelToShow is retrived from attirbute named "rel" and the link don't have "rel" attribute you can fix the problem without modifying the logic
e.g.
rel="panel1"
$(this) is not getting correct element inside the function I guess, So please use below code.
function showNextPanel(){
$('.tab-panels div.panel').removeClass('active');
$('#'+panelToShow).fadeIn(300, function(){
$(this).addClass('active');
});
}
EDIT
$('[data-anchor="#custpanel2"]').on('click', function(e){
e.preventDefault();
var $panel = $(this).closest('.tab-panels');
$panel.find('.tabs li.active').removeClass('active');
$('.tabs li:nth-child(3)').addClass('active');
var panelToShow = $(this).attr('href');
$panel.find('.panel.active').fadeOut(300, showNextPanel);
function showNextPanel(){
$('.tab-panels div.panel').removeClass('active');
$('#'+panelToShow).fadeIn(300, function(){
$(this).addClass('active');
})
}
});
I'd really like to be able to "activate" / "open" a Zurb Foundation Accordion via the URL with the accordion pane in questions hash.
So like example.com/page#accordion1
Is this possible already with Foundation or is it easy to implement? I honestly haven't got a clue :-/
Thanks in advance for any help given!
You can do this by adding an unique attribute to each accordion title <div class="title" data-ref="panel-1"> In this case I added a data-ref attribute. Then you will need to add some jQuery to look at the hash and if it is a accordion panel, then click that panel.
HTML
<ul class="accordion">
<li class="active">
<div class="title" data-ref="panel-1">
<h5>Accordion Panel 1</h5>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</li>
<li>
<div class="title" data-ref="panel-2">
<h5>Accordion Panel 2</h5>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</li>
<li>
<div class="title" data-ref="panel-3">
<h5>Accordion Panel 3</h5>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</li>
</ul>
jQuery
jQuery(function() { // Document ready shorthand
// Get the hash and remove the #
var hash = window.location.hash.replace('#', '');
if (hash != '') {
// Cache targeted panel
$target = $('.title[data-ref="' + hash + '"]');
// Make sure panel is not already active
if (!$target.parents('li').hasClass('active')) {
// Trigger a click on item to change panel
$target.trigger('click');
}
}
});
View in action
Edit code
One note: When in jsfiddle edit the hash will not work. Need to view in the full mode.
UPDATE
If you want to have a link that opens up a panel and updates hash. You will need to add a specific class to the link. In my example I add panel-btn
HTML
Goto Panel 2
jQuery
$('.panel-btn').click(function(e){
// Get the links href and remove the #
target_hash = $(this).attr('href').replace('#','');
// Click targeted panel
$('.title[data-ref="' + target_hash + '"]').trigger('click');
// Update hash, so that if page is refreshed, target panel will open
window.location.hash = target_hash;
// Stop all default link functionality
return false;
});
Updated jsfiddle view
Updated jsfiddle code
If you are looking for more of a history thing when each panel is clicked. You will need to add a click event to each .title and get its data-ref and change the hash to that, like this:
$('.title').click(function(){
// Get the data-ref
hash = $(this).attr('data-ref');
// Set hash to panels hash
window.location.hash = hash;
});
If you are using Foundation 5:
Foundations Accordion has a custom event click.fndtn.accordion you can use. It will take care of the proper open/closed states:
jQuery(document).ready(function($) {
var hash = window.location.hash;
if (hash != '') {
$('[data-accordion] [href="' + hash + '"]').trigger('click.fndtn.accordion');
}
});
See the example here, it will programatically open the second tab upon page load by detecting a window hash (simulated by a dummy hash in the code):
http://jsfiddle.net/ynyrrm99/
Link to the page without setting the a link to data-tab or any other settings. As of foundation 5.5.1 it will parse the uri with a hash on page load... meaning it doesn't matter how you set the originating link.
Set a variable to the hash in the URL, give the content panel div the same id as in your hash. Then add a class of .active to the panel with the same id as your link.
if(window.location.hash) {
var hash = window.location.hash;
$( hash ).addClass( "active" );
}
I have set .outerHeight(true) on the element #inner but at the moment it returns height values
ie: 304
ff: 317
chrome: 289
can anyone explain where I might be going wrong with this?
JS
var wH = $(window).height(),
wrapper = $('#wrapper'),
inner = $('#inner'),
innerH = inner.outerHeight(true),
more = inner.find('.more'),
close = inner.find('.close'),
titleH = $('#title').outerHeight(true),
excerpt = $('.excerpt'),
excerptH = excerpt.outerHeight(true),
lowerH = $('.lower').outerHeight(true),
upper = inner.find('.upper'),
footerH = $('#footer').height()
body = $('body');
// Set #wrapper off page
wrapper.css('bottom', -innerH);
// Store tier1 calculation as data attribute
wrapper.data('tier1', -innerH+titleH+footerH);
console.log(innerH);
//console.log(-innerH+titleH+footerH);
// Animate #wrapper above #footer
wrapper.delay(500).animate({ bottom: wrapper.data('tier1') }, 400);
CSS
body{font-family:Arial,Helvetica,sans-serif;overflow: hidden;}
h1{text-align:center;width:600px;margin:0 auto;padding:20px 0 45px;font-size:28px;font-weight:bold;line-height:26px;}
p{margin-bottom:20px;}
#tiers{background:#f2f2f2;height:100%;}
#wrapper{width:100%;position:absolute;bottom:0;left:0;background:#dedede;}
#inner{width:840px;margin:0 auto;}
.upper{display:none;}
.upper p{margin-bottom:0;}
.col{width:410px;}
.btn{background: #000000;color: #FFFFFF;display: block;font-size: 20px;font-weight: bold;width:30px;height:30px;text-align:center;line-height:30px;position: absolute;text-decoration: none;}
.more{top:20px;right:20px;}
.close{display:none;top:60px;right:20px;}
.excerpt{display: block;}
HTML
<body class="tier1">
<div id="tiers">
<div id="wrapper">
<div id="inner" class="clearfix">
-
+
<div class="lower">
<h1 id="title">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h1>
<p class="excerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="upper">
<div class="col left"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
<div class="col right"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
</div>
</div>
</div>
</div>
<div id="footer"></div>
</body>
Link to page: http://bit.ly/IA65Mb
Kyle
There are a few differences I was able to spot:
p has a 20px margin-bottom which propagates to #inner in chrome. I don't remember the details of this feature but I think I heard once that it's actually correct behavior. I think only chrome has it. See example
for some reason #excerpt has different heights in ff and chrome - maybe there are slight differences in text rendering?
I think fixing the first issue would solve the problem you're having though. Getting exact same result cross-browser is an overkill.