Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Inline list width problem in Firefox

Reply
Thread Tools

Inline list width problem in Firefox

 
 
TM
Guest
Posts: n/a
 
      04-25-2006
Hi People,

Weird problem I can't figure out. I have inline lists that work well in
IE - but in FF there are small spaces between the elements, and the
width is not applied (the li).

Can anyone shed any light on this?

Thanks!

Code:

<?xml version="1.0" encoding="utf-8" ?>
<!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" xml:lang="en" lang="en">
<head>
<title>Title</title>
<style type="text/css">
fieldset {
background: #def;
text-align: right;
border: 0;
padding: 0;
margin: 0;
}
dl {
margin: 0;
padding: 0;
display: inline;
}
dt {
margin: 0;
padding: 0;
background: #fed;
display: inline;
height: 40px;
}
dd {
margin: 0;
padding: 0;
background: #abc;
display: inline;
height: 40px;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
display: inline;
}
li {
margin: 0;
padding: 0;
background: #cba;
width: 150px;
display: inline;
border: solid 1px #000;
}
</style>
</head>
<body>

<fieldset>

<dl>
<dt>term</dt>
<dd>definition</dd>
<dd class="submit">submit</dd>
</dl>
<input type="button" class="submit" />
</fieldset>

<fieldset>

<ul>
<li>label</li>
<li>input</li>
<li>button</li>
</ul>

<input type="button" class="submit" />

</fieldset>
</body>
</html>

 
Reply With Quote
 
 
 
 
Steve Pugh
Guest
Posts: n/a
 
      04-25-2006
http://www.velocityreviews.com/forums/(E-Mail Removed) wrote:

> Weird problem I can't figure out. I have inline lists that work well in
> IE - but in FF there are small spaces between the elements, and the
> width is not applied (the li).
>
> <?xml version="1.0" encoding="utf-8" ?>
> <!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" xml:lang="en" lang="en">
> <head>
> <title>Title</title>
> <style type="text/css">
> fieldset {
> background: #def;
> text-align: right;
> border: 0;
> padding: 0;
> margin: 0;
> }
> dl {
> margin: 0;
> padding: 0;
> display: inline;
> }
> dt {
> margin: 0;
> padding: 0;
> background: #fed;
> display: inline;
> height: 40px;
> }
> dd {
> margin: 0;
> padding: 0;
> background: #abc;
> display: inline;
> height: 40px;
> }
> ul {
> margin: 0;
> padding: 0;
> list-style-type: none;
> display: inline;
> }
> li {
> margin: 0;
> padding: 0;
> background: #cba;
> width: 150px;
> display: inline;
> border: solid 1px #000;
> }
> </style>
> </head>
> <body>
>
> <fieldset>
>
> <dl>
> <dt>term</dt>
> <dd>definition</dd>
> <dd class="submit">submit</dd>
> </dl>
> <input type="button" class="submit" />
> </fieldset>
>
> <fieldset>
>
> <ul>
> <li>label</li>
> <li>input</li>
> <li>button</li>
> </ul>
>
> <input type="button" class="submit" />
>
> </fieldset>
> </body>
> </html>


1. Width doesn't apply to inline elements.

2. You have white space between your li elements. As you've made these
elements inline this is the same as white space between b elements and
you'd expect gaps between <b>one</b> <b>two</b> wouldn't you?

3. Your fieldsets are missing the mandatory legend element.

4. The XML declaration before you doctype will trigger quirks mode in
IE.

5. Why <input type="button" class="submit" /> instead of <input
type="submit" /> ?

Steve

 
Reply With Quote
 
 
 
 
David Dorward
Guest
Posts: n/a
 
      04-25-2006
(E-Mail Removed) wrote:

> Weird problem I can't figure out. I have inline lists that work well in
> IE - but in FF there are small spaces between the elements, and the
> width is not applied (the li).


> <?xml version="1.0" encoding="utf-8" ?>


Your use of an XML prolog (which might[1] be forbidden in documents
served as text/html, which you need to do to get IE to cope with XHTML)
triggers Quirks mode in IE.

In Quirks mode, IE gets a number of things about CSS wrong
(intentionally). One of these is that is applies the width property to
elements which are displaying inline (which the CSS 2 spec forbids).

If you need to set a width on an element and have it horizontally next
to another element, then floats are usually the solution.

[1] The spec is very badly written so it is difficult to tell

 
Reply With Quote
 
TM
Guest
Posts: n/a
 
      04-25-2006
Thanks steve - point 2 is brilliant!
Excuse the missing legend tag - this was just a quick test.

 
Reply With Quote
 
Toby Inkster
Guest
Posts: n/a
 
      04-25-2006
Steve Pugh wrote:

> 1. Width doesn't apply to inline elements.


True, but it does apply to inline-block, which is supported by IE, Opera
and Safari; and to "-moz-inline-box" which is Mozilla's experimental
implementation of the same thing.

Try:

element {
display: inline;
display: -moz-inline-box;
display: inline-block;
}

That way a browser will choose the last display property it supports; and
most will end up with inline-block. Then you'll have an element that
mostly behaves like it's inline, but with working "height" and "width"
properties.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact

 
Reply With Quote
 
hipik hipik is offline
Junior Member
Join Date: Feb 2012
Posts: 1
 
      02-23-2012
Maybe your list-style-position is set to inside.
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Drop Down List Border Width vs Text Box Border Width Coder ASP .Net 1 06-24-2006 01:27 PM
Textbox width scaling to width of data not width of page? AndrewF ASP .Net 1 10-10-2005 04:38 PM
JComboBox width, dropdown list width Xu Java 11 07-15-2005 11:54 PM
CSS min-width, max-width, and min-height with display:inline Lois HTML 1 12-27-2004 03:03 AM
inline or not to inline in C++ Abhi C++ 2 07-03-2003 12:07 AM



Advertisments