Scrollbar Problems with Content Div

@DarkScytheJul 29.2008

Hello,

After a bit of personal debate, I’ve decided to redo my site design (again..)
I know I committed somewhat of a web designer’s sin with my first attempt by using absolute positioning. The overall idea was to have a header, left and right sidebars, and a footer that stayed in place while the content itself was the only thing to scroll.

That worked out pretty well for IE7 and FireFox (I’m not touching IE6 hacks until I finalize a design I like.) That demonstration page is ~~[URL=”http://www.darkscythe.com/DoTtest.html”]~~here.[/URL]

That has a severe limitation though, the side bars are a fixed height dependent on the user’s resolution (I’m designing to be viewable at 1024×768 and up.) That was fine for my old blog, but with my new design and content, I felt that was too limiting a factor (despite my reservations about doing “what everyone else is doing.”) and decided to allow it to scroll along with the content, and getting rid of the footer at the same time.

I’ve managed to redesign the layout without absolute positioning, and floating the 2 sidebars left and right. It took me a bit of trial and error to figure out that float:right; had to come BEFORE my non-floated center column.

My final problem: I need to make the sidebars and content scroll. I’ve put them in their own container div for a reason: I do not want the header to scroll with the rest of the page. Similar to how only the content moves in the first link, I wish to expand the scrollbar to include the 2 sidebars now, but leaving the header alone. I can’t seem to figure out how to do that though..
If anyone can help me out here I’d appreciate it. I’d also like some feedback on the two designs, if it’s not too harsh lol.
Demonstration page of second attempt is ~~[URL=”http://www.darkscythe.com/DoTtest2.html”]~~here.[/URL]
This is the one I need help with, currently.

Thanks in advance!

to post a comment

CSS

36 Comments(s) _↴

@eloquentBohemiaJul 29.2008 — #Change:

[CODE]#container {
 margin: auto;
 width: auto;
 text-align: left;
 [COLOR="Red"]	overflow-y: auto;[/COLOR]
 z-index: 1;
 }[/CODE]

to:

[CODE]#container {
 margin: auto;
 width: auto;
 text-align: left;
 [COLOR="Red"]	overflow: auto;[/COLOR]
 z-index: 1;
 }[/CODE]

and give the #container a set height.

You should not specify x or y to the overflow property, though.

See here: w3schools.com/css/css_reference.asp#positioning

@DarkScytheauthorJul 29.2008 — #Thanks for the reply.

I've removed the -y specification from overflow (used it in the absolutely positioned layout because right clicking in Firefox for some reason made a horizontal scrollbar appear.

Anyway, that alone didn't fix the problem.. I figured I needed to set a height, but I don't know what to set it to. I've tried bottom: 0px; but that didn't work.

@eloquentBohemiaJul 30.2008 — #The only way the overflow:auto will work is if the #container has a set height (say 500px or whatever you feel you need), not a min-height, which the content could go beyond; then the browser knows when to add the scrollbar.

You may have to set the width also unless you set interior elements at certain widths (you can use percentages) so they won't overflow the width of the #container [I]or[/I] you could set the width of the #container to 100%.

I built this fluid design here where the interior elements are smaller than the 100% width of the #container which is between the header above and footer below. Could this be similar to what you're looking for?

@DarkScytheauthorJul 30.2008 — #Yes, that makes sense, my container is currently trying to stretch itself to wrap around all the content even though it goes off the screen. I tried giving it 100% height (I don't want to set a px height because while I'm limiting the width of my entire design to 960px, I'd like the height to be fluid) but then the scrollbar went off the screen making it somewhat useless lol.

The width I set to auto purely to help center the 960px-wide content div and so that the scrollbar would hopefully appear on the right side of the screen where it's supposed to. I don't really have any objection to making the scrollbar put right up against the right edge of the content div (width would then be 960px + however many pixels the scrollbar needs, maybe 20ish?) but as long as the entire thing is centered.

Your design at your link is very similar to what I'm trying to achieve, except I've gotten rid of the static footer as I couldn't think of what information I really needed to put down there that I needed to stay on the screen.

