Cant stop the overflow

ryanh_106 · March 25, 2008

Ok this is getting really annoying, I have changed the template for a site from tables to divs, expecting to be blessed with that warm feeling that my site would be properly coded, but instead im just getting hassled. Here's the problem. the table contained within the content div has some very long data in it (a web address with no spaces). On the old template where the content wrapper was another table cell, the width was fixed and the content was forced to wrap. On the new template, even thought I have fixed the content div width to the right size, the content still forces it to expand to fit instead of being wrapped like before. That proabaly made no sense... heres the screenshots and code. Any help is appreciated! Cheers

Before:

After:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="imagetoolbar" content="no" />
<link rel="stylesheet" type="text/css" href="templates/controlpanel/AJ.css" media="screen" /> 
<title>Control Panel</title>


<script language='javascript' src='CalendarPopup.js'></script>

</head>

<body>
<div id="shade">
<div id="lhshadow"></div>
<div id="page">
	<div id="headerborder">
		<div id="header">
		</div><!--END HEADER-->
	</div><!--END HEADERBORDER-->
	<div id="navigation">	
		<div id="leftnav" class="nav">
			<div id='tabheader'><ul><li><a href='?site_id=38&currenttab=general&screenid=&screentype='><span>General</span></a></li><li><a href='?site_id=38&currenttab=popular&screenid=&screentype='><span>Popular Pages</span></a></li><li><a href='?site_id=38&currenttab=google&screenid=&screentype='><span>Google</span></a></li><li><a href='?site_id=38&currenttab=users&screenid=&screentype='><span>Users</span></a></li><li><a href='?site_id=38&currenttab=downloads&screenid=&screentype='><span>File Downloads</span></a></li><li id='current'><a href='?site_id=38&currenttab=advanced&screenid=&screentype='><span>Advanced</span></a></li></ul></div> 
		</div>
		<div id="rightnav" class="nav"><ul><li>
			<a href="controlpanel.php?site_id=38" class="parent"><span>Control Panel</span></a>
		</li></ul></div>
	</div><!--END NAVIGATION-->
	<div id="content">
		<div id="cppagetitle">Statistics</div><br /><br />
		The most recent 100 screen views.<br /><br /><TABLE><TR><TD>Screen Type</TD><TD>Screen ID</TD><TD>User ID</TD><TD>Session ID</TD><TD>Date/Time</TD><TD>Referer</TD></TR><TR><TD>folder</TD><TD>558</TD><TD>0</TD><TD>74c5e9ad0bce6a1ccafd529c90d122b7</TD><TD>2008-03-17 13:00:14</TD><TD><A TARGET='_blank' HREF='http://local/live/showscreen.php?site_id=38&screentype=folder&screenid=557'>http://local/live/showscreen.php?site_id=38&screentype=folder&screenid=557</A></TD></TR><TR><TD>folder</TD><TD>557</TD><TD>0</TD><TD>74c5e9ad0bce6a1ccafd529c90d122b7</TD><TD>2008-03-17 13:00:12</TD><TD><A TARGET='_blank' HREF='http://local/live/showscreen.php?site_id=38&screentype=folder&screenid=675'>http://local/live/showscreen.php?site_id=38&screentype=folder&screenid=675</A></TD></TR><TR><TD>folder</TD><TD>675</TD><TD>0</TD><TD>74c5e9ad0bce6a1ccafd529c90d122b7</TD><TD>2008-03-17 13:00:12</TD><TD><A TARGET='_blank' HREF='http://local/live/showscreen.php?site_id=38&screentype=folder&screenid=675'>http://local/live/showscreen.php?site_id=38&screentype=folder&screenid=675</A></TD></TR><TR><TD>folder</TD><TD>675</TD><TD>0</TD><TD>74c5e9ad0bce6a1ccafd529c90d122b7</TD><TD>2008-03-17 13:00:08</TD><TD><A TARGET='_blank' HREF=''></A></TD></TR><TR><TD>folder</TD><TD>675</TD><TD>1</TD><TD>d52739652ddb0a0c5ef963a606bea7d8</TD><TD>2008-03-17 11:08:09</TD><TD><A TARGET='_blank' HREF='http://local/live/showscreen.php?site_id=38&screentype=site&screenid=38'>http://local/live/showscreen.php?site_id=38&screentype=site&screenid=38</A></TD></TR><TR><TD>site</TD><TD>38</TD><TD>1</TD><TD>d52739652ddb0a0c5ef963a606bea7d8</TD><TD>2008-03-17 11:07:06</TD><TD><A TARGET='_blank' HREF='http://local/live/controlpanel.php'>http://local/live/controlpanel.php</A></TD></TR><TR><TD>site</TD><TD>38</TD><TD>1</TD><TD>936b0b7fc0bfa077144a542c8076dced</TD><TD>2008-03-12 10:24:48</TD><TD><A TARGET='_blank' HREF='http://local/live/cplistsites.php'>http://local/live/cplistsites.php</A></TD></TR><TR><TD>site</TD><TD>38</TD><TD>1</TD><TD>936b0b7fc0bfa077144a542c8076dced</TD><TD>2008-03-12 10:22:29</TD><TD><A TARGET='_blank' HREF='http://us.f579.mail.yahoo.com/ym/ShowLetter?MsgId=8158_14686380_12910_1766_298158_0_2014_505766_1822104928&Idx=1&YY=92598&y5beta=yes&y5beta=yes&inc=25&order=down&sort=date&pos=0&view=a&head=b&box=Inbox'>http://us.f579.mail.yahoo.com/ym/ShowLetter?MsgId=8158_14686380_12910_1766_298158_0_2014_505766_1822104928&Idx=1&YY=92598&y5beta=yes&y5beta=yes&inc=25&order=down&sort=date&pos=0&view=a&head=b&box=Inbox</A></TD></TR><TABLE>


		<br /><br />
		<a href="controlpanel.php?site_id=38" class="biglink">Return to Control Panel</a>
	</div><!--END CONTENT-->
