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 :)
adnank
0
Newbie Poster
Recommended Answers
Jump to PostWhat browser are you testing in? Hanging text does not make sense. Please be more specific.
Regards, Arkinder
Jump to PostThe text is clearly in the code outside of any tags. Why don't you simply remove it?
Regards, Arkinder
Jump to PostIt appears to be a problem with the JavaScript outputted. Start here.
Regards, Arkinder
All 12 Replies
Arkinder
93
Posting Pro in Training
What browser are you testing in? Hanging text does not make sense. Please be more specific.
Regards, Arkinder
adnank
0
Newbie Poster
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.
Arkinder
93
Posting Pro in Training
The text is clearly in the code outside of any tags. Why don't you simply remove it?
Regards, Arkinder
adnank
0
Newbie Poster
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
0
Newbie Poster
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 :) ?
teedoff
3
Posting Pro
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.
sonuinfy
0
Newbie Poster
I think this is because of JS and browser compatibility issues.
floatingDivs
21
Junior Poster
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]
adnank
0
Newbie Poster
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 :(
teedoff
3
Posting Pro
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.
adnank
0
Newbie Poster
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.
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.