Biography 

Stephanie Sullivan 
Web Developer, Trainer, Consultant 

Advanced CSS  Founder ­ W3Conversions/VioletSky Design 
Consultant & contractor for XHTML/CSS development 
Stephanie Sullivan Partner ­ CommunityMX.com 
Author ­ DW MX 2004 Magic 
Contributing Author ­ MX Developer’s Journal, 
Macromedia’s DevNet Center, and other web sites 
Member ­ DW Task Force for WaSP 

Ideas in motion.

Overview  Overview 

§Absolute Positioning VS Floating  §Using images for negative space 
§Clearing Floats 
§Multiple backgrounds & wrappers 
§Faux columns 
§Using Negative Margins 
§Descendant Selector tricks 
§Opacity  §Separating CSS into separate sheets & 
§Splitting images for reuse  directories 

§Common bugs and how to swat them 

Quick Review  Quick Review 

§  What is the Box Model?  §  What is an inline or block element? 

margin  border  §  What is the “flow of the document?” 

§  What is positioning?

Text within 

padding 

1 
Quick Review  Three Column Layout 

§  How do you write efficient CSS?  §  Basic 3 column layout 
–  Class vs. ID 
–  Avoiding classitis using type and descendant selectors  header 
–  Using shorthand 

§  What is a descendant selector?  Col1  Col2  Col3 

–  #nav a:link 
–  #content .pod h1 
–  ul ul li 

Add the Footer  Positioning 

§  How should footer be added?  §  Demonstration of Absolute vs Relative Positioning 
–  Add content 
–  Increase text size 

footer 

Making it Flow  Real World Examples ­ PopStick 

§  Swap style sheet  §  Faux columns, opacity & multiple wrappers

§  Faux columns 

§  Float order 

§  Clearing floats 

§  Using negative space 

§  Descendant selectors on the body element 

2 
Real World Examples ­ PopStick  Multiple Wrappers ­ XHTML 
<div id="mostOuter"> 

§  Faux columns, opacity & multiple wrappers  <div id="outerBox"> 

<div id="boxContainer"> 

<div>Content of column one</div> 

<div>Content of column two</div> 

<div>Content of column three</div> 

<br class=“brclear” /> 

</div> 

</div> 

<br class=“brclear” /> 

</div> 

Multiple Wrappers ­ CSS  Opacity ­ CSS 
#mostOuter {  #mostOuter { 
background: #FFF url(assets/most_outer.gif) repeat­y left top; /* the narrow 
lines and boxes */  background: #FFF url(assets/most_outer.gif) repeat­y left top; 
/* the narrow lines and boxes */ 
margin­top: 25px; 

}  margin­top: 25px; 
#outerBox {  position: relative; /* forces the moz opacity to work */ 
background: url(assets/outer_box.gif) no­repeat left top; /* Shows the thicker 
grey bars */ 
filter: alpha(opacity=80); /* IE opacity */ 

position:relative;  ­moz­opacity: 0.80; /* mozilla opacity */ 
} 
opacity: 0.8; /* CSS3 opacity */ } 
#boxContainer { 

width: 620px;  /* forces the proprietary alpha filter to work in IE \*/ 
}  * html #mostOuter { 
#boxContainer div { 
height: 1% 
float: left; 

width: 165px;  } 
padding: 3px 0 10px 15px;  /* end hack */ 
margin: 0 10px 0 0; 

} 

Real World Examples ­ Anteo  Real World Examples ­ Anteo 

§  Multiple wrappers, sIFR & split backgrounds  §  Multiple wrappers 

Rollovers

Left side  Right side 

3 
Multiple Wrappers  Real World Examples ­ Anteo 
<div id=”navwrap"> 

<div id=”nav">  §  sIFR 
<ul>  –  Use any font ­ even when only on your machine 
<li id=“primalnk”><a href=“#”>link one</a></li>  –  Uses JavaScript and Flash ­ falls back to pure text/CSS 
<li id=“cooplnk”><a href=“#”>link two</a></li> 
–  Create Flash swf of a dynamic alphabet 
<li id=“areelnk”><a href=“#”>link three</a></li> 
–  Insert JavaScript, CSS and tune 
</ul> 

<br class=“brclear” /> 

</div> 
Sari Medium ­ sIFR 
</div> 

Helvetica ­ CSS 

Real World Examples ­ Anteo  Split Backgrounds 
<div id=”content"> 
§  Split backgrounds  <div id=”redpod"> <!­­ places colored top ­­> 

<div id=”pod"> <!­­ used on every pod ­­> 

<h1>sIFRized header</h1> 

tops  <p>Content of the pod</p> 

<br class=“brclear” /> 

</div> <!­­ closes pod ­­> 

</div> <!­­ closes redpod ­­> 
Common bottoms  </div> <!­­ closes content ­­> 

Real World Examples ­ FlexRight  Local CSS 

§  Local CSS, dependant selectors and AP divs 
§  Site’s CSS is broken into two pages 
–  flex.css (main structure and all universal selectors) 
–  local.css (placed in individual directories ­ color only) 

§  KSPope.com

