Member Avatar for MidiMagic

I posted a question about this several months ago, but the search function is so bad that I can't find it again.

I again have an image that is being overlapped by a table below it in Firefox. This happens whenever the following is true:

- The image file is floated right.
- The test it is floated around is shorter vertically than the image is.

The image then sticks down into and overlaps the table.

It does not happen in Internet Explorer.

Here is code that does this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>UFO does not mean ET</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

<style type="text/css">

.cenx {text-align: center;}
.ceni {clear: both;}
.bxfix {margin: 0; border: none; padding: 0;}

.wfl {width: 100%;}
.hi {margin: 24pt 0;}
.fixim {height: 100%; float: right;}

img {padding: 12px;}
body {background-color: #ffeecc; padding: 5%; font-family: sans-serif;}
table {background-color: #ffffff; vertical-align: top; border: solid 1px #000088;}
th {background-color: #eeffe0; vertical-align: top; border: solid 1px #000088; padding: 4px;}
td {background-color: #ffffff; vertical-align: top; border: solid 1px #000088; padding: 0 4px; font-size: smaller;}

</style>
</head>

<body>
<h1 class="cenx">&quot;UFO&quot; does not mean &quot;ET&quot;</h1>
<div class="hi wfl">
 <img src="podium.jpg" alt="podium def" class="fixim" />
 <p>People call many things by the wrong names. Here is a list of objects erroneously given the wrong
 names by people who do not know better, and the correct names for them:</p>
</div>
<div class="hi wfl">
 <table class="wfl" cellspacing="0">
  <tr><th>THE CONFUSED WORD</th><th>WHAT IT REALLY MEANS</th><th>THE ERRONEOUS USE</th><th>THE CORRECT WORD TO USE</th></tr>
<tr><td>Podium</td><td>The box an orator stands on<br />(It elevates him higher.)</td><td>The stand in front of an orator</td><td>Lectern or pulpit</td></tr>
  <tr><td>Theory</td><td>A proposal about how things happen<br />(Not proved.)</td><td>Something that is scientifically proved</td><td>Scientific fact</td></tr>
  <tr><td>Transpire</td><td>To become known<br />(literally: leak out)</td><td>To occur (usually a series of events)</td><td>Happen</td></tr>
 </table>
</div>

</body>
</html>
podium.jpg 4.73 KB
  • 2 Contributors
  • 3 Replies
  • 252 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by kanaku

Recommended Answers

All 3 Replies

Member Avatar for kanaku

I'm not sure if you'll like this, but a display: table-cell; attribute-value in your image's block should do the trick (this also works for backgrounds that won't show because the holding block 'collapses' if it's contents are floated.... I hope I'm making sense. Anyway, here is the whole code, with slight modifications:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>UFO does not mean ET</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

<style type="text/css">

.cenx {text-align: center;}
.ceni {clear: both;}
.bxfix {margin: 0; border: none; padding: 0;}

.wfl {width: 100%;}
.hi {margin: 24pt 0;}
.fixim {height: 100%; float: right;}

img {padding: 12px;}
body {background-color: #ffeecc; padding: 5%; font-family: sans-serif;}
table {background-color: #ffffff; vertical-align: top; border: solid 1px #000088;}
th {background-color: #eeffe0; vertical-align: top; border: solid 1px #000088; padding: 4px;}
td {background-color: #ffffff; vertical-align: top; border: solid 1px #000088; padding: 0 4px; font-size: smaller;}
#uppertext
	{
	display: table-cell;
	}
</style>
</head>

<body>
<h1 class="cenx">&quot;UFO&quot; does not mean &quot;ET&quot;</h1>
<div class="hi wfl" id="uppertext">
 <img src="podium.jpg" alt="podium def" class="fixim" />
 <p>People call many things by the wrong names. Here is a list of objects erroneously given the wrong
 names by people who do not know better, and the correct names for them:</p>
</div>
<div class="hi wfl">
 <table class="wfl" cellspacing="0">
  <tr><th>THE CONFUSED WORD</th><th>WHAT IT REALLY MEANS</th><th>THE ERRONEOUS USE</th><th>THE CORRECT WORD TO USE</th></tr>
<tr><td>Podium</td><td>The box an orator stands on<br />(It elevates him higher.)</td><td>The stand in front of an orator</td><td>Lectern or pulpit</td></tr>
  <tr><td>Theory</td><td>A proposal about how things happen<br />(Not proved.)</td><td>Something that is scientifically proved</td><td>Scientific fact</td></tr>
  <tr><td>Transpire</td><td>To become known<br />(literally: leak out)</td><td>To occur (usually a series of events)</td><td>Happen</td></tr>
 </table>
</div>

</body>
</html>
Member Avatar for MidiMagic

Thanks.

That makes some sense. The only way I could see to do it was to put the entire block in (guess what) an invisible table with one cell. But this should get rid of the page reader error (I hope).

I already uploaded it as I tried it, because I wanted to use it today. But I am going to write this down and implement it later.

I wonder if it works around just the image. I will play with it some more when I get time.

For some reason, Firefox is again not reserving rendering space for the image. The first time, as I remember, the fix was to upgrade to Firefox 3. But they seem to have broken it again.

I just realized that this style could be useful in making divs stay put! You can have a table witiout having a table!!!

Member Avatar for kanaku

This was actually a solution to making divs behave like a table-cell (for those of us who were used to the early-table-like-layouts).

I find them useful for making divs extend all the way down. Because divs with floated elements inside do not display all the way down... so the image floated to the right doesn't really make the 'holding box' display up to the bottom of the image. And the solution is to display it as a table-cell.

There are also table-row and table-column display values available, but they aren't rendered (or they do not affect the display). I think they're just for grouping purposes.

I got this tip from the Sitepoint newsletter by the way. =0

(sorry for the incoherence; got no time to edit)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.