Need a Line In a List

HTML & CSS
1

Hi - I need a green line in the middle of a <ul> list, something like this:

<ul>
<li><a href=“#”>text</a></li>
<hr size=1 width=“100%” color=“green”>
<li><a href=“#”>South Africans</a></li>
</ul>

You can see I tried it here (pls scroll down to first menu at bottom page headed “Shop Here”):

http://www.greensmoothie.com/test/blend/1mst.php

It comes out wrong in both FF + IE 6/7. I need the line to separate all list items from the “South Africans” item - so other menu items must be above the line and “South Africans” below the line.

Please can you help?

thank you! - Val

2

The hr is impossible to style cross browser and is best avoided but instead use a border on an existing element where possible.

This faq shows you how to color it but you can’t collapse the margins in IE.

There is no css property/value like this :slight_smile:


.navbox hr {width:100%;[B] colon:1px solid green}[/B]

As I mention in that link above you need to set the background color and the foreground color to satisfy most browsers.


.navbox hr {
width:100%; 
color:green;
background:green;
border:none;
}
3

Hi - in the end I never used Stomme’s clearfix. This is all I did:

  • x’d out the old ul and added Stomme’s new ul with the 2 classes us + sa:

/#btmnav ul {list-style:none; margin:0; padding:0 30px; position:relative; zoom:1.0;}/

#btmnav ul {list-style:none; margin:0 auto; padding:0; position:relative; width:90%;}
#btmnav .us {margin-bottom:10px; overflow:hidden}
#btmnav .sa {clear:both; padding-top:8px; border-top:1px solid green}

But I’ve since discovered it’s only in IE6 that the dropdowns are vaporized, so rather than add a ton of css to “cancel out changes on the dropdown lists” just for IE6, I’ll use hr w:100% or inline-block for a year until IE6 has died. Then I’ll switch to Stomme’s solution which I really love because it’s long-term legal :slight_smile:

Thank you for everyone’s input!

best, Val

4

Hi noonnope - thank you! yes I did try:

<li style=“width: 100%;”><hr size=“1” color=“green” width=“100%”><a href=“”>South Africans

and it looks great in FF + IE, but problem is the first SA link is in a row of its own, which is ok - I don’t really mind - but was hoping for solution where all links are continuous.

good to hear that “noonope’s example shows how you could do it legally”! Altho’ later Stomme says “you can legally stuff an hr between two lists… just not directly inside a list”

Hi Stomme - thank you! I like your solution, but (1) is there a way to get a space above + below the line? If not, it’s ok I’ll go with noonnope’s + live with the first SA link in it own row.

for space above + below line - I tried margin + padding on .sa but it didn’t work.

(2) I left out margin-bottom 0.5em on ul (I did try playing with it to see if it would lower line but then it also gives bigger space below all ul’s):

#btmnav ul {margin:0 auto .5em} is now #btmnav ul {margin:0 auto}

(3) I left out /.clearfix {overflow:hidden}/ because I already have clearfix earlier in css

(4) I left out zoom:0 you added to #btmnav h3 because it doesn’t seem to do anything? (I use zoom instead of min-height)

(5) Do I need to keep it on the ul? You deleted #btmnav ul {zoom:1.0; position:relative} - so I did too! Paul would’ve placed the position:relative there but I’m too ignorant to know what it does! I’m positive he would’ve had a reason.

see latest:

http://www.greensmoothie.com/test/blend/1mst.php

thank you! - Val

5

Hi - thanks for lovely feedback!

Stomme - it’s not a single link, sorry my error I’ve corrected it now to multiple links.

>it’s a different kind of content from your other links

No it’s same content, except customers/suppliers are in SA not US. I could create a new navbox div for SA BUT I’ve run out of gif’s (only 7 in icon set, those 6 + home-gif) AND I can’t have so many navboxes - in wordpress pages, visitor has to scroll across them all before reaching Comments.

So I need to keep US + SA together in one navbox, separated by a line.

>markup that is a wierd hodge-podge of modern techniques atop a 1997 foundation.

wow! super-accurate detective work! It’s a Netscape Composer 4.7 page (downloaded Composer in yes 1997 + used ever since) that’s sandwiched between a top header and bottom nav which I’m doing in latest css/php to give me control of the old 1997-2010 pages from a few php files (btmnav.php, etc).

