Solved

Chrome / Firefox column discrepancy

Posted on 2014-01-31
11
380 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
Comment Utility
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 42

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 166 total points
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Yep, that takes care of it.
0
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 42

Expert Comment

by:Chris Stanyon
Comment Utility
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
Comment Utility
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
Comment Utility
$(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 42

Expert Comment

by:Chris Stanyon
Comment Utility
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
Comment Utility
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
Comment Utility
Thank you, Cathal, Chris, and Tom. =)

Eric
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Suggested Solutions

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
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.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

772 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

11 Experts available now in Live!

Get 1:1 Help Now