Overflow-x/y not working in IE

Question

Current IE version: 11 Website: www.4pia.com/beta

Right now I've tried testing the website using Firefox, Chrome and IE11. Chrome and Firefox both work with the overflow CSS. However, IE11 does not. When I tried changing the width/height in the CSS code it did not effect IE's rendering at all (so I assume that's where my problem lies). I'm not sure where I need to transfer to overflow code to make it work though.

CSS:

#repnews{
    float: right;
    width: 450px;
    height: 600px;
}

#reptable tbody{ 
    width: 450px;
    height: 600px;
    display: block;
    overflow-y: scroll;
    overflow-x: hidden;
    color: #000; 
    font-size: 11px; 
    font-weight: bold;
}

#reptable tr{
    max-width: 450px;
    height: auto;
    display: block;
}

#reptable td{
    max-width: 360px;
    height: auto;
    display: block;
}

HTML/PHP

<?php
echo "<div id='repnews'>";
echo "<div class='counter' align='right'>".$reptotal."<img src='images/rep.png'></div>";
echo "<hr class='repborder'>";
echo "<table id='reptable'>";

echo "<tr><td><div class='icon'><a href='/beta/bio?code=".$code."'>".$Name."</a> - ".$Tim;
echo "<img src='images/reply.png' class='tooltip' title='Please sign into Twitter to reply'>";
echo "<img src='images/retweet.png' class='tooltip' title='Please sign into Twitter or Facebook retweet'>";
echo "<img src='images/check.png' class='tooltip' title='Please sign in to vote'>";
echo "<img src='images/veto.png' class='tooltip' title='Please sign in to vote'>";
echo "</div></td></tr>";
echo "<tr><td nowrap='wrap' width='360px'>".$Tweet."</td>";
echo "<td width='90px'><font color='green'>".$fol."<br>Followers</font></td></tr>";

echo "</table>";
echo "</div>";
?>

Instead of forcing the table to have `display: block`, which can lead to issues with layouts of tables (as the default is `display: table`), why not just wrap each table in a `
`, give it a height and set the overflow there? Or even better use `` for the layout rather than tables as this isn't tabular data. — davidpauljunior, Apr 16 '14 at 03:18

score 0 · Answer 1 · edited May 23 '17 at 12:20

0

make sure that you are not using visible for either overflow-x or overflow-y and something other than visible for the other. The visible value is interpreted as auto.

http://www.brunildo.org/test/Overflowxy2.html

this can help CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue

edited May 23 '17 at 12:20

Community

1
1

answered Apr 16 '14 at 02:48

4dgaurav

11,360
4
32
59

EDIT x2: I've looked into the problem but it still seems to do do `overflow: visible` despite telling it to be `overflow-x:hidden` and `overflow-y: scroll`. I have no other `overflow` CSS in my code so I don't think it would inherent it from anywhere else. – Jester Apr 16 '14 at 02:50

Overflow-x/y not working in IE

1 Answers1