PDA

View Full Version : text/div overflow problem?



Xero7
Mar 23rd, 2007, 12:33 AM
Hello everyone I'm new to this place.

Lately I have been running a forum for a friend and have been trying to get the latest threads from his forum on his main page, I have found a pugin (vBexternal) that grabs the info and converts it into table form.

Anyway I have been trying to put that info into a small div but the topic text sometimes overflows when the topic is longwinded which i do not want to happen.

I'm a css newbie and this is some of my first css work and I dont know everything yet. If its a simple mistake please correct my code i would very much appreciate it:

Thanks in advance! :)

http://www.mupepe.com/test.php

and the code:


<style type="text/css">

*
{
text-align: left;
margin: 1px;
padding: 1px;
left: auto;
right: auto;
}

body
{
font-family: arial, helvetica, sans-serif;
font-size: 12px;
background: #e1e1e2;
color: #ffffff;
}

div
{
background-color:#000000;
width:240px;
height:360px;
border:2px solid white;
padding:2px 2px 2px 2px;
}

a
{
color: #7c7c7c;
font-size: 11px;
text-decoration: none;
font-weight: bold;
}

a:hover
{
text-decoration: none;
background-color: purple;
color: #ffffff;
}

b
{
font-size: 12px;
text-align: left;
color: black;
text-decoration: none;
font-weight: italic;
}

h1
{
font-size: 13px;
text-align: center;
color: white;
text-decoration: underline;
font-weight: bold;
}


table
{
border-width: 1px 1px 1px 1px;
border-spacing: 1px;
border-style: dashed dashed dashed dashed;
border-color: black black black black;
border-collapse: separate;
background-color: rgb(250, 240, 230);
}

table th
{
border-width: 1px 1px 1px 1px;
padding: 1px 1px 1px 1px;
border-style: hidden hidden hidden hidden;
border-color: gray gray gray gray;
background-color: rgb(255, 250, 250);
-moz-border-radius: 0px 0px 0px 0px;
}

table td
{
font-size: 11px;
color: #9000A1;
border-width: 1px 1px 1px 1px;
padding: 1px 1px 1px 1px;
border-style: hidden hidden hidden hidden;
border-color: gray gray gray gray;
background-color: rgb(255, 250, 250);
-moz-border-radius: 0px 0px 0px 0px;
}

</style>

<html><head><title>testing</title></head><body>

<div>
<h1> Newest threads on the forum:</h1>
<fieldset>
<legend>Thread: <a href='(URL address blocked: See forum rules)=255'>So i made a profile on Match.com and Eharmony.com</a></legend>
<table cellpadding='0' cellspacing='0' border='0'>
<tr>
<td width='1%' style='white-space:nowrap'><b>Thread Starter:</b></td>

<td width='1%' style='white-space:nowrap'><a href='(URL address blocked: See forum rules)=38'>*G*</a></td>
</tr>
<tr>
<td width='1%' style='white-space:nowrap'><b>Replies:</b></td>
<td width='1%' style='white-space:nowrap'>4</td>
</tr>
<tr>
<td width='1%' style='white-space:nowrap'><b>Views:</b></td>
<td width='1%' style='white-space:nowrap'>18</td>
</tr>
<tr>
<td width='1%' style='white-space:nowrap'><b>Last Post:</b></td>

<td width='1%' style='white-space:nowrap'><a href='(URL address blocked: See forum rules)=lastposter&t=255'>*G*</a> <a href='(URL address blocked: See forum rules)=255&goto=lastpost' title='Go To Last Post'></a></td>
</tr>
</table>
</fieldset><fieldset>
<legend>Thread: <a href='(URL address blocked: See forum rules)=252'>Favorite fast food? An no hippie bull****!</a></legend>
<table cellpadding='0' cellspacing='0' border='0'>
<tr>
<td width='1%' style='white-space:nowrap'><b>Thread Starter:</b></td>
<td width='1%' style='white-space:nowrap'><a href='(URL address blocked: See forum rules)=1'>Mupepe</a></td>
</tr>

