ul and li Add Additional Space

[chaseman]

I'm working on a CSS desgin, I started with just div tags similar to this:

 

<div>
<div>
<ul>
<li>
</li>
</ul>
</div>
</div>

 

 

When I now add ul or li tags similar to this:

 

<div>
<ul>
<div>
<ul>
<li>
</li>
</ul>
</div>
</ul>
</div>

 

Then I get extra space added to the whole design, EVEN THOUGH I have this in the CSS:

 

* { margin: 0; padding: 0; }

 

 

I'm wondering why is it doing that?

[Pikachu2000]

It's hard to give an actual answer without actual code.

[cssfreakie]

First of all don't use those css hacks. target specific browsers by using conditional comments and use a reset.css (see sticky)

Now a LI has a standard indentation and list-style if you want to get rid of it, you need to set that, (most reset.css allready do that)

[chaseman]

Thanks I used the reset.css and it all made it tighter now.

 

I didn't know that * is considered a CSS hack, I thought it was legit, I'll have to read up on CSS more, by now I just learned it by doing.

[cssfreakie]

Thanks I used the reset.css and it all made it tighter now.

 

I didn't know that * is considered a CSS hack, I thought it was legit, I'll have to read up on CSS more, by now I just learned it by doing.

 

Well the * is to target IE7 and lower, so other browsers ignore it, but it's not a good practise to use css hacks like that, in my opninion. Better use conditional comments to target specific versions of IE.http://www.quirksmode.org/css/condcom.html

[SuperBlue]

Its a very bad idea to use conditional comments, especially since they specifically target IE, so don't unless you got really good reason. I.e. To make the site usable. Don't use it simply to add rounded corners in older browsers, its to much work on your part.

 

Supporting old browsers is quickly becoming a bad practice, especially now that new HTML and CSS features are gaining ground. I.e. Article, and section to mention a few.

 

Another good way to reset, is to simply do a * {/* Declarations here */ }, which is often better then these crazy reset files.

 

On the matter of styling lists, make sure you don't have overlapping tags in your source, and keep in mind that list items are displayed as list-item rather then block, this means that they may add an extra space when you have nested lists. I had to deal with this problem some months ago, and that was where i realized what the problem was.

[cssfreakie]

Its a very bad idea to use conditional comments, especially since they specifically target IE, so don't unless you got really good reason. I.e. To make the site usable. Don't use it simply to add rounded corners in older browsers, its to much work on your part.

 

Supporting old browsers is quickly becoming a bad practice, especially now that new HTML and CSS features are gaining ground. I.e. Article, and section to mention a few.

 

Another good way to reset, is to simply do a * {/* Declarations here */ }, which is often better then these crazy reset files.

 

On the matter of styling lists, make sure you don't have overlapping tags in your source, and keep in mind that list items are displayed as list-item rather then block, this means that they may add an extra space when you have nested lists. I had to deal with this problem some months ago, and that was where i realized what the problem was.

 

Well, i think it depends on who pays. If someone want's the website to look the same in all browsers it takes extra time, but that's what they pay for. And why use css hacks, if they only target older browsers (IE7 and lower) that's just extra stuff modern browsers don't need, although they will ignore it, it's the extra. As far as a reset.css. It's a starting point which you should adjust to your needs. But for most people around here, that have no idea what to do a reset.css is by far the quickest way to style a website as a clean slate. In the end it's just a matter of doing it your own way.

[chaseman]

What is defined as a hack? Is a hack part of the markup language CSS or not? That has confused me for the longest.

 

It's funny how you can do complicated stuff with CSS but the most simplest things are the most difficult to do, I hope this changes in the later versions.

 

I wonder how CSS 4 might be, is there a cinema trailer of it already? lol Or some preview?

 

To get back on topic, I too thing that a reset.css is a nice start for somebody who doesn't know CSS in and out.

[cssfreakie]

a hack is just a nifty trick to get certain results, in this case for specific browser versions.

Here the * will be ignored by other (modern)browsers, but IE 7 and lower interpret it anyways.

There are quite a few of these hacks, like an underscores, the holy hack, et cetera, but In my opinion this is exactly what conditional comments are for. I rather have a clean stylesheet. and make some extra ones, that are only loaded by browsers that sucks.

SO yeah they are part of the css practise in a way that they are used, but they are only meant to target specific versions and types of browsers. But this will be an ongoing  debate there are pro's and contra's and  you need to choose. Thanks goodness, Due to IE 9 which is only supported by vista and up, hopefully we don't have to worry about these things for much longer. (i hope)

[chaseman]

Ok that explains this whole thread and why the * hack didn't work for me since I was trying it in modern browsers.

 

And that those hacks are part of the markup languages has to do with the fact that CSS is still a language in development? I know that CSS exists for a much longer time, but it only caught up lately together with the marketing term web 2.0.

 

As you said the trend is going towards NOT supporting older browsers, the big players all decided that a long time ago, I hope this will continue this way too and all we have to do in the future is support the browser previous the newest release, meaning just one version back.

[cssfreakie]

no they are not part of the language, in a way that it can't be used for everything. But some browser interpret it, that's why some people use it.