All geek questions in one place

HTML / CSS text alignment table not working in IE

Again, Internet Explorer does not get easy on me. I have a table with two cells in one row. I want to display text aligned left (first cell) and the other right (second cell). This works fully in Chrome and Firefox, but in IE all the text looks left justified:

<table width="660px"> <tr> <td align="left" width="160px">Text 1</td> <td align="right" width="160px">Text 2</td> </tr>

After some research, I wondered if I should put it in CSS, so I changed it to:

HTML:

 <table class="anchors" width="660px"> <tr> <td class="left" width="160px">Text 1</td> <td class="right" width="160px">Text 2</td> </tr>

CSS

 table.anchors td.left { text-align: left; } table.anchors td.right { text-align: right; }

It still does not work in IE (at least version 9). Does anyone have a hint of this? Should I use something else (div, e.g.?)?

+6
source share
4 answers

The code is syntactically distorted ( width attributes accept numerical or percentage values, not units of px ), although this is pardoned by browsers. More seriously, you set conflicting requirements: the table should be 660 pixels wide, but consists of two cells 160 pixels wide. Not surprisingly, browser behavior is incompatible.

However, IE 8 and IE 9 behave like other browsers when in "Standard Mode". Otherwise, everything can happen in Quirks mode , and you cannot call it an error because the document does not meet the requirements. So add an adequate doctype declaration.

In addition, conflicting requirements are best avoided. If you need to set the overall width of the table in pixels, let it be. Then either set the width of the columns so that they fold or, more simply, are set, for example. width up to 50% (for a table with two columns, which must be balanced).

+3
source

http://jsfiddle.net/6jvnQ/

Can you change the width of the table so that it is as wide as two cells? I suspect you are getting different results because of weird widths.

+1
source

His mistake

This link can help you.

TEXT SIGNAL ERRORS

0
source

use this:

padding-left: 22% or 22px or any length

0
source

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

More articles:


All Articles