Stylesheet with nested divs not rendering correctly (not quite solved)

[heatherfeuer]

For my new project, I'm trying to recreate my business site without using the nested tables that are rampant in the existing structure. I am moving to a new server and the timing seemed appropriate.  You can see the layout I am trying to recreate at the original site: Uniquely Yours Business Services.  The recreation can be viewed here: Uniquely Yours Testsite.

I have done my best to recreate the look using just the stylesheets for all the layout images. The menu definitely needs tweaking because it's supposed to be separate buttons instead of a solid bar.  But right now, my main concern is the general layout.  I have two fixed width divs for the left and right beveled border images.  All the rest is supposed to be liquid with min/max limiters.  What is frustrating me the most at the moment is that in both Firefox and IE, I can't seem to get rid of the horizontal scroll bar even though all but two of the widths are set to percentages if set at all!   The other frustration is that Firefox isn't displaying the correct font.

I have rarely, if ever, had such a problem getting a display to work correctly!   I would really like to recreate this look and still allow for accessibility.  I've done that pretty well, I think, because when you remove all styles, the content displays very well.  Any help would be greatly appreciated!!!    

Kermie???? 

Here's the stylesheet:

Code: Select all

/*
Primary stylesheet for Uniquely Yours Business Services.
Author: Heather Feuerhelm, Uniquely Yours Business Services.
Version 1, April 4, 2007
*/

/* Clear existing margins and padding */
* {
	margin: 0;
	padding: 0;
}

/* Set default body style */
body, {
	/* first the font style */
	text-align: left;
	font-family: Tahoma, Geneva, Arial, Helvetica, sans-serif;
	font-size: 100.1%;
	line-height: 1.2em;
	/* then the layout */
	background-color: #0000ff;
	color: #fff;
	margin: 10px 15px; /* This is to give some room around the pagewrapper */
}

/* Set the font size for all divs */
div {
	font-size: 1em;
}

/* Set the font style for links */
a, a:link, a:active a:visited {
	text-decoration: underline; 
	color: #000000; /* This is the same color as content text */
	background: transparent;
}

a:hover {
	text-decoration: none;
	background-color: #0000ff;
	color: #ffffff;
}

img {
	border: none; /* Prevents images inside an "a" tag from showing a border */
	margin: .5em; /* Puts some air between images and surrounding text */
}


/* Create the layout */
/* 
Define the containers for the page elements.
They are stated here in the order they appear on the page.
 */

 /* 
 The pagewrapper creates a container with a lighter background for the content.
 */
div#pagewrapper {
	background-color: #fff;
	background-image: url(images/bg.gif);	
	color: #000;
	padding: 0 9.7% 0 11%;
	min-width: 60em;
	max-width: 80em;
	/* IE won't recognize min-max, so it's handled with javascript */
	margin: 0 auto; /* Centers the pagewrapper */

}

div#left-border {
	height: auto;
	margin-right: 17px;
	background: #fff url(images/bg-left.gif) repeat-y left;
}

div#right-border {
	height: auto;
	margin-left: 17px;
	padding-right: 17px;
	background: #fff url(images/bg-right.gif) repeat-y right;
}

/* This container holds the header, footer and the main content. */
div#content {
	background-color: #ffffff;
	color: #000000;
	margin: 0 auto; padding: 0;
	border-bottom: 10px solid #FF4900;

}

div#header {
   height: 100px;
/*	width: 100%; */
	margin: 0;
   background-color: #0000ff;
	color: #0000ff;
	background-image: url(images/fon02.jpg);
}

div#header h1 a {
   text-decoration:none; /* firefox fix for link underline */
}

div .header2 {
	background: #ffffff url(images/logo-header.png) no-repeat left;
	height: 98px; width: 311px;
	float: left;
	padding-top: 2px;
}

/* This container is for the main text of the page */
div#main {
	margin: 0 auto;
	padding: .5em;
	background-color: #ffffff;
	color: #000000;
	border: 1px solid #000000;
}

/* position for the search box */
div .search {
   float: right;
	background-color: transparent;
	color: #fff;
   width: 23em;    /* enough width for the search input box */
   text-align: right;
   padding: 65px 0 0.2em 0;
   margin: 0 1em;
}

/* The footer sits below the content section */
div#footer {
	font-size: .8em;
	padding: .5em;
	text-align: center;
	background: transparent;
	color: #000000;
}

div .left49 {
	width: 49%
}

div .right49 {
	float: right;
	width: 49%;
	text-align: right;
}

hr {
	height: 1px;
	border-bottom: 1px dashed #000080;
}

/* 
Content Styling 
*/
/* 
These first styles hide text needed by screen readers and users with mobility impairments. Credit for these styles goes to http://www.webaim.org, an invaluable resource for accessibility tips and tricks.
*/

/* This class hides text from visual display without interfering with other elements. */
.hidden {
	position:absolute;
	left:0px;
	top:-500px;
	width:1px;
	height:1px;
	overflow:hidden;
}

