CSS Overflow Function

[MrBelfry]

I have a couple of divs containing some text which ahve there width set to 190px. I want to make sure that a really long word won't break the carefully(!) planned CSS positioning I am using.

I've set the overflow property to hidden which works great in Opera and Mozilla but has no effect in IE6. Is this normal or am I doing something wrong. I'd possibly prefer to scroll the container horizontally rather than hide the overflow but then I get ugly scrollbars on both sides of my container. Is it possible to only have a horizontal scrollbar and not the vertical one?

Thanks

MrBelfry

 

[jpbrassard]

Yes, you can.

[tt]X-OVERFLOW: scroll;[/tt]

Same can be done for vertical.

[tt]Y-OVERFLOW: scroll;[/tt]

Not sure if it's an IE-only trick or not - I do know that it works in IE. In fact, you may want to try doing this for IE:

[tt]X-OVERFLOW: hidden;
Y-OVERFLOW: hidden;[/tt]

Maybe that's what IE6 is expecting? ::shrug::

HTH,
jp

 

[MrBelfry]

The x-overflow & y-overflow did nothing. I tried overflow-x & overflow-y which messed things up in IE by adding a margin do part of my page but not the rest of it. Mozilla and Opera simply ignored it.

Having done a little bit of reading around it appears this problem only occurs in IE6 and not 5. For you information I have a div element that designates a navigation area on the right hand side of my page. Within this div I have a series of nested divs that hold specific navigation areas. The overflow works great on the parent div but not on the children.

Here is an example of what I'm trying to do with the html

<div id=&quot;navRight&quot;>
<!--navigation elements on right side of screen go here-->
<div class=&quot;listing&quot;>Track Listing:
<ol>
<li>Track1</li>
<li>Track2</li>
<li>Track3</li>
<li>Track4</li>
<li>Track5</li>
<li>Track6</li>
<li>Track7</li>
<li>Track8</li>
<li>Track9</li>
<li>Track10</li>
<li>Track11</li>
<li>Track12</li>
</ol>
</div>

Here's an edited version of the CSS
#navRight {
position: absolute;
width:190px;
right:20px;
top:20px;
z-index:1;
}
.listing {
position: relative;
border:1px dashed black;
padding:10px;
overflow: hidden;
width : auto;
}

If you have suffered a similar problem then please let me know how you dealt with it.

Thanks


MrBelfry

 

[jpbrassard]

You're right - I gave you wrong information about the Y and X axis overflows. [tt]OVERFLOW-X[/tt] and [tt]OVERFLOW-Y[/tt] are correct. My apologies for giving you erroneous information.

I've used these two CSS properties in DIVs before with no problem, especially in IE6. I have not, however, used an ordered list in the DIV, and I suspect that that may be where the problem lies. Is the ordered list important? Or could you try doing some scripting to keep a counter, and use [tt]<%=Ctr%>&nbsp;Track 1<br>[/tt] instead?

I would try setting up your child DIV without the ordered list and see if it handles the overflow correctly. I'll try to dig up some stuff on ordered lists and IE6 in the meantime.

HTH,
jp