Inline pseudo-classes…

@kiwibritMay 31.2006 — #Do you mean you want to display, say, nav bars in line - or simply that you want to use them in in-line styling?

FWIW, here is how I style in line nav buttons -inside a side division called sidebar:

<i>
 </i>#sidebar{
 float:left;
 width:24%;
 }
 
 #sidenavbar {
 font-family:Arial, Helvetica, sans-serif;
 font-size:1em;
 float: left;
 border-bottom: 1px solid #E6E6E6;
 width: 80%;
 margin-left:0;
 margin-top:.5em;
 margin-bottom:1em;
 }
 
 #sidenavbar a:link{
 border-top: 1px solid #FAFAFA;
 padding: 2px 0px 2px 10px;
 }
 
 #sidenavbar ul {
 list-style: none;
 margin: 0;
 padding: 0;
 font-size: .8em;
 line-height: 1.2em;
 }
 
 #sidenavbar &gt; ul a {width:auto;}
 
 #sidenavbar ul li {
 background-color:#fafafa;
 margin-bottom:.5em;
 }
 
 #sidenavbar a:link, #sidenavbar a:visited{
 text-decoration: none;
 color:#333333;
 }
 
 #sidenavbar ul a:link, #sidenavbar ul a:visited {
 display: block;
 }
 
 /* hack to fix IE/Win's broken rendering of block-level anchors in lists */
 #sidenavbar li {border-bottom: 1px solid #FAFAFA;}
 
 /* fix for browsers that don't need the hack */
 html&gt;body #sidenavbar li {border-bottom: none;}
 
 #sidenavbar a {
 color:#333333;
 display:block;
 width:100%;
 color:#765;
 }
 
 #sidenavbar a:visited{
 color:#333333;
 border-top: 1px solid #FAFAFA;
 padding: 2px 0px 2px 10px; 
 }

I shall be removing hacks and calling up IE style sheets for IE 7 and less than IE7 with conditional comments. So far, the only IE7 variation I have made is:

<i>
 </i>#sidenavbar &gt; ul a {width:96%;}

Hope that helps.

Inline pseudo-classes…

2 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Inline pseudo-classes…

2 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

2 Comments(s) _↴

Also in #CSS _↴