Inline list width problem in Firefox

T

TM

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>
 
S

Steve Pugh

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>
Click to expand...

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
 
D

David Dorward

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).
Click to expand...
<?xml version="1.0" encoding="utf-8" ?>
Click to expand...

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
 
T

TM

Thanks steve - point 2 is brilliant!
Excuse the missing legend tag - this was just a quick test.
 
T

Toby Inkster

Steve said:
1. Width doesn't apply to inline elements.
Click to expand...

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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Not sure why drop-down is not working. 2
Working on mobile css menu with plenty of frustration! 2
Dropdown menu in a fixed navbar 2
Need help with code on website (noob) 2
Horizontal menu bar header 2
Align img inside nav tabs section 5
I need help fixing my website 2
Help needed with code 5

Members online

No members online now.
Total: 29 (members: 0, guests: 29)
Robots: 653

Forum statistics

Threads
473,769
Messages
2,569,581
Members
45,057
Latest member
KetoBeezACVGummies

Latest Threads

Top