In all honesty, testing for IE6 just makes your page code look awful (because of the hacks). Honestly, your best bet is to say on the main page "Best viewed in IE7 and FF, if you're using IE6, why not upgrade?" and some stuff about why they should, or even better, why IE6 is the worst thing since IE 5.5
I don't really feel comfortable neglecting over 10% of my impressions.
What you should fix: Things that completely break the site in IE6 and make it unusable
What you shouldn't fix: Transparent PNGs, alignment problems, etc.
People using IE6 need to upgrade or get off the Internet. That's my heartfelt opinion.
13% of Icrontic's readers arrive in IE6. And remember, this is actually our livelihood, not just a brochure site. How does it look? The tabs look horrible and have a gap under them, the logo ducks under the feature articles, and the sidebar drops to the bottom of the page. But, you can definitely get to all the content and read it just fine. If you want to browse like it's 1998, be prepared for the consequences.
Ok, look at the zip and I think you will be able to see what I did.
I changed the background to a .jpg like I suggested earlier because now it will show right on all browsers.
Now the drop shadow background for the container is really easy actually. You will see in the index file there is an if statement that tells the browser to include an additional CSS file if it is IE6 or below. In the ie6.css I just had it include a modified background that IE6 (and below) can handle. So the IE6 users don't get the hawt drop shadow they get a perfectly looking functioning page.
Let me know if you have any questions.
I work for the government so everything I crank out has to not only work in IE6 but be fully accessible to screen readers. :bigggrin:
lol do not do this. If you do go ahead and make the links Comic Sans and put best viewed in 800x600 in the footer as well.
I live in a world where we're still supporting IE 5.5, Eudora, and other stuff. A small, unobtrusive amount of text at the bottom saying this isn't necessarily a bad thing.
Edit: The reason I say this is because some people aren't aware they're using something extremely old. Take my father, he wouldn't know IE5 from Firefox (much less IE4 to IE7/8/Epic). Also take the government work I do, while adding it to your actual page is silly, suggesting to clients who use a system you maintain that they move on from IE 5.5 is to upgrade. I guess I'm just looking out for the less tech savvy individuals in the world.
Ok. I worked that part out. I changed up the graphics a little bit because they were a little wide for my tastes. (I want people at 1024x768 to see at least a little of the bg and not have a horizontal scroll bar) And I also made it to where ff would have the drop shadow and ie6 has a straight line going down. Since I don't have ie6, I just made another file to see what it would look like
index.htm is ff/ie7/etc
index2.htm is what ie6 should look like (just for my preview purposes, I understand the auxilary css file)
I also did the min-height just becase I was going crazy only seeing half my page filled (24" monitor). I'll probably end up removing the 3 lines of css in the end but for now I need it to see how everything will look.
The only thing I am confused on is the math used to get div widths, and padding/margin values. I never did figure it out so I just brute forced my way into correctness for the most part.
I really wanted more of a margin (space edge of container to content) but I couldn't figure out how to do it.
padding + width = the width of the div
Margin is the space outside the div.
In CSS it goes like this (for margin or padding):
padding: top right bottom left
OR
padding topANDbottom rightANDleft
So if you have 20px padding on the right and left (like in the example I uploaded) and you want the div to be 988px (giving room for the drop shadow on each side)
width: 948px;
padding: 0 20px;
So your div is going to be 948px + 20px padding on the right + 20px padding on the left = 988 width overall.
The box model (google it) is kinda stupid and takes a bit to get down but that's just the way it goes.
If you want to give more space for the background re-do things so that your container div is ~900px + ~15px on both sides for the drop shadow. Which would but you at about 930px. Ideally you want to stay under 960px;
A few things if you are going to get into web design.
First use multiple IEs for testing http://tredosoft.com/Multiple_IE
Secondly, use the 960 photoshop grid when designing - it will make your life a lot easier. http://960.gs/
Ok sweet. That makes sense now. I'm just having to relearn all the jargon from the print industry.
Where I thought padding was the 'cushion space' outside an element' and the margin was the space inside an element. Now my confusion makes sense but I got it figured out. And before I thought that the background element could only occupy the space of the div itself, not the div+padding. It helps to know the correct definitions. I should have looked those up.
I have the div 872px wide with 43px of padding on either side to bump it all back to 958px total. Nice. I'm proud of myself.
I also went ahead and got as far as I could without any help, if I screwed up don't smack me too hard.
Work Hard, Play Hard is the motto we live by at Delta Tau Delta. Work Hard, because we excel in leadership, academics, and service to others. Play Hard, because we recognize that there is more to life than classes and problem sets. We pride ourselves on being one of the most successful and social fraternities on campus.
<p>We live in an spacious two-story house on University street, within easy walking distance of the campus. Amenities such as a big screen HDTVs, DirecTV, high-speed internet, laundry facilities, full parking lot, pool table, and our chef, Ken, make life more comfortable. The Delt Shelter is the place where we have fun, study, and visit, even years after we graduate.</p>
<p>Our 45 brothers represent many different backgrounds, 6 states, 12 majors, ten varsity sports, and are involved in everything from community service at Habitat for Humanity to managing their own start-up companies.</p>
</div><!-- /doc1 -->
<div id="doc2">
<h2>Current Events</h2>
<ul>
<li><a href="http://www.tumbleweedconcerts.com/reddirtwekend.htm" target="_blank">Red Dirt Weekend</a> is October 23<sup>th</sup>-25<sup>th</sup></li>
<li>Cowboys play Texas October 25<sup>th</sup></li>
</ul>
</div><!-- /doc2 -->
<div id="doc3">
<h2>News and Announcements</h2>
<ul>
<li><a href="/fr">Fall Recruitment</a> is happening now! </li>
<li>Take a look at the <a href="/gallery">photo gallery</a>. </li>
<li>Are you an Alumni? Please update your <a href="/alumc">contact information</a>.</li>
<li>The <a href="/carnival">carnival</a> was a huge success. We raised around $10,000 for the night </li>
<li>The <a href="http://delts.org" target="_blank" title="National Delta Tau Delta Website">national website</a> has been redesigned, check it out. </li>
</ul>
</div><!-- /doc3 -->
</div><!-- /content -->
I'm still not completely sure how joomla handles the menu item creation but I'm hoping that it just generates the block of code that will be things like side_menu and just puts the variables where appropriate. How did I do? Horrible?
First, be careful when you start floating objects. Most of the time if you don't close the float on a following object (float: clear;) it will screw things up.
Secondly, you need to rework how you have your header/logo.
You are heading in the right direction with applying a span and trying to hide it, but the way you did it is off.
The main problem is you can't put a link around an entire div (or around any element like h1). The link is supposed to be contained inside. I don't remember if it actually works in firefox or not but just don't do it.
I have to do this all the time for the gov websites I work on because they want their logo up at the top, clickable, and yet readable for screen readers.
The CSS
[HTML]
/* replace the height and width with the specs of your image */
#header h1 {
width:336px ;
height:96px;
background: url(images/logo.jpg) no-repeat;
}
This keeps the logo linkable and still keeps the H1 text intact for search engines and screen readers.
Also, it's been said that using a negative margin to hide elements instead of display:none because some screen readers don't pick that up - and if SE's do it still being debated. Play it safe and use the negative margin.
Also you can turn
[HTML]
padding: 0 43px;
padding-bottom: 10px;
[/HTML]
INTO
[HTML]padding: 0 43px 10px 43px;[/HTML]
Other than what I mentioned above it doesn't look too shabby. I obviously couldn't see how the page is rendering though, just looked through what you pasted.
Basically as I see it, apart from the spiffy css to actually get this thing rendering right, there are just a few things I want to do with it.
The main one, which really isn't even that big of a deal in the grand scheme of things is to add some fancy javascript to make the login and pasword input boxes look like those on facebook. Basically for them to say usename and password inside of them and then when they get clicked it just goes to a cursor and erases the text. and then if they lose focus without anything being entered it goes back to the username/password text. I'm also guessing that the actual styling of the boxes and submit button is handled via css?
I'm going to need help with the menus and on that note just about everything else getting the css to work right. I'm clueless and for the most part I cheated like a whore and looked at how my existing joomla template was laid out except I didn't use any tables like it did.
Also, kill the class on all the sidemenu li items. You won't need that either.
Regarding the form stuff. What you talked about (facebook effects) is all easily done with a little javascript. You should be able to find some code to do that, or if you do a little digging you can probably just "borrow" facebook's
The styling (border, background, size, color, font) with the form objects is all CSS, including the submit button - which can also be an image but I usually don't go that route.
Also, kill the class on all the sidemenu li items. You won't need that either.
Regarding the form stuff. What you talked about (facebook effects) is all easily done with a little javascript. You should be able to find some code to do that, or if you do a little digging you can probably just "borrow" facebook's
The styling (border, background, size, color, font) with the form objects is all CSS, including the submit button - which can also be an image but I usually don't go that route.
yeh, I was wondering why they were there, but it is how they were in the joomla produced code and I just copied and pasted them. and I think the classes are required by joomla because in the code each li had a unique class. I don't know why they would, but they do.
Ok, another couple hours down learning this stuff. I have the header looking correct, just gotta add the javascript later. I also shrank the font down to a more bearable size for now.
The next thing I guess is the top menu bar. How in the world do I turn an unordered list into a menu? I know it can be done because joomla did it but the css is cryptic. Also, how do I go about adding the horizontal rule above the footer?
Ok. time for another check in. I'm having some issues with the top menu:(
I have the basic idea of it, but some of tactics he used I don't quite understand, and alsoin the process of adding the horizontal rules above and below the menu added another problem.
Here is the CSS and HTML I'm using. I'm using too many divs for my liking and feel that I should be able to get rid of the outer most one but don't know how too...
I understand what he's doing in the #navlist li by trying to get rid of the first child problem, but what I don't understand is that since it affects all the li fields why it doesn't get rid of all the left borders.
Then I came to the problem with the horizontal rules. The way it is it looks good in IE7 except that the first child is showing. And then in firefox the top rule is too high up. So I used a negative margin but that cause IE7 to bring the top rule to right on top of my letters.
I know there is a (correct) way to do this and everything will work beautifully, but I'm not finding it.
I'll look at it tonight when I get off work. But I forgot to mention in my previous post, don't size the text with pt. Preferably use ems otherwise use px.
You can set photoshop to use px instead of pt so will know how it will look.
Uggh, its kinda hard to explain. Switching font sizing from pixels to ems took a lot of work for me. It wasn't until I started working for the fed where it is required that I actually forced myself to use ems.
Also, for paddings, margins, etc use pixels instead of ems. Pixels for padding/margins and ems for font sizing, line sizing is ideal.
Well the good news I fixed the top menu on my own and I know how for the most part.
What is line sizing? I thought I read some literature that said to avoid using pixels for sizing objects because they don't scale or something like that. Fallacy?
Comments
What you shouldn't fix: Transparent PNGs, alignment problems, etc.
People using IE6 need to upgrade or get off the Internet. That's my heartfelt opinion.
13% of Icrontic's readers arrive in IE6. And remember, this is actually our livelihood, not just a brochure site. How does it look? The tabs look horrible and have a gap under them, the logo ducks under the feature articles, and the sidebar drops to the bottom of the page. But, you can definitely get to all the content and read it just fine. If you want to browse like it's 1998, be prepared for the consequences.
lol do not do this. If you do go ahead and make the links Comic Sans and put best viewed in 800x600 in the footer as well.
Can we continue? I'm really itching to learn this because I played with the css/html some more and it still didn't work.
I changed the background to a .jpg like I suggested earlier because now it will show right on all browsers.
Now the drop shadow background for the container is really easy actually. You will see in the index file there is an if statement that tells the browser to include an additional CSS file if it is IE6 or below. In the ie6.css I just had it include a modified background that IE6 (and below) can handle. So the IE6 users don't get the hawt drop shadow they get a perfectly looking functioning page.
Let me know if you have any questions.
I work for the government so everything I crank out has to not only work in IE6 but be fully accessible to screen readers. :bigggrin:
I live in a world where we're still supporting IE 5.5, Eudora, and other stuff. A small, unobtrusive amount of text at the bottom saying this isn't necessarily a bad thing.
Edit: The reason I say this is because some people aren't aware they're using something extremely old. Take my father, he wouldn't know IE5 from Firefox (much less IE4 to IE7/8/Epic). Also take the government work I do, while adding it to your actual page is silly, suggesting to clients who use a system you maintain that they move on from IE 5.5 is to upgrade. I guess I'm just looking out for the less tech savvy individuals in the world.
index.htm is ff/ie7/etc
index2.htm is what ie6 should look like (just for my preview purposes, I understand the auxilary css file)
I also did the min-height just becase I was going crazy only seeing half my page filled (24" monitor). I'll probably end up removing the 3 lines of css in the end but for now I need it to see how everything will look.
The only thing I am confused on is the math used to get div widths, and padding/margin values. I never did figure it out so I just brute forced my way into correctness for the most part.
I really wanted more of a margin (space edge of container to content) but I couldn't figure out how to do it.
Anyway. what's the next step?
Margin is the space outside the div.
In CSS it goes like this (for margin or padding):
padding: top right bottom left
OR
padding topANDbottom rightANDleft
So if you have 20px padding on the right and left (like in the example I uploaded) and you want the div to be 988px (giving room for the drop shadow on each side)
width: 948px;
padding: 0 20px;
So your div is going to be 948px + 20px padding on the right + 20px padding on the left = 988 width overall.
The box model (google it) is kinda stupid and takes a bit to get down but that's just the way it goes.
If you want to give more space for the background re-do things so that your container div is ~900px + ~15px on both sides for the drop shadow. Which would but you at about 930px. Ideally you want to stay under 960px;
A few things if you are going to get into web design.
First use multiple IEs for testing http://tredosoft.com/Multiple_IE
Secondly, use the 960 photoshop grid when designing - it will make your life a lot easier. http://960.gs/
cheers
Where I thought padding was the 'cushion space' outside an element' and the margin was the space inside an element. Now my confusion makes sense but I got it figured out. And before I thought that the background element could only occupy the space of the div itself, not the div+padding. It helps to know the correct definitions. I should have looked those up.
I have the div 872px wide with 43px of padding on either side to bump it all back to 958px total. Nice. I'm proud of myself.
I also went ahead and got as far as I could without any help, if I screwed up don't smack me too hard.
[HTML]
<!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">
<head>
****** http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<link rel="stylesheet" type="text/css" media="screen" href="stylesheet.css" />
<!--[if lte IE 6]> <link rel="stylesheet" type="text/css" media="screen" href="ie6.css" /> <![endif]-->
</head>
<body>
<div id="container">
<div id="header">
<a href="."><div id="logo"><h1><span>Oklahoma State Delts</span></h1></div></a>
</div><!-- /header -->
<div id="top_menu">
<ul class="menu">
<li class="itemx"><a href="."><span>About ΔΤΔ</span></a></li>
<li class="itemx"><a href="."><span>Rush Delt</span></a></li>
<li class="itemx"><a href="."><span>Scholarhsip</span></a></li>
<li class="itemx"><a href="."><span>Photo Gallery</span></a></li>
<li class="itemx"><a href="."><span>Calendar</span></a></li>
<li class="itemx"><a href="."><span>Alumni</span></a></li>
<li class="itemx"><a href="."><span>Contact Us</span></a></li>
</ul>
</div><!-- /top_menu -->
<div id="side_menu">
<h3>Home Menu</h3>
<ul>
<li class="itemx"><a href="."><span>About ΔΤΔ</span></a></li>
<li class="itemx"><a href="."><span>Rush Delt</span></a></li>
<li class="itemx"><a href="."><span>Scholarhsip</span></a></li>
<li class="itemx"><a href="."><span>Photo Gallery</span></a></li>
</ul>
</div><!-- /side_menu -->
<div id="side_menu">
<h3>Rush Delt</h3>
<ul>
<li class="itemx"><a href="."><span>Why Delt?</span></a></li>
<li class="itemx"><a href="."><span>About Rush</span></a></li>
<li class="itemx"><a href="."><span>Info for Parents</span></a></li>
<li class="itemx"><a href="."><span>FAQ</span></a></li>
<li class="itemx"><a href="."><span>Rush Contact</span></a></li>
</ul>
</div><!-- /side_menu -->
<div id="side_menu">
<h3>Resources</h3>
<ul>
<li class="itemx"><a href="."><span>Chapter Documents</span></a></li>
<li class="itemx"><a href="."><span>Memeber Email</span></a></li>
<li class="itemx"><a href="."><span>National Website</span></a></li>
<li class="itemx"><a href="."><span>Delt InCircle</span></a></li>
<li class="itemx"><a href="."><span>OSU IFC</span></a></li>
<li class="itemx"><a href="."><span>OSU Greek Life</span></a></li>
</ul>
</div><!-- /side_menu -->
<div id="content">
<div id="doc1">
<h1>Welcome</h1>
Work Hard, Play Hard is the motto we live by at Delta Tau Delta. Work Hard, because we excel in leadership, academics, and service to others. Play Hard, because we recognize that there is more to life than classes and problem sets. We pride ourselves on being one of the most successful and social fraternities on campus.
<p>We live in an spacious two-story house on University street, within easy walking distance of the campus. Amenities such as a big screen HDTVs, DirecTV, high-speed internet, laundry facilities, full parking lot, pool table, and our chef, Ken, make life more comfortable. The Delt Shelter is the place where we have fun, study, and visit, even years after we graduate.</p>
<p>Our 45 brothers represent many different backgrounds, 6 states, 12 majors, ten varsity sports, and are involved in everything from community service at Habitat for Humanity to managing their own start-up companies.</p>
</div><!-- /doc1 -->
<div id="doc2">
<h2>Current Events</h2>
<ul>
<li><a href="http://www.tumbleweedconcerts.com/reddirtwekend.htm" target="_blank">Red Dirt Weekend</a> is October 23<sup>th</sup>-25<sup>th</sup></li>
<li>Cowboys play Texas October 25<sup>th</sup></li>
</ul>
</div><!-- /doc2 -->
<div id="doc3">
<h2>News and Announcements</h2>
<ul>
<li><a href="/fr">Fall Recruitment</a> is happening now! </li>
<li>Take a look at the <a href="/gallery">photo gallery</a>. </li>
<li>Are you an Alumni? Please update your <a href="/alumc">contact information</a>.</li>
<li>The <a href="/carnival">carnival</a> was a huge success. We raised around $10,000 for the night </li>
<li>The <a href="http://delts.org" target="_blank" title="National Delta Tau Delta Website">national website</a> has been redesigned, check it out. </li>
</ul>
</div><!-- /doc3 -->
</div><!-- /content -->
<div id="footer">
<div id="footer_l">
<div id="footer_r">
Site design by Andy Ingraham <br />
Copyright © 2008-2009 Delta Chi Chapter, Delta Tau Delta <br />
Powered by Joomla. Valid XHTML and CSS
</div><!-- /footer_r -->
<label for="username"><input type="text" name="username" tabindex="1" id="username" /></label>
<label for="password"><input type="password" name="password" tabindex="2" id="password" /></label>
<label for="submit"><input name="Submit" type="submit" id="submit" tabindex="4" value="Log in" /></label>
</div><!-- /footer_l -->
</div><!-- /container -->
</body>
</html> [/HTML]
html{ height: 100%; } body { margin: 0; padding: 0; height: 100%; font-family: Arial, Helvetica, sans-serif; background: #FFFFCC url(images/background-page.jpg) repeat-x; } img { border: 0; } #logo { width: 400px; height: 97px; background: url(images/logo.png) 0 0 no-repeat; margin-left: 10px; } #logo h1 span{ display: none; } #container { width: 872px; /* 960 w padding */ padding: 0 43px; padding-bottom: 10px; min-height: 100%; background: url(images/bg_container.png) repeat-y; margin: 0 auto; } #footer { height: 50px; } #footer_r { float:right; }I'm still not completely sure how joomla handles the menu item creation but I'm hoping that it just generates the block of code that will be things like side_menu and just puts the variables where appropriate. How did I do? Horrible?
Couple things though.
First, be careful when you start floating objects. Most of the time if you don't close the float on a following object (float: clear;) it will screw things up.
Secondly, you need to rework how you have your header/logo.
You are heading in the right direction with applying a span and trying to hide it, but the way you did it is off.
The main problem is you can't put a link around an entire div (or around any element like h1). The link is supposed to be contained inside. I don't remember if it actually works in firefox or not but just don't do it.
I have to do this all the time for the gov websites I work on because they want their logo up at the top, clickable, and yet readable for screen readers.
The XHTML
[HTML]
<div id="header">
<h1 id="logo"><a href="#"><span>OSU Delts</span></a></h1>
</div><!-- #header -->
[/HTML]
The CSS
[HTML]
/* replace the height and width with the specs of your image */
#header h1 {
width:336px ;
height:96px;
background: url(images/logo.jpg) no-repeat;
}
#header #logo a{
width:336px ;
height:96px;
position: absolute;
top: 0px;
left: 0px;
}
#header span {
margin-left: -9999px;
}
[/HTML]
This keeps the logo linkable and still keeps the H1 text intact for search engines and screen readers.
Also, it's been said that using a negative margin to hide elements instead of display:none because some screen readers don't pick that up - and if SE's do it still being debated. Play it safe and use the negative margin.
Also you can turn
[HTML]
padding: 0 43px;
padding-bottom: 10px;
[/HTML]
INTO
[HTML]padding: 0 43px 10px 43px;[/HTML]
Other than what I mentioned above it doesn't look too shabby. I obviously couldn't see how the page is rendering though, just looked through what you pasted.
THEY CHEAT LIKE WHORES
http://66.76.244.242/NewTemplate
Basically as I see it, apart from the spiffy css to actually get this thing rendering right, there are just a few things I want to do with it.
The main one, which really isn't even that big of a deal in the grand scheme of things is to add some fancy javascript to make the login and pasword input boxes look like those on facebook. Basically for them to say usename and password inside of them and then when they get clicked it just goes to a cursor and erases the text. and then if they lose focus without anything being entered it goes back to the username/password text. I'm also guessing that the actual styling of the boxes and submit button is handled via css?
I'm going to need help with the menus and on that note just about everything else getting the css to work right. I'm clueless and for the most part I cheated like a whore and looked at how my existing joomla template was laid out except I didn't use any tables like it did.
Edit: idk why you are putting spans around all the links???
[html]
<li class="itemx"><a href="."><span>About ΔΤΔ</span></a></li>
[/html]
edit 2: if side_menu 1, 2, and 3 are going to have the same styling, padding, etc just make one class instead of 3 seperate ids
Regarding the form stuff. What you talked about (facebook effects) is all easily done with a little javascript. You should be able to find some code to do that, or if you do a little digging you can probably just "borrow" facebook's
The styling (border, background, size, color, font) with the form objects is all CSS, including the submit button - which can also be an image but I usually don't go that route.
yeh, I was wondering why they were there, but it is how they were in the joomla produced code and I just copied and pasted them. and I think the classes are required by joomla because in the code each li had a unique class. I don't know why they would, but they do.
That has to be one of the best ads I've seen to date on IC. Nice catch
The next thing I guess is the top menu bar. How in the world do I turn an unordered list into a menu? I know it can be done because joomla did it but the css is cryptic. Also, how do I go about adding the horizontal rule above the footer?
Add this and it will fix it
[html]
#header #logo {
position: relative;
}
[/html]
As far as the list as a horizontal menu, this site has everything you need and more
Look through it and you'll learn the ropes.
http://css.maxdesign.com.au/listamatic/index.htm
cheers
I tried
a:active { border:none; }and that didn't work.
a:active {
text-decoration: none;
}
[/HTML]
If you want the underline to come back when the mouse rolls over add
[HTML]
a:hover {
text-decoration: underline;
}
[/HTML]
I have the basic idea of it, but some of tactics he used I don't quite understand, and alsoin the process of adding the horizontal rules above and below the menu added another problem.
Here is the CSS and HTML I'm using. I'm using too many divs for my liking and feel that I should be able to get rid of the outer most one but don't know how too...
I understand what he's doing in the #navlist li by trying to get rid of the first child problem, but what I don't understand is that since it affects all the li fields why it doesn't get rid of all the left borders.
Then I came to the problem with the horizontal rules. The way it is it looks good in IE7 except that the first child is showing. And then in firefox the top rule is too high up. So I used a negative margin but that cause IE7 to bring the top rule to right on top of my letters.
I know there is a (correct) way to do this and everything will work beautifully, but I'm not finding it.
CSS:
#top_menu{ width: 92%; margin: 0 auto; margin-bottom:1.2em; border-top: 1px #400040 solid; border-bottom: 1px #400040 solid; } #navcontainer { margin-bottom: .5em; margin-top: .5em; margin-left:3%; overflow: hidden; width: 97%; } #navlist { list-style-type: none; padding: 0; } #navlist li { font-size:10pt; font-weight:bold; border-left: 1px solid #999; float: left; margin: 0 .5em 0 -.5em; padding: 0 .5em; white-space:nowrap; }[HTML]
<div id="top_menu">
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">About ΔΤΔ</a></li>
<li><a href="#">Rush Delt</a></li>
<li><a href="#">Scholarship</a></li>
<li><a href="#">Photo Gallery</a></li>
<li><a href="#">Calendar</a></li>
<li><a href="#">Alumni</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div><!-- /navcontainer -->
</div><!-- /top_menu -->[/HTML]
You can set photoshop to use px instead of pt so will know how it will look.
Also, for paddings, margins, etc use pixels instead of ems. Pixels for padding/margins and ems for font sizing, line sizing is ideal.
What is line sizing? I thought I read some literature that said to avoid using pixels for sizing objects because they don't scale or something like that. Fallacy?