How do you keep relative positioning from poping out of the box?
I am trying to use relative positioning for other reasons, and data in my div is popuping out of the container div in ie7.
Can you guys give me some idea what is going?
Also, I can just remove position: relative;. That is need for my line highlighting code.
Thanks, Grae
Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >
<html>
<head>
</head> <body> <div style="overflow:auto; height:350px; border: 1px solid #00ff00"> <table> <tr>
<td> <div style="position:relative;"> <PRE> Test Line Test Line Test Line Test Line Test Line Test Line Test开发者_如何学编程 Line Test Line Test Line Test Line Test Line Test Line Test Line Test Line Test Line Test Line Test Line Test Line Test Line Test Line Test Line Test Line Test Line Test Line </PRE> </div> </td> </tr> </table> </div> </body>You'll want to add overflow: hidden;
to your inline (or CSS) style for the containing element.
I am not sure if the following is a valid solution for you, but it worked for me.
You can add position:relative
to your first div. (The one with the overflow:auto
)
P.S. removing the width="100%"
attribute from the table, or just reducing the width, will remove the horizontal scroll.
精彩评论