4 
Dependant Selectors (on Body Element)  Dependant Selectors (on Body Element) 

§  Create two or three columns  §  Navigation/Site section indicator (you are here) 
<body class=“two”> 
<body id=“employer” class=“two”> 
#faux { 
background: url(images/divider.gif) repeat­y 498px 0px;  body#employer #employerlnk a { 
margin: 25px 0;  /*selectors for button */ 
}  } 
body.two #faux { 
background: url(none); 
}  §  Pay attention to specificity 
body.two #callout {  –  #about .about a 
display:none;  –  body#aboutpg #nav li#aboutlnk a 
} 

§  There are many creative, powerful uses for 
descendant selectors 

Absolutely Positioned (AP) divs  Common Bugs and Coding Issues 

§  AP elements 
–  should be used sparingly and appropriately 
§  Is it really a bug? 
–  should not contain resizable content like text 
§  Use Tag selector & CSS Styles panel 
–  should not be routinely styled inline (DW layers) 
–  are positioned within the last positioned parent (relative) 
–  Click into element and select it with the tag selector 
–  View the properties and rules panes of the CSS panel 
for a value farther up the cascade that overrides your 
desired outcome (hover to view specificity) 

§  Navigation bar  §  Validate your HTML and CSS to verify they are to 
–  Dual wrappers for “end caps” 
standards with no errors 
–  grey color between as background color  –  It’s simpler to code to standards and hack as needed 
–  logo placed over the bar as an AP image  for IE 

Ways to Debug  Most Common Bugs 

§  IE ­ Float Drop due to 3px bug or doubling margins (star 
§  Use div visualization feature  filter) 
–  Place background colors on each div 
§  List white space, and other unaccounted for white space 
–  Show box model  differences (strip white space ­ tags touching) 
§  Use individual browser extensions to visualize  §  IE ­ requires a container to have dimensions/layout (Holly 
–  Firefox ­­ Chris Pederick’s Web Developer’s Toolbar  hack) ­­ http://positioniseverything.net for IE PC info 
–  Internet Explorer ­­ Developer Toolbar (beta)  §  IE Mac ­ various issues ­ many relating to dimensions (tan 
–  Safari ­  hack) ­­ http://www.l­c­n.com for IE Mac info 

§  Mozilla­based ­ issue with margin collapse ­ protruding 
§  Create a test case with only the basic divs 
from a container causing extra space (remove top and/or 
bottom margins of element inside)

5 
Magic Bullets ­ sometimes  Summary 

§  Take advantage of the flow of the document 
§  Add position: relative; to the element  Go with the flow ­­ not against it 
§  Use creative methods of display: 
§  Use the Holly hack 
–  Multiple divs and backgrounds 
–  Negative margins 
/* Hides from IE5­mac \*/  –  Faux backgrounds 
* html .buggybox {height: 1%;}  –  Negative space 
–  Opacity 
/* End hide from IE5­mac */ 
–  Break­up CSS and background images 
–  Get to know sIFR 

§  Validate pages and be sure it’s a bug with DW’s CSS panel 
§  Create your own bug snippets (or download from  and visualization features 
CMX)  §  Use snippets to speed up work 

Resources 

§  Position is Everything 
http://www.positioniseverything.net/ 

§  Mac IE 5: oddities 
http://l­c­n.com/IE5tests/ 

§  Community MX 
Thank you.
http://communitymx.com/ 

§  CSS Zen Gardens 
http://csszengarden.com/ 

§  W3Conversions 
http://w3conversions.com/ 

§  sIFR Information 
http://mikeindustries.com/sifr/  Ideas in motion.

Real World Examples ­ Wild Spirit Gallery  Real World Examples ­ Wild Spirit Gallery 

§  Negative margins  §  Negative margins 
–  Must have positioning 
–  Goes in the opposite direction from a normal margin 
–  margin­top: ­10px; pulls the element up 10px

6 
Negative Margins ­ XHTML  Negative Margins ­ CSS 
<div id="content">  #welcome { 

<div id="welcome">  margin: 1.4em 0 0; 

border­top: 1px solid #5D3528; 
<div class="podtext"> 
} 
<p>This area is provided for introduction text where you can 
#welcome .pod { 
provide a brief description of the gallery and the type of 
artists represented.</p>  background: #5D3528 url(images/pod_gradient.jpg) repeat­y top right; 

</div> <!­­ closes welcome podtext­­>  width: 217px; 

padding: 0 0 20px 10px; 
<div class="pod"> 
margin­top: ­1.6em; /* this pulls the pod up so that the lines are aligned */ 
<h1>Welcome</h1> 
position: relative; /* this allows the negative margin */ 
<img src="images/gall_img.jpg" alt="Gallery" width="208" 
} 
height="163" /> 
#welcome .podtext { 
</div> <!­­ closes pod­­> 
float: right; 
<br class="clearrt" />  width: 245px; 
</div> <!­­ closes welcome­­>  } 

</div> <!­­ closes content­­>  #welcome h1 { 

border­bottom: 1px solid #FFF; /* followed by more values … */

7