Jump to content

Cant stop the overflow

ryanh_106

By ryanh_106
in CSS Help

 Share

Recommended Posts

ryanh_106 Member

ryanh_106

Posted
Posted

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:

nooverflow.jpg

 

After:

overflow.jpg

 

 

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; }

Link to comment
https://forums.phpfreaks.com/topic/97827-cant-stop-the-overflow/
Share on other sites
sKunKbad Advanced Member

sKunKbad

Posted
Posted

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 Member

ryanh_106

Posted
  • Author
Posted

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

ryanh_106 Member

ryanh_106

Posted
  • Author
Posted

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

 

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.