Most tutorials on the net suggest to use absolute positioning in order to get a similar effect, but I thought absolute positioning was frowned upon, and most of the reason I redid my design in the first place - to get rid of my heavy absolute positioning usage. Is absolute positioning the only way to achieve this effect?

@eloquentBohemiaJul 30.2008 — #Questions:

Do you want the entire content, header included, to be 960px wide and be centered?

Do you want it to be a certian percentage height of the browser and the entire contents scroll if overflowing the percentage height?

@eloquentBohemiaJul 30.2008 — #Take a look at this and tell me if this is what you are suggesting: here

It is set for 1280 x 1024 res and tested in FF3 and IE6.

@eloquentBohemiaJul 30.2008 — #I looked at your site in IE6 and noticed that you are using PNG images. Th don't have the transparency you want in IE6, because IE6 and lower doesn't support the alpha-transparency of PNG.

I know that there is a fix for that somewhere, but I don't know how well the fix works, so you may have to change to Gif to get the same effect.

@DarkScytheauthorJul 30.2008 — #Oops, sorry for the late reply - I fell asleep last ngiht, lol. >_<

To answer your questions:

Yes, the entire content including header will be 960px wide and centered. I could've put everything into one container div, but I figured separating them would be the easiest way to prevent the header from scrolling.

As for the percentage height, no - what I'd optimally like is for the div to stretch all the way to the bottom of the browser (In absolutely positioned terms, it would be top: 125px; bottom: 0px? but I don't know if there's a way to do this without using absolute positioning.

Your final link is almost what I need, although there are a few things:

Although it's subtle, the content isn't properly centered, I'm not sure if it's the result of the scrollbar or not, but everything is pushed a few pixels to the left. Properly centered, it should fit perfectly under the header since both are 960px wide.

The bigger problem though, is the container div does not stretch all the way to the bottom. You've set it to 70%, and I'm running 1280x1024 resolution myself, but it ends short of the bottom of the screen by some fair distance. I had this issue before as well, when I tried to assign it an explicit height, but fell short of the browser.

Here's a quick pair of screenshots to show what I'm seeing.

http://darkscythe.com/images/ie7layout.jpg

http://darkscythe.com/images/firefox2layout.jpg

As far as IE6 goes, yes I know IE6 will be heavily broken for numerous reasons. I was going to try to fix it as each issue cropped up, but it was just taking too long and preventing me from finishing my layout, so I decided to finish it first, then work on hacking it apart for IE6. It will be on its on stylesheet anyway, so I didn't need any hacks cluttering up my main stylesheet. I know IE6 doesn't support PNG transparency, but I've already created a set of GIFs for use when I made the PNGs. I'll simply use IE's alpha opacity rule to achieve the desired effect if I need to.

Edit:

I just noticed you added a bunch of comments to the code - sorry for not commenting them enough lol, it was mainly just there for personal reference, so it was probably a huge mess to sort through.

@eloquentBohemiaJul 30.2008 — #Oops, sorry for the late reply - I fell asleep last ngiht, lol. >_<

To answer your questions:[/QUOTE]

Which is what I did at 6:30 this morning (EST). That sleep-thingy always gets in the way.?

Yes, the entire content including header will be 960px wide and centered. I could've put everything into one container div, but I figured separating them would be the easiest way to prevent the header from scrolling.[/QUOTE]

Right. Which is why I didn't touch that. It will remain at the top while everything else scrolls.

As for the percentage height, no - what I'd optimally like is for the div to stretch all the way to the bottom of the browser (In absolutely positioned terms, it would be top: 125px; bottom: 0px? but I don't know if there's a way to do this without using absolute positioning.[/QUOTE]

And here's the rub. Because there are multiple heights of screen size (i.e. 1024, 800, etc. ....some laptops are only 700px and with browser bars etc. that lessens the height to about 620 or 630), there is no way that I can think of to set the height to match every screen size. You would have to find a way, possibly some JavaScript, of detecting what size the browser is that any given person was using and set the height of the container div accordingly.

Positioning it absolutely won't work. When setting the height of the container, auto doesn't work because that is the height of the contents and that eliminates the scrollbar, as is the same when setting the height to 100%.

