Css Tips And Tricks

**Paul O'B** · Mar 27, 2008 04:43

Really? Wth? But if there's another element after .right that clears:both then that will clear everyone right?

Not in IE if the next element is a float.

e.g.

Code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">

.left,.left2{
    float:left;
    width:200px;
    height:200px;
    background:red;
}
.left2{clear:both;}
.right{
    float:right;
    width:200px;
    height:400px;
    background:green;
    clear:both;
}


</style>
</head>

<body>
<div class="left">Left</div>
<div class="right">Right float won't clear in IE</div>
<div class="left2">Left</div>
</body>
</html>

If .left2 was not a float then it would clear as expected. IE just won't allow floats to clear each other when floated in opposite directions.

**Stomme poes** · Mar 27, 2008 07:01

I've even run into more clearing issues (though not important to my current design, so I'm still cool for now)! Still need to get these under my belt though for future reference.

So, I've implemented your version of definition lists. It's very nice. I did run into a little strangeness when I had 2 dd's for one dt. I ended up doing this (which I think will only work when the total widths of the two dd's together does not exceed the available space for any single dd)
(code changed for clarity)

Code:

<div>
  <h3>Thing 1</h3>
    <dl>
      <dt>Something:</dt>
       <dd>Yes it exists</dd>
    <dt>Something:</dt>
      <dd>Yes it exists</dd>
    <dt>Something:</dt>
      <dd>No</dd>
    <dt>Something:</dt>
      <dd>Yes it exists</dd>
    <dt>Something:</dt>
      <dd>Yes it exists</dd>
    <dt>Something:</dt>
      <dd>Yes it exists</dd>
    <dt>Something:</dt>
      <dd>Nope</dd>
    <dt>Something:</dt>
      <dd>Yes it exists</dd>
  </dl>
</div>
<div id="extra" class="clear">
  <h3>Extra costs (in €)</h3>
  <dl>
    <dt>Something:</dt>
      <dd class="wider">Explanation</dd>
    <dt>Something:</dt>
      <dd>30 <dd>per week</dd></dd>
    <dt>Something:</dt>
      <dd>40 <dd>per day</dd></dd>
    <dt>Something:</dt>
      <dd>Not available<dd>-</dd></dd>
    <dt>Something:</dt>
      <dd>Not available <dd>-</dd></dd>
    <dt>Something:</dt>
      <dd>30 <dd>per day, per person</dd></dd>
    <dt>Toeristenbelasting:</dt>
      <dd>0 <dd>-</dd></dd>
    <dt>Extra bed:</dt>
      <dd>present <dd>per day</dd></dd>
    <dt>Deposit:</dt>
      <dd class="wider">200,00</dd>
  </dl>
</div>

Code:

(divs are floated too to carry h3's and h4's)
dl {
  width: 30.5em;
  float: left;
  font-size: 1em;
  overflow: hidden;
  background-color: #0f0;<-- for testing
}
	dl dt {
	  font-weight: bold;
	  float: left;
	  width: 11.5em;
	  padding: 0 0 .5em .2em;
	  background-color: #f00;<--testing
 	  clear: both;
	} 
	 dl dd {
	  width: 16em;
	  float: left;
	  padding: .2em;
	  background-color: #ff0;<--testing
	  border: 1px solid #000;<--testing
	}
(didn't want to stick this in the HTML for certain reasons)
		* html dl dd {float: none;}
		*+html dl dd {float: none;}

	#extra dd {
	  margin-right: 1em;
	  background-color: #00f;<--testing
	  width: 6em;
	  white-space: nowrap; <--wanted to stop some wrapping
	  float: left;
	}
	#extra dd.wider {
	  width: 16em; <--first dd in this list doesn't have a partner, stops float wrapping
	}

I might have done it the long way, but it seems stable and works cross browser. I should have thought this was a possibility in the beginning. Because of the way the code is written, I've needed to add " - " for when the person filling out the form didn't choose anything (is a drop-down menu), because there now MUST be either a second nested dd OR the "wider" class to make sure it takes up enough room. I needed the float to apply to everyone, even IE.

Also only works when there in fact are no borders or background colours. The nested dd pops out of it's container (what I want) except in IE6 where it wraps the container... the net result looks the same when you can't see the container.

Still, I would think this would work for anyone else doing the same.

**Paul O'B** · Mar 27, 2008 07:30

Hi,

The last example you posted is invalid because you can't do this:

Code:

<dd>30
    <dd>per week</dd>
</dd>

You can't nest a lone DD element inside a DD without its surrounding DL structure. You'll have to change that inner DD to a div or some other element and style it appropriately.

You can nest things in a DD but you would need the whole structure.

e.g.

Code:

<dl>
    <dt>term</dt>
    <dd>
        <dl>
            <dt>test</dt>
            <dd>def</dd>
        </dl>
    </dd>
</dl>

Not sure it would make semantic sense though

**Stomme poes** · Mar 27, 2008 08:29

