Solved

<li> in Netscape and Non IE browsers

Posted on 2003-12-03
16
325 Views
Last Modified: 2010-04-09
Hi,

On our website, when validating forms we display all the errors to the user one after the other using

<li>This is error one</li><br>
<li>This is error two</li><br>

we dont put the normal <ul> </ul> tags around the <li> tags as we dont want the lines to indent. This all works fine in IE, and the spacing between one line and the next is just the normal spacing for a <br>. However in netscape it appears like 2 <br> tags have been put it as the spacing between the two lines is massive.

Does anyone know how to get round this as this makes the pages look useless....

Thanks in advance

Al
0
Comment
Question by:higgsy
  • 5
  • 4
  • 2
  • +4
16 Comments
 
LVL 3

Accepted Solution

by:
mrh30 earned 500 total points
ID: 9866882
First off, your page is invalid HTML if you have <li> tags that aren't within some form of list.  This is the reason that Netscape has trouble with it.

To achieve the effect you desire, you need to create the list properly, and then apply style sheeting to sort the formatting out.  I can't remember off hand which one of the box attributes you need to set to be zero in order to stop the indenting, so I've included both.  You probably only need one of them.

<ul style="margin-left: 0px; padding-left: 0px">
<li>Item 1</li>
<li>Item 2</li>
</ul>
0
 
LVL 3

Expert Comment

by:daveroydunn
ID: 9867205
If you just remove the <br> tags you should find that there are no longer the extra spaces between the lines.
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 9867338
>>we dont want the lines to indent.

If you set the margin's on the list items as noted above - the visual result is:

This is error one
This is error two

At that point, then you may as well use the following to code the errors:

This is error one<br>
This is error two<br>

However, if the intent is to show the bullet's next to the list items, "but not have the normal indent of the bullets", than you need to adjust the margin property to suit your specific application:

<ul style="margin-left: 10px;">
<li>Item 1</li>
<li>Item 2</li>
</ul>

This gives you the bullets but without the normal indent.
0
 
LVL 3

Expert Comment

by:mrh30
ID: 9867502
Yep, that's true - hadn't actually ever tried it, was running on a bit of guesswork from the spec!
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 9867607
...Most of the spec's are guesswork themselves as well... it's still hit and miss :-)
0
 

Author Comment

by:higgsy
ID: 9868304
This doesnt seem to run true actually

ive noticed that margin-left is ignored by netscape, and padding-left is ignored by IE....

so what ive done is the following :

<ul style="padding-left: 10px; margin-left: 10px;">

it seems to work fine then in both browsers.......can anyone see any problem with this code???

Thanks

Al
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 9868399
Sorry, I missed your netscape comment... if you're targetting both browsers, than you need both attributes. (There's a lot of discussion pertaining to whether Netscape is confused on this - but that's the only solution at this point...)
0
 
LVL 4

Expert Comment

by:apprenti
ID: 9870897
Here's an article you might find useful:

http://www.alistapart.com/articles/taminglists/
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 9879021
You don't need the <li>

Use:

<span>&bull; item one</span><br />
<span>&bull; item two</span><br />

Displays the way you want in both browsers and it is valid HTML.  If you are going to try to solve a problem by hacking non-standard code; you cannot expect anything but IE to support the hack.

Cd&
0
 
LVL 11

Expert Comment

by:Zontar
ID: 9879069
> <span>&bull; item one</span><br />
> <span>&bull; item two</span><br />

> Displays the way you want in both browsers and it is valid HTML.

And it is also absolutely meaningless. HTML is a *structural* language. If your intent is for a set of items to be a list, use the proper HTML for a list structure, then style its appearance afterwards.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 9879227
Zontar,

Too begin with HTML is neither structural nor a language.  It is simple markup.  Any structure is at a document level and is dependent on interpretations of the DTD (specified of defaulted).

Based on the question higgsy is interested in the rendered presentation, not requirements of a list or the properties of a list.  Thus the application of a non-standard approach the is not cross-broswer compatible.  The solution of creating a correct structure with the UL is tecnically correct, but requires addition code.

