Hanging text

Hello. I have some problem with a hanging text. Site is powered by Joomla, custom template. Long text should be enclosed in fixed height div, but it actually is there and also duplicated on top of a page. Here is sample http://trueenterprisesinc.com/terms-of-use.html. I hope somebody has some idea how to fix this. I'll add here any code that has been used, that you might need. Sorry for my bad english :)

5

Contributors

12

Replies

5 Days

Discussion Span

2 Years Ago

Last Updated

13

Views

Question
Answered

adnank

Newbie Poster

9 posts since Jan 2011

Reputation Points: 10

Solved Threads: 0

Skill Endorsements: 0

2 Years Ago

0

What browser are you testing in? Hanging text does not make sense. Please be more specific.

Regards, Arkinder

Arkinder

Posting Pro in Training

454 posts since Nov 2010

Reputation Points: 113

Solved Threads: 60

Skill Endorsements: 0

2 Years Ago

0

I tested in Chrome, FF and IE. If you take a look at the link I posted, you'll see what I mean. There is text on top of the page that shouldn't be there since it is (and should be) in main content area. Check any other link in left menu, all are good. Just when there is long text that can not fit inside predefined area, that artifact appears.

adnank

Newbie Poster

9 posts since Jan 2011

Reputation Points: 10

Solved Threads: 0

Skill Endorsements: 0

2 Years Ago

0

The text is clearly in the code outside of any tags. Why don't you simply remove it?

Regards, Arkinder

Arkinder

Posting Pro in Training

454 posts since Nov 2010

Reputation Points: 113

Solved Threads: 60

Skill Endorsements: 0

2 Years Ago

0

Text is not duplicated in code, but it is duplicated (in content area in the middle and top, outside of any tags like you say) in browser. I have turned off all JS as I suspected that could cause problems, but nothing. I guess it might have something to do with CSS, but actually I am not CSS master :( I'll put below shortened versions of index.php and template.css that I think might cause this behavior

<!-- index.php -->
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/enterprises/css/template.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/rhuk_milkyway/css/template.css" type="text/css" />

<body id="page_bg" >
<div class="center" align="center">
	<div id="wrapper">
		<div id="top"> </div>
		<?php 
			if(JRequest::getvar('view')=='frontpage'){
		?>
			<div id="middle"> 
				<div id="middle_content">
					<div id="left">
						<jdoc:include type="modules" name="main_menu" />
						<div class="logo">
							<jdoc:include type="modules" name="logo" />
						</div>
					</div>
					<div id="right">
						
					</div>
				</div>
			</div>
		<?php
			}
			else{
		?>
			<div id="middle_inner"> 
				<div id="middle_content">
					<div id="home_link">
						<a class="home_link" href=""><span>Home</span></a>
					</div>
					<div id="left">
						<jdoc:include type="modules" name="main_menu" />
						<div class="logo">
							<jdoc:include type="modules" name="logo" />
						</div>
					</div>
					<div id="right">
						<?php 
							$has_banner = ',2,3,4,5,6,7,8,9,';	
							$item_id = JRequest::getvar('Itemid');
							if(strpos($has_banner,$item_id)){
						?>
							<div id="banner">
								<jdoc:include type="modules" name="banner" />
							</div>
							<div id="content">
								<jdoc:include type="component" />
							</div>
						<?php
							}
							else{
						?>
							<div id="content_nobanner">
								<jdoc:include type="component" />
							</div>
						<?php
							}
						?>
					</div>
				</div>
			</div>
		<?php	
			}
		?>
        <div id="bottom">
			<div id="footer">
				<div id="copy">
					<jdoc:include type="modules" name="copy" />
				</div>
				<div id="footer_menu">
					<jdoc:include type="modules" name="footer" />
				</div>
			</div>
		</div>

    </div>
    <jdoc:include type="modules" name="debug" />
    <div style="clear:both;"></div>
</div>
</body>

<!-- template.css -->
html {
  height: 100%;
  margin-bottom: 1px;
}

form {
  margin: 0;
  padding: 0;
}

body {
	font-family: Helvetica,Arial,sans-serif;
	line-height: 1.3em;
	margin: 0px 0px 0px 0px;
	font-size: 12px;
	color: #333;
}

#leftcolumn {
	padding: 0;
	margin: 0;
	width: 20%;
	float:left;
}

#maincolumn,
#maincolumn_full {
	margin-left: 20%;
	padding-left: 15px;
	width: 75%;
}

#maincolumn_full {
	margin-left: 0;
	padding: 0;
	width: 100%;
}