</div><!--END PAGE-->
<div id="rhshadow"></div>
<div class="clear"></div>
<div id="footer">
	<span id="footerlinks"><a href="cplogin.php?logout=true">Logout</a></span>
	<span id="footertext">© 2008, All Rights Reserved</span>
</div><!--END FOOTER-->
</div><!--END SHADE-->

<body>
</html>

CSS:

body { background-color:#ffffff; background-image:url('images/bodybg.gif'); background-position:top; background-repeat:repeat-x; width:100%;position:relative;margin:0px;font-family:"Trebuchet MS",Verdana,Lucida,Arial,sans-serif;font-size: 11px; color:#333333;
}

/* TEMPLATE STYLING */
#shade { background-color:#ffffff; background-image:url('images/shadebg.gif'); background-position:centre; background-repeat:repeat-y; width:900px; height:100%; margin:auto; }

#lhshadow, #rhshadow, #page { display:inline; float:left; }
#lhshadow { background-image:url('images/lhshade.gif'); 
        background-position:centre; 
        background-repeat:no-repeat; 
        width:5px; height:426px; }
#rhshadow { background-image:url('images/rhshade.gif'); 
        background-position:centre; 
        background-repeat:no-repeat; 
        width:5px; height:426px; }

#page { position:relative; width:890px; }

#header { background-image:url('images/header.jpg'); 
        background-position:top; 
        background-repeat:repeat-x; display:block;
        margin:0px; padding:0px; 
        width:100%; height:110px; text-align:right; }
#headerborder { width:890px;
	border-bottom:5px solid #346391; }
#logo { margin-left:20px; float:left; }
#cds { margin-right:0px; }
        
#navigation { position:absolute; top:88px; 
        margin-left:0px; /*text-align:center;*/
        background:none; 
        width:870px; height:19px; }

/*  PROBLEM WITH OVERFLOW ON THIS DIV!! */
#content { background-color:#ffffff;
background-image:url('images/green_watermark.gif'); 
        background-position:top right; 
        background-repeat:no-repeat;
        margin-left:5px; padding:20px;
        width:839px; }

