Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2004-08-29
9
Medium Priority
?
646 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 2000 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

971 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