table.nopad {
	width: 100%;
	border-collapse: collapse;
	padding: 0;
	margin: 0;
	margin-bottom: 15px;
}

table.nopad td.middle_pad {
	width: 20px;
}

*{
	padding:0;
	margin:0;
}

/*****************************************/
/*** Joomla! specific content elements ***/
/*****************************************/

body{
	background-color: #232323;
}

#wrapper{
	margin: 0 auto;
}

#top{
	background-color: #232323;
	height: 54px;
}

#middle{
	background: #474747;
	height: 472px;
}

#middle_inner{
	background: #474747;
	height: 472px;
}

#bottom{
	background-color: #232323;
	height: 128px;
}

#middle_content{
	/*overflow:hidden;*/
	width: 1260px;
	margin: 0 auto;
}

#middle #middle_content{
	background: #474747 url(../images/middle_bg.jpg) no-repeat 160px top;
	overflow:hidden;
	width: 1260px;
	height: 472px;
	margin: 0 auto;
}

#middle_content #content{
	float:left;
	text-align:left;
	height: 472px;
	/*width: 541px;*/
	width: 561px;
	color: #ffffff;
}
#middle_content #content_nobanner{
	float:left;
	text-align:left;
	height: 472px;
	/*width: 541px;*/
	width: 700px;
	color: #ffffff;
}

#middle_content #home_link{
	position:relative;
}

#middle_content #home_link .home_link{
	background: url(../images/home_bg.jpg) no-repeat 0 0;
	padding-left:18px;
	position:absolute;
	top: -25px;
	left: 1050px;
	color: #999999;
	font: normal 11px Arial, Helvetica, sans-serif;
}

#wrapper #left{
	width: 264px;
	float:left;
	margin-left: 150px;
}

#wrapper #right{
	width: 833px;
	float:left;
}

#wrapper #right #banner{
	float:left;
	width: 139px;
	height: 442px;
	margin: 19px 8px 0;
}

#wrapper #left ul.menu{
	background: url(../images/left_menu_bg.jpg) repeat-y left 8px;
	padding-left:14px;
	margin-top:19px;
	float:left;
}

#wrapper #left ul.menu li.item1{
	display:none !important;
}
#left ul.menu li.item1 a{
	display:none !important;
}

#wrapper #left ul.menu li.item2{
	margin:0;
}

#wrapper #left .logo{
	background: url(../images/left_menu_bg.jpg) repeat-y left top;
	padding-left:14px;
	margin-top: 24px;
	float:left;
}

#wrapper #left .logo p{
	margin:0;
}
#wrapper #left ul{
	overflow:hidden;
}
#wrapper #left ul li{
	list-style-type: none;
	height: 26px;
	margin-top: 9px;
	display:block;
	float:left;
}
#wrapper #left ul li a{
	background-color: #191919;
	text-align:left;
	width: 247px;
	height: 26px;
	display:block;
}
#wrapper #left ul li a span{
	font:bold 12px Arial, Helvetica, sans-serif;
	color: white;
	cursor:pointer;
	float:right;
	line-height: 22px;
	margin-right: 12px;
}
#wrapper #left ul li a:hover{
	text-decoration:none;
	background: url(../images/li_active.jpg) no-repeat 0 0;
}
#wrapper #left ul li a:hover span{
	color: #010101;
}
#wrapper #left ul li#current a{
	background: url(../images/li_active.jpg) no-repeat 0 0;
}
#wrapper #left ul li#current a span{
	color: #010101;
}

#bottom #footer{
	overflow:hidden;
	width: 1260px;
	margin: 0 auto;
}

#bottom #footer #copy{
	float:left;
	margin-left:150px;
	margin-top:25px;
	color: #999999;
	font: normal 11px Arial, Helvetica, sans-serif;
}

#bottom #footer #footer_menu{
	float:right;
	margin-right:150px;
}

#bottom #footer #footer_menu li{
	float:left;
	margin:22px 0 0 18px;
	list-style-type:none;
	color: #999999;
}

#bottom #footer_menu li a, #bottom #footer_menu li a:visited{
	color: #999999;
	font: normal 11px Arial, Helvetica, sans-serif;
}

#content_nobanner table.title_cfv{
	margin-left: 163px;
	position: relative;
	left: -10px;	
}
table.title_cfv{
	float:left;
	/*position:relative;
	left: -10px; 
*/
	background: #242424;
	width:541px;
	height: 34px;
	margin-top:19px;
	font: normal 14px Arial, Helvetica, sans-serif;
	color: #ffffff;
	text-align:center;
	text-transform: uppercase;
}