Also, when you use a percentage for the height, it is actually the width of the window the browser uses, because, I think, it is the only known dimension.

I set the height of the container to 70% and it still fell below the bottom of the browser window with no scrollbar, which means that was not 70% of the containers height.

In absolute, you can only set two terms, x and y, x being left or right and y being top or bottom. You can't set top, left and bottom.

Your final link is almost what I need, although there are a few things:

Although it's subtle, the content isn't properly centered, I'm not sure if it's the result of the scrollbar or not, but everything is pushed a few pixels to the left. Properly centered, it should fit perfectly under the header since both are 960px wide.[/QUOTE]

Yup, its the scrollbar.

The bigger problem though, is the container div does not stretch all the way to the bottom. You've set it to 70%, and I'm running 1280x1024 resolution myself, but it ends short of the bottom of the screen by some fair distance. I had this issue before as well, when I tried to assign it an explicit height, but fell short of the browser.

Here's a quick pair of screenshots to show what I'm seeing.

http://darkscythe.com/images/ie7layout.jpg

http://darkscythe.com/images/firefox2layout.jpg[/QUOTE]

Answered this in above paragraph.

As far as IE6 goes, yes I know IE6 will be heavily broken for numerous reasons. I was going to try to fix it as each issue cropped up, but it was just taking too long and preventing me from finishing my layout, so I decided to finish it first, then work on hacking it apart for IE6. It will be on its on stylesheet anyway, so I didn't need any hacks cluttering up my main stylesheet. I know IE6 doesn't support PNG transparency, but I've already created a set of GIFs for use when I made the PNGs. I'll simply use IE's alpha opacity rule to achieve the desired effect if I need to.[/QUOTE]

Tha may not work as the transparency parts of the png images are always displayed in IE6 and below as 100% opacity grey. I think IE7 supports png, but not sure. (...I won't have IE7 on my computer? ) Gifs would do, but you may loose image quality.

Edit:

I just noticed you added a bunch of comments to the code - sorry for not commenting them enough lol, it was mainly just there for personal reference, so it was probably a huge mess to sort through.[/QUOTE]

I knew that they were there for that, I did that when I first started coding. If you want to do this, just put a couple of spaces behind the elment it's refering to and then put in your comments. Be aware though, that comments add weight to the whole document.

I'm trying different positioning ideas as I am writing this, as I have Core FTP and can edit online, so I'm trying changes and seeing them real-time in both FF3 and IE6.

I think I know what you're trying to accomplish, but I don't think it will work because of the way browsers are built. Everything is oriented from the top/left.

@DarkScytheauthorJul 30.2008 — #Thanks for helping out again ?

I'm also trying various things right now, with no luck.

To respond-

How does the <body> element normally figure out the height then? at 100%, it stops at the bottom of the browser instead of continuing down to wrap all the content. I thought divs would do something similar - if it hits the bottom of the browser, it should create a scrollbar for further content.

As for the GIF issue, the GIFs I made are simply the PNG images I used for the borders, and as they are composed of only a few pixels of data and only a few colors, there isn't too much image quality lost. What I needed the GIFs for was their support of fully transparent pixels, which I need for the "corner" images. IE7 does indeed support PNGs properly, I'm using FF2, FF3 and IE7 right now. IE6 is just too big of a headache on top of everything right now, so I'm planning on finishing it for "standards compliant" browsers first, then ask around for tips on making a separate stylesheet specifically for IE6. (There's a placeholder conditional in the header you may have noticed indicating this.)

As for it making things gray, it won't do that ?

I'll probably use something like filter: alpha(opacity=90); on the GIFs to make them appear semi-transparent, so they look like the PNGs.

Edit:

I wonder if making the footer stay on screen would make it any easier.. I mean, we managed to get the site to look right the first time with all absolutely positioned objects somehow.. I thought it was just a simple issue of making more content scroll instead of just the middle, but it seems to be more difficult than I thought. It probably wouldn't look as good though, since I don't have any really necessary information to put in the footer.

@eloquentBohemiaJul 30.2008 — #Not to sound negative, but I've tried this before, with no luck; but who knows, you may find a solution.

