All geek questions in one place

Div moves in IE

I have a table with two columns. In the left column there is content and a widget div, which is the only floating element. This div continues to move at the bottom of the page using the right column of the table when the page loads. Sometimes he comes back, when I was pointing something, he seems completely random.

Looks like IE peek-a-boo error, but not really. I tried position: relative; but it does not work. Any ideas?

Here's the html:

 <table class="formTable"> <tr> <td class="content_main"> <h1>header</h1> <table> <tr> <td>Content here</td> <td>Content here</td> </tr> </table> <div style="float: left; clear: none; display: block; color: rgb(68, 68, 68); font-weight: normal; font-family: &quot;Trebuchet MS&quot;,&quot;Verdana&quot;,sans-serif; font-size: 14px; line-height: 18px; text-decoration: none; text-align: left; margin: 0px; padding: 10px; height: auto; width: auto; background-image: none; background-color: white; border: 10px solid rgb(204, 204, 204); overflow: auto;" id="widget"> Content </div> </td> <td class="content_right"> <ul> <li>List</li> <li>List</li> </ul> </td> </tr> </table>

And here is the css for the table:

 .content_right { padding-left: 20px; padding-top: 15px; width: 393px; } .content_main { padding-top: 15px; width: 500px; }
+6
source share
2 answers

I work great. If you know how to use divs, avoid tables.

+1
source 
  <h1>header</h1> <article>Content here</article> <article>Content here</article> <div id="widget"> Content </div> <ul> <li>List</li> <li>List</li> </ul>

Try using this HTML code and use the CSS stylesheet instead of the built-in blob. Standards are made for a reason. By now, all the latest browsers support them, eliminating the need for crappy markup and the “errors” it causes. See http://www.abookapart.com/ for reading materials.

0
source

Source: https://habr.com/ru/post/905698/

More articles:


All Articles