?
Solved

Chrome / Firefox column discrepancy

Posted on 2014-01-31
11
Medium Priority
?
394 Views
Last Modified: 2014-01-31
Need some more help with columns. =)

This page: http://test2.ebwebwork.com/pages/The-Book.cfm

In Firefox and MSIE, the right column looks good.

In Chrome, the content wanders past the end of the right column.

I wonder what is going on? Any ideas?

Thank you, friends.

Eric
0
Comment
Question by:Eric Bourland
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
  • 3
  • +1
11 Comments
 
LVL 38

Assisted Solution

by:Tom Beck
Tom Beck earned 668 total points
ID: 39825055
The problem is apparent in Chrome and Firefox on a Mac.

You have this piece of javascript at the bottom of the page that effectively gives the sidebar a fixed height, 1076px in my browser.

$('.sidebar').height(getmaxheight);

Try commenting that out and see what you get.

You could add overflow:scroll to col_4 if you didn't want the side bar longer than the main content.
0
 
LVL 43

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 664 total points
ID: 39825062
You have the same problem in Firefox.

The right column has a fixed height and the content is too long for it, so it overflows. Just remove the fixed height and it will automatically expand:

The CSS is inline (bad idea by the way):

<div class="col_4 sidebar column" style="height: 1078px;">
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39825093
The height is dynamically being added by the script at the bottom. A script obtained in the last question posted on this topic.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 58

Accepted Solution

by:
Gary earned 668 total points
ID: 39825096
Problem is the images are not loaded before the js is firing.
At the bottom replace
$(function() {
with
$(window).load(function() {

edit
I think, let me double check

Obviously it was as the amendment fixed it.
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39825106
Yep, that takes care of it.
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39825119
Alternatively, set the min-height instead of the height - the functions will fire quicker (DOM ready) and expand automatically with content - WIN WIN :)
0
 
LVL 3

Author Comment

by:Eric Bourland
ID: 39825138
Cathal's solution is working.

Chris, so instead of:

<script>
$(window).load(function() {
      getmaxheight = Math.max($('.main-content').height(),$('.sidebar').height());
      $('.main-content').height(getmaxheight);
      $('.sidebar').height(getmaxheight);
})
</script>

I should try:

<script>
$(window).load(function() {
      getmaxheight = Math.max($('.main-content').min-height(),$('.sidebar').min-height());
      $('.main-content').height(getmaxheight);
      $('.sidebar').height(getmaxheight);
})
</script>

I find this very interesting. Thank you all for your ideas.

Eric
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39825146
$(function() {

      getmaxheight = Math.max($('.main-content').height(),$('.sidebar').height());

      $('.main-content').css('min-height', getmaxheight);

      $('.sidebar').css('min-height', getmaxheight);

});

Problem with that is that the content will not extend to the same height as the sidebar or vise versa depending on which is longer.
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39825165
Tommy beat me to it - my solution was only working on the premise of changing the sidebar height - not both. You need all the images to load so you can accurately work out the height, so you need it on window.load rather than DOM Ready.

Gary nailed in this comment 39825096
0
 
LVL 3

Author Comment

by:Eric Bourland
ID: 39825202
It seems like Cathal's solution:

<script>
$(window).load(function() {
      getmaxheight = Math.max($('.main-content').height(),$('.sidebar').height());
      $('.main-content').height(getmaxheight);
      $('.sidebar').height(getmaxheight);
})
</script>

is working really well. I am going to leave it at that. =) Unless someone has a strong feeling I should change it.

I really appreciate everyone's time and attention.

Eric
0
 
LVL 3

Author Closing Comment

by:Eric Bourland
ID: 39825251
Thank you, Cathal, Chris, and Tom. =)

Eric
0

Featured Post

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question