Hi all, I am attempting to make a link grid with minimal mark-up and I am not sure if what I am trying to do can be done without mucking up the code with lots of nested elements (plus this is going in a CMS).
I could use a table but I wanted to see if anyone here had any idea’s before I go adding nested unordered lists (ugly!!) or tables (not semantically correct :\ ??). The requirements are IE7+ and all the others from the same era. So the less css2+ psudo classes etc. the better unless you know of some really really good javascript plugins.
This is what it should look like:
0px
ol___________________________|______
| ____________ ______________ |
|| | | ||
|| First LI | 6px | second LI ||--0px
||____________| |______________||
| 6px |
| |
| ____________ ______________ |
|| | | ||
|| third LI | 6px | fourth LI ||
||____________| |______________||
| etc..... |
|___________________________________|
|
0px
(this form isn’t very ascii friendly so I wrapped it in a code bracket, hope it comes out right! )
This is as close as I can get… but I wish I could get the margins to collapse and it does not work in IE7 anyway.
I am hoping for something simple so I don’t have to rework some php plug-ins or find new ones.
Hi,
Well if you need to support IE7 and you are wanting the text to be vertically centered then it will require some extra elements nested in either the <li> or the <a>. There’s really not a simple way to do it, but it can be done.
You are on the right track with display:table-cell; and vertical-align:middle; for modern browsers.
Using the last two methods I merged them together and made a new example. I eliminated the need for the <br> tags from #2 but used the margin/padding trick and then I used the single empty element from #3 for the v-align.
Keep in mind, those tricks are just for IE7 and modern browser get display:table-cell to do the job easily.
Here is what I came up with -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Vertical-Centered Text</title>
<style type="text/css">
h1 {
font-size:1.5em;
text-align:center;
}
.nav {
display:table;/*hide whitespace nodes for webkit*/
width:286px;/*un-shrink table for all browsers*/
word-spacing:-.25em;/*hide whitespace nodes in all but webkit*/
margin: 0 auto;
padding: 6px 0;
list-style: none;
text-align: center;
background:#777;
}
.nav li {
display:-moz-inline-box;/*FF2 and under*/
display: inline-block;
vertical-align: middle;
margin: 6px;
word-spacing:0;/*reset children from ul*/
}
.nav a {
zoom:1;/*prep IE7 for tripswitch below*/
display: table-cell;/*modern browsers v-align*/
vertical-align: middle;
width: 114px;/*124px total w/ side padding*/
height: 40px;
padding: 0 5px;
background: #72c6a1;
color: #fff;
font: 14px/16px arial;
text-decoration: none;
}
.nav a:hover {
color: #000;
background:lime;
}
.nav b {
zoom:1;/*prep IE7 for tripswitch below*/
display: none;/*hide the extra element in modern browsers*/
}
/*-- IE7 Rules Below --*/
*+html .nav li {
display:inline;/* inline-block tripswitch*/
height: 40px;
overflow: hidden;
}
*+html .nav a {
display:inline;/* inline-block tripswitch*/
height: auto;
margin: -40px 0;/* soak up the extended padded area */
padding: 40px 5px;/* extend the lowest link to cover the whole item height */
}
*+html .nav b{
display:inline;/* inline-block tripswitch*/
vertical-align:middle;
/*width:1px;*/
height: 40px;
font-size:0;
/*background:red;*/
}
</style>
</head>
<body>
<h1>List Items with V-Centered Text</h1>
<ul class="nav">
<li><a href="#">contact us</a><b></b></li>
<li><a href="#">news</a><b></b></li>
<li><a href="#">about us</a><b></b></li>
<li><a href="#">text wrapping to two lines</a><b></b></li>
</ul>
</body>
</html>
Seems the obvious answer – plug in the class on every other one and poof… or if you don’t care about old browsers you could use CSS3’s nth-child(odd) instead of the classes.
Or if the OL isn’t receiving style, pad the LI instead of margin, apply styling to the tags inside the LI (since your example uses anchors) and then put a negative margin on the right side of the OL to suck up the excess width.
Not that your example looks like an ordered list… seems rather unordered to me
Yeah, I did away with the <ol> also and made it a <ul>
I think you’ve missed one important aspect of the OP’s request though, vertical centered text. At least that’s what I assumed from the table-cell and v-align styles on the <a>.
That was the reason for all the extra code in my example which was needed for IE7. If v-center text is important then there’s more to it than just floating the <li>.
I thought about doing that too, but I keep getting projects like this and I don’t really like using odd, even, nth-child(3) etc. because I never know when a different client will want a grid of 5 big product pictures etc. and then I can’t easily re-use a plug-in because of work arounds for older browsers.
Thanks for the suggestion, and I did change the list to a <ul>, you are absolutely right it was not correct usage :).
Thanks Rayzur! The code is immensely helpful and so were the links, I made some adjustments to the css and it works great for what I need it to do, I might be able to make a grid plug-in that I wont have to rework for a while (until we are rid of IE7 in 10 more years).
I made some adjustments to the css and it works great for what I need it to do
Glad you were able to work with it
It’s a shame about the extra elements in the html but that’s what it takes to make ol’ IE7 work. I set them to display:none; for all other browsers though.