Ah, damn. But the story ends well: while at some point in my goofing around I needed to nest the dd's, my current CSS works with placing the two DD's back as siblings again : ) No HTML incest needed.
<dd>30 </dd><dd>per week</dd>

Seems still okay in the IEs.

**xtazi** · Apr 17, 2008 06:02

Wow great piece of informations. The first page is full of resources. Thanks webnauts.

**Alex** · May 7, 2008 17:57

Reporting Broken Link: http://nemesis1.f2o.org/links

Alex

**Paul O'B** · May 8, 2008 01:42

Originally Posted by alex

Reporting Broken Link: http://nemesis1.f2o.org/links

Thanks for reporting the broken link and if you can now tell me which post it's in I'll remove it

BTW you could have just pressed the report post button instead for the actual post

**Alex** · May 8, 2008 10:00

It's in the original post starting this thread. I believe it was actually the first link, too. Right near the top of the first page. Sorry I reported wrong, I just noticed it asked to report broken links and didn't know better. Speaking of which, where do you find the report button?

Edit: Found it.

**Paul O'B** · May 8, 2008 13:32

Speaking of which, where do you find the report button?

Look to the left of a post where the posters name is. Look at the bottom of that section (under the avatar). At the very bottom are some icons. The red triangle with the exclamation mark in the middle is the report button and you can report a post from there. It will also ask you for a reason and you can say link broken etc.

Read the guidelines for more information

**Alex** · May 8, 2008 15:52

Originally Posted by Paul O'B

Look to the left of a post where the posters name is. Look at the bottom of that section (under the avatar). At the very bottom are some icons. The red triangle with the exclamation mark in the middle is the report button and you can report a post from there. It will also ask you for a reason and you can say link broken etc.

Read the guidelines for more information

Originally Posted by Alex

Edit: Found it.

Thank you, Paul.

Alex

**thurrz** · Aug 27, 2008 00:03

These are very valuable resources for me
I can use it to improved my portfolio

thanks

**asif451** · Sep 25, 2008 20:35

this thread is full of information. Specially good stuff from "Stomme poes" and "Paul O'B".

**Stomme poes** · Sep 29, 2008 00:07

Sorry, I need to post this somewhere, it cost me waaaay too much time and I almost asked the forums what to do here.

I have a page/site. While menu lists don't have bullets, I decided to make some in-content lists look nice, I'd add some circle bullets. It looked nice.

Nothing in IE. Any IE.

So! To the googles!

The Googles only mentioned two things: Haslayout and floated lists. I had NEITHER problem.

The code was originally this:
(near the top with my basic reset, as I never ever ever want bullets on menus:)
ul, li {
list-style: none;
}

(I have since discovered that the li setting here which is done for IE is ONLY necessary when IE is in quirks mode which it never is in my case, so later this was changed to just the ul).

Code:

ul.capabilities {
  display: list-item;
  width: 15em;
  margin: 10px auto;
}
	ul.capabilities li {
	  list-style: circle;
	}

Okay, nobody was floated, and I was explicitly setting a new display for the ul which should have been inherited by the li's. I tried adding
width: 100% to the li's for haslayout. I tried moving display: list-item to the li. I tried float: none just in case this was somehow magically inherited from eaelier lists in IE. I tried adding padding which made all the Modern browers decide that all the list items had to share a single bullet-- in fact ANYTHING I said about the li's as far as colour, background colour, padding, set this nasty thing off.

I did a search here since it would be extra super embarrassing to post the question right after it had been asked somewhere. Well, nobody was asking about setting non-background-image bullets in non-floated lists, however I did run across a thread where someone said something about margins cutting the bullets off. Hmmmm, I thought, my bullets are outside by default. I hate the little indentation done with "inside" but I'll try it.

Worked. The auto-margins must be somehow cutting the bullets off? It shouldn't as this is a 15em-width list and the screen I'm looking at is frickin huge. But stuffing them inside the li's borders seemed to fix it (while adding padding to the left of the li did not).

Current working code:
ul {
list-style: none;
}
(way up at the top for most lists)

...

Code:

ul.capabilities {
  width: 15em;
  margin: 10px auto;
}
	ul.capabilities li {
	  display: list-item;
	  list-style: circle inside;
         width: 100%;
	}
* html ul.capabilities li {vertical-align: top;}

The width: 100% does stop the text indenting with "inside" in IE6 though it makes a problem with vertical aligning, so I kept it in there.
Hope this saves someone some hair-pulling time.

**Paul O'B** · Sep 29, 2008 01:21

Hi Stomme poes,

Thanks for posting your findings

IE has a lot of bugs with lists

With your method above using "inside" will mean that in Firefox the list text will wrap underneath the bullets which is not usually what you want. You have catered for IE by "applying" haslayout to the list which stops it wrapping underneath but in other browsers the text will wrap under the bullet and stop the alignment.

When using list that need to be centered I use another approach although it involves 1 line of extra html it is a 100% more reliable and easier to work width and doesn't need any hacks. Simpy apply the widths and centering to a wrapper element and then apply a left padding or margin to the ul in the nromal way to make space for the disc.

e.g.

