Solved

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

Posted on 2004-08-29
9
638 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

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

Suggested Solutions

Title # Comments Views Activity
Google Tag Manager - Add Trigger Using Div class 22 100
Fix a css menu for width 15 40
How can I make my tabs look like this? 1 51
Selenium cssSelector and attribute 5 14
Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
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…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

752 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