CSS Forum

**CannonBallGuy** · 02-23-2006, 11:08 PM

Hey all...
At: http://www.kaziaz.com/brad2.php
You can see a list of IP address / URLs with a description for each.
I want each address + description to take up only one line so that all rows in the table are fixed height.
I want to be able to see the whole server name, but I do not mind if the end of, or most of (if the server name is long) the description is cut off with overflow:hidden or whatever.

I have made all the td widths to auto and various other things. I can't seem to get it right.

Any help is greatly appreciated.

- CBG

**vangogh** · 02-24-2006, 01:33 AM

Hey CBG. To begin I think you need to remove the duplicate <head> section for your code.

As for the keeping everything on one line why not just make div.list wider. You have it set for 551 px now. If you make it wide enough then the table will be wider and everything will fit on one line.

**CannonBallGuy** · 02-24-2006, 02:05 PM

Thanks, but there are two <head>s because I am "including" the data in the div, from a separate file.
And, the div must stay at 551px, I believe.

Any other suggestions..?

**funkdaddu** · 02-24-2006, 03:41 PM

Try not using TDs, I believe the content can't be hidden with overflow: hidden. Tyr using div/spans floated left.

And there shouldn't be 2 head tags.... only 1 per HTML document. DIVs are just part of a document.

**funkdaddu** · 04:03 PM

You're not using overflow:hidden right, try this:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
		<title>Untitled Page</title>
		<style type="text/css" media="screen"><!--
.container {
	width: 531px;
	overflow: hidden
	}

td {
	white-space: nowrap;
	font-family:Tahoma;
	padding:1px
	}

--></style>
	</head>

	<body bgcolor="#ffffff">
	<div class="container">
		<table border="0" cellspacing="2" cellpadding="0">
<tr><td class="bg"><a target="_top" href="../bzflag.php?server=pieinthesky.bettagirl.com:5000">pieinthesky.bettagirl.com:5000</a></td><td class="bg2">pieinthesky: 50 player Hosted in NYC  </td></tr>
<tr><td class="bg"><a target="_top" href="../bzflag.php?server=pieinthesky.kicks-***.org:6700">pieinthesky.kicks-***.org:6700</a></td><td class="bg2">pieinthesky: 50 player 10 shot; Served in NYC!  </td></tr>
<tr><td class="bg"><a target="_top" href="../bzflag.php?server=playground.gamesunited.de:5159">playground.gamesunited.de:5159</a></td><td class="bg2">www.gamesunited.de - private match server  </td></tr>
<tr><td class="bg"><a target="_top" href="../bzflag.php?server=roxport.game-host.org:5154">roxport.game-host.org:5154</a></td><td class="bg2">CTF: RedvGreen, NoFlags, NoRico, 15 min matches  </td></tr>
<tr><td class="bg"><a target="_top" href="../bzflag.php?server=server.bzflag.at:5155">server.bzflag.at:5155</a></td><td class="bg2">P A C M A N by www.bzflag.at  </td></tr>
<tr><td class="bg"><a target="_top" href="../bzflag.php?server=server.bzflag.at:5165">server.bzflag.at:5165</a></td><td class="bg2">R O U N D by www.bzflag.at  </td></tr>
<tr><td class="bg"><a target="_top" href="../bzflag.php?server=shellshock.bzflag.bz:4501">shellshock.bzflag.bz:4501</a></td><td class="bg2">Shell Shock running HOP HOP by Dutchrai  </td></tr>
<tr><td class="bg"><a target="_top" href="../bzflag.php?server=shellshock.bzflag.bz:4502">shellshock.bzflag.bz:4502</a></td><td class="bg2">Shell Shock running THE ABYSS by Dutchrai  </td></tr>
<tr><td class="bg"><a target="_top" href="../bzflag.php?server=silvercat.bzflag.bz:3171">silvercat.bzflag.bz:3171</a></td><td class="bg2">SilverCat Rotation - Overlord  </td></tr>
<tr><td class="bg"><a target="_top" href="../bzflag.php?server=silvercat.bzflag.bz:3172">silvercat.bzflag.bz:3172</a></td><td class="bg2">SilverCat Pillbox and only pillbox  </td></tr>
<tr><td class="bg"><a target="_top" href="../bzflag.php?server=silvercat.bzflag.org:5154">silvercat.bzflag.org:5154</a></td><td class="bg2">SilverCat Rotation - Babel  </td></tr>
<tr><td class="bg"><a target="_top" href="../bzflag.php?server=sinon.homelinux.org">sinon.homelinux.org</a></td><td class="bg2">3 vs 3 variant of Ducati CTF, by Metal Magic The Ace Of Aces  </td></tr>
<tr><td class="bg"><a target="_top" href="../bzflag.php?server=spldart.bakadigital.com:5152">spldart.bakadigital.com:5152</a></td><td class="bg2">Spldart's place. Decks FFA Server Ver1.10.9  </td></tr>
<tr><td class="bg"><a target="_top" href="../bzflag.php?server=spldart.bakadigital.com:5154">spldart.bakadigital.com:5154</a></td><td class="bg2">Spldart's place. LegoLand map by LouMan. R.C. Server Ver2.0.5  </td></tr>
<tr><td class="bg"><a target="_top" href="../bzflag.php?server=spldart.bakadigital.com:5155">spldart.bakadigital.com:5155</a></td><td class="bg2">Spldart's place. LegoLand map by LouMan. R.C. Server Ver2.1.6  </td></tr>
<tr><td class="bg"><a target="_top" href="../bzflag.php?server=tankwar.gamesunited.de:5158">tankwar.gamesunited.de:5158</a></td><td class="bg2">www.gamesunited.de - no Flags/100M [2.0.3]  </td></tr>
		</table>
	</div>
	</body>

