css alignment of <ul> [56k warn]

JavaScript and client side scripting.

Moderator: General Moderators

User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

css alignment of <ul> [56k warn]

Post by s.dot »

Image:

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>
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post 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.
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

Margins baby. That is about it. Relatively speaking of course. ;)
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post by s.dot »

OK, this is giving me problems again.

Mozilla renders it correctly (as I want it, at least) like this:
Image

IE renders it a bit too far to the right and the top borders don't show, like this:
Image

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;
}
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post by nickvd »

That smells like a job for Conditional Comments!!

:D


aka, just feed IE the CSS it wants to use and leave the standard css to the good browsers...
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post 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>
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post 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 */

:D
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post 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 */
}
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post 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.
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post 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...
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

That !important declaration does not break validation. I have used it extensively and my CSS validates when I do.
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

I think he meant me. :-p
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

Doh... I need a beer. C ya till later.
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post 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 :)
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

What can I say... I don't follow standards.

I'm a rebel. :lol:
Post Reply