>since you’re talking about dropping the <hr> (a thing i tried to respect, because of… you know, “the client”

This client barely knows what she’s doing! I never knew li could have a class. That line at the bottom right of page “helped by Sitepoint Forums” means that sitepoint forums do all the css :slight_smile: it should read “with infinite gratitude to Sitepoint Forums”

I got your first posts last night, found that:

(1) Style works in FF but not in IE 6/7:

<ul>
<li><a href=“#”>text</a></li>
<hr style=“display:inline-block;” size=1 width=100% color=green>
<li><a href=“#”>South Africans</a></li>
</ul>

Starting a new list works in IE 6/7 but not in FF.

So combining the 2 (style + new list) works in both BUT line is too long, extends outside links on both R/L sides - does not acknowledge the 30px padding each side that the links have in:

#btmnav ul {padding:0 30px)

and which I tried to give hr, but it ignores padding in its style:

</ul>
<hr style=“display:inline-block; padding:0 30px;” size=1 width=100% color=green>
<ul>

I thought width=100% may be negating padding, but when I delete it, then FF does not display:inline-block.

I tried:
<hr style=“display:inline-block;” size=1 width=90% align=center color=green>

but it works only in IE, not FF, and anyway looks messy in IE because I’d prefer it the exact width of the links.

Then this morning woke up to dresden’s:

.rule {border-top:1px solid green; margin-top:10px; padding-top:8px}

which has one problem - it allows only one link for SA.

I tried display:inline-block and display:block in .rule to try keep all the SA links under the line - without using <li class=“rule”> for a few SA links after the first one.

I can’t use <li class=“rule”> after the first SA link because I don’t know what screen resolution + font-size the visitor is using.

see latest with .rule - pls be sure to switch to 800x600 resolution:

http://www.greensmoothie.com/test/blend/1mst.php

If I go back to what does work, combo style + new list, then does anyone know how to keep hr within the width of the links?

see latest with combo style + new list:

http://www.greensmoothie.com/test/blend/1mst2.php

thank you! - Val

6

To be clear:


<ul>
<li><a href="#">text</a></li>
<hr style="display:inline-block;" size=1 width=100% color=green>
<li><a href="#">South Africans</a></li>
</ul>

this is illegal and it doens’t matter that some browsers’ guesses show what you want.
As is this:


</ul>
<hr style="display:inline-block; padding:0 30px;" size=1 width=100% color=green>
<ul>

So you must completely abandon those code versions. Ul’s are very picky in who they can have as direct children.

noonope’s example shows how you could do it legally, BUT I would still go with two lists. Giving the second ul a border-top would cover all the links.
see last sentence

Buuut, if you MUST keep everything as one list…
you DO have the li’s floated left.

So, try this:


<ul>
	<li><a href="">Automatic Sprouters</a><span>|</span></li>
	<li><a href="">Mist Kits</a><span>|</span></li>
	<li><a href="">Sprouter Plans</a><span>|</span></li>
	<li><a href="">Sprouter Extras</a><span>|</span></li>
	<li><a href="">Hydroponic Units</a><span>|</span></li>
	<li><a href="">Water Ionizers</a><span>|</span></li>
	<li><a href="">Blenders</a><span>|</span></li>
	<li><a href="">Juicers</a><span>|</span></li>
	<li><a href="">Dehydrators</a><span>|</span></li>
	<li><a href="">Rave Diet Book + DVD</a><span>|</span></li>
	<li><a href="">Dan's Seeds</a></li>

	<li [b]class="clear rule"[/b]><a href="">South Africans - Shop Here for Appliances with SA Warranty</a><span>|</span></li>
	<li class="rule"><a href="">Organic Seeds in SA</a><span>|</span></li>
	<li class="rule"><a href="">test</a><span>|</span></li>
	<li class="rule"><a href="">test</a><span>|</span></li>
	<li [b]class="clear"[/b]><a href="">Assume this is new non-South African list stuff coming later</a><span>|</span></li>
	<li><a href="">test</a><span>|</span></li>
	<li><a href="">test</a><span>|</span></li>
	<li><a href="">test</a></li>
</ul>

So, I used your rule class name and another one “clear” so you could see what it was doing. Choose better names for the real site. But anyway:

#btmnav li.clear {
clear: left;
}
This should force a new line for the first SA link. The following floats will also stay down.

#btmnav li.rule {
the top border css;
}

Issue with that is if you have margin between your floats, the border won’t be contiguous, and if the li’s wrap to a new line, so will their borders. Which is why I would prefer a second ul. The first list is a “Overal List” and the second is “Specifically South African stuff”… no matter they’re both part of the #sellingstuff menu. Product menus do it all the time: you might have a list of power tools, but separate the drills from the screwdrivers. Those lists might be separated too: flat-heads from phillips.

I’m not saying take them out of the nav box and give them a whole separate icon. I’m saying, one box, two lists. Same icon, both lists are under Shop Here.

