Executive Theme: Two Container – List Element Problem with IE 11

[weborganizing]

Hello,

i try to fix this "Internet Explorer 11 (?)" problem since a while now and i hope someone can help me out. I use the "Executive Theme" on this website and tryed to fix it with an Update to the "Executive Pro" Theme. The theme preview shows the same result. Everthing works very well with Firefox, Chrome, Safari, on Mobile Devices, etc. , but with the "Internet Explorer 11" i got a Problem with li-Elements. I use this code on my site:

<div class="entry-content">
<div class="wp-caption alignleft" style="width: 220px;">
<p class="wp-caption-text"><img class="alignnone wp-image-112 size-full" src="http://www.mysite.de/wp-content/uploads/Mirsterxxxxx.jpg" alt="Miste XXXXXX" width="200" height="200" />Hard Working Man</p>
</div>
<h3>Mister XXXXX</h3>
<ul>
	<li>Element 1</li>
	<li>Element 2</li>
	<li>Element 3</li>
	<li>Element 4</li>
</ul>
</div>

The list elements dots are on the left site only with internet explorer 11. I tried to fix it with using tables instead of the div-containers. It works good for all browsers, but then i loose mobile responsive. I tried to fix it with this code:

<table class=" alignleft" style="width: 100%;" border="0" cellspacing="0" cellpadding="20">
<tbody>
<tr>
<td style="width: 200px; text-align: center; vertical-align: middle; background-color: #ededed;"><img class="aligncenter wp-image-112 size-full" src="http://www.mysite.de/wp-content/uploads/Mirsterxxxxx.jpg" alt="Miste XXXXXX" width="200" height="200" />Hard Working Man</td>
<td style="text-align: left; vertical-align: top;">
<h3>Mister XXXXX</h3>
<ul>
        <li>Element 1</li>
	<li>Element 2</li>
	<li>Element 3</li>
	<li>Element 4</li>
</ul>
</td>
</tr>
</tbody>
</table>

Is it possible to fix this Problem - Can you tell me how, please?

http://www.steuerberater-dumberger.de/das-steuerberater-team/

[Victor Font]

Take a look at CSS display:table classes. They work like tables, but are responsive. As an alternative, you may be able to use the original code but wrap the image and unordered list in Genesis column classes. Every Studio Press theme includes them. http://my.studiopress.com/tutorials/content-column-classes/

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[weborganizing]

Hello Victor,

thank you very much for your advice! Now it works and it looks good so far. I chosed the option with "colum classes". This is my code:

<div class="entry-content">
<div class="wp-caption alignleft" style="padding: 20px 20px 5px 20px;">
<div class="one-half first" style="width: 220px;"><img class="aligncenter wp-image-112 size-full" src="http://www.mysite.de/wp-content/uploads/Mirsterxxxxx.jpg" alt="Miste XXXXXX" width="200" height="200" />Hard Working Man</div>
</div>
<div class="one-half" style="width: 55%;">
<h3>Mister XXXXXXXX</h3>
<ul>
	<li>Element 1</li>
	<li>Element 1</li>
	<li>Element 1</li>
	<li>Element 1</li>
</ul>
</div>
</div>

The fixed width is not the best way, but it works. Thank you again.

[Author]

Posts