The 100% height works only for the html and body, everything else is child elements of these. I don't know the technical reasons, maybe someone here knows, but if you set the first child element from the html/body to 100%, you will get the right scrollbar. (try it)

If you transparency your gif or pngs, which are already transluscent, it may make them almost invisble and you wouldn'nt have the whitish bg to your text. If there's really no loss of quality to the gifs, then use them as they are.

@DarkScytheauthorJul 30.2008 — #I'm having no luck doing this without absolute positioning.. is it really bad if I have to end up relying on it? The only way I've gotten it even remotely to look the way I need it to right now is to do this to the container:

#container {
 position: absolute;
 top: 125px;
 left: 16px;
 bottom: 0px;
 right: 0px;
 margin: auto;
 width: auto;
 text-align: left;
 overflow: auto;
 z-index: 1;
 }

This would force the container to shrink itself down to whatever screen space is available after the top 125px have been used by the header. Unfortunately, I don't know why, but this makes the footer at the bottom have a small space after it ends and before the bottom of the browser window.

And of course, the downside is this uses absolute positioning, which I see being denounced in the web development community.

The only other alternative I can think of is to use position: fixed; on the whole header, then allow the body element to scroll, but I don't think IE supports fixed... sigh.

As for the GIFs, I think there's a misunderstanding - the GIFs are not semi-transparent. They can't be, their pixels only support fully on or fully off, so my GIFs are a solid 100% opaque color until the border ends, then the rest of the GIF is transparent (look at the angled pieces of my border images, an image can't be triangular ?)

Edit:

The extra 16px I've applied to the left positioning is to re-center the content after the scrollbar appears. This may cause problems if there is no scrollbar.. so perhaps I'll have to change it from auto to always visible.. but then I'd have to specify overflow-x and y, since I want overflow-x to remain hidden.

@DarkScytheauthorJul 31.2008 — #Hmmm, I suppose no one knows of a way to do it without absolute positioning either lol.

I guess I can get away with only using it once, right?

Are the scrollbars always 16px wide? It measures correctly in Firefox and IE.. I'm not sure about other browsers though.

@eloquentBohemiaJul 31.2008 — #So this forces the container to stay within the screen?

Are you using Transitional DOCTYPE?
Unfortunately, I don't know why, but this makes the footer at the bottom have a small space after it ends and before the bottom of the browser window.[/QUOTE]
In your CSS, put this in both the html and body selectors:

[CODE]margin:0;
 padding:0;[/CODE]

And of course, the downside is this uses absolute positioning, which I see being denounced in the web development community.[/QUOTE]
I wouldn't say it's denounced, you use absolute positioning if it is needed and it validates. On this site, I use absolute positioning and negative margins to achieve browser-center position on any browser size.

Post link to your site.

@CentauriJul 31.2008 — #For compliant browsers, the method of stretching an absolutely positioned div between the coordinates is about the only way to do what you want - but IE6 does not support that. However, if IE6 is in quirks mode, the wrapper div can be made 100% high and have a top border equal to the height of the header, the border being subtracted from the height in IE quirks mode. However, putting IE6 into quirks mode will do the same to IE7, so it has to also use all the IE6 hacks when in reality it doesn't really need to. Of course, in quirks mode, you would have to make considerable adjustments to the dimensions of many other elements for IE due to the old box model.

Stu Nicholls has a demonstration of this technique here.

@CentauriJul 31.2008 — #Are the scrollbars always 16px wide? [/QUOTE]

No, the scrollbar width varies with browser, operating system, and display theme. 18px seems to be a reasonable average, with some combinations being narrower and some larger.

@DarkScytheauthorJul 31.2008 — #Thanks you two, you're both very helpful.

To respond-

Yes, I am using XHTML 1.0 Transitional Doctype, although TIDY thinks it's closer to Strict. Of course that's because there's only very basic layout code right now, it will probably change once I port the design over to my blogging/CMS engine.

At the very top of the CSS file, I had that set in a universal selector, I still need to put it in the html and body tags manually? I was thinking maybe the footer div had some issue I overlooked, perhaps it's wrapping a little too closely with the text.

Perhaps I exaggerated a bit on the denouncing part, but it doesn't seem like it's recommended either. More like a last resort type thing. Sorry, I forgot to post a link to my new test page:

Original Design

Revised Version

Centauri-

I think it would be in everyone's best interests if I stayed away from activating/relying on quirks mode. At best, I'll have to make a separate IE6 stylesheet to overwrite every value defined in the standard stylesheet along with IE6 hacks to get it to display properly.. I'll be asking for help with that soon.. ?

Thanks for the information about the scrollbars as well, they measured 16px for me, but I was fairly certain it could be different elsewhere. Unfortunately, there's no way for me to adjust it, since it uses absolute positioning, and it's very difficult to center 2 things to line up together because of it. Would it be safe to assume 16px is the "default" though? even at 18px, it will only look off center by 2 pixels.. it might be noticeable, but only if people are trying to look for it.

EDIT:

Most of this could probably be solved with Javascript, BUT I want to steer clear of Javascript as long as I can.

IMO Javascript is there to enhance the site experience, but it should not be required for formatting the site. It's really why I'm trying to get everything to work with pure CSS/XHTML right now, so even for users with Javascript disabled, they won't lose anything from my site. I will, of course, add Javascript later, but they will only be for "perks" such as the popular lightbox JS for viewing images.

@eloquentBohemiaJul 31.2008 — #I viewed your site in 1280x1024 and 1280x800 (laptop) and it fits with no problems. I think the space at the bottom of the container is this:

[CODE]#container {
 position: absolute;
 top: 125px;
 left: 16px;
 right: 0px;
 bottom: 0px;
 margin: auto;
 width: auto;
 text-align: left;
 overflow-y: scroll;
 overflow-x: hidden;
 z-index: 1;
 }[/CODE]