Using spans satifies the rendering requirement, resolves cross-browser issues and is standards compliant.  So are you saying that this is not a solution because it must be solved with a valid list structure; or are you saying that you don't like span used in such circumstances?

If the objective is academic purity, then there are very few solutions available for the common probelms of web development.

higgsy,

The magin and padding attributes should render the same in current browser with a valid DOCTYPE, but you may find differences in rendering  between IE5, IE5.5, IE 6 (quircky mode) and IE 6(compliant mode).

Early builds of Netscrap 6, and Mozilla prior to version 1.3, may not render the tpadding correctly.  However, the differences for these earlier browsers is not worth any extra effort, and you should use what ever meets your needs for the browsers and browser versions you have to support.

Cd&
0
 
LVL 11

Expert Comment

by:Zontar
ID: 9879420
> HTML is neither structural nor a language.

You're wrong on the first count, and splitting hairs on the other. HTML is structural markup. It is not and was never intended to be used as a presentation language. And no, it's not a programming language, but it is a language. And if it is so simple, why do so many people appear not to be able to use it correctly?

> Any structure is at a document level and is dependent on interpretations of the DTD (specified of defaulted).

That's a ridiculous thing to say. It is not untrue, but it's misleading as hell -- you're attempting to provide an excuse to perpetuate the authoring of tag soup, rather than meaningful documents. Data has no meaning outside of its structure, so to speak of markup divorced from a DTD (even if it's only implied) or schema is a waste of time.

The importance of authoring well-structured documents becomes apparent when we consider non-PC devices and trying to extract semantically useful information from tag soup.

<span> has no use other than for applying presentation via CSS, it is semantically null, and this task can almost always be dome better by using meaningful inline elements (<strong>, <em>, etc).

<ul>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>

is a list.

<span>item</span><br>
<span>item</span><br>
<span>item</span><br>

is NOT a list. It's crap. It's static.

> If the objective is academic purity, then there are very few solutions available for the common probelms of web
> development.

Dismissing me as though I'm some sort of mindless zealot does nothing towards devising such solutions. Yes, we must sometimes compromise with what's actually supported in browsers. This does not mean that we have to contribute to the death-by-white-noise of the World Wide Web while doing so.

> when validating forms we display all the errors to the user one after the other

higgsgy's stated objective here is indeed to display a *list of errors*. Therefore the optimal solution is to use an unordered list with appropriate margin/padding styles:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>F00B4R!</title>

<style type="text/css">
  ul.errors  {margin-left:10px; padding-left:10px;}
</style>
</head>
<body>
<ul class="errors">
  <li>You screwed up this...</li>
  <li>And this...</li>
  <li>And this...</li>
  <li>And this...</li>
  <li>And this...</li>
  <li>And this...</li>
</ul>
</body>
</html>

Calling a tail a leg does not make it one.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 9882567
>>>Dismissing me as though I'm some sort of mindless zealot does nothing towards devising such solutions.

I'm not dismissing you as anything.  I don't see that you have sufficient standing for me to consider a debate with you.  I no longer spend much time on this site, because of this kind nonsense from "experts" who d not have a clue how the real world works on planet Earth.

Cd&
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 9883975
Cd&, that last statement is extremely pompous, arrogant and excessively intolerant. If that's what we can expect from your remarks here in the future, perhaps you should spend even less time on the site than you currently do.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 9884836
I have always posted pompous, arrogant, and intolerant comments in response to wannabes who chose to pick a fight instead of just proposing alternatives to what has already been posted.  At least I have the credentials on this site and in this TA to be arrogant about, unlike those who had to wait for the site to be dumbed down before they could compete.

Cd&

0
 
LVL 31

Expert Comment

by:seanpowell
ID: 9884885
Credentials mean little to me, and they certainly don't give anyone the right to be arrogant - which in my book, gives those credentials even less meaning. You seem overly pre-occupied with your standing - perhaps that's part of the problem :-)
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Make bootstrap pagination vertical 3 43
Page not loading properly 15 40
radio button value 3 47
Login area of a page 4 20
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now