This will give you the newline automatically, will allow your border to stretch 100% (or, again, if you feel a line rule should be part of the content, you can legally stuff an hr between two lists… just not directly inside a list), and even gives you the opportunity to make any other stylistic changes (based on the second ul’s nametoken).

[b]*Edit I’d personally do something like this (except with fewer boxes, but I wanted it to look recognisable to you):
http://stommepoes.nl/Tests/valtest.html[/b]

7

Hi Paul - thank you for this feedback. I just can’t get it to display a thin line, the same thickness as in border:1px solid green.

I’ve tried everything on your link page, with inline-block added otherwise the 2 ul’s merge into one, e.g.

this displays no line (I also tried border-bottom):

.hrdiv{
width:100%;
border-top:thin green;
display:inline-block;
}
.hrdiv hr{display:none}/* hide hr */

</ul>
<div class=“hrdiv”><hr /></div>
<ul>

and this also no line:
.hrdiv{
width:100%;
border-top:thin green;
}

</ul>
<div class=“hrdiv”></div>
<ul>

This displays a thick green line:

.navbox hr {
width:100%;
color:green;
background:green;
border:none;
display:inline-block
}

</ul>
<hr />
<ul>

This displays a thin green line (what I need) for all browsers except Opera + IE8 which display it thick as above:

.navbox hr {display:inline-block}

</ul>
<hr size=“1” width=“100%” color=“green” />
<ul>

Is there a way to get “border-top:thin green;” to display a line? I thought of adding .navbox .hrdiv, but I figure if .hrdiv doesn’t display a line, then adding .navbox won’t work.

Yet your faq page shows “border-top:thin dashed red” as working!

thank you! - Val

8

Ah Paul, I give up at this point, I was doing that and it only displays a thick line. Not to worry, I’ll change it to Stomme’s when IE6 is dead. Thank you for all your feedback :slight_smile:

best, Val

9

Like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
hr {
    width:100&#37;;
    color:green;
    background:green;
    border:none;
    height:1px;
    margin:0;
}
</style>
</head>
<body>
<hr/>
</body>
</html>

You won’t be able to collapse the margins in IE7 and under though

10

Under the “Shop Here” menu, Opera + IE8 display the green line very thick (looks like 2px + 3px respectively) - the one that separates off “Shipped from South Africa” - whereas all other browsers display only 1px which I want.

see: http://www.greensmoothie.com/1gs/blend/1mst.php

So this works for all browsers except Opera + IE8:
<li>US links</li>
</ul>
<hr size=“1” width=“100%” color=“green”>
<ul>
<li>SA links</li>

I tried switching the line to the css, but it’s hopeless, all browsers except IE6-8 turn it into a black line:

.navbox hr {width:100%; color:1px solid green}

<li>US links</li>
</ul>
<hr>
<ul>
<li>SA links</li>

Stomme’s solution is the best one. Is there perhaps a little css I could add to stop IE6 from vaporizing the dropdowns? Something that begins * html so I know to delete it when IE6 is dead?

“cancel out changes on the dropdown lists” sounded so complex, but maybe it’s an easy cancel?

This is Stomme’s solution that vaporizes dropdowns in IE6:

#btmnav ul {list-style:none; margin:0 auto; padding:0; position:relative; width:90%;}
#btmnav .us {margin-bottom:10px; overflow:hidden}
#btmnav .sa {clear:both; padding-top:8px; border-top:1px solid green}

<ul class=“us”>
<li>US links</li>
</ul>
<ul class=“sa”>
<li>SA links</li>
</ul>

This is what currently displays the dropdowns in IE6:

#btmnav ul {list-style:none; margin:0; padding:0 30px; position:relative; zoom:1.0;}

thank you! - Val

11

but (1) is there a way to get a space above + below the line?

I’d pad the top of the .sa ul and either give it a top margin or the other one a bottom margin— the .5em thing I just threw on there but it can be whatever you want, to force a gap between the first list and the border of the second list. It doesn’t have to be in em’s, that’s just a habit of mine.

(2) I left out margin-bottom 0.5em on ul (I did try playing with it to see if it would lower line but then it also gives bigger space below all ul’s)

Yeah becuase if you hit #btmnav ul that’s all ul’s… you could give a class to the first one so you could be more specific and not hit all the others.

I’m not sure if a top margin on .sa would work. If it does, that’s better because .sa already has a name (the class “sa”), but top margins when floats are involved don’t always do what you expect: it can slide under the first one unless the ul is entirely enclosing its floated children.

(3) I left out /.clearfix {overflow:hidden}/ because I already have clearfix earlier in css