Try changing the margin value this:

[CODE]
  margin:0 auto;[/CODE]

It should take out the bottom margin, because I think what you have could be over-riding the html margin:0 value.

@CentauriJul 31.2008 — #[CODE]#footer p {margin-bottom: 0}[/CODE] will get rid of the gap.

@DarkScytheauthorJul 31.2008 — #Thanks, I tried that but it didn't seem to get rid of it.. curiously though, IE7 does not have this gap at the bottom, it stretches the footer all the way to the bottom of the browser window.

I tried adding margin: 0; padding: 0; to *, html, body, and footer and added margin: 0 auto; padding: 0; to container and content... none of them helped.

Edit:

lol, Oh, I didn't know it was the P causing that.. thanks Centauri, that did the trick. Do I need to set that as a separate entry, or can I nest it within my main #footer rule?

@CentauriJul 31.2008 — #It would need to be separate to target the <p>.

@DarkScytheauthorJul 31.2008 — #Oh, all right, I'll do that then.

Which design do you guys prefer, by the way? The first one or the second one?

Also.. if you guys noticed, that unordered list in the second dummy entry is positioned incorrectly.. probably due to the universal selector setting * {margin:0;padding:0;}

What are the default values for them, so I can set them back, or is there a better "CSS reset" code somewhere?

@eloquentBohemiaJul 31.2008 — #[B]DarkScythe[/B],

Have you changed the stylesheets for IE6 yet, because I tried this in different screen sizes in FF3 and it works well, but (...don't you just hate buts) in IE6, the container is centered under the left and right divs, full height, no scrollbar and hidden below the screen.

@DarkScytheauthorJul 31.2008 — #No, I have no changed anything for IE6 yet. There is currently a very incomplete IE6 stylesheet that's being loaded, but all that's on it are several IE6 hacks that I didn't need anymore on the main stylesheet. I moved them off to their own file rather than deleting them purely for reference.

Some of it doesn't even apply to the correct divs since I've renamed most of them lol. Here's what's in there right now (I haven't had a chance to think about the horror of researching what I need to do to hack IE6 yet)

/* CSS Document */
 
 * {
 margin: 0px;
 padding: 0px;
 }
 
 * html {
 padding: 0px;
 overflow: hidden;
 }
 
 * html body {
 padding: 0px;
 padding: 0px;
 }
 
 body {
 margin: 0px;
 }
 
 html,body {
 margin: 0px;
 padding: 0px;
 overflow: hidden;
 }
 
 * html #textbox {
 position: relative;
 height: 100%;
 top: 125px;
 left: 160px;
 bottom: 50px;
 width: 640px;
 display: block;
 overflow-y: auto;
 overflow-x: hidden;
 z-index: 1;
 }
 
 * html #kuraibox {
 position: absolute;
 display: block;
 top: 0px;
 left: 0px;
 height: 100%;
 overflow: hidden;
 width: 624px;
 z-index: 2;
 }
 
 * html #footer {
 bottom: 0px;
 }