/* 
This class hides skip links from visual display until a keyboard user tabs to it.
The skip link will disappear again once the user tabs away from it.
*/
 #skip a, #skip a:hover, #skip a:visited
{
position:absolute;
left:0px;
top:-500px;
width:1px;
height:1px;
overflow:hidden;
}
 
#skip a:active
{
position:static;
width:auto;
height:auto;
} 

/* The crumb trail at the top of the index page and top and bottom of interior pages */
p.breadcrumbs {
	padding: .5em 0 .5em 0;
	font-size: 90%;
	border-bottom: 1px dotted #000080;
	}

/* Headings */
div#content h1 {
	font-size: 2em;
	line-height: 1.5em;
	font-family: Tahoma, Geneva, Arial, Helvetica, sans-serif;
}

div#content h2 {
	font-size: 1.5em;
	font-family: Tahoma, Geneva, Arial, Helvetica, sans-serif;	
	line-height: 1.5em;
	text-align: left;
	/* provide some air between text and border styling */
	padding-left: 0.5em; 
	padding-bottom: 1px;
	/* Style the border */
	border-bottom: 1px solid #FF4900;
	border-left: .5em solid #FF4900;
	margin: 0 0 .5em 0; /*Some air under the border */
}

div#content h3 {
	font-size: 1.3em;
	font-family: Tahoma, Geneva, Arial, Helvetica, sans-serif;
	line-height: 1.3em;
	margin: 0 0 .5em 0;
}

div#content h4 {
	font-size: 1.2em;
	font-family: Tahoma, Geneva, Arial, Helvetica, sans-serif;
	line-height: 1.3em;
	margin: 0 0 .25em 0;
}

div#content h5 {
	font-size: 1.1em;
	font-family: Tahoma, Geneva, Arial, Helvetica, sans-serif;
	line-height: 1.3em;
	margin: 0 0 .25em 0;
}

div#content h6 {
	font-size: 1em;
	font-family: Tahoma, Geneva, Arial, Helvetica, sans-serif;
	line-height: 1.3em;
	margin: 0 0 .25em 0;
}

p {
	font-size: 1em;
	margin: 0 0 1.5em 0;
	line-height: 1.4em;
	padding: 0;
}

blockquote {
	border-left: 5px solid #eddbff;
	margin-left: 10px;
	padding: 0 0 0 2px;
}

/* List styles */
/* This provides margins for lists in the content */
div#main ul,
div#main ol
div#main dl {
	font-size: 1em;
	line-height: 1.4em;
	margin: 0 0 1.5em 0;
}

div#main ul li,
div#main ol li {
	margin: 0 0 .25em 3em;
}

div#main dl dt {
	font-weight: bold;
	margin: 0 0 0 1em;
}

div#main dl dd {
	margin: 0 0 1em 1em;
}

div#main dl {
	margin-bottom: 2em;
	padding-bottom: 1em;
	border-bottom: 1px solid #eddbff;
}
/* End Lists */

And here's the template:

Code: Select all

<!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" xml:lang="en" lang="en">
<!-- Change lang="en" to the language of your site -->

<head>

<title>{sitename} - {title}</title>

{metadata}

<link rel="stylesheet" href="h-menu.css" media="screen" type="text/css" /> 
<link rel="stylesheet" href="uniquelymain.css" media="screen" type="text/css" />

<!-- Relational links for interconnections between pages, good for accessibility and Search Engine Optmization -->
{cms_selflink dir="start" rellink=1}
{cms_selflink dir="prev" rellink=1}
{cms_selflink dir="next" rellink=1}

<!--[if IE]>
<__script__ defer type="text/javascript" src="pngfix.js"></__script>
<! [endif] -->

<__script__ type="text/javascript" src="minmax.js"></__script>


</head>

</__body>
<!-- Start Pagewrapper -->
<!-- This div creates a wrapper to hold all the page content. -->
<div id="pagewrapper"> 
	<!-- The next two divs create horizontal "bevelled" edges. -->
	<div id="left-border">
	<div id="right-border">
		<!-- Start Content -->
		<!-- This div holds the actual page contents -->
		<!-- including the header, navigation and footer. -->
   	<div id="content">
		<!-- skip link to main content -->
		<div id="skip">
			<a href="#content">Skip to Main Content</a>
		</div>
   			<!-- Start header -->
			<div id="header">
				<span class="hidden"><h1>Site Name</h1></span> <!-- Hidden header for screen readers -->
				<span class="header2"></span> <!-- Logo -->
				<span class="search">{search}</span><!-- Search bar -->
			</div>
			<!-- End header -->
			
			<!-- Start navigation -->
			<div id="menu">
				<h2 class="hidden">Navigation</h2> <!-- Hidden navigation header -->
				{menu template='simple_navigation.tpl' number_of_levels='1'}
			</div>
			<!-- End navigation -->
			<!-- Start of main content -->
			<div id="main">
				<div id="breadcrumbs">
					{breadcrumbs starttext='You are here' root='Home' delimiter='»'}
				</div>
				<div style="float: right;">{print showbutton=true script=true}</div>
				<h2><a name="maincontent" id="maincontent"></a>{title}</h2>
				{content} <br />
				<hr />
				<div class="right49">
	 				<p>{anchor anchor='main' text='^ Top'}</p>
				</div>
				<div class="left49">
					<p>{cms_selflink dir="previous" label="Previous page: "} <br />
						{cms_selflink dir="next"}</p>
				</div>
			</div>
			<!-- End of main content -->
			<!-- Start Footer -->
			<div id="footer">
				{global_content name='footer'}
			</div>   
			<!-- End Footer -->
		</div>	
	</div>
	</div>
   <!-- End Content -->
	</div>
