Reply
How to remove gap above UL?
Old 03-30-2007, 08:02 PM How to remove gap above UL?
artcoder's Avatar
Skilled Talker

Posts: 83
Location: United States
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.
artcoder is offline
Reply With Quote
View Public Profile Visit artcoder's homepage!
 
When You Register, These Ads Go Away!
Old 03-30-2007, 08:50 PM Re: How to remove gap above UL?
blue-dreamer's Avatar
Webmaster Talker

Posts: 708
Location: Middle England
You can't put at <ul> inside a <p> tag... try this...

<p>
<strong style="border: 1px solid blue; margin: 0; padding: 0;">Fruits</strong>
</p>

<ul style="margin: 0; padding: 0; border: 1px solid red;">
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
</ul>
blue-dreamer is offline
Reply With Quote
View Public Profile
 
Old 03-30-2007, 10:08 PM Re: How to remove gap above UL?
artcoder's Avatar
Skilled Talker

Posts: 83
Location: United States
Yep. That did the trick.
artcoder is offline
Reply With Quote
View Public Profile Visit artcoder's homepage!
 
Old 03-30-2007, 10:09 PM Re: How to remove gap above UL?
Kirtan's Avatar
Who Am I?

Posts: 377
Name: Venkat Raj
Location: Salem, South India
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.
__________________
All the Buddhas of all the ages have been telling you a very simple fact: Be -- don't try to become.
Kirtan is offline
Reply With Quote
View Public Profile Visit Kirtan's homepage!
 
Old 03-31-2007, 12:11 PM Re: How to remove gap above UL?
LadynRed's Avatar
Super Moderator

Posts: 6,553
Location: Tennessee
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 !
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
"Using or working with IE is like having to wear a 1970's polyester suit with pantyhose and a girdle, to work everyday"
Carolina Corvette Club
LadynRed is online now
Reply With Quote
View Public Profile
 
Old 03-31-2007, 12:38 PM Re: How to remove gap above UL?
artcoder's Avatar
Skilled Talker

Posts: 83
Location: United States
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.
artcoder is offline
Reply With Quote
View Public Profile Visit artcoder's homepage!
 
Old 03-31-2007, 09:31 PM Re: How to remove gap above UL?
Tom_M's Avatar
Ultra Talker

Posts: 251
Name: Tom Maurer
Location: Pennslvania, USA
Quote:
Originally Posted by LadynRed View Post
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.
Tom_M is offline
Reply With Quote
View Public Profile
 
Old 04-01-2007, 10:46 AM Re: How to remove gap above UL?
LadynRed's Avatar
Super Moderator

Posts: 6,553
Location: Tennessee
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.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
"Using or working with IE is like having to wear a 1970's polyester suit with pantyhose and a girdle, to work everyday"
Carolina Corvette Club
LadynRed is online now
Reply With Quote
View Public Profile
 
Reply     « Reply to How to remove gap above UL?
 

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

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




   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML

 


Page generated in 0.14823 seconds with 12 queries