html - How to display navigation tabs with the desired border? Table, list, something else? -


diagram

see picture above. each navigation tab needs have 2 pixels separation on either side , line header image on edges.

now introduce 5th navigation tab (and possibly 6th). possible code in way stick 5th or 6th tab in there , resize appropriately lists or tables or other solution? still keeping 2 pixels separation , lining edges exactly? wasn't sure if possible or have define widths each time each tab based on math involved line correctly flush edges.

i think best way emulate table behavior css. can use list, , still table behavior.

ul {     display:table; } li {     display:table-cell; } 

here demo displaying css , proper markup. here's demo of how looks actual table. i'm not on ie<8 support css, may aware of.

update: confirmed: not supported on ie6 or 7 natively. may stuck tables or hard-coded widths if want support browsers. there may javascript fix support these display values i'm not aware of it.

edit: realized demos sloppy, made addresses point margins, uses :first-child selector remove margin first link, giving evenly distributed appearance. http://jsfiddle.net/wesley_murch/pe6wd/3/


Comments

Popular posts from this blog

c# - how to write client side events functions for the combobox items -

exception - Python, pyPdf OCR error: pyPdf.utils.PdfReadError: EOF marker not found -