|
| |
|
|
slbergh
Posts: 322
Joined: 11/8/2002
From: Iowa
Status: offline
 |
Container positioning - 5/19/2005 15:02:42
I'm almost ready to go back to tables! 
I've been putting our website into a CMS. As I do so, I've been redesigning the site using strictly CSS. All was well until earlier this week when I decided I'd go in and start doing everything the "right way". Now, the layout is broken and I'm tearing my hair out. It looks great in IE, but I can't get the container to envelop all the other block elements on the page in FF. I've tried everything I can think of, including putting in a transparent image as a background. For some reason, it will not expand at all unless I specify a height.
Earlier, I did have the height set to 600 px. However, when I set my overflow for my content area to "auto", it either clipped everything off in FF or let it hang outside of my divs. (Ironically, the one time I did have it displaying perfectly in FF, the layout was hosed in IE!  )
Anyone with any ideas?
http://www.ehs.iastate.edu/cms/default.asp?action=article&ID=40
_____________________________
Digital data lasts forever...or 5 years, whichever comes first!
|
|
|
|
Tailslide
Posts: 5999
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: Container positioning - 5/19/2005 15:37:39
Hi there
Don't panic - it's all solvable and we've all been there (frequently!).
I've had a fiddle with the code - I don't have time to finish it but basically you need to set the margin to margin: 0 auto; on the main layout box - take out all the position: fixed that you've got in there - that's what seems to be messing with the border. Add a clear:both to the footer to put it below the main content. This should clear up a lot of the problems - the header will still need a bit of work but it's nearly there. Do that lot and see what's left to do.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
slbergh
Posts: 322
Joined: 11/8/2002
From: Iowa
Status: offline
|
RE: Container positioning - 5/19/2005 23:22:52
That did take care of a lot of it. The problem I'm having now is in FF. There's whitespace showing between the nameplate and banner divs. I can't figure out where it's coming from.
(I'd never come across the clear: both before.)
_____________________________
Digital data lasts forever...or 5 years, whichever comes first!
| |
|
|
|
Tailslide
Posts: 5999
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: Container positioning - 5/20/2005 4:50:32
I'll take a look a bit later on today see if I can work it out - I've got to write a database this morning (ooh fun!)
Another big tip though - always code for FF, check it in Opera and fix it for IE - if you try to do it the other way round you'll drive yourself insane!
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
c1sissy
Posts: 5084
Joined: 7/20/2002
From: NJ
Status: offline
|
RE: Container positioning - 5/20/2005 9:05:33
quote:
ORIGINAL: slbergh
That did take care of a lot of it. The problem I'm having now is in FF. There's whitespace showing between the nameplate and banner divs. I can't figure out where it's coming from.
(I'd never come across the clear: both before.)
There is a newer method which is pretty good, its called the clearfix. I would suggest that you read through it. I did post some information here in the forum in regards to this one. THe clearfix is supposed to be better then the clear: both method.
Here Is the information on the clearfix, with additional links through the article to the originator of the fix.
_____________________________
Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/
| |
|
|
|
slbergh
Posts: 322
Joined: 11/8/2002
From: Iowa
Status: offline
|
RE: Container positioning - 5/20/2005 9:25:41
dave - The validation errors are a battle for another day. The CMS I'm using automatically converts all tags to uppercase, causing many of the errors. When I figure out how to hack the CMS to prevent the conversion, everything should validate. The pages validated before I started putting them into the CMS. (This has been a very long ongoing "update" project...started out as a FP web.)
Thanks for your help with this Tailslide! I've been banging my head against my desk all week! (Now, if I can just remember what I did to get my asp pages to work in the system...!!)
_____________________________
Digital data lasts forever...or 5 years, whichever comes first!
| |
|
|
|
Tailslide
Posts: 5999
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: Container positioning - 5/20/2005 10:20:03
I'm on it - got it validating except for the ASP stuff (don't know how to get that bit right) and looking good in FF and IE - just fiddling to get the banner right in Opera.
Back soon...
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
slbergh
Posts: 322
Joined: 11/8/2002
From: Iowa
Status: offline
|
RE: Container positioning - 5/20/2005 10:57:05
Thanks for the link Deb! Maybe someday, when no one else is using CSS anymore, I'll finally get it all cemented in my mind how to use it!
_____________________________
Digital data lasts forever...or 5 years, whichever comes first!
| |
|
|
|
Tailslide
Posts: 5999
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: Container positioning - 5/20/2005 11:06:20
Right then - here you go.
This page now validates apart from the asp links - I've swapped the DTD to XHTML transitional just to be sure.
It now looks the same in FF, IE 6 and Opera 7.11. You can test other browsers for yourself!!
Here's the code for your first page - I've changed a couple of bits so you'll need to compare before and after to see what I've done. I read your comment about the Upper case CMS monster after I'd converted it all to lowercase (oh well!).
<!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" lang="en" xml:lang="en">
<head>
<title>Iowa State University Dept. of Enviromental Health and Safety | Home Page</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Iowa State University Dept. of Environmental Health and Safety" />
<meta name="description" content="Extensive website containing health and safety information for Iowa State University" />
<meta name="robots" content="all" />
<!-- to correct Flash of Unstyled Content. http://www.bluerobot.com/web/css/fouc.asp -->
<style type="text/css" media="screen">@import "media/css/layout.css";</style>
<link rel="stylesheet" type="text/css"media="screen" href="media/css/layout.css" />
<link rel="stylesheet" type="text/css" media="screen"href="media/css/homecolor.css" />
<script type="text/javascript">
<!--
function SymError()
{
return true;
}
window.onerror = SymError;
var SymRealWinOpen = window.open;
function SymWinOpen(url, name, attributes)
{
return (new Object());
}
window.open = SymWinOpen;
//-->
</script>
<script type="text/javascript"></script>
</head>
<body>
<div id="layout">
<div id="nameplate">
<div id="map"><a href="http://www.iastate.edu"></a></div></div>
<div id="banner"><h4>Welcome!</h4></div>
<div id="mainmenu"><a href="default.asp?action=article&ID=18">Home</a> · <a href="default.asp?action=article&ID=19">Administration</a> · <a href="default.asp?action=article&ID=26">Biosafety</a> · <a href="default.asp?action=article&ID=201">Emergency Response</a> · <a href="default.asp?action=article&ID=68">Environmental Programs</a> · <a href="default.asp?action=article&ID=114">General Safety</a> · <br /><a href="default.asp?action=article&ID=73">Occupational Health</a> · <a href="default.asp?action=article&ID=202">Radiation Safety</a> · <a href="default.asp?action=article&ID=160">Training </a></div>
<div id="breadcrumb"> <span><!-- #include file="breadcrumb.htm" --></span></div>
<!-- Here's a new div to help position the floating bits on the page it ends before the footer - I've added the clearfix hack to it -->
<div id="mainbox" class="clearfix">
<div id="links">
<h5>Services</h5>
<p><a href="http://www.ehs.iastate.edu/oh/cheminv.htm" title="Information on chemical inventories, Chemical Inventory system login">Chemical Inventory</a> <br /><a href="http://www.ehs.iastate.edu/ep/recycle.htm" title="Chemical Redistribution Program information and login">Chemical Redistribution</a> <br /><a href="http://www.ehs.iastate.edu/oh/msds.htm" title="Material Safety Data Sheets">MSDS</a> <br /><a href="http://www.ehs.iastate.edu/hazard.asp" title="Report an observed hazard to EH&S">Report a Hazard</a> <br /><a href="http://www.ehs.iastate.edu/ep/wasteremoval.htm" title="Chemical, sharps and radiological waste removal requests">Waste Removal Request</a> </p>
<h5>Quick Links</h5>
<p><a href="../newsletter.asp" title="EH&S campus newsletter and searchable newsletter archives">Campus Newsletter</a> <br />Committees <br /><a href="http://www.ehs.iastate.edu/training/ebooks.htm" title="E-books on various topics">E-books</a> <br /><a href="http://www.ehs.iastate.edu/admin/employment.asp" title="Current job openings">Employment</a> <br /><a href="http://www.ehs.iastate.edu/forms.asp" title="Forms">Forms</a> <br /><a href="http://www.ehs.iastate.edu/admin/news.asp" title="News and News Archives">News</a> <br /><a href="default.asp?action=article&ID=25" title="Search our website">Search</a> <br /><a href="http://www.ehs.iastate.edu/library.asp" title="Manuals, booklets, newsletters, other publications">Safety Library</a> <br /><a href="http://www.ehs.iastate.edu/admin/directory.asp" title="Staff contacts and biographical information">Staff Directory</a> </p>
<p>* = external link </p>
</div>
<div id="content" >
<h4>Welcome to EH&S</h4>
<p>Welcome! EH&S is a service unit of Iowa State University, devoted to ensuring the occupational health and safety of all Iowa State personnel, students and visitors.</p>
<p>To aid in this endeavor, EH&S offers a comprehensive health and safety program, incorporating everything from fire safety to radiation safety. We offer a wide array of manuals, E-books and training sessions to ensure that Iowa State University personnel are able to receive the information they need in these areas. </p>
<p>To assist the Iowa State University community even more, we have divided the department into several programs, in order to offer more specialized resources. We are continually adding new programs and services, many web-based, in an attempt to meet the ever-changing needs of Iowa State University's faculty and staff.</p> <!-- enVivo!CMS Classic v3.54 Professional : MFY4-XTG9-VEBL-CN1Q -->
</div></div>
<div id="footer" class="clearfix">
2809 Daley Drive - Ames, IA 50011-3660 - (515) 294-5359<br />Copyright © 2005, Iowa State University, all rights reserved.
</div>
</div>
</body>
</html>
And here's the CSS for the Layout:
@charset "iso-8859-1";
body {background: #fff;margin: 0 auto; color: #000; font-style: normal; font-family: verdana, tahoma, sans-serif;line-height:110%; font-size:90%; }
#layout {width: 760px;margin: 0 auto; height:100%;}
#nameplate {background:#cacaac url('../../images/nameplate.jpg');background-repeat: no-repeat ;background-position: left top; height: 60px;font-size: 70%; padding-top: 1px; padding-bottom: 1px;}
#nameplate li {list-style:none;margin-left:-40px;}
#nameplate li a {height:35px;display:block;}
#map {width:310px;}
#banner {color:#fff;width: 100%;height: 50px;padding-top: 1px; padding-bottom: 1px;margin:0;}
#banner h4 {text-align:right;padding:15px; margin: 0 0 0 0;}
#breadcrumb {width:100%;}
#mainmenu {color:#333300; font-size: 75%; text-align:center; width:760px;background-color:#cacaac;padding-top: 1px; padding-bottom: 1px;}
#mainmenu a {color: #333300;}
#mainmenu a:hover {color: #cacaac; text-decoration: none;}
#mainmenu a:active {color: #333300; text-decoration: none;}
#mainmenu ul {list-style-type: disc;}
#mainmenu li {margin: 0 0 3px 0; display: inline;}
#links {width: 185px;font-size: 75%;float: left; margin-bottom: 20px;margin-right: 25px; }
#links h5 {font-size: 110%;margin: 0;}
#links p {margin-left: 0; font-size:100%; padding-bottom: 0; border-bottom: 1px solid #eee; line-height: 125%; padding-bottom: 5px;}
#links ul {margin-top:0; margin-left:15px; font-size:100%; padding-bottom: 5px;border-bottom: 1px solid #eee;}
#links li {display: block; line-height: 130%; list-style-type: none; margin-left:0px;}
#links li a {display: block; white-space: nowrap;margin-left: 0px;}
#links li a.c {display: inline; font-weight: normal; text-decoration: none;}
#links li a.c:hover {text-decoration: none;}
#content {padding:0 20px 0 20px;margin: 0;text-align: justify; font-size: 75%; color: #000; font-style: normal; font-family: verdana, tahoma, sans-serif;line-height: 160%;}
#mainbox {height:100%; margin:20px}
#footer{background:#cacaac; margin:0;padding: 10px;font-family: verdana, tahoma, sans serif;font-size: 75%; height: 50px;color: #fff;}
.center{text-align: center;}
h4 {text-align: justify;}
h3 span {display: none;}
h5 {font-weight:bold;font-size: 90%;}
h6 {font-weight:bold;font-style:italic;font-variant: small-caps;font-size:100%;}
p#resources {font-weight:bold; font-style:italic; font-size:100%; color:#fff; padding: 2px;}
.pub {font-style: italic;}
a {text-decoration:none;}
a:hover {text-decoration:underline overline;}
table { width: 95%;}
tr {valign: top;}
td {text-align: left;width:25%; vertical-align:top;}
th {width:25%; height:32px;}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */
I've messed with the CSS and consolidated it a bit (all helps with download time) and taken out anything glaring that I know won't validate but I haven't actually validated it myself!
Don't think I messed with the colour stylesheet - but you'll soon find out!
Going to lie down now for a while...
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
Tailslide
Posts: 5999
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: Container positioning - 5/20/2005 11:22:35
Oh I think I can guarantee that as soon as everyone figures out CSS totally, "they'll" think up something else to drive us mad!
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
Tailslide
Posts: 5999
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: Container positioning - 5/20/2005 11:34:21
Yeah I read it. To be honest I've been using fixed layouts lately - less hassle!
The thing that really pains me is the cross-browser problem. Thank god for Browsercam I say - or some of my layouts would be WAY off.
New techniques are fine in themselves - if CSS was implemented the same cross-browser then it'd be lovely - "oh look, an new technique for me to use" but instead it's more a case of "oh god what happens in Mac IE or Konqueror"
Depressingly I see no change in the near future - even if the new IE is compliant - we'll be coding for b**** IE 5.5 for years. *sigh*
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
Tailslide
Posts: 5999
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: Container positioning - 5/20/2005 11:49:44
Oh well ain't that a big fat suprise - so that'll be the next 10 years fiddling with browser hacks. B****r!
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
slbergh
Posts: 322
Joined: 11/8/2002
From: Iowa
Status: offline
|
RE: Container positioning - 5/20/2005 12:01:33
I saw what you did and your help is much appreciated!
_____________________________
Digital data lasts forever...or 5 years, whichever comes first!
| |
|
|
|
slbergh
Posts: 322
Joined: 11/8/2002
From: Iowa
Status: offline
|
RE: Container positioning - 5/20/2005 12:20:18
quote:
Dear Tailslide,
I'm not a member of outfront but I saw your posting on....... and I've got a problem.
jaybee, you may have to give up (or rent out?) your caped avatar!
"Faster than broadband... more powerful than a standards compliant browser...It's Tailslide to the rescue!"
_____________________________
Digital data lasts forever...or 5 years, whichever comes first!
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
