|
Posted by Steve Pugh on 04/25/06 13:08
tommccourt@gmail.com 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
Navigation:
[Reply to this message]
|