Yeah, I was assuming you were actually using the real clearfix, but in my example that was more code and I’m lazy so I used overflow: hidden, which in this case here does exactly the same thing (makes the box “see” all its floated children and expands accordingly). Use whatever you were using.

(4) I left out zoom:0 you added to #btmnav h3 because it doesn’t seem to do anything? (I use zoom instead of min-height)

I didn’t use zoom. What I did was move the content-less image from a div with an image inside it, to a background image on the h3. The image is 24px tall so to prevent cut-off I made the h3 to be “at least” 24px high. I wasn’t trying to trigger Haslayout there (I’m not sure if Haslayout is needed there anyway, I was just going for the image).

It’s something you could choose to do (move the images over to the h3’s) but since each h3 has a different image, they’d each need a class or a special parent or something so you could assign different images to different h3’s. I like the images as backgrounds better than in-content images, but, it’s not terribly important. I would prefer the alt text to be alt=“” because the image is just repeating the he text: if you listen to your page it’ll say “shop shop here” which sounds kinda silly.

(5) Do I need to keep it on the ul? You deleted #btmnav ul {zoom:1.0; position:relative} - so I did too! Paul would’ve placed the position:relative there but I’m too ignorant to know what it does! I’m positive he would’ve had a reason.

If Paul added zoom to the ul’s, then he was probably triggering Haslayout on the UL’s for IE. While I checked my code in IE, my code is not part of your entire page. And, because of how wide the border went initially, I thought I could make it look better by removing your padding and instead set the width of the ul’s to 90% (so, not quite as wide as the green div) and automargined it to center it.
It just so happens that if you keep the width setting, you don’t need the zoom: width and zoom both trigger Haslayout. If Paul used zoom, it’s because he didn’t want to set a width. Are you ok with how it looks width-wise in my version? If you like it, you can leave zoom out and let the width: 90% take care of IE.

I have no idea what he was doing with the position: relative… that may have even been for some other reason? In my code snippet, it wasn’t doing anything, and so was bloat, so I removed it. But it might have been fixing a bug somewhere else on your page. Adding it into my version wouldn’t change/hurt anything so, if you want you can leave it in.

How much of a space did you want?

I added this to my version:
<ul class=“shoplist”>


#btmnav .shoplist {
  margin-bottom: .5em;
  overflow: hidden; /*make non-IE browsers enclose floats*/
}

The width: 90% took care of IE, but if you want to add a bottom margin to the first list you’ll need to make it enclose floats in ALL browsers, so here I’m using overflow: hidden.

12

This rule in Mallory’s original would kill the drop down and probably kill the usefulness of the original clearfix techniques also.


.clearfix {
  overflow: hidden; /*change*/
}

The only reason to use the clearfix (original technique) is when you want visible overflow. If you apply overflow:hidden to it as well then you stop anything showing (such as your dropdowns) because they overflow the parents height and need to be visible.

If you make changes to your lists then make sure that you cancel out changes on the dropdown lists which can be targeted via #btmnav .navdrop ul li(etc…) and must follow any other new rules because likely they have the same weight.

13

Yes there’s a lot on the page and you probably wouldn’t have noticed them :slight_smile:

14

Hi Stomme - yes I’m sad that your solution vaporizes Paul’s dropdown links in IE 6/7 - when you hover over “Fun To Read” you see the dropdown green border but there’s no links inside, just white space.

I love your solution because it’s legal, and it works across doctypes. My google-winning pages (and all new pages) will be in wordpress (XHTML 1.0 Trans) and all the old <table>s pages are in HTML 4.01 Trans.

All pages, both old + new, share the same btmnav.php file for their navigation menu. So I have the double problem of writing for 2 doctypes and for IE6/7 + FF.

I just noticed that, because the line is a “fix” - making it 100% so the actual link in the <li> is forced to drop down to the next row - it doesn’t display perfectly in the new xhtml pages. The link that drops down (first row under hr) is very close to hr - whereas in old html it’s regular <li> space between rows.

Basically what you did is change this:

#btmnav ul { /position of links within boxes/
list-style:none;
margin:0;
padding:0 30px;
position:relative;
zoom:1.0;
}

to this:

#btmnav ul {list-style:none; margin:0 auto; padding:0; position:relative; width:90%;}

Do you have any idea why your new ul rule vaporizes the dropdowns in IE?

