I’ve decided to create a new footer for our office’s pages. The effect I’m going for is a sort of expanded drop-down menu look, which I’ve pretty much gotten a handle on. But for some reason, I can’t for the life of me figure out how to center the thing.
furthermore, as a general rule, you are sacrificing readability and clarity in a css code that is already difficult to manage. why make your life harder? you don’t sacrifice anything in the html markup to achieve some unrealistic gains in speed or bandwidth, why are you doing this in css?
I don’t use CC’s because it means I have to look in TWO places for any given element’s CSS for all browsers. Extra work.
I also want my css asked for once and not every time a new HTML page is asked (the OP’s footer is very likely to be on every single page of the site).
Only when it’s gotten so excessively filled with those two comments (I do it like Ray does) due to lots of use of display: table and display: inline-block and that sort of thing do I resort to two separate sheets… and then I use CC’s to call those sheets, not sit as styles on the HMTL page.
But that’s me.
Note to the OP: IF you are supporting all Gecko browsers you’ll need the -moz display: inline-block or inline-box (whichever ones looks like all the other browsers as they are both a little different and sometimes one works better than the other for given situations). K-Meleon for example is an updated Gecko-for-Windows still using the old FF2 engine, so still does not understand inline-block.
Just to point out a few things that are going on that have not been addressed yet.
In order to get better x-browser consistency :
The UL needs it’s default paddings removed or reset manually
To get all browsers and IE6/7 on the same playing field with inline-block it is always best to hide/remove the whitespace nodes between the LIs (IE6/7 do not include them since they do not have native support for inline-block)
IE6/7 are adding about an extra 15px to the left of the list items when they are left in their default state of display:list-item.
Some background colors added to the OP’s code would point out the things I mentioned above.
In order for IE6/7 to honor the inline-block tripswitch they need display:inline; set on a new selector lower down in the cascade. That is why noonope’s star hack did not work when it was set as a rule in the UL styles. It works with the IE CC for reasons I just mentioned. Also note that the zoom:1; is not needed since inline-block is a haslayout trigger in and of itself.
I always prefer to do my IE tripswitch with two lines of css using valid star html hacks. I see no need for using CC’s in the html just for that. Now if you have one already for other reasons then yes I could see the point.
Working with the code below, if you comment out these rules in red you will see the extra spacing on the left (#3) in IE6/7
#newfooter ul li {
[COLOR=Red] float:left; /*kill default display:list-item (it gives left spacing in IE6/7)*/
clear:left;[/COLOR]
display:inline;/*IE6 dbl margin bug*/
margin:0 5px;
font: .9em/1.2 Verdana sans-serif;
background:#FFF;
}
This gets things pretty close and the spacing between the ULs’ can now be controlled by the UL margins.
<!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>Footer Sample</title>
<style type="text/css">
#newfooter {
text-align: center;
border-top: 1px solid #999;
word-spacing:-.5em;/*hide whitespace nodes*/
}
#newfooter ul {
display: inline-block;
vertical-align: top;
text-align: left;
margin:10px 14px;
padding:5px 0;/*remove or reset the defaults*/
list-style: none;
background:#CDF;
word-spacing:0;/*reset from parent*/
}
* html #newfooter ul {display: inline;} /*IE6*/
*+html #newfooter ul {display: inline;} /*IE7*/
#newfooter ul li {
float:left; /*kill default display:list-item (it gives left spacing in IE6/7)*/
clear:left;
display:inline;/*IE6 dbl margin bug*/
margin:0 5px;
font: .9em/1.2 Verdana sans-serif;
background:#FFF;
}
#newfooter ul li:first-child {
font-weight: bold;
margin-bottom: 5px;
}
#newfooter ul li a {
text-decoration: none;
}
#newfooter ul li a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div id="newfooter">
<ul id="foot-home">
<li><a href="/hep/">HEP Home</a></li>
<li><a href="/hep/aboutus.htm">About us</a></li>
<li><a href="/hep/whatsnew.htm">What's new</a></li>
<li><a href="/hep/calendar.cfm">Calendar</a></li>
<li><a href="/hep/training.htm">Training</a></li>
<li><a href="/hep/careers.htm">Careers</a></li>
</ul>
<ul id="foot-offices">
<li><a href="#">Topics</a></li>
<li><a href="/planning/">Planning</a></li>
<li><a href="/environment/">Environment</a></li>
<li><a href="/realestate/">Realty</a></li>
<li><a href="/livability/">Livability</a></li>
</ul>
<ul id="foot-subjects">
<li><a href="/hep/subindex.htm">Subjects</a></li>
<li><a href="/hep/legreg.htm">Legislation</a></li>
<li><a href="/hep/pubs.htm">Publications</a></li>
<li><a href="/hep/training.htm">Training</a></li>
<li><a href="/hep/funding.htm">Funding</a></li>
</ul>
<ul id="foot-awards">
<li><a href="/hep/awards.htm">Awards</a></li>
<li><a href="/planning/tpea/">Planning</a></li>
<li><a href="/environment/eea2009/">Environment</a></li>
<li><a href="/realestate/rowea.htm">Realty</a></li>
</ul>
<ul id="foot-contacts">
<li><a href="/hep/contacts.htm">Contacts</a></li>
<li><a href="/hep/liaisons.cfm">Liaisons</a></li>
<li><a href="/hep/hepdivoff.cfm">Division Offices</a></li>
<li><a href="/hep/hepmetro.cfm">Metropolitan Offices</a></li>
<li><a href="/hep/hepflh.cfm">Federal Lands Offices</a></li>
</ul>
</div>
</body>
</html>
You could work with percentages for the different ul’s. Your newfooter = 100% which means the ul’s e.g. foot-home, foot-offices etc will be 25% since you have 5 ul’s
having <ul>s floating left, you need to put overflow:auto on div id=“newfooter”. that will make the div extend its box model to contain the <ul>s.
to center the <ul>s, the fastest way i think of is to stick another wrapper div in there, inside div id=“newfooter” and containing <ul>s, having a width set and margin: 0 auto. something like this:
edit:
this if you insist on <ul>s being floats. it’s not the best option and for it i couldn’t provide the best solution but i’m giving it to you so that you can see that there are drawbacks on your proposed layout.
but if you allow <ul>s to be display: inline-block, then, with the initial html markup, you could use the following css:
the first version seems right, but… if you look closely i’m sure you’ll find trouble written all over it. the fixed width only looks right, it isn’t. can you tell why?
the second version is better. for ie there is a hack to make display: inline-block happen. it’s been discussed over the css forum this week even. so use search
So far it looks good, but I only have two browsers here to test in (FF3.5 and IE7). I’m going to test with more when I get home.
The unfortunate part is that it seems to fail CSS validation, so if I try to do it this way, it’ll likely get kicked back to me because everything gets QC’d by someone else, and HTML/CSS errors are not allowed.
When I need to use inline-block for more than one instance I will simply set up a class for inline-block and hook it to any element that needs it throughout the site.
That will prevent multiple ID selectors with tripswitch hacks for IE. That takes care of it once and for all though it does require using classes which I’m OK with in that case.
.in-blk {
display:-moz-inline-box;/* for FF2 (inline-box used for shrink wrapping)*/
display:inline-block;/*modern browsers */
}
* html .in-blk {display:inline;}/*IE6 */
*+html .in-blk {display:inline;}/*IE7 */
IF you are supporting all Gecko browsers you’ll need the -moz display: inline-block or inline-box
I always needed to use inline-box to get the shrink wrapping effects of inline-block.
furthermore, as a general rule, you are sacrificing readability and clarity in a css code that is already difficult to manage. why make your life harder? you don’t sacrifice anything in the html markup to achieve some unrealistic gains in speed or bandwidth, why are you doing this in css?
this is a point i’ve been making on other occasions and i have many other reasons not to use these hacks, but the CC instead, all valid from a developer point of view
like, for example, the fact that you cannot use > and + selectors for ie6. now, either you will never use those selectors, or you will use them and make a conditional for ie. i choose #2. i don’t let ie dictate and restrain the way i produce pages. i code rules for the exception, i don’t code the exception as a rule.
you might say (others did): “your coding is bad if you cannot code without, for example, those selectors”, or “your code is a mess that needs a doctor” (other did say this also ). well, i choose to say i treat ie with the dedicated special attention and care it needs
ok. aside this, how do you manage when you want to use > and + selectors? or you don’t because of ie?
Actually I don’t generally do anything for IE6 when using > and +… instead I’m using those where, if IE6 doesn’t grab the styles, no biggie (meaning I don’t use them on things where it’s absolutely imperative that they look the same also in IE6). I just use + and > where I need them and check what I get in IE6 and see if it’s acceptable. 99% of the time it is. Otherwise, I’ll use a class.
so use the ie conditional comment in your html markup to point to a css file with rules for ie fixes
I wondered if your example above was just in <style> tags for clarity or not.
[ot]
visiting pinkforoctober is harmful for your computer. two trojans.
I don’t use an inferior operating system : ) Either the site is popular enough to be attracting the script kiddies (possible) or overly-sensitive immune systems are fighting windmills again… but either way anything bad is unlikely to be written for my machine.
Besides, “get a virus to support breast cancer” sounds great : )[/ot]
When I need to use inline-block for more than one instance I will simply set up a class
I didn’t do that and probably didn’t consider it because I had started the IE stylesheet for a menu where lots of display: table was going on… but the class for inline-block is a good idea for future sites.
I always needed to use inline-box to get the shrink wrapping effects of inline-block.
I think inline-box I needed depending on who the children were. I only remember one could do relative-absolute positioning and the other could not… I couldn’t do imitation display: run-in headers with gilder-levin image replacement in FF2 I remember… and I think I needed “box” for the inline-positioning but it’s been a while. : (
i believe a misunderstanding occurred somewhere in the middle.
i use external stylesheets. the example is just that, an example. i used that markup to keep it in a single file. i too “want my css asked for once and not every time a new HTML page is asked”
and another one i’ve noticed.
ok. aside this, how do you manage when you want to use > and + selectors? or you don’t because of ie?
Off Topic:
visiting pinkforoctober is harmful for your computer. two trojans.
@noonnope: Yeah, that seems to work. It’s unfortunate that it adds another div though. I might see how it fits into our existing template though. I might be able to lose that extra div since the whole thing will already be in a div.
@donboe: 25% x 5 = 125% But I did try it with 20%, and for some reason I got stacking. I think I’d need to play with the margins/padding to get that to work.
Well I’m back to this because our circa 1997 web QC guy won’t let us use a star hack, so I’m going to have to think of something else. It won’t get approved with any sort of CSS hacks or conditional statements.
I’m thinking that this whole thing is coming out of the <ul>s and going into DIVs. It’s the only way I can seem to do it without a * or a conditional
Well I’m back to this because our circa 1997 web QC guy won’t let us use a star hack, so I’m going to have to think of something else. It won’t get approved with any sort of CSS hacks or conditional statements.
Just, because… they offend him? Smell? Or does he think CSS validation actually means something?
If I had to work with someone like that, I’d strongly consider quitting, and after that had passed I would just try tables for layout and no doctype. He has to choose: either code that works in stone-age browsers with hacks, or code that does not work in stone age browsers. You can’t have your cake and eat it too. You could possibly get away with “only works for modern browsers” though this does mean supporting possibly only 20% of your market then. LAWLZ. I’ve always wanted to try a tabled doctypeless page. After all, there wasn’t much CSS back in 1997 anyway.
*edit unless you just mean, wrapping the ul’s in divs? If that’s the case, do it. They won’t hurt. However, inline-block is still the problem.
In which case, noonope’s original idea of a single wrapping div that’s exactly as wide as all the floated ul’s together and auto-margin’d should work fine. Inline-block was just a nicer idea but one that needs hax for the ancient crap browsers.
Your signature makes me think I might know exactly the kind of people you work with/for.
. But something like that should work. Used it quite some time for similar situations. Just tried it. I used 17% instead:
but i’m giving it to you so that you can see that there are drawbacks on your proposed layout.
But I did try it with 20%, and for some reason I got stacking. I think I’d need to play with the margins/padding to get that to work.