</div><!-- end pagewrapper -->
<__body>
</__html>

[Dr.CSS]

You need to use the dfn hide call...

dfn {
  position: absolute;
  left: -1000px;
  top: -1000px;
  width: 0;
  height: 0;
  overflow: hidden;
  display: inline;
}

and in your #menu li add margin: 5px to separate the buttons and bring your font down to .75em...

You may also want to make a CSS call for the h3 in the menu or customize the menu template to not call the current page with the h3...

[heatherfeuer]

Thanks Mark!  Now the menu bar is looking more like what I had in mind.  Still needs some tweaking, but...

What I really need to find out is why the stylesheet is breaking so dramatically in Firefox.  The padding in the body style isn't showing and neither is the font for the content.  Also, the content part (with the fixed width beveled edge) is supposed to be centered in the page wrapper.

I made a couple of other edits and it's getting there, but I still don't understand why I'm not seeing the padding around the pagewrapper that shows in IE.  IE has a couple of other issues, but this business of centering and padding is what I'd really like to fix.

Edit to add:  I've made a couple of other changes, but basically the stylesheets are still broken.  I find this extraordinarily frustrating!  I suspect the problem is something fairly fundamental and simple and I'm just being blind here.

[Nullig]

In your stylesheet, remove the "," after body:

/* Set default body style */
body, {

Nullig

[heatherfeuer]

Hey Nullig!

Thanks for that tip.  That's a perfect example of why an extra pair of eyes can be so helpful.  I totally did not see that until you mentioned it.  So, now the body tag is working and the the padding around the pagewrapper shows correctly as does the default font.

I tried something... I decreased the font size in my Firefox browser twice and the horizontal scroll bar disappeared.  Why should font size have anything to do with liquid page widths?  Shouldn't the line just wrap sooner when the font is larger?  I don't have "nowrap" in any of my styles that I know of!  Obviously, I need to keep tweaking. 

[Nullig]

I was playing around with your styles in FF I found the only way I could get the right side blue margin was by changing the following:

div#pagewrapper {
background-color: #fff;
background-image: url(images/bg.gif);
color: #000;
padding: 0 10px; <-- 10 px instead of 10%

Nullig

[heatherfeuer]

Thanks again, Nullig!  For that you get a Karma boost! 

So... can someone explain to me what is wrong with my layout that relative sizing doesn't work?  I have the fonts set to ems and the only way I can get rid of the horizontal scroll bar is to set the font to .95 ems.  It's the same thing in IE, only I think I would have to take the font size down another 10th of an em.  In Opera, the horizontal red/orange rule at the top of the menu bar doesn't display.

Is it always this hard to convert a nested table layout to css divs?    Another thing that is frustrating is that I am using TopStyle Pro  as my editor for both css and html (I've always felt it was one of the best), and in the preview the menu buttons work exactly as I want them to and the rollover effect works in that it completely replaces the original image.  But in the browsers, the rollover doesn't work as expected.  In the original table display, I used actual images of the menu items, but that wouldn't work for the dynamic menus in CMSms. 

Any and all suggestions and tips most welcome!

[Nullig]

I know how frustrating it can be. I went through the same thing with my own site until I finally realized that, instead of trying to duplicate what I had, I should view this as an opportunity to do a "website makeover". After all, there's nothing like a "fresh look" to promote your website design skills and, as an added bonus, "showcase" some additional functionality you can provide, with all of the modules that are available.

Nullig

[Dr.CSS]

It depends on the table layout, it can be hard if it's layers and layers deep...

You can use images with CMSMS menus doing it as imap menu as shown here...

http://www.multiintech.com/Templates/in ... imap1.html

and Yea what he said 

[heatherfeuer]

    That should sum it up quite nicely...

*HUGE sigh*  I've just about got it where it can sit for the time being.  I just need to get it installed on my (new) remote server to include a big "under construction" image.    That will at least buy me the time I need to migrate all my client sites and get the nameservers transferred.  Then I get to work with a whole new management system on the backend that will probably throw this template out with the bathwater anyway... 

I'd still be curious to know why I can't get the rollover to completely cover the original "button" but when I get time I'll "google" it and see what I can come up with.  Not to mention checking out the gazillion css sites I've got bookmarked now! 

Thanks, guys, for your help!!