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
Solved

Chrome / Firefox column discrepancy

Posted on 2014-01-31
11
386 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
Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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
 
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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

809 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