Archive for the ‘CSS’ Category

CSS: Good article on Absolute, Relatative positioning

Wednesday, April 29th, 2009

Making the absolute, relative (from stopdesign.com). In short:

According to the CSS2 spec, an absolute-positioned element is positioned according to its containing block. Any element is considered “positioned” if it has a position value of relative, absolute, or fixed (anything other than static). “Static” is one of the possible values for the position property. It’s also the default value for any element if no other position is specified. Static basically means an element’s position is not modified, and the element will appear in the expected normal flow of the document in context with other sibling elements and containing blocks.

If an absolute-positioned element resides within no other containing block, (when no ancestor elements are positioned) it is placed relative to the page boundaries (called the initial containing block).

Posted in CSS | No Comments »

CSS: Remove gray border around links

Monday, April 20th, 2009 
a{
outline:none;
}

Source: Flepstudio

Posted in CSS | No Comments »

CSS: Rounded Border (radius), Firefox, WebKit, Standard

Friday, April 17th, 2009

Most modern browsers support rounder borders, but they all have their own syntax (standard coming).

Here is the code for some “tabs” elements:

.tab{
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
}
.bubble{
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}

Posted in CSS | No Comments »

Freemarker: Html Table odd or even rows with Freemarker

Thursday, April 9th, 2009

When iterating on a list, you can use the “_index” value to css-mark the odd or even rows on a table.

<table>
[#list docs as doc]
[#assign trCss = (doc_index % 2 == 0)?string("","odd")]
<tr class=”${trCss}”>
<td>some data</td>
</tr>
[/#list]
</table>

Posted in CSS, Freemarker | No Comments »

CSS: Weird margin-top CSS bug? I think?

Friday, February 27th, 2009

I having been hitting a weird and annoying CSS bug (I think)
HTML

  <div id="header">
    <div id="title">My Lawyer.com</div>
  </div>

CSS

#title{
  margin-top: 10px;
}

Then, somehow, the margin-top of 10px get assigned to the #header div?

Now, the weird thing, is that if I add any text (i.e &nbsp;) just before the #title div class, then, the margin-top get appropriately assign to the #title div???

Now, even weirder, same behavior on Firefox 3.0.1, Google Chrome, and Safari????

Here is another example

The Blue box should be just below
  <div style="margin-top:0px;background-color:blue;width:50px;height:50px">
    <div style="margin-top:20px;background-color:red;width:10px;height:10px">
    </div>
  </div>

The Blue box should be just below this text (but it is 20 px down) and the red box should be 20px down the blue box, but it is 0px.

Any help greatly appreciated. Easy to work around, but kind of annoying.

Posted in CSS, OpenWeb | 6 Comments »