Page 1 of 2
css alignment of <ul> [56k warn]
Posted: Thu May 24, 2007 12:58 pm
by s.dot
Image:
Problem:
I want my navigation menu to be vertical-align: bottom; so that it appears just above the white area. I've played around with heights of the ul, and ul li's, and tried vertical-align: bottom on both of them. I just can't seem to get it where I want.
I don't like absolutely positioning things. Seems like I could do this with margins or paddings, but I don't have any luck with that either.
code:
Code: Select all
<html>
<head>
<title>scott's site</title>
<style type="text/css">
html, body
{
margin: 0;
padding: 0;
text-align: center;
background-color: #dbf2d8;
}
.header
{
height: 100px;
background-color: green;
background-image: url(images/header_bg.jpg);
background-repeat: repeat-x;
background-attachment: fixed;
background-position: top left;
border-bottom: solid 1px #999999;
}
.header ul
{
margin: 0;
padding: 0;
list-style-type: none;
width: 760px;
height: 50px;
text-align: right;
}
.header ul li
{
display: inline;
width: 60px;
margin-left: 1px;
margin-right: 1px;
background-color: #fff;
border-top: solid 1px #333;
border-left: solid 1px #333;
border-right: solid 1px #333;
padding: 2px;
text-align: center;
}
.header ul li a
{
font-family: verdana, arial, tahoma;
font-size: 11px;
font-weight: bold;
color: #000;
text-decoration: none;
}
.header ul li a:hover
{
background-color: #dbf2d8;
border: dashed 1px #666666;
}
.body
{
width: 760px;
border-left: dashed 1px #aeaeae;
border-right: dashed 1px #aeaeae;
background-color: #fff;
}
</style>
</head>
<body>
<div class="header">stuff
<ul>
<li><a href="index.php">home</a>
<li><a href="blog">blog</a>
<li><a href="articles">articles</a>
<li><a href="pix">pix</a>
<li><a href="more">more</a>
</ul>
</div>
<div class="body">stuff here, too</div>
</body>
</html>
Posted: Thu May 24, 2007 5:40 pm
by Kieran Huggins
scottayy wrote:I don't like absolutely positioning things.
This is a prime example of where to use absolute (or relative!) positioning. While it could be achieved with margins and/or padding, you'll run into an ie/moz layout inconsistency and have to resort to CSS hacks. Just not worth it.
I would go relative in this case. Don't forget to position the parent element relatively as well to define the reference box.
Posted: Fri May 25, 2007 12:49 pm
by RobertGonzalez
Margins baby. That is about it. Relatively speaking of course.

