Css Tips And Tricks

[Stomme poes]

Lessee, just ran into a browser default I was unaware of...

I had this code:
ul {
list-style: none;
}

later...

#account ul.bullets {
  text-align: center;
  padding-left: 22px;
}
	#account ul.bullets li {
	  display: list-item;
	  list-style-type: disc;
	  margin: .5em 0;
	}

So the ul's a block of course, and the li's are blocks and list-item, and the anonymous inline boxes inside the li's (the text) are centered.

In most browsers (Geckos, Opera, IE7 and below) the bullets were right next to the li's text. In Safari, Chrome, and, according to browsershots, IE8, they were way to the left.

Playing around with it, I now have this code:

#account ul.bullets {
  text-align: center;
  padding: 0 2px;
}
	#account ul.bullets li {
	  display: list-item;
	  list-style: inside disc;
	  margin: .5em 0;
	}

The defaults for Opera, Gecko and IE under 8 was list-style-position: inside, while Saffy-Chrome and IE8 were defaulting to "outside". Specifying the position (which I don't think I've ever done before) made everyone act the same (also if I set it to "outside" everyone then correctly set the bullets out to the far left side).

The IE bug where bullets are hidden doesn't show up here because the ul has no side margins.

[RyanReese]

This isn't a bug I think. People can correct me of course...

Browsers add the margin/padding to allow space for the bullets to appear. If you remove the side margins there is no place for it to appear. Since IE/FF use a different way of providing space it seems logical that if you zero out one of them, the browser won't show the bullets. I bet any version of IE would do that.