#cppagetitle { background-image:url('images/titlebg.jpg'); 
        background-position:left center; 
        background-repeat:no-repeat;
        height:50px; text-indent:80px;
        font-size:16pt; font-weight:bold;
        line-height:50px; color:#396091; 
        margin-top:15px; }

#footer { background-color:#ffffff; 
        background-image:url('images/footer.gif'); 
        background-position:top; 
        background-repeat:no-repeat; 
        width:100%; height:82px;
        position:relative; }
#footertext { position:absolute; top:62px; left:30px;
        font-family:Verdana,Arial,sans-serif; 
        font-size:8pt; color:#808080; }
#footerlinks { position:absolute; top:28px; left:380px;
        font-family:Verdana,Arial,sans-serif; 
        font-size:8pt; color:#808080; 
        width:495px; text-align:right; }

.clear { clear:both; }


/* MENU STYLING */
#leftnav { float:left; width:auto; }
#rightnav { float:right; width:140px; }
.nav ul { margin:0px; padding:0px 0px 0px 6px; list-style:none; line-height:1; }
.nav li { display:inline; margin:0px; padding:0px; }
.nav a { background:url("images/menu_left_combined.gif") no-repeat left top;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-weight:bold; font-size:11px; 
float:left; text-decoration:none;
color:#396091; line-height:23px;
margin:0px; padding:0px; }
.nav a span { background:url("images/menu_right_combined.gif") no-repeat right top;
padding:0px 15px 0px 15px;
display:block; float:left;
color:#396091; }
/* Commented Backslash Hack hides rule from IE5-Mac \*/
.nav a span { float:none; }
/* End IE5-Mac hack */
.nav a:hover span { color:#ffffff; }
.nav a:hover { background-position:0% -23px; text-decoration:none; }
.nav a:hover span { background-position:100% -23px; }

/* CONTENT STYLES */
a:link, a:visited, a:hover, a:active { color:#396091; }
a:link, a:visited, a:active { text-decoration:none; }
a:hover { text-decoration:underline; }
.biglink { font-size:12pt; }
acronym{ border-bottom:1px dotted #666666; cursor:help; }

h1, h2, h3 { padding:0px; color:#396091; }
h1 { font-size: 18px;	
line-height: 13px;
margin: 0px 0px 0px 10px; }
h2 { font-size: 18px;	
line-height: 13px;
margin: 0px 10px 0px 0px;
text-align:right; }
h3 { font-size: 14px;	
line-height: 14px;
margin: 10px 0px 3px 0px;
text-align:left; }


input, select { font-size: 10px; }
.rowalternate { background-color: #DDDDDD; }

sKunKbad · March 25, 2008

I added this:

style="display:block; width:300px; overflow:hidden;"

to the td where the longest hyperlink resides, and it worked for me in FF2. 300px is just an example. You'd be better off giving each td a class, so that you can apply the style in an internal or external style sheet.

ryanh_106 · March 25, 2008

Thanks sKunKbad, the main problem I have is the content HTML is auto generated by the system, ideally it would be much easier if I could resolve this by only modifying the CSS or template HTML (not the table itself).

Forgive me as I havent had a chance to try this yet but doesnt overflow:hidden just clip of any content outside the area as opposed to wrapping it? I dont want any content to be removed from the page.

Many Thanks

haku · March 26, 2008

That's correct.

Use:

overflow:auto;

ryanh_106 · March 26, 2008

but this would add a scrollbar.... I want it to force the content to wrap like it used to!

I have had to do this using code for now:

wordwrap($long_link, 60, "<br />", true)

Where 60 is the character limit, <br /> is the character used to split and true makes it force word wrap even if a space is not available.

If anyone has any more suggestions as to how to do this with the template, I would still be greatful!

Cheers

Sign In

Cant stop the overflow

Recommended Posts

ryanh_106

Link to comment

Share on other sites

sKunKbad

Link to comment

Share on other sites

ryanh_106

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

ryanh_106

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information