</html>

**CannonBallGuy** · 02-24-2006, 04:45 PM

Quote:

Originally Posted by funkdaddu

Try not using TDs, I believe the content can't be hidden with overflow: hidden. Tyr using div/spans floated left.

I need to do it with tds. I would not be asking how to do it with tds if I could do it with divs.

Quote:

Originally Posted by funkdaddu

And there shouldn't be 2 head tags.... only 1 per HTML document. DIVs are just part of a document.

Thanks for pointing this out, again!
I know there are 2 head tags, and I have explained why...

Quote:

Originally Posted by funkdaddu

You're not using overflow:hidden right, try this:

HTML Code:

<snip>

Great... Now how do I scroll down?

- CBG

**funkdaddu** · 06:01 PM

AFAIK, you can only have overflow on or off. Some browsers support overflow-x and overflow-y, but I don't think all of them do. Why not use an iFrame and target the included file, then you don't have the double header thing either, and you can set the height/width.

You may just need to reformat your data, it doesn't fit in the area you have. Why not doL

<td>
IPaddress<br>
<i>Description</i>
</td>

?

**CannonBallGuy** · 02-24-2006, 07:10 PM

I can't reformat the data at all and I am specifically trying to NOT use an iframe.

**vangogh** · 08:10 PM

I tried a few things using overflow-x:hidden and overflow-y:scroll instead of just the oveflow property, but it I couldn't get it working. Maybe some combination of them will work or maybe I was putting it on the wrong element.

I think the problem though is that the text will automatically wrap in the table cells unless non-breaking spaces are used instead of regular spaces. I think the text will always wrap first before the overflow unless the non-breaking spaces are there and that may just automatically extend the width of the table. I'm guessing you don't have control of the spaces anyway.

I did play around with the width of div.list and at 805px it worked just like you wanted. Is there a reason it has to stay at 551px?

If I can think of anything else I'll check back in and try it.

**CannonBallGuy** · 02-24-2006, 08:13 PM

The div needs to stay at 551px. It has to fit in a smallish part of a webpage.
I can't edit the actual data or any of the change font sizes, the size of the div, etc.
I can only change things like "overflow" in the CSS. I'm starting to think it's not possible.

**vangogh** · 02-24-2006, 09:09 PM

I may have found something that will work. If you add white-space:nowrap to td.bg2 then the text all stays on one line in the table cell. the only problem is you get a horizontal scrollbar. If you can live with the scrollbar though that might be your solution.