How to remove gap above UL?

**artcoder** · 03-30-2007, 08:02 PM

See this gap between the blue-border and the red-border:
http://www.gupdesigns.com/temp/lists.html

You can only see the gap in Firefox 2.0. IE7 behaved as I wanted for a change.

How do I get rid of this gap? I have put padding and margin zero on everything already.

**blue-dreamer** · 03-30-2007, 08:50 PM

You can't put at <ul> inside a tag... try this...


Fruits


<ul style="margin: 0; padding: 0; border: 1px solid red;">
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
</ul>

**artcoder** · 03-30-2007, 10:08 PM

Yep. That did the trick.

**Kirtan** · 03-30-2007, 10:09 PM

Blue Dreamer is right. I can also see partial bullets in FF 2.0. so you have to use list-style-type:none;

It is better to use embedded styles than inline styles (unless you want to override) at dev. stage and then port it to external style sheet in live site.

**LadynRed** · 03-31-2007, 12:11 PM

Quote:

It is better to use embedded styles than inline styles (unless you want to override) at dev. stage and then port it to external style sheet in live site.

Why ??? I don't see any point in making double work for yourself. Use an editor with a live preview and you don't need to do such things. And I'm NOT talking about Dreamweaver !

**artcoder** · 03-31-2007, 12:38 PM

I mostly use CSS in an external CSS file so that they can apply to multiple HTMLs. I only used inline styles here in this contrived example so that it would be easier for you all to debug when you do a "view-source" on your browser. That way I saved you the time of having to look through two files (html and css).

The example above was only for debugging purpose and is not how I would do it for production.

**Tom_M** · 03-31-2007, 09:31 PM

Quote:

Originally Posted by LadynRed

And I'm NOT talking about Dreamweaver !

Which is why I use local Apache to serve up my files. Just save and refresh. And with a little advanced planning with your style sheets, and there is very little need for inline styles. They kinda defeat the purpose of style sheets really.

**LadynRed** · 04-01-2007, 10:46 AM

Quote:

That way I saved you the time of having to look through two files (html and css).

With the Web Developer and Firebug extensions, I don't need to look thru files, I can see html and CSS code live while I'm on any page .. AND I can make changes to the CSS dynamically to help debug a problem. It's temporary, but I can see what any change does immediately, then I can make the changes in the actual file.