Forum Moderators: not2easy
As you can see, while logged into the site, the text flows outside the memberbar. I've tampered with this pos forever, and can't seem to find the problem.
I appreciate your help.
Take care,
Josiah
[Mod note see post #3]
[edited by: SuzyUK at 2:55 pm (utc) on Oct. 26, 2004]
[edit reason] sorry no URLs : see TOS #13 [webmasterworld.com] [/edit]
the text flows outside the memberbar.
Once we have those details, I'm sure we can help you out.
cEM
[edited by: createErrorMsg at 2:10 am (utc) on Oct. 26, 2004]
<table width="100%">
<tr>
<td height="23">
<font face="Verdana, Arial, Helvetica, sans-serif">
<div style="width: 100%; text-align: left; color:#CCC; padding: 5px; font-family: Verdana; font-size: 10px;"> Logged in as <b>Josiah</b> ( <a href="#">Log Out</a><b> • <a href="#">Admin CP</a> • <a href="#">Mod CP</a></b> )
</div>
</td><td>
<div style="width: 100%; text-align: right; color:#CCC; padding: 5px; font-family: Verdana; font-size: 10px;"><b><a href="#">Control Panel</a></b> • <a href="#">0 New Messages</a> • <a href="#">Show New Posts</a>
</div>
</font>
</td>
</tr>
</table>
I hope this helps, if not I will be back soon enough, I am in a rush but will help you understand better if needed, sorry for the inconvenience on your part, but any possible solutions would help greatly.
[edited by: SuzyUK at 3:01 pm (utc) on Oct. 26, 2004]
[edit reason] examplified code [/edit]
The problem you are experiencing has to do with the way browsers build boxes (called the box model).
The width of the <div> inside of your <td> is set to 100%. Compliant browsers then ADD the 5px padding onto the left and right sides, making the total width of that <div> 100% + 10px. You can see, then, that it is too wide for the width of the cell, and so some of it disappears over the edge.
If you were to load your code, as is, into IE 5.x, you would find that it displays fine (because earlier IE browsers have a broken box model). IE6, on the other hand, will display with the text disappearing IF you have a valid doctype.
There are several things you could do to fix this. One is to lose the padding, but this shrinks the cell right up agaisnt the text: not good. Another would be to define the width of the <div> differently.
The best is to remove the width setting altogether. Since <div>s are block level, it will automatically fill the cell and the padding won't affect the box model. I tested this and it looks just as you seem to want it, with the benefit that all the text remains inside the table cell.
Good luck,
cEM
