JavaScript and client side scripting.
Moderator: General Moderators
s.dot
Tranquility In Moderation
Posts: 5001 Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana
Post
by s.dot » Thu May 24, 2007 12:58 pm
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.
Kieran Huggins
DevNet Master
Posts: 3635 Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:
Post
by Kieran Huggins » Thu May 24, 2007 5:40 pm
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.
RobertGonzalez
Site Administrator
Posts: 14293 Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA
Post
by RobertGonzalez » Fri May 25, 2007 12:49 pm
Margins baby. That is about it. Relatively speaking of course.
s.dot
Tranquility In Moderation
Posts: 5001 Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana
Post
by s.dot » Sat May 26, 2007 12:16 pm
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;
}
nickvd
DevNet Resident
Posts: 1027 Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:
Post
by nickvd » Sat May 26, 2007 12:34 pm
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...
s.dot
Tranquility In Moderation
Posts: 5001 Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana
Post
by s.dot » Sat May 26, 2007 2:24 pm
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 » Sat May 26, 2007 3:49 pm
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 */
RobertGonzalez
Site Administrator
Posts: 14293 Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA
Post
by RobertGonzalez » Sun May 27, 2007 2:37 pm
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 */
}
superdezign
DevNet Master
Posts: 4135 Joined: Sat Jan 20, 2007 11:06 pm
Post
by superdezign » Sun May 27, 2007 2:48 pm
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 » Sun May 27, 2007 3:12 pm
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...
RobertGonzalez
Site Administrator
Posts: 14293 Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA
Post
by RobertGonzalez » Sun May 27, 2007 3:21 pm
That !important declaration does not break validation. I have used it extensively and my CSS validates when I do.
RobertGonzalez
Site Administrator
Posts: 14293 Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA
Post
by RobertGonzalez » Sun May 27, 2007 3:32 pm
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 » Sun May 27, 2007 3:36 pm
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
superdezign
DevNet Master
Posts: 4135 Joined: Sat Jan 20, 2007 11:06 pm
Post
by superdezign » Sun May 27, 2007 3:41 pm
What can I say... I don't follow standards.
I'm a rebel.