spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / programming / css_lists /1 To page 1current pageTo page 3
[previous][next]

Ad Copywriter
Aquent
US-VA-Richmond

Justtechjobs.com Post A Job | Post A Resume
Developer News
Get Ready for Microsoft's 'Oslo' Modeling Tool
Latest Linux Hits Networking Flaws
Metasploit 3.2 Offers More 'Evil Deeds'

How to Use CSS to Position Horizontal Unordered Lists

The CSS

#menu
{
padding:0;
margin:0;
color:#fff;
font-family: arial, helvetica, sans-serif;
white-space:nowrap;
border:1px solid #f00; /* add a red border */
}

Adding a red border

You will see from this example that we haven't got what we expected. The red border is in fact a red line running the full width of the browser across the top of our menu.

This tells us that the <ul> has a width of 100%, a height of zero and that our links overflow vertically.

Small wonder that we were unable to center the menu using margin:0 auto; as the left and right margins are zero and using text-align:center; fails because the menu is 100% of the width and as such is already 'centered.'

In order to position the list as desired, we need to change how the <ul> tag is sized. We need to get it to shrink horizontally to the actual width of the list items and expand vertically to the height of the list items and act like a wrapper.

Unfortunately we do not know the width or height of our list so we cannot specify directly the required size. But there is an answer...CHANGE THE STYLING METHOD.

The alternative 'shrink wrap' method

For my alternative method I will use several little-used styles that all of the modern browsers understand. All are in the CSS 2.1 Specification W3C Working Draft 13 June 2005, but one (display:inline-block) will give a w3c validator error as it does not currently support CSS 2.1.

Here's the revised style one tag at a time...

The <ul> tag

.menu {
  display:table;
  padding:0;
  margin:0;
  font-family: arial, helvetica, sans-serif;
  white-space:nowrap;
  list-style-type:none;
  border:1px solid #f00;
  }

This is identical to the 'normal' method except that we have added display:table;

I have kept the red border, temporarily, so that you can see the effect of the display:table; on the list. In all browsers except Internet Explorer the red border is shrunk to just enclose the list. In internet Explorer, which does not understand display:table; the border is still 100% wide.

Alternative ul styling

To bring Internet Explorer into line we need to use the following style targetted at IE using the * html hack.

* html .menu {
  display:inline-block;    /* for IE only */
  width:1px;               /* IE will expand 1px width to fit menu width */
  padding:0 2px;           /* fix bug in IE to get border spacing correct */
  }  

Alternative ul styling (IE)

Internet Explorer will now look the same as all other browsers with the outer red border a snug fit on the list.

The <li> tag

.menu li {
  display:table-cell;      /* ignored by IE */
  }

Alternative li styling

All browsers except Internet Explorer will now have the list horizontal with the red border still just enclosing the list. Internet Explorer doesn't understand display:table-cell; so will need alternative styling to bring into line.

* html .menu li {
  display:inline;          /* for IE only */
  }

Alternative li styling (IE)

Internet Explorer now has a horizontal menu with the red border shrunk to fit.

home / programming / css_lists /1 To page 1current pageTo page 3
[previous][next]



JupiterOnlineMedia

internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info


Legal Notices, Licensing, Reprints, & Permissions, Privacy Policy.

Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers

Solutions
Whitepapers and eBooks
Intel Article: Using Power & Display Context in the Intel Mobile Platform SDK
Internet.com eBook: Real Life Rails
IBM SCA Center Article: Simplifying Composite Applications with Service Component Architecture
Intel PDF: Quad-Core Impacts More Than the Data Center
Internet.com eBook: The Pros and Cons of Outsourcing
Go Parallel Article: Scalable Parallelism with Intel(R) Threading Building Blocks
Intel PDF: Analysis of Early Testing of Intel vPro in Large IT Departments
Internet.com eBook: Best Practices for Developing a Web Site
Intel PDF: IT Agility through Automated, Policy-based Virtual Infrastructure
IBM CIO Whitepaper: The New Information Agenda. Do You Have One?
Microsoft Article: BitLocker Brings Encryption to Windows Server 2008
Microsoft Article: RODCs Transform Branch Office Security
Go Parallel Article: James Reinders on the Intel Parallel Studio Beta Program
Avaya Article: Advancing the State of the Art in Customer Service
IBM Whitepaper: How are other CIOs driving growth?
Adobe Acrobat Connect Pro: Web Conferencing and eLearning Whitepapers
Avaya Article: Avaya AE Services Provide Rapid Telephony Integration with Facebook
Go Parallel Article: Getting Started with TBB on Windows
HP eBook: Storage Networking , Part 1
MORE WHITEPAPERS, EBOOKS, AND ARTICLES
Webcasts
Go Parallel Video: Intel(R) Threading Building Blocks: A New Method for Threading in C++
HP Video: Is Your Data Center Ready for a Real World Disaster?
HP On Demand Webcast: Virtualization in Action
Go Parallel Video: Performance and Threading Tools for Game Developers
Rackspace Hosting Center: Customer Videos
Intel vPro Developer Virtual Bootcamp
HP Disaster-Proof Solutions eSeminar
HP On Demand Webcast: Discover the Benefits of Virtualization
MORE WEBCASTS, PODCASTS, AND VIDEOS
Downloads and eKits
Actuate Download: Free Visual Report Development Tool
Red Gate Download: SQL Backup Pro
Microsoft Download: Silverlight 2 Software Development Kit Beta 2
30-Day Trial: SPAMfighter Exchange Module
Red Gate Download: SQL Toolbelt
IBM SCA Download: Start Building SCA Applications Today
Iron Speed Designer Application Generator
Microsoft Download: Silverlight 2 Beta 2 Runtime
MORE DOWNLOADS, EKITS, AND FREE TRIALS
Tutorials and Demos
IBM IT Innovation Article: Green Servers Provide a Competitive Advantage
Microsoft Article: Expression Web 2 for PHP Developers--Simplify Your PHP Applications
Featured Algorithm: Intel Threading Building Blocks - parallel_reduce
MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES
webref The latest from WebReference.com Browse >
Anatomy of an Ajax Application · Popular JavaScript Framework Libraries: An Overview · Controllers: Programming Application Logic - Part 2
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
MS Access and MySQL · Cisco AutoQoS: VoIP QoS for Mere Mortals · While VoIP Adoption Explodes in Enterprise, Carrier Spending Lags

Created: March 27, 2003
Revised: August 26, 2005

URL: http://webreference.com/programming/css_lists/1