Solved

Chrome / Firefox column discrepancy

Posted on 2014-01-31
11
381 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
  • 4
  • 3
  • 3
  • +1
11 Comments
 
LVL 38

Assisted Solution

by:Tom Beck
Tom Beck earned 167 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 166 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
 
LVL 58

Accepted Solution

by:
Gary earned 167 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article discusses four methods for overlaying images in a container on a web page
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
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)

920 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now