Ie CSS Bug: Table Border Showing Div with Visibility: Hidden, Position: Absolute

IE CSS bug: table border showing div with visibility: hidden, position: absolute

The solution I found consists in adding a top/left to move the rendering off-screen, which shields us against IE bugs of this sort. In the above example, this means that you would define the CSS for the hide class as:

.hide {
    visibility: hidden;
    position: absolute;
    top: -10000px;
    left: -10000px;
}

More on: Workaround for table borders showing through on IE

hover on overflow-hidden and border-radius bug

I think this has to do with the relative positioning. If you drop the relative positioning on .innerw2, and use margin-left instead, this no longer occurs.

border-bottom is not showing for absolute columns

Try by adding border-collapse: collapse; this might solve the problem.

table{
border-collapse: collapse;
}

Borders not shown in Firefox with border-collapse on table, position: relative on tbody, or background-color on cell

This looks like a Firefox bug to me. The backgrounds are painting over the borders; you can see it if you use a translucent background color.

I filed https://bugzilla.mozilla.org/show_bug.cgi?id=688556

Menu hyperlink in table not working in chrome and Firefox

Replace the display and use the visibility css property.
Start with the .dropdown_01-content as hidden, then with the focus make it visible, then add a hover state of visible so that the links are clicked. I put a yellow background to make sure the hover state works on the hidden div.

partners_01 {  border: 1px solid #000;  padding: 12px 40px;  border-radius: 2px;  font-weight: 400;  cursor: pointer;}
.partners_01:hover {  background: #000;  color: #fff;  border-radius: 2px;}
.dropdown_01 {  position: relative;  display: inline-block;}
.dropdown_01-content {  visibility: hidden;  position: absolute;  background-color: #f9f9f9;  min-width: 160px;  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);}
.dropdown_01-content a {  color: black;  padding: 5px 16px;  text-decoration: none;  display: block;  font-size: 12px;}
.dropdown_01-content a:hover {  background-color: #f1f1f1;  display: block;}
.dropdown_01:focus .dropdown_01-content {  visibility: visible;}
.dropdown_01-content:hover {  visibility: visible;  background: yellow;}
.dropdown_01:hover partners_01. {  background-color: #7e8e31;}
.dropdown_01:focus partners_01 {  background: #000;  color: #fff;  border-radius: 2px;}

<div class="dropdown_01" tabindex="0">
  <a class="partners_01">View Partners</a>  <div class="dropdown_01-content">    <table>      <tbody>        <tr>          <td style="text-align: left; white-space: nowrap;"><strong><a href="https://clients.mndsign.com/smart/bang-olufsen/">Bang & Olufsen</a></strong><a class="noclick_01">--</a><a href="https://architetturasonora.com/">Architectura Sonora</a><a href="https://www.artcoustic.com/">Artcoustic</a></td>          <td style="text-align: left; white-space: nowrap;"><a href="https://www.crestron.com/"><strong>Crestron</strong></a><a class="noclick_01">--</a><a href="https://www.graysound.nl/">Gray Loudspeakers</a><a href="https://www.jamesloudspeaker.com/">James Loudspeakers</a></td>          <td style="text-align: left; white-space: nowrap;"><a href="https://www.meridian-audio.com/"><strong>Meridian</strong></a><a class="noclick_01">--</a><a href="https://www.savant.com/">Savant</a><a href="https://www.screeninnovations.com/">Screen Innovations</a></td>        </tr>      </tbody>    </table>  </div></div>

Table with fixed header on scrolling does not work if it smaller

Create it with just 1 table and make th inside thead position sticky.

<table>
  <thead>
    <tr>
      <th style="background:threedface;position: sticky; top: 0;"></th>
      ...
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      ...
    </tr>
    ...
  </tbody>
</table>

I don't know why you are writing inline styles. Is it an email template?
else please create a separate css file and import it in the html.

---

Related Topics