Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    Regular Coder
    Join Date
    Jul 2002
    Location
    Raleigh, NC
    Posts
    484
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Dreaded Horizontal Scroll in IE only

    I have created a set of nested tables where both widths are dynamic based on percentage. The outer table is 90% and the inner table is 98% of that... sounds simple right?

    In Firefox it works as it should but for some stupid reason in IE I end up with a horizontal scroll whenever the page is long enough to require a vertical scroll. In other words, I only get a horizontal scroll when the vertical scroll appears. If both tables are based on percentages why the !@#$ is it creating a horizontal scroll rather than reducing the size of the table by however wide the vertical scroll is?

    Let me add that there is nothing in either table that has a set width (no images or set pixel widths). Everything including the tds are flexable widths.
    -WebMark Art
    Programming is 80% thinking and 20% spelling

  • #2
    Regular Coder
    Join Date
    Oct 2004
    Posts
    256
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Don't forget that border, padding and margins count towards total width for your elements.

    If your element is 100% wide, and has a 1px border on each side, then it's going to be ((100% of the parent's content width) + 2px) wide in total.

  • #3
    Regular Coder
    Join Date
    Jul 2002
    Location
    Raleigh, NC
    Posts
    484
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The outermost table is 90%... not 100%. 90% plus 3 pixels should not cause a horizonal scroll.

    The outside table has the following class...
    .table {background-color:#eeeeee; border-width:1px 2px 3px 1px; border-style:solid; border-color:#999999;}

    it looks like this
    Code:
    <table width="90%" border="0" cellpadding="2" cellspacing="0" align="center" class="table">
    <tr>
    	<td><img src="<TMPL_VAR NAME="product_image_location">/white1.gif" alt="" width="1" height="5" border="0"></td>
    </tr>   
    <tr>
    	<td>
        <form name="StoryAddForm" action="<TMPL_VAR NAME="curr_script">" method="post">
    	<input type="hidden" name="mode" value="save_add">
    	<input type="hidden" name="prev_mode" value="<TMPL_VAR NAME="prev_mode">">
    	<input type="hidden" name="id" value="<TMPL_VAR NAME="id">">
    	<input type="hidden" name="is_auto_updated" value="0">
    	<table width="98%" border="0" cellpadding="2" cellspacing="1" align="center">
    	<tr>
    		<td colspan="2" class="pgheading">Add Story</td>
    	</tr>
    -WebMark Art
    Programming is 80% thinking and 20% spelling

  • #4
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    It might be easier to set your table width using CSS than in your actual code.

    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #5
    Regular Coder
    Join Date
    Oct 2004
    Posts
    256
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by webmarkart
    The outermost table is 90%... not 100%. 90% plus 3 pixels should not cause a horizonal scroll.
    Sorry, those figures were just an example. I should have made it more obvious.

    I'd go with whizard's suggestion for starters. The less style there is in your HTML, the easier it will be to spot problems with the CSS (although to be honest "IE is spazzy" is probably the only problem here).

  • #6
    Regular Coder
    Join Date
    Jul 2002
    Location
    Raleigh, NC
    Posts
    484
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yeah, you're right, the width should go into the css rather than the html. I just don't think that will solve the problem though...

    Damn I hate IE!
    -WebMark Art
    Programming is 80% thinking and 20% spelling

  • #7
    Regular Coder
    Join Date
    Oct 2004
    Posts
    256
    Thanks
    0
    Thanked 0 Times in 0 Posts
    A very easy hack for dealing with IE is this:
    Code:
    element {IE properties}
    html>body element {"real" properties}
    IE uses the first rule and ignores the second one. Proper browsers will take the first rule then the second rule, discarding any properties that the second rule over-writes.

  • #8
    Regular Coder
    Join Date
    Jul 2002
    Location
    Raleigh, NC
    Posts
    484
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks for the idea... I'm not sure of the best way to implement it though. If a hard coded 90% gets screwed up in IE I'm not sure I want to go messing with multiple classes for various elements within my css.
    -WebMark Art
    Programming is 80% thinking and 20% spelling

  • #9
    Regular Coder
    Join Date
    Oct 2004
    Posts
    256
    Thanks
    0
    Thanked 0 Times in 0 Posts
    What's the parent element for the table?

    Also, are you sure it's the table causing the problem?

  • #10
    New Coder
    Join Date
    Dec 2003
    Location
    At work...still
    Posts
    57
    Thanks
    0
    Thanked 0 Times in 0 Posts

    just a guess

    Is this part of a frameset? IE will do some odd stuff with scrolling when inside a frameset. When IE's vertical scroll bar appears inside a frame it reduces the total width and all those elements with width="x%" will be re-rendered. However if you have a fixed width element that had say a px or two clearance before the vertical scroll took screen space then you WILL cause a horizontal scroll.

    So what I'm getting at is if its a frame check your fixed width elements and like Sayonara said "Don't forget that border, padding and margins count".

    This is just a guess, without seeing all the code I can only do that.
    Why?
    Ok, but Why?

  • #11
    Regular Coder
    Join Date
    Jul 2002
    Location
    Raleigh, NC
    Posts
    484
    Thanks
    0
    Thanked 0 Times in 0 Posts
    good guess... it is within a frameset and it's not an option to change that unfortunately. With the exception of a few small images (transparent 5x1px spacers) there are no set widths anywhere on the page. Every table and element within is set through percentages.

    Do I know for a fact that the table is causing the problem... not really but I have a lot of pages with the exact same structure and only the pages with a vertical scroll have a horizontal one... and only in IE. The outer most table is the only thing that even comes close to having a width that might cause a horizontal scroll.
    -WebMark Art
    Programming is 80% thinking and 20% spelling

  • #12
    New Coder
    Join Date
    Dec 2003
    Location
    At work...still
    Posts
    57
    Thanks
    0
    Thanked 0 Times in 0 Posts
    At a time like this I would start adding boarders to everything so I could see if something jumped out. Thats about all I can think of now
    Why?
    Ok, but Why?

  • #13
    Regular Coder
    Join Date
    Oct 2004
    Posts
    256
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Don't forget table cells will often expand to accomodate content. There could be something in a table that's forcing the width to increase.

    What you need to do is experiment with a test page by removing elements sequentially until the scroll bar vanishes.

  • #14
    Regular Coder
    Join Date
    Jul 2002
    Location
    Raleigh, NC
    Posts
    484
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the advice everyone... I have been testing with borders and I have yet to find anything that should be causing this. There are some pages I where there is only 1 td with a 2 digit integer (that's it!) but there are enough rows to force a vertical, and thus horizontal, scrollbar.

    I'm on the bandwagon to boycot IE
    -WebMark Art
    Programming is 80% thinking and 20% spelling

  • #15
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up Auto scrolling

    This same problem has been bothering me too - soooo frustrating. And finally, a solution... in the frame, set scrolling="yes" instead of scrolling="auto"
    I know this is not ideal, however it seems better to have a sometimes unnecessary scroll on the right than ever having a horizontal scroll.
    And if you find any other way around this, let me know!


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •