使用data-tooltip元素格式化CSS

Question

I'm still learning, please go gentle with me.

When I run my script everything works except the full formatting with my css. In the snipped of code, I would like the . However, when I have the div in the middle of the , as seen below, when I run the page I have two lines of information. Line one contains the flag image, line two contains my outputted "luchthavencode", underlined as desired.

How would I format the css / php/html code so that they all are contained within one line.

If I move the to before the img, everything is in a line as desired -- it's OK that when you hover over the flag the name comes up, also), it also generates two lines.

 echo "<td width='100px' bgcolor='#C6DEFF'><img src='http://globe-trekking.com/vg/img/flags/".$row['countryflag']."'>&nbsp;&nbsp;<div class='top10_luchthaven' data-tooltip=\"".htmlspecialchars($row['luchthavennaam'])."\" >".$row['luchthavencode']."</div></td>";   

Using the following css styles

 .top10_luchthaven {
  position: relative;
  border-bottom: .1em dotted; 
  width:30px;

}

.top10_luchthaven:hover:after {
    background: url(http://globe-trekking.com/vg/img/hovercard-bg.png) repeat-x;
    border-radius: 5px;
    bottom: 5px;
    color: #fff;
    content: attr(data-tooltip);
    left: 20%;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: 400px;
}

.top10_luchthaven:hover:before {
    border: solid;
    border-color: #333 transparent;
    border-width: 6px 6px 0 6px;
    bottom: 20px;
    content: "";
    left: 50%;
    position: absolute;
    z-index: 99;

with the full table php/html code:

echo "<table width='200px' border='0' cellpadding='2' cellspacing='2'>";
echo "<tbody>";
echo "<tr>";
echo "<td bgcolor='#0033FF'><strong class='home_box_header'>#</strong>";
echo "<td bgcolor='#0033FF'><strong class='home_box_header'>Luchthaven</strong>";
echo "<td bgcolor='#0033FF'><strong class='home_box_header'>No.</strong>";
echo "</tr>";

$line = 1;

while($row = mysqli_fetch_assoc($result)) {

    echo "<tr>";
    echo "<td bgcolor='#C6DEFF'>$line</td>";
    echo "<td width='100px' bgcolor='#C6DEFF'><img src='http://globe-trekking.com/vg/img/flags/".$row['countryflag']."'>&nbsp;&nbsp;<div class='top10_luchthaven' data-tooltip=\"".htmlspecialchars($row['luchthavennaam'])."\" >".$row['luchthavencode']."</div></td>";
    echo "<td width='60px' bgcolor='#C6DEFF'>".$row['sum']."</td>";
    echo "</tr>";

    $line++;
}

echo "</tbody>";
echo "</table>";    

Answer 1

The problem is that divs are block level elements by default, which means they line break, so you need to have CSS that instructs those divs to be inline with the image next to it. Try doing this...

.top10_luchthaven {
    display: inline;
}

If that doesn't work, then do display: inline-block instead.