Databases
StackOverflow2013
Postsdbo
POAnchor tag around fluid image in Internet Explorer 8
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAnchor tag around fluid image in Internet Explorer 8
    primarykey
    data
    text
    <p>I'm having some trouble with a fluid layout (with images using max-width:100%) in Internet Explorer 8. The problem comes when I want to wrap an anchor tag around a flexible-width image and margins, padding, and borders get involved. This is a little harder than you'd think.</p> <p>So the HTML is roughly this:</p> <pre><code>&lt;div&gt; &lt;a class="image-wrap" href="#"&gt; &lt;img alt="something" src="/path_to_image.jpg"&gt; &lt;/a&gt; &lt;/div&gt; </code></pre> <p>And the styling:</p> <pre><code>img { max-width: 100%; display: block; } .image-wrap { padding: 5px; border: 1px solid black; display: block; } </code></pre> <p>So what I have is a fluid image, surrounded by an anchor with a padding and border.</p> <p>The above is good unless <em>the image is smaller than the container</em>. In that case, the anchor's padding and border expand beyond the image (filling the full width of the container).</p> <p>So let's try something to force the anchor to fit its content:</p> <pre><code>.image-wrap { padding: 5px; border: 1px solid black; display: inline-block; } </code></pre> <p>OK, now the anchor box doesn't grow larger than the image, but the anchor tag is back to being not flexible in Firefox, Opera, and IE8+. But it does trigger layout in IE7 so that's taken care of. Next up:</p> <pre><code>.image-wrap { padding: 5px; border: 1px solid black; display: inline-block; max-width: 100%; } </code></pre> <p>Now the anchor is flexible again, but it's 12px <em>larger</em> than the container when the image starts scaling down. The anchor is calculating the width based on the image, then adding the border and padding. For some reason, Chrome and Safari don't do this. Anyway, alternate box model to the rescue: </p> <pre><code>.image-wrap { padding: 5px; border: 1px solid black; display: inline-block; max-width: 100%; -moz-box-sizing: border-box; box-sizing: border-box; } </code></pre> <p>Now it's working as expected in Firefox, Chrome, Safari, Opera, IE7, IE9, but not IE8 for some reason. There, the anchor still extends outside the container. I'm a little stumped as to what to do, as <code>box-sizing: border-box</code> is supposed to be supported in IE8.</p> <p>I've got a JSFiddle page that isolates the issue <a href="http://jsfiddle.net/3gkXU/22/" rel="nofollow">http://jsfiddle.net/3gkXU/22/</a></p> <p>As a last resort I could use JavaScript to detect if the anchor is bigger than its parent element, and then switch it to <code>display: block</code> on the assumption that people are unlikely to resize their browser. I'm not against that, but is there a CSS solution here?</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USunexplainedBacn
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POAnchor tag around fluid image in Internet Explorer 8
      1. USAmit Erandole
      1. VTFavorite
    2. VO
      singulars
      1. POAnchor tag around fluid image in Internet Explorer 8
      1. USunexplainedBacn
      1. VTBountyStart
    3. VO
      singulars
      1. POAnchor tag around fluid image in Internet Explorer 8
      1. This table or related slice is empty.
      1. VTUpMod
    1. COI am facing the same issue. No solutions for this yet?
      singulars
      1. POAnchor tag around fluid image in Internet Explorer 8
      1. USAmit Erandole
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload