Solved

Chrome / Firefox column discrepancy

Posted on 2014-01-31
11
391 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 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
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 
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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

690 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