Layout: Removing wasted space?

started by Terakris on Jul 21, 2004 — RSS Feed

Terakris Terakris
Posts: 23

Hi guys,

Can you remove the space that is automaticly created with an unordered list, top & bottom of the list. I want it to sit flush with a line of text above, but still indented as normal. Ive tried some css styles but cant get rid of it.

Many thanks

Kris

Joe Gillespie Joe Gillespie
Posts: 528

You can give the list negative top and bottom margins, but it might only look right in the browser you are using at the time. Do you really need a list? You can get the same effect with plain text and everything will line-up the way you want it.

Baxter Baxter
Posts: 157

Bacause a list of items should be CODED as a list of items. Semantic markup and all that.

terakris, setting ul {margin-top:0} should probaby take care of it.

Joe Gillespie Joe Gillespie
Posts: 528

If the unordered list is a set of bullet points, as it often is, I prefer to not use the list mechanism. The content of the bullet points and the communication thereof is more important than symantics.

Baxter Baxter
Posts: 157

Why is that? if it's a bulleted list, then why not code it as such? You can always alter the bulleted list to suit yourself, but for text-browsers, screen readers and other non-typical-browser user agents, your list will still be construed as a list. What possible advantage could there be to NOT marking up a list as a list?

Actually, I've been on a kick lately discovering a bunch of specific use html tags like address and cite and such.

Joe Gillespie Joe Gillespie
Posts: 528

What possible advantage could there be to NOT marking up a list as a list?


If you want the behaviour of a 'document' then a list is the way to go. Some web pages are not 'documents' and don't need to be treated as such.

Baxter Baxter
Posts: 157

Ahh, that's where we disagree... all html files are documents. Do they not have a Document Type Declaration? Servers process them as documents, the w3c defines them as documents, how else would you define them?

Now whether you want a list to appear to be a list ON SCREEN is another matter.

Let me give you an example, based on a project I'm working on right now...

In the conception stage, the architecture of the site was outlined in, well, an outline -- a bulleted list, with several layers indicating main sections, sub-sections, and sub-sub sections... in other words, standard outline format.

That bulleted list (the actual file)  was saved as HTML and is currently being brought into the site as an include in several ways. Thanks to gazingus/suckerfish dropdowns, my bulleted list is the dropdown main nav.
using css to format it differently (but still without bullets) it also provides secondary nav on the left side of the page. And brought in with all it's bullets and indentations intact, it provides a full and complete sitemap.
Which means I've provided the architecture, navigation and sitemap all from one file. From conception to execution, that bulleted list has been the framework on which the whole site has been built, although other than the sitemap, no one would recognize it as a bulleted list.
Best of all, if css doesn't load, or if the viewer is visually impaired, or if the handheld doesn't display the way I expect a full browser to, the site is still clear and intuitive to navigate.

Or try this.. make two lists. One with proper semantic layout, and another with just a bunch of text separated by line breaks.
No styles, no formatting. Then view the page as text only or run it through a screen reader.

Joe Gillespie Joe Gillespie
Posts: 528

Or try this.. make two lists. One with proper semantic layout, and another with just a bunch of text separated by line breaks.  
No styles, no formatting. Then view the page as text only or run it through a screen reader.

I don't have a screen reader and neither do 99.99% of web surfers. Some sites have to be accessible to partially sighted surfers, for other sites, it makes no sense at all.

Communicating is about knowing who you are communicating with. You use a rifle not using a shotgun - hence 'target audience'. The method that you use for communicating is also not hampered by 'common denominator' issues. I've done sites with no text at all. They communicate by other means. They address the target audience. If someone outside the target audience drops in, it doesn't matter if they can't read it, they are totally irrelevant and the communication with the 'real' audience should not be compromised because of them.

Yes, it's okay to exclude people if they are just being nosey!

The W3C would like to reduce everything to simple algorithms that 'programmers' can get to grips with. It's like being in the army or conforming to a religion. I refuse to comply on the basis that I have a valid "artist's license"

Baxter Baxter
Posts: 157

Nobody's taking away your artistic license, Joe.

I guess my point is this:
Let the code do it's job well.  Each tag should serve a purpose, and each tag should be the best tag for the job.
That just ensures quality, and thanks to css and modern site design, doesn't have anything whatsoever to do with how the page is actually displayed. It only ensures a solid foundation on which to build your dream house.