#content_nobanner #wrapper_content_cfv{
	margin-left: 154px;
	float:left;
}
#content .content_cfv, #content_nobanner .content_cfv{

    display: block;
	background: #646464;
	margin-top: 11px;
	height: 357px;
	overflow:hidden;
}

#scroll-pane { float:left;overflow: hidden; width: 540px; height:397px;position:relative; display:inline; }

#scroll-content {
display: block;
position:absolute;top:0;left:0;
width: 505px;
padding: 20px 10px;
height: 317px;
overflow:auto;
}

#slider-wrap{float:left;background-color:#2c2c2c;width:2px; position:relative; left: -12px;  margin-top:21px;}

#slider-vertical{position:relative;height:100%}

.ui-slider-handle{
width:10px;
height:61px;
margin:0 auto;
background:url(../images/slider_button_bg.jpg) no-repeat 0 0;
display:block;
position:absolute;
left: -4px;
}

adnank

Newbie Poster

9 posts since Jan 2011

Reputation Points: 10

Solved Threads: 0

Skill Endorsements: 0

2 Years Ago

0

It appears to be a problem with the JavaScript outputted. Start here.

Regards, Arkinder

Arkinder

Posting Pro in Training

454 posts since Nov 2010

Reputation Points: 113

Solved Threads: 60

Skill Endorsements: 0

2 Years Ago

0

I also thought that JS could be problem, so I commented all script includes in template index.php, but there was no change at all. JS is still off. Thank you for trying to help me. Any more ideas :) ?

adnank

Newbie Poster

9 posts since Jan 2011

Reputation Points: 10

Solved Threads: 0

Skill Endorsements: 0

2 Years Ago

0

Not sure how you commented out all the javascript. Looks like you did some improperly.

To comment out whole blocks of code, you surround with

/* code here */

To comment out script tags:

<!-- <script type=:text/javascript"></script> -->

I copied your source code over to my text editor, commented out ALL the javascript and then deleted the text above your header. That works, but if javascript is generating the code, and I know it is, then you need to find which one is doing it and comment it out properly, or delete it.

You also have just a few validation errors that should be fixed. Many of which are the invalid comments, but a few are tags not closed or improperly used. Might help with your issue might not, but always worth fixing.

teedoff

Practically a Master Poster

605 posts since Jul 2010

Reputation Points: 21

Solved Threads: 60

Skill Endorsements: 0

2 Years Ago

0

I think this is because of JS and browser compatibility issues.

sonuinfy

Newbie Poster

4 posts since Jan 2011

Reputation Points: 10

Solved Threads: 1

Skill Endorsements: 0

2 Years Ago

0

After viewing the page source, it appears you didn't properly close off your <a> tag. Also, you used <a ref=...> instead of <a href=...>

any notices to True Enterprises shall be given by email to <a ref="mailto:[B][U][I]<script type="text/css">[/I][/U][/B]

floatingDivs

Junior Poster

198 posts since Aug 2010

Reputation Points: 32

Solved Threads: 35

Skill Endorsements: 0

2 Years Ago

0

Thanks everybody. So far I have not managed to figure it out, but just made Solomon's solution, that work at the moment :) - I made these pages to open in lightbox. There are number of plugins including JS, so I just couldn't search it all (it is way too complex). But I have figured one thing: if text in article is short - everything is ok, if it is long - it begins to duplicate at some point. As you can see now on some other menu items, there are scrollers on side, but everything looks good. I have tried to add more text, and this artifact happens. This is CSS class I figured is responsible for making scrolling content:

#scroll-content {
display: block;
position:absolute;top:0;left:0;
width: 505px;
padding: 20px 10px;
height: 317px;
overflow:auto;
}

I have also fixed some of errors on W3 validator. But problem is still not solved :(

adnank

Newbie Poster

9 posts since Jan 2011

Reputation Points: 10

Solved Threads: 0

Skill Endorsements: 0

2 Years Ago

0

I would suggest you post this in the javascript forum. I do think its a js issue and perhaps someone there can help much better. No invalid html or unclosed tags should duplicate text, and if it did, it would duplicate within the space its already in.

teedoff

Practically a Master Poster

605 posts since Jul 2010

Reputation Points: 21

Solved Threads: 60

Skill Endorsements: 0

2 Years Ago

0

Thank you for your suggestion and thanks to everybody who tried to help. I'll listen to you and continue to search for an answer in JS forum.

adnank

Newbie Poster

9 posts since Jan 2011

Reputation Points: 10

Solved Threads: 0

Skill Endorsements: 0

Question Answered as of 2 Years Ago by Arkinder, teedoff, floatingDivs and 1 other

Hanging text

This question has already been solved: Start a new discussion instead