Posts Tagged ‘css’

The Mystery of CSS Float Property

The Mystery of CSS Float Property « Smashing Magazine.

Leave it to Smashing Magazine.  Awesome ideas for common CSS challenges with the wonderful float property.

Columns. Mercy. When the simplest things are difficult.

First, I want thank this CSS guru for helping me with a web layout issue I was having. That quickly concluded a months long battle I was having with my sidebar here on this site. Seems it was to blame for an errant 300 or so pixel vertical space that was creeping into the main column of my layouts at odd times. Like between the first a second blog post on the main page. And again between the first and second poll question on the poll I placed today. Maybe I had a width overflowing somewhere and breaking something next to it. Still not sure what was happening, but it was happening on multiple browsers and absolutely positioning the sidebar was the desperate answer. Took that element out of the flow so it wouldn’t offend the other elements. Thanks, Blake. Enjoy the pizza.

Errors like this are bad PR. Especially on web design portfolio pages. Ouch. Turns out when I released my portfolio page last weekend it was messed up in IE. But I failed to test in IE. But I released it without. Stupid, stupid. My excuse is that my last few layouts have come out fine in IE so I was beginning to think I had outsmarted it. But alas. Lesson relearned.

At least this new iMac can run Windows and Mac so I will notice these things. Before, I was just using Safari and Firefox. Great for development, mediocre for real world testing since more than half of the world still doesn’t know what a good browser is. Or likely what a browser is at all. Even though they use them all day. Anyhow. I don’t know how my car works but I drive it every day somehow. Guess that’s comparable.

I wonder why no one told me. Not trying to spread the blame or anything. Guess that’s the state of my traffic. People who cringe (or laugh) and move on, and people who use good browsers. Hopefully more of the latter.

  • css
  • Comments Off

CSS margins study

CSS coding delivers more “WTF moments” than any other work activity I engage in these days.  I need to understand it better, specifically CSS margins and floats. Made some time today to study up.

I read and re-read the articles below. They are aging but speak to a time when the evil IE6 was even more prominent than it is years later in 2009.

General insights include:

  • Kill IE’s double margin bug with display:inline on a floated items.
  • When 2 adjacent elements’ margins meet, only the bigger margin is used.
  • If an item’s 2 opposite margins meet, they both go away (self-collapse)
  • Nested items without padding or border will cause the top and bottom margins of all to collapse. Left and right margins remain. Adding padding or border makes the margin come back.
  • Set overflow:hidden on columns to prevent object blow out in IE.
  • To make columns, float:left on one and float:right on the other.
  • Self clear an object (always clear floats) with the :after filter.  (Example below.)
  • Center an item by setting auto on left and right margins.  margin:0 auto.
  • In addition to auto margins, to center an item in IE, also use text-align:center on parent, then reset text-align in child, usually text-align:left.

Self clear example

.columns:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

Convert a list into a horizontal menu

Using background images instead of text.  Fixed width, left margins, using negative margin on UL to cancel first margin.

<ul class="menu">
<li><a href="#somewhere1" id="link1"><em>link 1</em></a></li>
<li><a href="#somewhere2" id="link2"><em>link 2</em></a></li>
<li><a href="#somewhere3" id="link3"><em>link 3</em></a></li>
</ul>

ul.menu {
margin:0 0 0 -20px;
float:left;
width:100%;
}
ul.menu li {
list-style-type:none;
display:inline;
float:left;
margin:0 0 0 20px;
}
ul.menu li a {
display:block;
height:50px;
background-color: #0f0;
}
ul.menu li a em {
display:none;
}
ul.menu li a#link1 {
width:100px;
background-image: url(link1.png);
}
ul.menu li a#link1:hover {
background-image: url(link1-over.png);
}
ul.menu li a#link2 {
width:110px;
background-image: url(link2.png);
}
ul.menu li a#link2:hover {
background-image: url(link2-over.png);
}
ul.menu li a#link3 {
width:120px;
background-image: url(link3.png);
}
ul.menu li a#link3:hover {
background-image: url(link3-over.png);
}

Return top