Solved

Text overflow....how to stop it without overflow function?

Posted on 2004-08-29
9
633 Views
Last Modified: 2012-05-05

http://www.midquel.com/

Above, if you check out my site today, where there are no recent posts, there is a very evident problem with my style sheet. Actually there are two. The first is...I want to set the background to adjust its length to the longest column? A class called #rap controls the box behind the content and the menu and I feel like that should be the section that adjusts its length according to the other columns (as opposed to the background).

Second problem, as you can see on the site is at the bottom right...there is a white box that juts out for no apparent reason. Any hints as to the what kind of command might be causing that would be helpful. I just have no idea where to even look for that.

Thanks!
0
Comment
Question by:htillberg
9 Comments
 
LVL 15

Expert Comment

by:Thogek
ID: 11929001
Quick thought: Check on your #content element (such as by giving it a background and/or a border) to see if that's causing the white box.
0
 
LVL 2

Accepted Solution

by:
Epistemo earned 500 total points
ID: 11932890
Sorry to tell you this but the css layout you designed is not as flexible.
You might want to rethink the way you inserted your div's.

start with the main holder ....
then do left side first .... then do the content next ...
Assign both to float left inside the main holder .... and set the width in them ... (Do not absolute position!)
Just use margin-left ior margin right ....

Once you have that you have the design you currently have ....
YOu then need to think about which box is going to be the main box in the model!
Meaning ... is the content box going to be larger then the actual menu ... (I think it's going to be since you have more stories in there)
So the content is the larger of the two .... yet once this happens the background of the menu will not grow and instead you'll have a maroon
bottom on the menu side.

So ... we place a small div inside the end of the menu div. (right before </div>)
Just drop this in there ... <div id="filler"> </div>

We now need to enter some javascript in the head.
Put this in first since it contains the div names ...

<script language="javascript" type="text/javascript">
function adjustLayout() {
  // Get natural heights
  var lHeight = xHeight("content");
  var iHeight = xHeight("filler");
  var rHeight = xHeight("menu");
  // Find the maximum height
  var maxHeight = Math.max(lHeight, rHeight);
  var newHeight=maxHeight-rHeight+iHeight+1;
  xHeight("filler", newHeight);
}
window.onload = function() {
adjustLayout();

}
</script>

-----------------------------------------------------
see this line?
  var newHeight=maxHeight-rHeight+iHeight+1;
change the +1 to whatever you feel like ... you can use - too.
------------------------------------------------------
We now insert the large javascript that was written by  Michael Foster (make this external)

//start
// Copyright (c) 2002,2003 Michael Foster (mike@cross-browser.com)

var xVersion='3.10',xOp7=false,xOp5or6=false,xIE4Up=false,xNN4=false,xUA=navigator.userAgent.toLowerCase();
if(window.opera){
  xOp7=(xUA.indexOf('opera 7')!=-1 || xUA.indexOf('opera/7')!=-1);
  if (!xOp7) {
   xOp5or6=(xUA.indexOf('opera 5')!=-1 || xUA.indexOf('opera/5')!=-1 || xUA.indexOf('opera 6')!=-1 || xUA.indexOf('opera/6')!=-1);
  }
}
else if(document.layers) { xNN4=true; }
else if (document.all) {
 if (xUA.indexOf('msie')!=-1) {
  if (parseInt(navigator.appVersion)>=4) {
   xIE4Up=document.all;
  }
 }
}

function xDef() {
  for(var i=0; i<arguments.length; ++i){if(typeof(arguments[i])=="" || typeof(arguments[i])=="undefined") return false;}
  return true;
}

function xGetCS(ele,sP){return parseInt(document.defaultView.getComputedStyle(ele,"").getPropertyValue(sP));}

function xSetCH(ele,uH){
  if(uH<0) return;
  var pt=0,pb=0,bt=0,bb=0;
  if(xDef(document.defaultView) && xDef(document.defaultView.getComputedStyle)){
    pt=xGetCS(ele,"padding-top");
    pb=xGetCS(ele,"padding-bottom");
    bt=xGetCS(ele,"border-top-width");
    bb=xGetCS(ele,"border-bottom-width");
  }
  else if(xDef(ele.currentStyle,document.compatMode)){
    if(document.compatMode=="CSS1Compat"){
      pt=parseInt(ele.currentStyle.paddingTop);
      pb=parseInt(ele.currentStyle.paddingBottom);
      bt=parseInt(ele.currentStyle.borderTopWidth);
      bb=parseInt(ele.currentStyle.borderBottomWidth);
    }
  }
  else if(xDef(ele.offsetHeight,ele.style.height)){
    ele.style.height=uH+"px";
    pt=ele.offsetHeight-uH;
  }
  if(isNaN(pt)) pt=0; if(isNaN(pb)) pb=0; if(isNaN(bt)) bt=0; if(isNaN(bb)) bb=0;
  var cssH=uH-(pt+pb+bt+bb);
  if(isNaN(cssH)||cssH<0) return;
  else ele.style.height=cssH+"px";
}

function xGetElementById(e) {
  if(typeof(e)!="string") return e;
  if(document.getElementById) e=document.getElementById(e);
  else if(document.all) e=document.all[e];
  else if(document.layers) e=xLayer(e);
  else e=null;
  return e;
}

function xHeight(e,uH) {
  if(!(e=xGetElementById(e)) || (uH && uH<0)) return 0;
  uH=Math.round(uH);
  var css=xDef(e.style);
  if(css && xDef(e.style.height,e.offsetHeight) && typeof(e.style.height)=="string") {
    if(arguments.length>1) xSetCH(e, uH);
    uH=e.offsetHeight;
  } else if(css && xDef(e.style.pixelHeight)) {
    if(arguments.length>1) e.style.pixelHeight=uH;
    uH=e.style.pixelHeight;
  } else if(xDef(e.clip) && xDef(e.clip.bottom)) {
    if(arguments.length>1) e.clip.bottom=uH;
    uH=e.clip.bottom;
  }
  return uH;
}

function xAddEventListener(e,eventType,eventListener,useCapture) {
  if(!(e=xGetElementById(e))) return;
  eventType=eventType.toLowerCase();
  if((!xIE4Up && !xOp7) && e==window) {
    if(eventType=='resize') { window.xPCW=xClientWidth(); window.xPCH=xClientHeight(); window.xREL=eventListener; xResizeEvent(); return; }
    if(eventType=='scroll') { window.xPSL=xScrollLeft(); window.xPST=xScrollTop(); window.xSEL=eventListener; xScrollEvent(); return; }
  }
  var eh="e.on"+eventType+"=eventListener";
  if(e.addEventListener) e.addEventListener(eventType,eventListener,useCapture);
  else if(e.attachEvent) e.attachEvent("on"+eventType,eventListener);
  else if(e.captureEvents) {
    if(useCapture||(eventType.indexOf('mousemove')!=-1)) { e.captureEvents(eval("Event."+eventType.toUpperCase())); }
    eval(eh);
  } else eval(eh);
}

//end


------------- done -----
Your menu will now grow with the actual content ....
But will need to redesign the actual divs you've got at this moment.
This also counts for the white box that is floating out of bounce ...

PS:
There might be other solutions to your problem ... as usual ... yet a graphical design like this ... well ... I would do it this way.
Oh yeah ... and it does work on all browsers .... (javascript enabled of course)






0
 
LVL 2

Expert Comment

by:Epistemo
ID: 11932900
Shoot ... forgot ... call the large external javascript BEFORE the small one ...!
0
 
LVL 18

Expert Comment

by:arantius
ID: 11934198
If you want your CSS columns to extend the entire height:

http://www.alistapart.com/articles/fauxcolumns/
0
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 
LVL 2

Expert Comment

by:Epistemo
ID: 11935175
Nice article ... yet you would still run into problems with Mozilla FireFox ... the famous div on top of div issue?
Maybe not ... gonna try that myself actualy.
About my previous solution ... I use it on many client sites ... and has never let me down.
0
 

Author Comment

by:htillberg
ID: 11970092
Sorry to take so damn long to get on this. I didn't design the original template and am new to CSS so i needed to have some time to sit down with this. My page is not perfect...i still have to fiddle with the columns. Is the copyright information your name? Is it ok if I specify that that particular copyright refers to the formatting? I had seen the other solution the fauxcolumns website before posting here...and I couldn't get it to work right, but thanks for the suggestion. Thanks!
0
 

Author Comment

by:htillberg
ID: 11970108
sorry, i have one more question for epistemo. Using float and not position:absolute (or relative)...how can i get the column to be away from the top?
0
 

Author Comment

by:htillberg
ID: 11970122
and what is the <div id="filler"> doing?
0
 

Author Comment

by:htillberg
ID: 11974939
scratch my question about filler...i get that. The only problem is the new layout is not working in Netscape. Any suggestions?
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now