Just my 2cents (I'm probably off).

[Stomme poes]

This had nothing to do with margins or bullets not showing, merely their placement.

Correct, it is not a bug, but a browser default (like the default margins etc they have) which I was unaware of, and now am, and wanted to share. I did not know that Gecko Opera and IE6 and 7 were defaulted to list-style-position: inside while IE8, Saffy and Chrome were defaulted to list-style-position: outside (which is all it was).

*edit I should post screenshots... but they should be here on SP and not my server I think...

[Paul O'B]

I did not know that Gecko Opera and IE6 and 7 were defaulted to list-style-position: inside

They don't they all default to outside

What you are seeing is the browsers interpretation of where bullets should be placed which isn't explicitly defined. If the text is centered should the bullet be centred also? Some browsers think yes and some think no.

Setting the display to inside sets the bullet marker to behave as an inline element and then it stays with the text but the text wrapping will be different. If you try with lots of text you will see that the behaviour with inside is different to outside on those centred lists.

[Stomme poes]

I thought "outside" meant "outside the li element". In my screenshots, the red border and green background were added only to show where the li's were-- so I saw bullets inside the green and figured, that's "inside".

Dang I hate stretching the page with those large shots, but when I made them smaller they got so blurry you couldn't see what was going on.

but the text wrapping will be different. If you try with lots of text you will see that the behaviour with inside is different to outside on those centred lists.

Lemme guess, like inlines they'll wrap when they need to, meaning sometimes a bullet won't necessarily stay with its list item.

[Paul O'B]

inside and outside refer to the principal box.

outside The marker box is outside the principal block box. CSS 2.1 does not specify the precise location of the marker box. inside The marker box is the first inline box in the principal block box, after which the element's content flows. CSS 2.1 does not specify the precise location of the marker box.

like inlines they'll wrap when they need to, meaning sometimes a bullet won't necessarily stay with its list item.

Yes the text will wrap under the bullet at the end of each line and if the window is closed small enough the bullet and text also part company.

There are other anomalies like the one you see with Safari and if you have a list adjacent to a float you may lose the bullet under the float or at the side of the float.

Lists and bullets haven't really been that well implemented mainly because the specs are ambiguous at these points.

[RyanReese]

http://dev.moonhenge.net/bugs/ie6/ma...s_summary.html

Very very useful.

[Luki_be]

If you have a list of items which are just too long to display vertically or tabular data that you want to convert with css, you can divide them in columns.
How? By using negative margins without using any floats or relative positioning.

Here’s an example:

Col1

Access Key
1
2
3
4
5
6

Col2

Resulting action
Skip Navigation

Home

Laboratory

Tutorials

Templates

Accessibility

The result is to get col1 and col2 next to each other, nicely lined up.

You could use tables to display the list but it’s also possible with just Css, but without floats or relative positioning. The advantage is that you don't run into float bugs or/and having to use hacks for IE6.

Let's start first with the HTML:

<ul class="test">  
   <li class="col1 title">Access Key</li>  
   <li class="col1">1<li>  
   <li class="col1">2<li> 
   <li class="col1">3<li> 
   <li class="col1">4<li> 
   <li class="col1">5<li> 
   <li class="col1">6<li> 
   <li class="col2 top">Resulting action<li>  
   <li class="col2">Skip Navigation<li> 
   <li class="col2">Home<li>  
   <li class="col2">Laboratory<li>  
   <li class="col2">Tutorials<li>  
   <li class="col2">Templates<li>  
   <li class="col2">Accessibility<li>   
</ul>

The Css goes as follows:

I assume you already have reset the paddings and margins on your lists.

.test li {
line-height:1.5;
}
 
.col1{
margin-left: 1em;
}
 
.col2 {
margin-left:7em;
} 
 
.top {
margin-top:-11.5em; 
margin-bottom: 1em;
}
 
.title {
margin-bottom: 1em;
}

Let's go over it step by step:

Step 1: setting line-height

Setting a line-height on the li is needed because we’ll use that to calculate the height of the column in step 3.

.test {
line-height:1.5;
}

Step 2: Indenting col1 (depending on the layout) and making room for the second column
I guess this doesn’t need much explanation.

.col1{
margin-left: 1em;
}
 
.col2 {
margin-left:7em;
}

Step 3: pulling the second column in place and creating some space.
We pull the second column in place so everything lines up perfectly.
We do this by using negative margins.

.top {
margin-top:-11.5em; 
margin-bottom: 1em;
}

The value for the negative top margin is calculated as follows:
The number of items x line-height = height of col2.
This should gives us a negative value of 10.5em. (7 x 1.5)

But you'll notice that in our example it's 11.5em.
The reason for that is because of the vertical space i wanted to create between the first li of each col and the other li's.
Depending on your lay-out you may or not need it.

So, because .top has a bottom margin of 1em, you need to increase the negative margin by the same amount: 10.5em becomes 11.5em.

Setting the same vertical space between each li for col1 is also done with a bottom margin of 1em:

.title {
margin-bottom: 1em;
}

Checked in Opera, IE6,IE7,IE8, FF,Safari and Chrome.

End result

Have fun

[Rayzur]

The advantage is that you don't run into float bugs or/and having to use hacks for IE6.

Floats Rule!

I can do the same layout using floats without any running into any bugs or needing any hacks for IE.

By using a dl I can also do it without breaking the relationship between the column items.

Tested in Opera, IE6-8, FF,Safari (I assume Chrome works too)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Two Column DL</title>

<style type="text/css">
body {
    font-family: "Trebuchet MS", Arial, Helvetica, Tahoma, sans-serif;
    margin:0;
    padding:0;
    background: #2F0000;
    color: #F48222;
}
dl {
    overflow:hidden;/*contain child floats*/
    width:18em;
    margin:1em;
    padding:.5em;
    line-height:1.5em;
}
dt {
    float:left;
    clear:left;
    width:7em;
}
dd {
    float:left;
    width:10.5em;
    margin-left:.5em; 
}
.top {
    clear:none;
    margin-bottom:1em;
    font-weight:bold;
}
</style>

</head>
<body>

<dl>
    <dt class="top">Access Key</dt>
    <dd class="top">Resulting Action</dd>  
    
    <dt>1</dt>
    <dd>Skip Navigation</dd>    
    
    <dt>2</dt>
    <dd>Home</dd>    
    
    <dt>3</dt>
    <dd>Laboratory</dd>    
    
    <dt>4</dt>
    <dd>Tutorials</dd>  
    
    <dt>5</dt>
    <dd>Templates</dd>    
    
    <dt>6</dt>
    <dd>Accessibility</dd>
</dl>

</body>
</html>

[Paul O'B]

Seeing as this is a free-for-all now

Use an ordered list.

<!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 type="text/css">
body {
    font-family: "Trebuchet MS", Arial, Helvetica, Tahoma, sans-serif;
    margin:0;
    padding:0;
    background: #2F0000;
    color: #F48222;
}
ul.test {
    margin:10px;
    padding:0;
    list-style:none;
}
.test li.top {float:left;}
.test li h3 {
    font-size:100&#37;;
    width:10em;
    float:left;
}
.test ol {
    list-style:decimal;
    margin:10px 0;
    padding:0 0 0 2em;
    clear:both;
}
.test span {padding-left:8em;}
</style>
</head>
<body>
<ul class="test">
    <li class="top"><h3>Access Key</h3></li>
    <li><h3>Resulting action</h3>
        <ol>
            <li><span>Skip Navigation</span></li>
            <li><span>Home</span></li>
            <li><span>Laboratory</span></li>
            <li><span>Tutorials</span></li>
            <li><span>Templates</span></li>
            <li><span>Accessibility</span></li>
        </ol>
    </li>
</ul>
</body>
</html>

Although I think that a table is actually the most semantic element this time around as there are definitely two columns with headings

(Luki_be did you mean to post this in the tips section?)

[Rayzur]

Seeing as this is a free-for-all now

Well, he did say "Have Fun".

Although I think that a table is actually the most semantic element this time around as there are definitely two columns with headings

Nice use of the nested ol Paul. Yes, a table would probably be best suited here.

Three-Column-Inline-Layout

I don't think Luki likes floats.

[Luki_be]

@Rayzur: i don't have anything against floats
But i was thinking it came in handy for those who are against it lol.
And i know there are several different ways to do it lol

@Paul: indeed it was meant to show up in the tips section. Dunno what happened.

In short, the meaning was to 'prevent' using floats because many seem to have problems with it. Besides, i thought it was a nice way to show what one can achieve with just negative margins :-)

Can anybody here move this to the tips section?

[WillieO]

sorry this is replying to a 91 month old post but link 10 is broken

[Paul O'B]

Thanks Willie0 - link fixed now.

This thread really needs updating as it is quite old now.

[jannet1]

Ok this is a Tips and TRICKS thread, right?

Here's a fun trick to play on other web developers, if you get the chance. Open up their CSS file and add

b,strong { font-weight: normal; font-style: italic; }
i,em { font-weight: bold; font-style: normal; }
u { text-decoration: none; border-top: 1px solid blue; }

Tons of fun.

its not working with me.....what the fun in it?

[ralph.m]

its not working with me.....what the fun in it?

It makes bold appear italic, italic bold, and underlined text with a line over the top instead of below. Ha ... ha ... ahem.

[Kenneth_Da]

Radius Border

.content{
float:left;
width:250px;
border:1px solid #ccc;
-moz-border-radius:5px;
border-radius:5px;
-webkit-border-radius:5px;
}

Shadow

.content{
float:left;
height:100px;
background:#fff;
border:1px solid #ddd;
width:250px;
heigh:250px;
background:#fff;
box-shadow:3px 3px 3px #999;
-moz-box-shadow:3px 3px 3px #999;
-webkit-box-shadow: 3px 3px 3px #999;
}

[Paul O'B]

Radius Border
box-shadow:3px 3px 3px #999;
-moz-box-shadow:3px 3px 3px #999;
-webkit-box-shadow: 3px 3px 3px #999;
Shadow

Note that the real property and not the vendor extension should be last in sequence to avoid conflicts.

-moz-box-shadow:3px 3px 3px #999;
-webkit-box-shadow: 3px 3px 3px #999;
box-shadow:3px 3px 3px #999

[Kenneth_Da]

Note that the real property and not the vendor extension should be last in sequence to avoid conflicts.

-moz-box-shadow:3px 3px 3px #999;
-webkit-box-shadow: 3px 3px 3px #999;
box-shadow:3px 3px 3px #999

Oh, Thanks you

[RyanReese]

2. User Style Sheet Wizzard http://www.techdis.ac.uk/seven/wizards/user-style.html

26. Mark external links on your site (and others!) http://www.sitepoint.com/newsletter/viewissue.php?id=3&issue=60&format=html#6

13. Erlarger Button Menu with CSS - Overlapping the other elements: http://moronicbajebus.com/playground/cssplay/enlarger-button-menu/ This does not work in Internet Explorer.


​All not found.

[Paul O'B]

2. User Style Sheet Wizzard http://www.techdis.ac.uk/seven/wizards/user-style.html

26. Mark external links on your site (and others!) http://www.sitepoint.com/newsletter/viewissue.php?id=3&issue=60&format=html#6

13. Erlarger Button Menu with CSS - Overlapping the other elements: http://moronicbajebus.com/playground/cssplay/enlarger-button-menu/ This does not work in Internet Explorer.


​All not found.

Thanks Ryan - links removed.

[csspop]

Hey everybody,
I've learned a lot from the CSS community on-line, and now I'm visiting forums letting people now about a tool I created to give something back.

I used to use my own software to catalog my favourite CSS snippets I found across blogs and forums. Recently, I decided I'd upgrade it and open it up to the public as a web application. The site is called CSSPop.com and the premise is simple: find handy CSS snippets or submit your own.

I've designed it in a way that everyone can benefit: seekers can find beautiful CSS to use in their work and submitters can promote themselves and their skills.

My hope is that this will be a valuable extension for the CSS community, allowing more people to learn from example, showcase their work, and promote/advertise their skills.

Oh and to the moderators, if this post violates any forum rules please let me know -- or do as you wish with it :P.

Thanks All.

[Stomme poes]

This is like a CSS version of snipplr.com?

[belinotebookbeka]

hello, I'm new here and want to learn about css.
I have a problem with the css but I do not know how to remove it, the fault lies in my blog entitled <snip>Link deleted</snip> and if viewed by right-clicking the source code will be visible irritation at his css.

looks like this:
</script>
<style type="text/css">
.wf-inactive h1.post-title, .wf-syncopate-n4-loading h1.post-title, .wf-syncopate-n4-inactive h1.post-title, .wf-inactive h4, .wf-syncopate-n4-loading h4, .wf-syncopate-n4-inactive h4, .wf-inactive h1.post-title a, .wf-syncopate-n4-loading h1.post-title a, .wf-syncopate-n4-inactive h1.post-title a {
font-family: sans-serif;
}
</style>

is there someone who can show where the location code is not working should I delete?
Thanks for help.

[molona]

hello, I'm new here and want to learn about css.
I have a problem with the css but I do not know how to remove it, the fault lies in my blog entitled <snip>Link deleted</snip> and if viewed by right-clicking the source code will be visible irritation at his css.

looks like this:
</script>
<style type="text/css">
.wf-inactive h1.post-title, .wf-syncopate-n4-loading h1.post-title, .wf-syncopate-n4-inactive h1.post-title, .wf-inactive h4, .wf-syncopate-n4-loading h4, .wf-syncopate-n4-inactive h4, .wf-inactive h1.post-title a, .wf-syncopate-n4-loading h1.post-title a, .wf-syncopate-n4-inactive h1.post-title a {
font-family: sans-serif;
}
</style>

is there someone who can show where the location code is not working should I delete?
Thanks for help.

I have removed your link because it didn't provide much help and your question could not be answered, anyway. You need to be a bit more specific, and tell us what exactly doesn't work so we can have a look at it. Then, I will open a new thread and I may allow you to post the link (no keywords, please )