CSS Tips from Mani

February 23rd, 2005 | 2 Comments | Posted in CSS

Last week Mani Sheriar of Sheriar Designs spoke to our class about separating content from style. She gave us a lot of wonderful tips on CSS design and I have written up some notes from her talk that you can find below.

Relatively Absolute – This is the article that made positioning "click" for Mani. After visiting the site, I found another article on floats that you may find useful.

PNG Transparency – Mani displayed Nomad Ecological Consulting; where she utilized PNG Transparency – I found a resource on how to use PNG files in IE. AListAPart also has an article on Cross-Browser Variable Opacity with PNG: A Real Solution. You can see the actual JavaScript that she used for the Nomad site here. Webfx also has an article on PNG Behavior. Main said the PNG Transparency script that has worked best thus far is as follows:

if (navigator.platform == &quot;Win32&quot; &amp;&amp; navigator.appName == &quot;Microsoft Internet Explorer&quot; &amp;&amp; window.attachEvent) {
window.attachEvent(&quot;onload&quot;, alphaBackgrounds);
}
function alphaBackgrounds(){
var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, '');
var itsAllGood = (rslt != null &amp;&amp; Number(rslt[1]) &gt;= 5.5);
for (i=0; i&lt;document.all.length; i++){
var bg = document.all[i].currentStyle.backgroundImage;
if (itsAllGood &amp;&amp; bg){
if (bg.match(/\.png/i) != null){
var mypng = bg.substring(5,bg.length-2);
document.all[i].style.filter = &quot;progid:DXImageTransform.Microsoft.AlphaImageLoader(src='&quot;+mypng+&quot;', sizingMethod='scale')&quot;;
document.all[i].style.backgroundImage = &quot;url('/assets/images/x.gif')&quot;;
}
       }
        }
        }

Resetting the padding and margins – Mani also discussed the trick for resetting margins and padding since browsers tend to have inconsistent settings. Here is the code that should be used at the top of your CSS file:


* {
margin:0;
padding:0;
}

Heading Images – Helping search engines index you site – The problem with having a heading image at the top of your web page is that search engines need text at the top of the page to properly index your site. Mani showed us a way to provide search engines with the needed text while still creating a beautiful design.

In the CSS code create an ID with the the background set as the image banner.


#logo2 {
width:745px;
height:149px;
margin:0;
padding:0;
position:absolute;
top:0;
left:0;
background:url(../images/logo.jpg) no-repeat top left;
}

Position the nested H1 tag off the page.


#logo h1 { /* hides H1 headings in browsers that support css so that only image is seen ... H1 headings will display in browsers not supporting CSS*/
        font-size:.01em;
        position:relative;
        left:-5000px;
        margin:0;
        padding:0;
        }

In the XHTML document enclose an h1 heading tag inside a div container that uses the above ID.

!important ignored by Internet Explorer

If you would like to add some CSS code that will be ignored by IE, use !important


 margin-left: 2.7em !important; (all browsers with the exception of Internet Explorer with have a 2.7em left margin.
margin-left: 2em (Internet Explorer will have a 2em left margin)

Commenting CSS – It’s important to use detailed comments in your CSS code.

Here are a few of the helpful sites that Mani mentioned or sent to me