PDA

Click to See Complete Forum and Search --> : text-align: Bottom; Works in IE, not in Firefox

dpkyte
05-24-2007, 08:51 PM
I want to display the menu items on the bottom of the image. This works in I.e, but not Firefox. Any thoughts on what is causing this to not work? I know there are some threads on this but I cannot seem to locate the proper one.

//*** CSS **///

#menu{
width: 100%;
height: 150px;
float:left;
font-family: Verdana, Arial, sans-serif;
color: #000000;
text-align: bottom;
font-size: 12pt;
background:#c0c0c0 url(images/banner.jpg);
}

#menu a, #menu h2{
font:bold 11px/16px arial,helvetica,sans-serif;
display:block;
color: #660000;
white-space:nowrap;
margin:0;
padding:1px 0 1px 3px;
}

#menu h2{
color: #660000;
}

/* drop down color prior to hover */
#menu a{
text-decoration: none;
}

#menu a, #menu a:visited{
color:#660000;
font-size: 12px;
}

#menu a:hover{
color:#060;
}

#menu a:active{
color:#0066ff;
}

#menu ul{
list-style:none;
margin:0;
padding:00;
float:left;
width:110px;
}

#menu li{
position:relative;
}

#menu ul ul{
position:absolute;
z-index:500;
top:auto;
display:none;
}

#menu ul ul ul{
top:0;
left:100%;
}


//*** HTML: **///

<table width=756px height='150' align='center'>
<tr><td id="menu" valign='bottom'>
<ul><li><a href="index.php" id="csstip">Home</a></li></ul>
<ul><li><a href="test1.php" id="csstip">Test 1</a></li></ul>
<ul><li><a href="test2.php" id="csstip">Test 2</a></li></ul>
<ul><li><a href="test3.php" id="csstip">Test 3</a></li></ul>
<ul><li><a href="test4.php" id="csstip">Test 4</a></li></ul>
<ul><li><a href="test5.php" id="csstip">Test 5</a></li></ul>
</td></tr>
</table>



Thanks much.
ray326
05-24-2007, 10:22 PM
http://www.w3.org/TR/CSS21/text.html#propdef-text-align
coothead
05-25-2007, 01:43 AM
Hi there dpkyte,

try it like this, without a table...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
* {
margin:0;
padding:0;
}
body {
margin:10px;
}
#menu{
width:756px;
height:150px;
background:#c0c0c0 url(images/banner.jpg);
margin:auto;
}

#menu ul{
list-style:none;
}
#menu li {
float:left;
width:126px;
}
#menu a {
font:bold 11px/16px arial,helvetica,sans-serif;
display:block;
color: #600;
text-decoration: none;
text-align:center;
margin-top:134px;
}
#menu a:visited {
font-size: 12px;
}

#menu a:hover{
color:#060;
}

#menu a:active{
color:#06f;
}
</style>

</head>
<body>

<div id="menu">
<ul>
<li><a href="index.php" class="csstip">Home</a></li>
<li><a href="test1.php" class="csstip">Test 1</a></li>
<li><a href="test2.php" class="csstip">Test 2</a></li>
<li><a href="test3.php" class="csstip">Test 3</a></li>
<li><a href="test4.php" class="csstip">Test 4</a></li>
<li><a href="test5.php" class="csstip">Test 5</a></li>
</ul>
</div>

</body>
</html>
Also note that id="csstip" has been changed to class="csstip" as id is an unique identifier and may only be used once.


A better way to build your website (http://www.boagworld.com/archives/2004/06/a_better_way_to_build_your_website.html)
Why tables for layout is stupid: problems defined, solutions offered (http://www.hotdesign.com/seybold/index.html)
Ten ways to speed up the download time of your web pages (http://www.webcredible.co.uk/user-friendly-resources/web-usability/speed-up-download-time.shtml)
Nested Tables: About the (ab)use of tables as layout tools in webpages. (http://www.dorward.me.uk/www/nested/)
Why Tables Are Bad (For Layout) Compared to Semantic HTML + CSS (http://www.phrogz.net/CSS/WhyTablesAreBadForLayout.html)
Why go table free? (http://www.workingwith.me.uk/tablefree/why/)
Why avoiding tables (for layout) is important (http://davespicks.com/essays/notables.html)



coothead
dpkyte
06-02-2007, 03:36 AM
Thanks for the help !!! Got it working