Code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
ul {
    list-style:none
}
div.test {
    width:15em;
    margin:10px auto;
}
.test ul {
    list-style: circle;
    margin:0 0 0 16px;
}
* html ul li {
    vertical-align: middle;/* aligns the bullet in ie even though it shouldn't*/
}
</style>
</head>
<body>
<div class="test">
    <ul>
        <li>testing the list testing the list testing the list testing the list testing the list testing the list testing the list testing the list testing the list testing the list </li>
        <li>test</li>
        <li>test</li>
    </ul>
</div>
</body>
</html>

This leaves the list perfectly aligned and wraps very nicely and works cross browser.

**Stomme poes** · Sep 29, 2008 01:52

Hi Paul,

With your method above using "inside" will mean that in Firefox the list text will wrap underneath the bullets which is not usually what you want. You have catered for IE by "applying" haslayout to the list which stops it wrapping underneath but in other browsers the text will wrap under the bullet and stop the alignment.

Yesh, I saw this and at one point I did consider two things, an extra container (since it seemed the width and automargins of the list itself was hiding the bullets) or even the old-fashioned centering method (pos-rel left 50%, margin-left: -halfwidth).

/* aligns the bullet in ie even though it shouldn't*/

Yeah I thought it was pretty weird that, with my short width of 15em, I has some wrapping of the li's and IE6 put the bullets at the bottom (wth?) of the li. IE7 didn't so I figured, vertical-align.

*Edit, I notice you are not explicitly stating display: list-item with the li's. Isn't there a browser somewhere who cannot accept list-style on a li if somewhere earlier you've said All Ul's, list-style: none?

**Paul O'B** · Sep 29, 2008 02:12

Edit, I notice you are not explicitly stating display: list-item with the li's. Isn't there a browser somewhere who cannot accept list-style on a li if somewhere earlier you've said All Ul's, list-style: none?

You haven't changed the display property of the list so why should you need to re-instate it.

list-style and display are separate things.

However you are half right and IE6 will lose the numbering on lists if the element haslayout and adding display:list-item re-instates the numbering.

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
ul {
list-style:decimal
}
li {
width:100%;
display:list-item;/* without this IE6 displays all numbers as number 1.*/
}
</style>
</head>
<body>
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</body>
</html>

(However there are many other bugs in ie5.x with lists also which may be where you saw the fix before.)

**Stomme poes** · Sep 29, 2008 02:29

Ah ok. It might have been also on lists where the li was
display: block (where earlier li's were something else)
display: list-item;

because for instance when first menu is floated li's and later a non-floated-li menu comes along and cannot just have float: none.

I've only recently started caring because I never ever wanted bullets before, but the circle looks kinda nice in boring content lists, and keeps it cleaner-looking and easier to read when each item can wrap multi-line.
----
I used the wrapping div and it looks pretty good, Paul. I didn't try the old-fashioned centering technique though... I'm curious but laziness won out : )

*I had another post but moved it to Accessibility*

**estudiospiral** · Jan 23, 2009 23:45

i have this quick tip maybe someone doesnt knows it

--------------

when you add a style for INPUT
it automatically add the same style for the text and button,

lets say like this:
input {
background-color: #000;
width: 150px;
}

but what if you want to add different styles for a button and for the text input you can do this:

input[type="text"] {
background-color: #FFF;
width: 150px;
}

input[type="submit"] {
background-color: #999;
width: 100px;
}

this wont work with IE
but if you add the ie7 fix http://code.google.com/p/ie7-js/

**Stomme poes** · Jan 26, 2009 03:57

Um, you could also add classes on everyone (not nice, but works in IE6 without JS).

Usually my submits have a class anyway, so I've got

input.submit {
stuff;
}

works fine. For funky styled forms, I often let those with the better browsers get the cool forms, while IE6 users just get a regular form. No loss, both are functional. I don't think it's worth the extra load of JS for forms but others might have a large-enough IE5/6 audience that it's worth it for them to add the JS (or classes).

**TeddyP** · Jan 26, 2009 09:30

Thanks for these links - exactly what I have been looking for. I am completely self trained when it comes to website creation, and CSS knowledge is somethig I really strive to learn. I am sick of using tables.

**eagle132** · Feb 23, 2009 15:24

This thread is great

thanks!

**darsh123** · Mar 2, 2009 04:40

thanks fo the info ... really helpful !!!!

**spu** · Mar 2, 2009 16:15

The #17 link gives a malware warning:

17. Horizontal Menu using CSS

not sure if it's real or not... just an fyi.

**RyanReese** · Mar 2, 2009 16:21

Yea, after having to remove about 3/4ths of the styles from that error page so I can READ it gave me a page not found

.

**Paul O'B** · Mar 2, 2009 17:13

Originally Posted by spu

The #17 link gives a malware warning:

17. Horizontal Menu using CSS

not sure if it's real or not... just an fyi.

Link removed anyway - thanks

User Tag List

Thread: Css Tips And Tricks

Thread Tools

Display

Bookmarks

Bookmarks

Posting Permissions