Fixed footer inline list centering issue [Archive]

Click to See Complete Forum and Search --> : Fixed footer inline list centering issue

HookedOnWinter

06-03-2008, 09:49 PM

Mouthful of a title.

Ok, so I'm using some Joomla here, which makes this a little more interesting. I have a fixed footer, and centered in that is an in-line list menu. I'm trying to get each of those menu items to have the same width, have the text within centered within that width (so the item might be 160px wide, and the text is centered in that), and have the entire list centered on the page.

However, it's not working. There's a 10px (or so) margin or padding on the left side, and I can't figure out where it's coming from.

The live site is laaus.hookedonwinter.com (http://laaus.hookedonwinter.com) (the main page is a good clean example).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content="La'au's Taco Shop, Colorado Springs, CO" />
<meta name="description" content="La'au's Taco Shop, Colorado Springs, CO" />
<meta name="generator" content="Joomla! 1.5 - Open Source Content Management" />
<title>La'au's Taco Shop</title>
<link href="/index.php?format=feed&type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />

<link href="/index.php?format=feed&type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />
<script type="text/javascript" src="/media/system/js/mootools.js"></script>
<script type="text/javascript" src="/media/system/js/caption.js"></script>

<link rel="stylesheet" href="/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="/templates/laaus_template/css/template.css" type="text/css" />
<link rel="stylesheet" href="/templates/laaus_template/css/blue.css" type="text/css" />
<link rel="stylesheet" href="/templates/laaus_template/css/blue_bg.css" type="text/css" />


<script type="text/javascript" src="/js/prototype.js"></script>
<script type="text/javascript" src="/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="/js/lightbox.js"></script>
<link rel="stylesheet" href="/css/lightbox.css" type="text/css" media="screen" />

</head>
<body id="page_bg" class="color_blue bg_blue">

<div id="footerContainer">
<div id="footer">
<ul class="menu" id="mainmenu"><li id="current" class="active item1"><a href="http://laaus.hookedonwinter.com/"><span>Home</span></a></li><li class="item54"><a href="/index.php?option=com_wrapper&view=wrapper&Itemid=54"><span>Menu</span></a></li><li class="item55"><a href="/index.php?option=com_content&view=article&id=46&Itemid=55"><span>Directions</span></a></li><li class="item56"><a href="/index.php?option=com_content&view=article&id=47&Itemid=56"><span>Gallery</span></a></li><li class="item57"><a href="/index.php?option=com_content&view=article&id=49&Itemid=57"><span>About</span></a></li></ul>

</div>
</div>

<div id="content">

<div class="center" align="center">
<div id="logo">
<div class="front_page_logo"><img src="/images/stories/site/laauslogo800_invert.gif" border="0" alt="La'au's Taco Shop" /></div>
</div>

<div id="header">

</div>

<div id="top">

</div>

<div id="breadcrumb">

</div>

<div id="main">
<table class="blog" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">

</td>
</tr>

</table>

<div id="left">


</div>

<div id="right">



</div>
</div>

<div id="debug">

</div>
</div>
</div>
</body>
</html>

/* La'au's CSS
/*
/* Colors
/* Black - black
/* White - white
/* Orange - ED6B3A
/* Green - A2E852
/* Dark Gray - 666
/* Light Gray - aaa
*/

body{
background-color: white;
color: black;
font-family: Helvetica, Arial, sans-serif;
margin:0;
padding:0 0 25px 0;
}

div#footerContainer{
position:absolute;
bottom:0;
left:0;
width:100%;
height:55px;
background-color: white;
border-top: solid thin black;
}
@media screen{
body>div#footerContainer{
position: fixed;
}
}
* html body{
overflow:hidden;
}
* html div#content{
height:100%;
overflow:auto;
}
#logo{

}

#logo img{
margin: 25px 0;
}

#header{

}

#breadcrumb{

}

#top{

}

#main{
width:800px;
margin:0 auto 50px auto;
}

#debug{

}

#mainmenu{

}

ul#mainmenu{

}

#footer{
width: 800px;
margin: 0 auto;
border: solid thin black;

}

#mainmenu li{
display: block;
width: 155px;
float: left;
border: solid thin black;
margin: 1px;
text-align: center;
padding: 2px 0;

}

#mainmenu li a{
font-size: x-large;
}

a{
text-decoration: none;
}

a:link, a:visited{
/*
orange
color: #ED6B3A;
*/
color: #666;
}

a:hover{
/*green
color: #A2E852;*/
color: #aaa;
}

.gallery img{
cursor: pointer;
border: solid thin #A2E852;
}

