Opera Positioning (6.05)

Absolute

[madcat]

Hello everybody,

I cannot get Opera 6.05 to position this unordered list (the whole command is ineffective):

ul{
position: absolute;
bottom: 11px;
right: 15px;
list-style: none;
font: bold .9em arial, verdana, helvetica, sans-serif;
}

ul li{
display: inline;
}

Is there something simple I'm missing that's preventing me from controlling the ul? I've been at it a while and I can't make it budge...no problem in other browsers.

Also, I have a page with two <div> columns, 67% and 33%. I have a 100% wide table in the 67% column that falls short about 3% from the edge in Internet Explorer 6. No other elements have their margin or padding set. The table spans the entire length in all other browsers. What might be the problem here?

Thanks for any suggestions

[grahamstewart]

Probably not much help but it works fine on IE6 and is okay on Opera 7 (though it is a little too low).

[Birdman]

You probably need to wrap a div around the list. Put 100% width on the wrapped div, then you will be able position it.

Hopefully :)

[madcat]

That's cool, I just took the <div>s out altogether. I have to do a tables-based layout for class- But I just noticed now that Internet Explorer 6 has dropped the scrollbar and the background is showing through - just like it does in Opera. I'm very used to seeing a greyed out bar when there is not enough info to fill a page, what might cause the scrollbar to disappear like this? How can I get it back?

Also, I'm still having problems getting my UL positioned. I can position any other element with ease.? <Tried the <div> wrap Birdman, I thought that might work too>

Thanks

[Birdman]

Madcat,

Lists are a pain to position. I feel your pain. When all else fails, I just use margin-left, but that is not an elegant solution.

Sorry I don't have any real answers ;)

[DrDoc]

I know that some browsers have problems with "right: ###px" if there's no previous content filling the page width.

Is float:right a possible alternative?

If not, I'm not sure there's a solution to your problem. I've had the same problems with OP6 several times.

[SuzyUK]

Opera6 doesn't understand the
right: #%
bottom: #%

one solution but it's not great!

ul{
position: absolute;
top: 95%;
left: 75%; /* adjust to suit */
list-style: none;
font: bold .9em arial, verdana, helvetica, sans-serif;
margin-top: -2px; /* for IE */
margin-bottom: 0px;
padding-top: 0px;
padding-bottom: 0px;
}

Suzy

[SuzyUK]

Madcat not sure what you're after re: scrollbar

what might cause the scrollbar to disappear like this? How can I get it back?

the scrollbars will disappear by default if there is not enough content on the page.

In IE the scrollbar disappears, but there is still a greyed out area where it should be. You can get this greyed out area to disappear too by putting:
html {overflow: auto;}
into your css, this will cause the greyed out area to disappear if required, but the scrollbars will reappear when required.

Is this what you're after, I'm not sure you can force a scrollbar when it's not required (at least not with CSS)

Suzy

[DrDoc]

Well, you can force a scrollbar by doing this:

overflow-y: scroll;

[SuzyUK]

Correction to my post#7

Opera6 doesn't understand the
right: #%
bottom: #%

This is incorrect information it(OP6) will position using the above properties just not a list apparently (even a list wrapped in a div)

Sorry for being misleading
Suzy

re: the overflow-y property, would this not only bring back the greyed out area if the content is not long enough. (which is the default state anyway) and I think this property is IE specific too..but my memory's not great today ;)

[SuzyUK]

Ok in an attempt to redeem myself..
and because I couldn't let it lie!

here's a code that works in IE6 OP6 OP7 NN6.2 NN7.01

ul {
list-style: none;
font: bold .9em arial, verdana, helvetica, sans-serif;
margin: 0px;
padding: 0px;
position: absolute;
right: 0px;
bottom: 0px;
height: 1em; /* this seems to be the key can be px units */
width: 15em; /* this keeps this list in the right order */
/* width: 100%; used along with float right also works but list reverses order */
background-color: red;
}

ul li{
display: inline;
margin: 0px;
padding: 0 1em;
/* float: right; - can be used in conjunction with width: 100% above */
}

I've put the notes into the code. I gave it a background color because that helps to see what is really happening, and I realised that it was positioning, but it was setting the list 100% high and 100% wide! so the key is to specify the height and width.
The width can be absolute or if you prefer to work with a 100% width you then need to float the list items right, which in turn makes the list appear in reverse order...

Hope I'm now forgiven ;)

Suzy
<edit> missed a bit!</edit>

[DrDoc]

makes the list appear in reverse order...

How bizarre! :o

;)