Moving the position of the sidebar

Question

I have this control on my page which is a <div style="max-height: X"> inside a <fieldset> (I uploaded on jsfiddle.net the relevant HTML and CSS code).

enter image description here

As you can see there is a small problem: the area pointed to by the red arrow looks unnaturally empty. The scroll bar should start 9px more above than where it starts now!

Adding position: relative; top: -9px; to the div and padding-top: 9px to the ul fixes it when you are not scrolled, but once you start scrolling things start to look strange:

enter image description here

I need both of these:

There should not be the gap you see in the first image (pointed by the red arrow)
There should not be the overlapping issue seen in the 3rd image when scrolled down

what browser are we talking about? because in webkit it looks good — Zoltan Toth, Sep 06 '12 at 11:17
My fiddle is not using the `position: relative; top -9px` -- It's the one from the first screenshot, with the unnatural empty space above the scrollbar [EDIT: I updated it to show both] — Andreas Bonini, Sep 06 '12 at 11:20
@Jawad: this has the same problem when you scroll down though, the "Flag X" text overlaps with the legend — Andreas Bonini, Sep 06 '12 at 11:23
what happens if u give the overflow: auto; to the
instead of the
. So we don't need to have the position: relative; top: -9px; for the
. That takes care of the gap problem but the overlap problem is still there. However this introduces a problem in FF which aparently has a bug that cause the scrollbars not to show on
by using the overflow: auto; property. That can be however taken care of by a hack of display: table-column; - http://stackoverflow.com/questions/1673346/fieldset-firefox-overflow-css-fix - Still leaves the overlap problem. Are you open to nesting? — Jawad, Sep 06 '12 at 20:21
Don't use a fieldset. Fieldsets are ugly stuff when it comes to CSS — yunzen, Sep 13 '12 at 08:50

score 5 · Answer 1 · answered Sep 13 '12 at 10:51

5

Try something like this:

http://jsfiddle.net/HerrSerker/WY3dj/165/

Just make the legend's position absolute with fieldset's position relative; Then you can shift your legend with top/margin-top to the top

answered Sep 13 '12 at 10:51

yunzen

32,854
11
73
106

score 1 · Answer 2 · answered Sep 14 '12 at 07:10

1

I hope this works..
Fiddle - http://jsfiddle.net/WY3dj/197/

answered Sep 14 '12 at 07:10

Nagaraj Chandran

228
1
2
9

Matt Whipple · Answer 3 · 2012-09-16T22:35:21.603

1

Here's a visually consistent solution which is probably the best that can be done with HTML/CSS alone (if you're stuck with that look) and can be easily tuned as needed.

http://jsfiddle.net/WY3dj/198/

edited Sep 16 '12 at 22:35

answered Sep 15 '12 at 23:50

Matt Whipple

7,034
1
23
34

score 1 · Answer 4 · edited Sep 19 '12 at 12:07

You can put span below scroll legend making a layer between the 'legend' and 'div', so that it hides 'div' and does not overlap with 'legend' on scroll.

Like this:

<fieldset class="scroll">
    <legend>Scroll:</legend>
    **<span class="stopoverlap"></span>**
    <div>

Now you can create 'stopoverlap' css like this:

.stopoverlap {
    display: block;
    position: absolute;
    height: 5px;
    top: 10px;
    background-color: #ffffff;
    width: 80%;    
    z-index: 2;
}

You also have to define z-index for 'legend' and 'div' under scroll fieldset and their position relative like this:

fieldset.scroll div {
    position: relative;
    top: -9px;
    **z-index: 1;**
}

and

legend {
    font-weight: bold;
    margin-left: 5px;
    **position: relative;**
    **z-index : 3;**
}

Your scroll will look like:

enter image description here

Hope this helps

Edit : Do not put ** in your code as this is just to specify a change or an addition.

score 0 · Answer 5 · answered Sep 06 '12 at 11:24

0

In the CSS, replace the value of top: -9px and make it as 0px.

fieldset.scroll div
{
    position: relative;
    top: 0px;
}

Fiddle here: http://jsfiddle.net/WY3dj/10/

answered Sep 06 '12 at 11:24

Praveen Kumar Purushothaman

164,888
24
203
252

That does not solve "the area pointed to by the red arrow looks unnaturally empty" which is the first problem. The second problem is overlapping. – Jawad Sep 06 '12 at 11:35
Actually right now it doesn't overlap when you scroll right? Did you try giving a `overflow: hidden;` and check? – Praveen Kumar Purushothaman Sep 06 '12 at 11:36
Look at the scroolbar which is some distance from the top. As I said "the area pointed to by the red arrow looks unnaturally empty". Think they are mutually iinclusive. If you fix the gap, there will ve overlap and if u fix the overlap there will be gap. I did the same in my comments above but it's not a solution. – Jawad Sep 06 '12 at 12:15
@AndreasBonini and Jawad, still I don't understand. It is rendering perfectly for me! – Praveen Kumar Purushothaman Sep 06 '12 at 16:57
I need both of these: •There should not be the gap you see in the first image (pointed by the red arrow) •There should not be the overlapping issue seen in the 3rd image when scrolled down – Jawad Sep 06 '12 at 18:33

score 0 · Answer 6 · answered Sep 13 '12 at 08:59

0

You need to remove all styles from fieldset.scroll div

answered Sep 13 '12 at 08:59

Sujanth

613
1
6
12

actually, the problem is being caused by `position: relative`. he just need to remove that. – RASG Sep 13 '12 at 14:34

RASG · Answer 7 · 2012-09-13T14:30:23.693

0

here, fixed it for you: http://jsfiddle.net/WY3dj/172/

two nested divs inside the fieldset
changed your CSS a little bit

Test 1: Firefox 13

FF13

Test 2: Internet Explorer 9

IE9

edited Sep 13 '12 at 14:30

answered Sep 13 '12 at 14:15

RASG

5,988
4
26
47

score 0 · Answer 8 · answered Sep 18 '12 at 08:54

Try this simple solution:

http://jsfiddle.net/WY3dj/210/

To avoid the overlapping issue, just change the CSS style for following element:

legend
{
    font-weight: bold;
    margin-left: 5px;
    background-color: #fff;
    position:relative;
    z-index:1;
}

score 0 · Answer 9 · answered Sep 18 '12 at 09:24

0

add float:left;clear:both for those items, probably will fix lots of issues.

answered Sep 18 '12 at 09:24

S.S.Niranga

364
1
11

Moving the position of the sidebar

9 Answers9