I know IE6 is having problems displaying the PNGs as well, but their GIF counterparts are already uploaded. All I need to do is change the *.png extension to *.gif for all the border images inside the entrybox.

Edit:

As a quick test, I've temporarily disabled it by loading a non-existent CSS stylesheet (DoTie6b.css) but it appears to still have the same issue. There are also a lot of gaps between the images that make up the borders for some reason.

@CentauriJul 31.2008 — #As far as the lists go, add about 1em left padding to the <ul> - this will bring the bullets back in as they are normally positioned outside the <li>.

BTW, I do prefer version 2 - you can use the mouse scrollwheel without having to have the mouse pointer over the content.

@DarkScytheauthorJul 31.2008 — #As far as the lists go, add about 1em left padding to the <ul> - this will bring the bullets back in as they are normally positioned outside the <li>.

BTW, I do prefer version 2 - you can use the mouse scrollwheel without having to have the mouse pointer over the content.[/QUOTE]

Thanks, I'll try to add that.. would it be ul, ol, li {padding: 0 0 0 1em;}? Or I guess I could define padding-left directly and hopefully leave the others at 0.

As for that last thing about the mousewheel - what do you mean? You can't scroll in the middle without being over text or something?

I had a similar issue before when I was first trying to get the design together, but I haven't had that problem after I got it rendering properly, so I thought that was fixed.

I kind of like the first version as it's nifty and I don't see many people do something like that, so it has the 'unique' appeal, but it comes with its own drawbacks.. version2 is safer and more normal, but it feels a bit 'plain' to me lol. I'm asking people which version they like better as I'm conflicted in my decision there.

@eloquentBohemiaJul 31.2008 — #I love the revised version (#2), because it does what you wanted and visually, it is more appealing layout-wise.

I admire your tenacity in achieving what you wanted.?

@CentauriJul 31.2008 — #There are also a lot of gaps between the images that make up the borders for some reason.[/QUOTE]

That was my fault, sorry. When I did the tab panel code, I didn't optimise for IE6 - the gaps are IE6's 3px jog bug. As you are using an IE6 stylesheet, add this to it :

[CODE].entrybox .datefield, .entrybox .bl {
 margin-right: -3px;
 }
 .entrybox .tr, .entrybox .commentfield {
 margin-left: -3px;
 }[/CODE]

Make sure only IE6 sees that, though.

Edit: and with the lists, only apply the padding to the <ul>s and <ol>s - NOT the <li>s

@CentauriJul 31.2008 — #As for that last thing about the mousewheel - what do you mean? [/QUOTE]

I mean with version 1 the mouse pointer has to be within the content area or on the scrollbar to be able to use the mouse wheel, but with version 2 the pointer can be off to the side of the content.

@DarkScytheauthorJul 31.2008 — #Thanks Centauri, I was playing around with it (WebDeveloper for Firefox is awesome, live edits!) I'm having a bit of trouble figuring out what the difference between adding margin and padding for the ul/ol are though. I've also removed the li setting, although, why? Does the li comes with its own padding already (and didn't get overwritten by the universal selector?)

As for the IE6 thing, I have a conditional to load an additional stylesheet if it detects IE6, so that code will probably go there, away from the main stylesheet. Basically, I'm looking to write up 2 stylesheets, one for standards compliant browsers and will always be loaded, then an entire stylesheet just for IE6 to overwrite the main values if it detects IE6 (making use of the cascading effect.)

Edit:

Oh, I see. yeah, the mouse cursor has to be at least within the content area in order to set the scroll "focus" there. But it can be anywhere inside that content div.