<tr>
<td width='1%' style='white-space:nowrap'><b>Replies:</b></td>
<td width='1%' style='white-space:nowrap'>11</td>
</tr>
<tr>
<td width='1%' style='white-space:nowrap'><b>Views:</b></td>
<td width='1%' style='white-space:nowrap'>33</td>
</tr>
<tr>
<td width='1%' style='white-space:nowrap'><b>Last Post:</b></td>
<td width='1%' style='white-space:nowrap'><a href='(URL address blocked: See forum rules)=lastposter&t=252'>Aries</a> <a href='(URL address blocked: See forum rules)=252&goto=lastpost' title='Go To Last Post'></a></td>

</tr>
</table>
</fieldset><fieldset>
<legend>Thread: <a href='(URL address blocked: See forum rules)=251'>Welcome to our Newest Member - Vydar</a></legend>
<table cellpadding='0' cellspacing='0' border='0'>
<tr>
<td width='1%' style='white-space:nowrap'><b>Thread Starter:</b></td>
<td width='1%' style='white-space:nowrap'><a href='(URL address blocked: See forum rules)=37'>Forgotten Ancient</a></td>
</tr>
<tr>
<td width='1%' style='white-space:nowrap'><b>Replies:</b></td>
<td width='1%' style='white-space:nowrap'>5</td>

</tr>
<tr>
<td width='1%' style='white-space:nowrap'><b>Views:</b></td>
<td width='1%' style='white-space:nowrap'>20</td>
</tr>
<tr>
<td width='1%' style='white-space:nowrap'><b>Last Post:</b></td>
<td width='1%' style='white-space:nowrap'><a href='(URL address blocked: See forum rules)=lastposter&t=251'>Mupepe</a> <a href='(URL address blocked: See forum rules)=251&goto=lastpost' title='Go To Last Post'></a></td>
</tr>
</table>
</fieldset></div>

</body></html>

koyama
Mar 23rd, 2007, 04:27 AM
You have this:


div
{
background-color:#000000;
width:240px;
height:360px;
border:2px solid white;
padding:2px 2px 2px 2px;
}

Your table is wider than 240px. So it will stick out of the div. Only IE6- will expand the div due to a bug (http://www.positioniseverything.net/explorer/expandingboxbug.html).

Instead of wrapping the tables in a div, your best bet may be to wrap the tables in another table. That way you would get the shrinking behavior you are looking for.

I wouldn't use the fieldset and legend elements either for this purpose. They were intended for grouping form controls elements. Instead I would try to adjust the design and come up with something that still looks nice without using these elements.

Xero7
Mar 23rd, 2007, 09:58 PM
first thanks for helping :)

anyway I have adjusted the table to give it a set width (260px) and the div 270px, because none of the content in the table should ever get bigger then that. anyway I still have the problem with the link to the thread going over the div

:(

koyama
Mar 23rd, 2007, 10:10 PM
anyway I have adjusted the table to give it a set width (260px) and the div 270px, because none of the content in the table should ever get bigger then that. anyway I still have the problem with the link to the thread going over the div :(
270px for the div is way too little. I figure that you are viewing the page in Internet Explorer 6. Take a look at the page in Firefox and you'll see what I mean. The thread link is sticking out of the div.

Xero7
Mar 23rd, 2007, 10:21 PM
im using firefox 1.5

I see the div is much bigger then the table, far as I know the text "thread: (title of thread)" is not in the <table> tags.


fieldset>
<legend>Thread: <a href='http://www.mupepe.com/forum/showthread.php?t=267'>Monica Belluci?</a></legend>

<table cellpadding='0' cellspacing='0' border='0' width='260px'>
<tr>

?

Xero7
Mar 23rd, 2007, 10:45 PM
ok maybe my reading comprehension is lacking, lol.

anyway the links dont fit in the div yeah, Im looking for a way to wrap them so they do fit instead of going out of/having to resize the div.

koyama
Mar 23rd, 2007, 11:00 PM
Alright, I see now that your thread link was in the legend and not in the table.

Still, it is your use of fieldsets and legends that are complicating things. They cannot even be fully tamed when it comes to styling. Can't you just drop them and put the thread link in the table?

Xero7
Mar 23rd, 2007, 11:06 PM
Yeah it was just the html in the script that call for the fourm info I figured it wouldnt work without it.

Anyway I got rid of the fieldset/legend and the link wraps like I wanted it to.

Thank you very much for your help, sorry for my lack of knowledge/comprehension.