WebJoel

06-03-2008, 10:15 PM

However, it's not working. There's a 10px (or so) margin or padding on the left side, and I can't figure out where it's coming from. -Sounds like the "<li>" still have a "list-style-type" present, even if it is 'off element' and thus, not visible.

If the "li" are "display:inline;", this goes away as "inline" removes the "list-style-type".
"list-style-type:none;" also removes this.

Haven't checked your code. There could be more to it than this. Will re-visit this thread tomorrow... (late here..) :o

I ran your HTML and absolute-pathed the external documents to my HTML-editor, and got a 'quickie preview' (not complete, some files aren't absolute pathed yet), but LOOK at your menu... -see those little 'hashy' things to the left? These are "list-style-type:default;"

Also, I would make the "a" that are IN the "li" be "display:block;", which causes the "a" to 'swell up' and occupy the entire real-estate of the "li", making the whole "<li>" appear to be "clickable"... :)

Centauri

06-03-2008, 10:51 PM

<ul>s have default left padding/margin (FF uses padding, IE uses margin) to provide list item indent, so both margins and paddings should be specified for any <ul> or <ol>. If you also float the <a>s (which will turn them into block elements) you can size them instead of the <li>s which makes selection much easier. If the font size is also applied to the <ul>, then its height can be specified in ems so that the footer will surround it properly :#mainmenu{
font-size: x-large;
margin: 0 0 0 2px;
padding: 0;
height: 1.5em
}

#mainmenu li{
float: left;
border: solid thin black;
margin: 1px;
list-style: none;
}

#mainmenu li a{
float: left;
width: 155px;
padding: 2px 0;
text-align: center;
}

HookedOnWinter

06-04-2008, 10:48 AM

Thanks guys!

I made the a's display:block so the entire element is clickable, and put the ul padding and margin to 0. It works! Gotta love when you don't CSS for a while. Appreciate the help!

WebJoel

06-04-2008, 07:35 PM

Looks great in Firefox: IE7 causes the last li to 'line-wrap'. Can you give the UL a few more pixels width, or decrease the width of the LI's by a pixel or two?

I am sure that it's my default CSS doing this, but note that the last LI/a 'drops' almost off my screen and I cannot 'scroll down' any farther to retireve it. -In a short view: content/navigation is (almost) denied to me.

Centauri

06-04-2008, 08:04 PM

This is due to the <li> border being defined as "thin" - IE uses 2px which makes the whole thing too wide. If you specify 1px instead of thin, it fits.

HookedOnWinter

06-04-2008, 08:20 PM

Good call. I just fixed it up a bit (I was at work earlier... oops). I'm gonna keep styling and whatnot, but I think it works pretty well. According to BrowserShots, it's broken in ie6. I'll get to that later. Thanks again for your help,

pj

Centauri

06-04-2008, 09:16 PM

According to BrowserShots, it's broken in ie6.

That's due to IE6's doubled float margin bug doubling the left margin of the first <li>. Add inline display to fix that :#mainmenu li{
display: block;
width: 106px;
float: left;
border: solid 1px black;
margin: 3px;
text-align: center;
padding: 4px 0 2px 0;
display: inline;
}

WebJoel

06-04-2008, 10:29 PM

and now it works! :D

HookedOnWinter

06-05-2008, 01:19 AM

Thanks again guys. You've been great.

Centauri - I tried it two ways, the way you posted - both block and inline stated, and just inline stated, and both resulted in the same thing (at least on browser shots). I haven't attempted any other ie6 debugging, though I plan to before my friend actually wants to launch...

http://browsershots.org/screenshots/36baadd5c5c24449a27fca3323699c08/

Centauri

06-05-2008, 02:14 AM

Ahh - I hadn't realised there was content on other pages. IE6 does not support the "fixed" position, instead translating it as absolute and therefore allowing it to scroll up the screen. The only way to emulate the fixed behaviour is with a javascript routine.

HookedOnWinter

06-05-2008, 02:33 AM

Ah my bad.

So pretty much, IE6 strikes again, costing the global economy uncountable amounts of money (nothing in this case) and causing gray hairs all around?

aka I'll either fix it with JS or just ignore that browser entirely. Woo!

WebJoel

06-05-2008, 07:53 AM

OHH!!! IE6 as-seen in WINDOWS 2000!! Me, -I would totally ignore this! Anyone nostalgic enough to be running Win-2000 deserves what they (don't!) get... 'No Tacos for you!'

Centauri

06-05-2008, 07:58 AM

Actually, it is the same in IE6 on XP as well - the footer will scroll up the screen with content.