I suppose I should go with version2 then, everyone I've asked (with the exception of 1 so far) seem to prefer version2. I'm OK with it, even if it is a little more standard, but as the content is being served to the users, I should try to cater to their desires.

@CentauriJul 31.2008 — #Without any margin or padding on the <ul> / <ol>, the bullets are outside the list - adding a margin means the bullets are still outside the list, just the whole list is moved across, and padding actually brings the bullets inside the list. By default, FF adds padding for list indent, but IE uses margin by default, with the result that if the list gets HasLayout set in IE (width set for instance), the bullets disappear as they are outside the list and not inside. Using left padding will prevent the bullets disappearing in IE.

@DarkScytheauthorAug 02.2008 — #Thanks again for the explanation, Centauri.

Sorry for the late response, I've been busy with the back-end as well as with this front-end.

Okay, so basically margin and padding do the same thing, it's just that padding has less drawbacks with Internet's Evildoer. So I've tried that, and 1em worth of left-padding does bring it *just* barely into the box - it's overlapping the border image. I've set it at 2em currently to look like a proper list. I've also experimented with adding padding/margin to <li> and I see why you advised me against it - it increases the distance between the bullet and the list item.

However, there is one issue I'd like to see if it can be rid of.

I've nested a few list items to get a feel for how they look together, and it seems the further down the nesting, the more it gets indented inward. For example, the distance between the outermost bullet and the number "1" is smaller than the distance between the number "3" and the next nested bullet.

It seems to have some relation to margin/padding, as reducing the padding from 2em to 1em also reduces the distance the nested lists get indented by - although it still happens, so I suppose this is a "feature" of lists.

Would there, then, be a way to use such minimal indentation while still getting the entire list indented enough to fit inside the box? My reasoning for this is mainly for the Category links that will be such a list held in the sidebars - and there isn't very much room there to begin with.

Thanks again!

Edit:

Just for clarification, I don't want the indentation to be removed entirely, I'd just like to see a somewhat "equal" indenting as you move down the nesting.

@CentauriAug 02.2008 — #Adding some extra rules to target the nested elements seems to work here :

[CODE]ul ul, ol ul {
 padding-left: 5px;
 }
 ul ol {
 padding-left: 12px;
 }[/CODE]

@DarkScytheauthorAug 02.2008 — #Thanks again!

I'm not very knowledgeable about this, so let me see if I got it right..

ul, ol (WITH comma) - Targets both ul and ol separately at the same time.

ul ol (WITHOUT comma) - Targets only an ol that comes directly after a ul, but leaves ul and any ol's that DON'T follow a ul alone.

ul ul, ol ul - Combination of above, targets ul's following either a ul or an ol, but leaves other ul's and ol's alone..

This has the potential to become greatly confusing. This means I have to target each one I'm going to use individually? Also, I thought padding would be a negative number to counter it, but if it's positive, it means it's actually overriding the "main" padding of 1em with these pixel values? What happens if you keep using ems?

Thanks again!

@CentauriAug 02.2008 — #Sort of. ul ol will target ANY and ALL <ol>s that are within a <ul>, no matter how deeply nested. ol ul will target ANY and ALL <ul>s that are within an <ol>, no matter how deeply nested. Likewise ul ul will target ALL nested <ul>s but not the parent one.

Styles applied to anything will override any inherited styles. Padding cannot be a negative number, unlike margins. The use of ems on the top level padding caters for text resize, but this may or may not be needed on the sub levels - you can use ems there too if you like.

It CAN get confusing, yes.

@DarkScytheauthorAug 02.2008 — #Thanks, I used ems just to be consistent.

I played around with it and I think this yields the best 'look'

ul {padding-left: 2em;}

ol {padding-left: 2.5em;}

ul ul, ol ul {padding-left: 1em;}

ul ol, ol ol {padding-left: 1.5em;}

What's interesting is that it seems ol's needs to be indented a little more to keep things looking clean.

Also in #CSS _↴

CSS with scrollbars...Help with title bar controls animation CSS Competitors

Success!

Help @DarkScythe spread the word by sharing this article on Twitter...

Tweet This

Scrollbar Problems with Content Div

36 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

36 Comments(s) _↴

Also in #CSS _↴