And as far as "target audience" goes, for most commercial web designers, the target audience usually seems to be "as many warm bodies as we can convince to come to the site".
By some statistics, up to 10% of all web surfers are visually impaired TO SOME EXTENT. Then there's the folks who surf without stylesheets. Or turn images off. Those numbers are just going to grow as handheld/web phone use grows, and as world population(US, at least) ages.
There's movement afoot both in the US and UK (and probably elsewhere) to mandate sites must be accessible. Might as well start now, and maybe pick up some "target audience" we didn't know we had, right?
Finally, more and more clients have heard "accessible" and they're starting to demand it.

And if one lines of CSS makes a bulleted list display like a flat bunch of links, then why not?

ul, li {margin:0;list-style:none }


Joe Gillespie Joe Gillespie
Posts: 528

Baxter said:
Nobody's taking away your artistic license, Joe.

I guess my point is this:
Let the code do it's job well.  Each tag should serve a purpose, and each tag should be the best tag for the job.
That just ensures quality, and thanks to css and modern site design, doesn't have anything whatsoever to do with how the page is actually displayed. It only ensures a solid foundation on which to build your dream house.

There are several things more important than code. Firstly, the words. If you have the wrong words, then all the code in the world will not rescue them. Assuming you have the correct words, good use of graphic design can enhance and extend the meaning of them. It doesn't matter for a 'document' but then, as I said, all Web pages are not 'documents' (in the W3C sense). An ad for an expensive car is NOT the same as a scientific paper by any stretch of the imagination and shouldn't be treated as such.


And as far as "target audience" goes, for most commercial web designers, the target audience usually seems to be "as many warm bodies as we can convince to come to the site".

No, this is nonsense. If my site is for Mac software, it will only be of interest to people with Macs who need the funtionality of that particular software. Substitute any product or special interest you like in there. A target audience is about quality not quantity.


By some statistics, up to 10% of all web surfers are visually impaired TO SOME EXTENT.


It's a big jump from the use of screen readers to 'visually impaired to some extent'. I wear glasses for reading, so I suppose I'm part of that 10%. Having no experience of screen reading software, I can't image how it would read a list of bullet points that are or are not an unordered list. Would you care to explain?


Then there's the folks who surf without stylesheets. Or turn images off. Those numbers are just going to grow as handheld/web phone use grows, and as world population(US, at least) ages.

You are struggling here. What difference would that make to an unordered list against a column of sentences?


There's movement afoot both in the US and UK (and probably elsewhere) to mandate sites must be accessible. Might as well start now, and maybe pick up some "target audience" we didn't know we had, right?


I'm all for accessibility, but it must be appropriate to the audience. How can you make a photographer's portfolio 'accessible' to the blind - alt tags? How can you make a site about Leonardo's Mona Lisa accessible - alt="smiling woman'.

When the vocabulary is essentially visual and not language, all your 'document' rules go out the window.

How can you make any site that is only published in English accessible to someone in China? Do you really need to? It could be argued that you are discriminating against non-English speakers if you don't publish in every language. This is where the logic of 'accessibility' falls down - but RoboCop will still arrest you.


Finally, more and more clients have heard "accessible" and they're starting to demand it.

Good, but if I explain to a particular client that I can sell more of her product by compromising accessiblity and improving communication to people who are realistically potential customers, there's no contest.


And if one lines of CSS makes a bulleted list display like a flat bunch of links, then why not?

ul, li {margin:0;list-style:none }

That would provide a degree of formatting that might or might not do the job required. If it doesn't solve the problem in question, then it is the wrong answer regardless of how 'correct' you say it is.

That's all I'm saying if you have a good reason to bend or break the rules and understand the consequences, it is perfectly alright to do so. I'm not advocating throwing accessibility to the wind!

Baxter Baxter
Posts: 157

Joe, let me say, I'm not trying to start a war with you here, I respect your work, and your opinions, and truthfully, I don't think we're that far off from one another... I'm just placing a higher value on a well-formed document than you are.

And an HTML file IS a document, Always. How it displays may or may not APPEAR to be a document, but nevertheless, the user agent is calling a document. Anyway, onto the dialogue...

"There are several things more important than code."

Yes. To the end user, absolutely. I only suggest that GOOD code provides the best foundation to build on, and the best portability as your page moves (whether you intend for it to or not) from web to handheld, or print, or something else. Build a good foundation, that's what I'm saying.

"If you have the wrong words, then all the code in the world will not rescue them."

I've been paid for writing for more than 10 years now. You'll get no argument out of me on the importance of content.

"Assuming you have the correct words, good use of graphic design can enhance and extend the meaning of them. "