Posted: Sat May 26, 2007 12:16 pm
by s.dot
OK, this is giving me problems again.
Mozilla renders it correctly (as I want it, at least) like this:
IE renders it a bit too far to the right and the top borders don't show, like this:
Here's my stylesheet:
Code: Select all
html, body
{
margin: 0;
padding: 0;
text-align: center;
background-color: #dbf2d8;
}
.header
{
height: 100px;
width: 100%;
background-color: green;
background-image: url(../../images/header_bg.jpg);
background-repeat: repeat-x;
background-attachment: fixed;
background-position: top left;
border-bottom: solid 1px #999;
}
.header ul
{
list-style-type: none;
width: 760px;
height: 25px;
text-align: right;
position: relative;
top: 78px;
margin: 0 auto;
padding: 0;
}
.header ul li
{
display: inline;
margin-left: 1px;
margin-right: 1px;
background-color: #a5e49c;
border-top: solid 1px #333;
border-left: solid 1px #333;
border-right: solid 1px #333;
border-bottom: solid 1px #999;
padding: 3px 5px;
text-align: center;
}
.header ul li.selected
{
background-color: #fff;
border-bottom: solid 1px #fff;
}
.header ul li a
{
font-family: verdana, arial, tahoma;
font-size: 11px;
font-weight: bold;
color: #000;
text-decoration: none;
}
.header ul li a:hover
{
color: #666666;
}
.body
{
width: 760px;
border-left: dashed 1px #aeaeae;
border-right: dashed 1px #aeaeae;
background-color: #fff;
color: #000;
font-size: 14px;
font-family: "trebuchet ms", verdana, arial;
margin: 0 auto;
}
table td
{
font-size: 12px;
font-family: verdana, arial, tahoma;
}
.body a
{
color: #324f2e;
font-weight: bold;
text-decoration: none;
font-family: verdana, arial, tahoma;
font-size: 12px;
}
.body a:hover
{
text-decoration: underline;
}
.mainleft
{
width: 75%;
float: left;
text-align: left;
padding: 5px;
}
.mainleft p
{
text-indent: 10px;
}
.mainright
{
width: 20%;
float: right;
background-color: #e6e6e6;
}
h1
{
color: #1e5716;
font-size: 20px;
font-family: verdana, arial, tahoma;
text-align: center;
text-transform: lowercase;
padding-top: 10px;
}
h2
{
color: #1e5716;
font-size: 18px;
font-family: verdana, arial, tahoma;
padding-top: 10px;
}
.textform, textarea
{
border: solid 1px #666666;
background-color: #ebedb1;
}
.blogtime
{
font-family: verdana, arial, tahoma;
font-size: 11px;
color: #666666;
}
.footer
{
height: 30px;
line-height: 30px;
background-color: green;
color: #fff;
font-family: verdana, arial, tahoma;
font-size: 11px;
}
Posted: Sat May 26, 2007 12:34 pm
by nickvd
That smells like a job for
Conditional Comments!!
aka, just feed IE the CSS it wants to use and leave the standard css to the good browsers...
Posted: Sat May 26, 2007 2:24 pm
by s.dot
Yipes, that was ugly.
Code: Select all
<html>
<head>
<title>{ $page_title }</title>
<link rel="stylesheet" href="http://...me/includes/css/style.css" type="text/css" media="screen" />
<!--[if IE]>
<link rel="stylesheet" href="http://.../me/includes/css/styleie.css" type="text/css" media="screen" />
<![endif]-->
<base href="http://.../me/" />
</head>
Posted: Sat May 26, 2007 3:49 pm
by nickvd
scottayy wrote:Yipes, that was ugly.
Code: Select all
<html>
<head>
<title>{ $page_title }</title>
<link rel="stylesheet" href="http://...me/includes/css/style.css" type="text/css" media="screen" />
<!--[if IE]>
<link rel="stylesheet" href="http://.../me/includes/css/styleie.css" type="text/css" media="screen" />
<![endif]-->
<base href="http://.../me/" />
</head>
Yes, ugly...
But much better looking than a single file that is filled with
/* START IE HAX */
* html #this {width:blah;}
/* END IE HAX */

Posted: Sun May 27, 2007 2:37 pm
by RobertGonzalez
There is a statement that I use in CSS to handle IE vs compliant browsers. It is the
!important statement and it works really well for things like this. Basically the compliant browsers will take the value of the value declared important instead of any other value already declared. This lets you change the value later to something else that non-compliant browsers will change to while the compliant browser will hold the value of the important declaration.
Code: Select all
#boxed ul {
margin-right: 10px !important; /* Compliant browsers skip the next statement */
margin-right: 5px; /* IE picks this one up because it doesn't understand !important */
}
Posted: Sun May 27, 2007 2:48 pm
by superdezign
That sounds like something that they've surely fixed, by now. I don't have IE7, but I'm aware that it's considered a whole different version for a reason (beyond adapting tabbed browsing).
As for IE hacks, I use
Code: Select all
top: 15px; /* All browsers understand this */
_top: 20px; /* Only IE catches this... */
I hate hacks though. The only time I use them are when IE can't handle absolute/relative positioning correctly.
Posted: Sun May 27, 2007 3:12 pm
by nickvd
If I recall correctly, IE7 does know about !important, but I try not to use it.. Hacks are ugly, useless and will break any chance of validating the css..
Using conditional comments to filter correct and standard rules to the different versions of ie that require them will allow you to keep everything organized and standards compliant...
Posted: Sun May 27, 2007 3:21 pm
by RobertGonzalez
That !important declaration does not break validation. I have used it extensively and my CSS validates when I do.
Posted: Sun May 27, 2007 3:25 pm
by superdezign
I think he meant me. :-p
Posted: Sun May 27, 2007 3:32 pm
by RobertGonzalez
Doh... I need a beer. C ya till later.
Posted: Sun May 27, 2007 3:36 pm
by nickvd
Heh, yeah, I know !important is part of the standards, it's primary use is to force your own styles, overriding any user-styles that may exist..
left: 12px;
_left: 10px;
that is a hack and wont validate

Posted: Sun May 27, 2007 3:41 pm
by superdezign
What can I say... I don't follow standards.
I'm a rebel.
