CSS Drive forums | vertical centre problem

vertical centre problem

tom

Posted: 02 February 2007 10:26 AM

[ Ignore ]

Newbie

Total Posts: 1

Joined 2007-02-02

Hi,

I have tried to use CSS to create a top menu bar and have run into a problem with vertically centering and had to resort to tables. In essence support for vertical centering seems very patchy and using absolute or relative alignment then leads to it looking different in Firefox and IE.

Can anyone show me some some code to reproduce the top gray bar in pure CSS that works in both IE6/7 and Firefox ? see http://www.uiqreview.com. The code I want to use should look something like:

<div id="container">

<div id="header">
<div id="pathbar">...</div>
<div id="syndicatebar">...</div>
</div>

<div class="grayline"></div>
...
</div> 

.. but leads to the RSS icon or the pathway not aligning vertically properly - the contents of the pathbar and syndicatebar are programatically generated (joomla) and can not be easily modified.

Thanks for any help !

.header
{ 
  background:#efefef;
  margin: 0;
  border: 0;
  padding: 0;
  height: 15px;
  line-height: 15px;
  vertical-align: middle;
}

#pathbar 
{
  float:left;
  margin: 0;
  border: 0; 
  padding: 0px; 
}

#syndicatebar 
{
  float:right;
  margin: 0;
  border: 0;
  padding: 0;
} 

Thanks,

/Tom

Profile

jbyers

Posted: 02 February 2007 02:51 PM

[ Ignore ] [ # 1 ]

Newbie

Total Posts: 10

Joined 2006-10-02

.jbheader {
 font: 10px Tahoma, Helvetica, sans-serif;
 color: #0973B8;
 text-align: left;
 background:#efefef;
 margin: 0;
 padding: 5px 13px;
 border-bottom: 1px solid #CCC;
}
.jbheader ul {
 margin: 0;
 padding: 0;
 list-style: none;
}
.jbheader li {
 margin: 0 3px 0 0;
 padding: 0 0 0 8px;
 background: url(http://www.uiqreview.com/templates/uiqreview/images/arrow.png) left no-repeat;
 float: left;
}
.jbsyndicate {
 float: right;
}
/*_________________________________________________________clear float fix */
.clearfix:after {
 content: "."; 
 display: block; 
 height: 0; 
 clear: both; 
 visibility: hidden;
}
.clearfix { display: inline-block; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */ 

<div class="jbheader clearfix">
  <ul>
    <li><a href="#">Home</a></li>
    <li>Search</li>
  </ul>

  <div class="jbsyndicate">
    <a href="http://www.uiqreview.com/index.php?option=com_rss&amp;feed=RSS2.0&amp;no_html=1"><img src="http://www.uiqreview.com/images/M_images/uiqreview_rss.png"  alt="RSS 2.0" name="RSS20" align="middle" border="0" /></a>
  </div>
</div> 

Profile

‹‹ CSS Down Safari breaking with multiple column layout! ››