Again, you'll get no argument out of me. The design surrounding content can make or break it, and smart writers know it.

"An ad for an expensive car is NOT the same as a scientific paper by any stretch of the imagination and shouldn't be treated as such."

Again, you're right. But on the web, both ARE being served up as documents, and I think it's wise to make sure those are well-made documents. The end result will be very different, but either way, don't build on sand.

"A target audience is about quality not quantity."

Perhaps in your career it's been so (lucky dog), but in mine clients want the target audience and everyone else, too. They sure don't want to miss anyone if they can help it.

"It's a big jump from the use of screen readers to 'visually impaired to some extent'.... I can't image how it would read a list of bullet points that are or are not an unordered list."

It IS a big jump, but the point is, there could be A LOT of people out there on screen readers, text browsers, or blowing up the text sizes to obscene levels so they can read it easier (and blowing out the layout in the process), and well-formed pages handle  those eventualities as well as translate beautifully to print and mobile devices where your visual elements designed for the web will likely fail or not display well. The bulleted list provides a fail-safe if your css or images don't load. It's also VERY good for the search engine spiders, which just LOVE good semantic markup.
As for the screen readers and bulleted lists... simple... they read text as text, they read lists as lists. I believe it varies whether they pause between items or say "list item", but either way, they let people know.

"You are struggling here. What difference would that make to an unordered list against a column of sentences?"

Not struggling at all. If you mark up a list of items as a list of items, then every user agent will know what to do with them, even if it can't or won't display your visual elements.

"How can you make a photographer's portfolio 'accessible' to the blind - alt tags?"

I won't pretend to be an accessibility guru. To be honest, I think a lot of the accessibility stuff being thrown around is wishful thinking, for some of the same reasons you point out. But what I do care about is optimizing the sites for search spiders, and having optimium control over the code for my css. Good markup wins hands down on those fronts. The same rules that make things accessible generally just make it good code. Usually.

"When the vocabulary is essentially visual and not language, all your 'document' rules go out the window."

Not at all. There's some misunderstanding somewhere to make that argument.

"How can you make any site that is only published in English accessible to someone in China? "

You can't, but that was never my point anyway.

"Good, but if I explain to a particular client that I can sell more of her product by compromising accessiblity and improving communication to people who are realistically potential customers, there's no contest."

But Joe, why make the compromise at all? You don't have to.

"If it doesn't solve the problem in question, then it is the wrong answer regardless of how 'correct' you say it is. "

Agreed. But if that's not it, it's mighty close. Maybe margins need to be 1px, maybe you want padding on each list item and background colors to create faux rollovers... without seeing the page, I can't really say... but that one line is enough to make a bulleted list display like flat text links.

"If you have a good reason to bend or break the rules and understand the consequences, it is perfectly alright to do so. "

Oh, I'm a huge rule-breaker myself. But for lists of items, I see a lot of advantages to using the proper markup, and absolutely no advantage to using any old code.


Again, I hope this all doesn't come across as some sort of flamefest. I see it as an interesting dialogue between two people who respect one another's opinions, and I hope it comes across that way to you as well. And I'm NOT one of those people that runs around saying, "This page doesn't validate, therefore it sucks."

Joe Gillespie Joe Gillespie
Posts: 528

I love a good argument.

;D It makes for entertaining reading too if it doesn't get out of hand.

:o I like to play devil's advocate too.

Some people work in advertising.

Some people work as clients.

Does this column of discrete thoughts need to be an unordered list?

Terakris Terakris
Posts: 23

blimey, what have i started! :o

The only reason i was going to use <LI> was that some of the lines are a bit long and go over 2 lines, so when they wrap around they dont line up with the start text, but under the bullet point... which i dont like the look of.

I tried the margin trick but the bullet points then vanished, so i made it just for the top & bottom margins to be 5px which moved it just enough away from the text to be clear, but not enough to look out of place (which i think the <LI> sometimes does).

many thanks peps! ;D

<edit> oh, BTW, is it possible to make the bullets one colour and the text another, without setting the text colour on the UL to make the bullets, say blue and then puting a span around the text to make it say black? </edit>

Joe Gillespie Joe Gillespie
Posts: 528

There's an article about styling forms here

http://www.wpdfd.com/editorial/basics/cssbasics5.html

which shows how to add custom bullets either globally or individually. I really don't like the default ones!

Terakris Terakris
Posts: 23

Result, that will do me nicely! Good man!  ;D

You must login to reply