I’ve played with it for days! I tried adding .navbox in (#btmnav .navbox ul, #btmnav .navbox us/sa) because all Paul’s dropdowns target #btmnav .navbox. But it didn’t help.

If you’re tired of working on this, no problem. I’ll stick with the 100% hr and stop being such a perfectionist. Or I’ll go with:

.navbox hr {display:inline-block}
<li>…</li>
</ul>
<hr size=“1” width=“100%” color=“green”>
<ul>
<li>…

which is more legal + displays hr nicely between rows, but its width extends across entire box, doesn’t stay within the R/L position of links. Which is ok. It makes SA stand out (while hr width:100% makes SA stand out by having first SA link in its own row).

Or can you easily see why IE 6/7 is causing a problem? I don’t want to change any of Paul’s css.

Here’s 2 test pages - scroll down to “Fun to Read” in both (ignore errors on wordpress page)

HTML 4.01 Tr:
http://www.greensmoothie.com/test/blend/1mst.php

XHTML 1.0 Tr (wordpress):
http://www.greensmoothie.com/1gs

Please don’t spend any time on this if you don’t want to! If you can’t quickly + easily see what’s causing the problem in IE, then I’m happy to use hr width:100% OR hr display:block.

As it is, within a year or so we won’t have to write for 6/7 since IE is already on 8/9. Your solution works fine in 8, all doctypes.

best, Val

15

Honestly I didn’t see a single dropdown menu on the whole page. I was totally focussed on the links that needed the line. If they are further down the page, I didn’t scroll that far. So I didn’t feel like typing out 5 clearfix rules to make the rounded-corner div wrap floated li’s. (though I ended up making the ul’s do it for margins anyway)

16

Hi Stomme - thank you for taking the time to work on this! Sadly this solution stops Paul’s drop-downs from working.

I think at this point I’ll just go with noonnope’s:

<li style=“width:100%;”><hr size=1 width=100% color=green><a href=“”>South Africans…

because the hr displays perfectly in IE + FF (with space top + bottom) and I’m ok with the first link in its own line.

>I’m not sure if a top margin on .sa would work

It does if you use #btmnav as you did. I was using .navbox and that’s why I wrote: “I tried margin + padding on .sa but it didn’t work.”

I don’t understand, why does #btmnav work and .navbox doesn’t work when both ul’s are in navbox?

But in any event, I have to do this - /out all your lines/ because only then will Paul’s dropdowns work (under “Fun to Read”).

#btmnav ul { /position of links within boxes/
padding:0 30px;
list-style:none;
margin:0;
zoom:1.0;
position:relative;
/*
list-style:none;
width:90%;
padding:0;
margin:0 auto;
position:relative;/
}
/#btmnav .us {margin-bottom:10px; overflow:hidden}
#btmnav .sa {
clear: both;
padding-top:8px;
border-top:1px solid green;
}*/

Thanks for explaining the h3 min.height! So I’ve left it out. I saw the bg url but I may sometimes give an image an href.

Yes I did like the 90% so I (a) left zoom out on #btmnav ul and (b) wrote position:relative back in. But then discovered Paul’s dropdowns didn’t work!

I never knew that zoom not needed when there’s width, thanks.

thank you for your kind help :slight_smile: - Val

17

:lol:

this is straight from the #1 code. a little late are you :slight_smile: you know the answer to that, right: “the client wants it this way…” and no, those inline styles have no business in a final page. just here, for demo purpose. the OP can, at least, fit those in a proper manner in the final page… if a must :wink:

but, since you’re talking about dropping the <hr> (a thing i tried to respect, because of… you know, “the client” :wink: ), then yes, a simple border-top (and a padding, if a must) for the SA’s <li> will do.

the discussion was “how can it be done” not “how should it be done”. OPs should learn that!

18

I would separate South Africans from the list entirely (and being one item, they’re not a list themselves), because it’s a different kind of content from your other links.

I’d have SA’s as a centered p element with link inside and the p will have a border-top. Or you can have an hr inbetween the two if you feel hr is more appropriate.

It’s okay to have a links area with a few single items here and there that aren’t themselves in lists, because they are one item of a special type.

19

this could also work:

<li style=“width: 100%;”><hr size=“1” color=“green” width=“100%”><a href=“”>South Africans - Shop Here for Appliances with SA Warranty</a></li>

20

Well, using valid markup might be a good start.

The only thing that can come immediately after a <ul> or </li> is a <li> or </ul>. You can’t put a <hr> where you were, that’s not how UL’s are built! That HR either needs to go in a LI, or as suggested, you need to make two separate lists.

Though really that’s the LEAST of your problems on that page with the endless tables for nothing, presentational classes, clearfix nonsense, static scripting in the markup for no good reason, presentational images in the markup, nonsensical/non-existent headings, outdated doctype, HTML 3.2 in your HTML 4, and in general markup that is a wierd hodge-podge of modern techniques atop a 1997 foundation.