CSS issues, new layout

[ADAM Web Design]

Okay, I've applied some of my hard-earned (and stolen from WPW!) CSS knowledge and have gotten most of a site that has, IMHO, a pretty advanced layout figured out.

But there are two issues (since I can't seem to ever get it to just one issue), both of which I think I know the answers to.

Anyway, here's the layout:

http://www.adamwebdesign.ca/durasystems

Issue #1

In FF 0.8, the background area for the content is split up into four pieces. In IE, it's the one piece it's supposed to be.

I noticed that this behaviour specifically occurred when the background attachment property was set to "fixed". When it's gone, it actually affixes the background as intended to the div (which, although I hate FF in general, I thought was kinda cool).

Now...what I think is happening is that when it fixes the background, it fixes it based on either the top left corner of the body (my hunch), or the top left corner of the browser window. In either event, it's not based on the top left of the div as IE does.

Is there a property I can use that's FF-specific (or at least that doesn't mess up IE) that will affix the background to the top left corner of the div?

Issue #2

The submenu (under Item #1). I'm trying to do it so that submenus 1, 2, 3, etc. and so on go one underneath the other and are all the same width. The problem is that I will not be able to set the width of the submenu div, because that div will be dynamically generated and the contents within controlled by my client (i.e. I will have absolutely nothing to do with what they put in that menu whatsoever, and they don't have the design skills or interest to be editing CSS.)

I'd like to do this with divs ideally, but I can't seem to figure out how to get them to stack one on top of the other, keeping in mind that there will be a second level of submenus (also dynamically controlled), as indicated by the Submenu 1 section.

The only other way I can see that would work as I intend it to would be tables; however, I'm not sure if this would work either, since the longest submenu item may not necessarily be that which has a submenu in turn (e.g. there may be a longer menu item than Submenu 1 in my example posted).

Any thoughts? Thanks.

Oh, and yes, it does validate. I checked that.

[speed]

#1 Why can't you have something like:

#content {
width:  669px;
height:  401px;
overflow:  auto;
text-align:  left;
}

#content2 {
position:  absolute;
top:  37px;
left:  15px;
width:  669px;
height:  401px;
background:  URL(Images/center_content_bg.jpg);
}

Where #content2 wraps #content1 or isn't that what you were after?

#2 I think you need to fix a width somewhere.

By the way when I change the height of my browser the background fire wonders up and down, looks kind or weird. I'm at 1280x1024.

[ADAM Web Design]

#1 because I wasn't smart enough to think of that. :) I'll try that in a few hours.

#2 as mentioned before, I don't think I can simply because the submenu itself will be dynamic, as will its child menu in turn. That's why I didn't have one. If there's a way without it, that's what I'm after ideally.

[speed]

You could try something like:
CSS:

.blk { float: left; clear: left; display: block; }

HTML:

<div class="blk">Item 1</div>
<div class="blk">Item 2</div>
<div class="blk">Item 3</div>

[ADAM Web Design]

Update time:

#1...it worked. Thanks very much for that.

#2...I got what I wanted in IE using tables and div wrapper with a fake width of 0 and an overflow: visible property. In fact, it appears exactly how I want in IE. The only problem is that in FF, no matter what I tried (float-right, float-left, etc.) the silly right arrow slides down a line.

Is there something I can do about that?

Thanks.

[speed]

Well by junking the table and using <div>s I can get the problem with the arrow fixed but then I can't get the horizontal line that divides the items to go from 1 side of the menu to the other, some stop short.

It's because the menu link is floated and so just big enough to hold the text. This problem is on both IE & Firefox.

Without being able to add a width I can't think how to fix this at the moment but I'll sleep on it and see if anything comes to mind. (Don't hold you breath)

PS. Your background image is still misaligned with the heading etc on a 1280x1024 screen when the browser window is full height, if I shrink the window then the background image and title bar all come into alignment.

[speed]

Ok I've figured it out and it now displays properly on both IE & Firefox.

There is a small problem on Firefox that when you extend the menu to go over the scroll area, as you move the mouse down the list of items as soon as the mouse gets to an item that is over the scroll area the menu collapses. I'm assuming that you've got a bug in the JS.

To get it working you need to stay with a table and use a tilled image (images/menubg.gif 20px high) to generate the horizontal dividers between menu items, you also need to insert <div class="clear: both"></div> at appropriate points to counteract all the floats.

Anyway I've change so many bits I'll post the while file and let you pick out what you need:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="Adam Senour" />
<script type="text/javascript" src="JavaScripts/default.js">
<!-- 
<![CDATA[
]]>
//-->
</script><style type="text/css">
body {
padding: 0;
margin: 0;
background-color: #c7c7ab;
text-align: center;
}
#bodyx {
background:  URL(images/background.jpg) #C7C7AB center center no-repeat;
width:  780px;
height:  700px;
vertical-align:  middle;
margin-left:  auto;
margin-right:  auto;
text-align:  center;
padding:  5px;
font-family:  Verdana, Arial, Helvetica, sans-serif;
font-size:  11px;
color:  #000000;
}
#sitecontainer {
width:  760px;
height:  680px;
overflow:  hidden;
padding-top:  5px;
margin-top:  10px;
margin-left:  auto;
margin-right:  auto;
vertical-align:  middle;
text-align:  center;
position: relative;
}
#contentwrapper {
position:  absolute;
top:  168px;
left:  38px;
width:  695px;
height:  466px;
overflow:  hidden;
}
#contentheader {
width:  695px;
height:  37px;
background:  URL(images/page_header.jpg) top left no-repeat;
overflow:  hidden;
}
#contentsubwrapper {
position:  absolute;
top:  37px;
left:  15px;
width:  669px;
height:  401px;
background:  URL(Images/center_content_bg.jpg);
}
#content {
width:  669px;
height:  401px;
overflow:  auto;
text-align:  left;
}
#leftborder {
position:  absolute;
top:  37px;
left:  0px;
width:  15px;
height: 401px;
overflow:  hidden;
background:  URL(Images/left_side_content.jpg) top left no-repeat;
}
#rightborder {
position:  absolute;
top:  37px;
left:  684px;
width:  11px;
height: 401px;
overflow:  hidden;
background:  URL(Images/right_content_bg.jpg) top left no-repeat;
}
#bottomborder {
background:  URL(Images/bottom_content_bg.jpg) top left no-repeat;
width:  695px;
height:  28px;
overflow:  hidden;
position:  absolute;
left:  0;
top:  438px;
}
#top {
	position:  absolute;
	top:  8px;
	left:  0;
	width:  760px;
	height:  100px;
	text-align:  center;
	overflow:  hidden;
}
#logo {
	float:  left;
	width:  338px;
	height:  100px;
	overflow:  hidden;
}
#slogan {
	float:  right;
	width:  422px;
	height:  100px;
	overflow: hidden;
}
#menu {
position:  absolute;
top:  108px;
left:  0px;
border:  1px solid #C7C7Ab;
background-color:  #8E2344;
color:  #C7C7AB;
height:  20px;
width:  760px;
text-align:  left;
}
#fakeborder {
position:  absolute;
top:  108px;
left:  759px;
width:  1px;
height:  20px;
background-color:  #C7C7AB;
}
.submenu {
position:  absolute;
top:  19px;
left: 0px;
visibility:  hidden;
color:  #C7C7AB;
padding:  0;
margin:  0;
}
img {
	border:  none;
	margin:  0;
	padding:  0;
}
#contentheader h1 {
font-size:  18px;
font-weight:  bold;
letter-spacing:  1px;
color:  #8E2344;
text-align: left;
margin-left:  10px;
margin-top:  2px;
}
.menudiv {
float:  left;
position:  relative;
}
.menudiv a {
color:  #C7C7AB;
float:  left;
display:  block;
height:  18px;
padding-left:  8px;
padding-right:  8px;
padding-top:  2px;
border-right:  1px solid #C7C7AB;
text-decoration:  none;
}
.submenulink a {
display:  block;
color:  #C7C7AB;
padding-left:  8px;
padding-right:  8px;
padding-top:  2px;
padding-bottom:  0;
border-right:  none;
text-decoration:  none;
font-size:  11px;
vertical-align:  middle;
}
.submenulink  { 
display: block;
margin: 0;
padding: 0;
height: 20px;
}

#menu img {
	margin-left:  8px;
	vertical-align:  top;
}
.submenu img {
}
</style>
</head>
<body onload="loadImages('Images/yellow_down_arrow.jpg', 'Images/red_down_arrow.jpg', 'Images/yellow_right_arrow.jpg', 'Images/red_right_arrow.jpg')">
<div id="bodyx">
<div id="sitecontainer">
  	<div id="contentwrapper">
		<div id="contentheader">
			<h1>Page Header</h1>
		</div>
		<div id="contentsubwrapper">
			<div id="content">
		AAA

		AAA

		AAA

		AAA

		AAA

		AAA

		AAA

		AAA

		AAA

		AAA

		AAA

		AAA

		AAA

		AAA

		AAA

		AAA

		AAA

		AAA

		AAA

		AAA

		AAA

		AAA

		AAA

		AAA

		AAA

		AAA

		AAA

		AAA

		AAA

		AAA

		AAA

		AAA

		AAA

		AAA

		AAA

		AAA

		AAA

		AAA

		AAA

		AAA

		AAA

		AAA

		AAA

		AAA

		AAA

			</div>
		</div>
		<div id="leftborder"></div>
		<div id="rightborder"></div>
		<div id="bottomborder"></div>
	</div>
	<div id="top">
       	<div id="logo">
		   	[img]Images/logo.jpg[/img]
	   	</div>
	  	<div id="slogan">
		   [img]Images/slogan.jpg[/img]
		</div>
	</div>
	<div id="menu">
		<div class="menudiv">Home</div>
		<div class="menudiv" id="mainmenu1">
			Item 1[img]Images/yellow_down_arrow.jpg[/img]

			<div id="submenu1" class="submenu" onmouseover="flip('arrow1', 'Images/red_down_arrow.jpg', 'submenu1', 'sublink1', 1)" onmouseout="flip('arrow1', 'Images/yellow_down_arrow.jpg', 'submenu1', 'sublink1', 0)">
				<div style="border:  1px solid #C7C7AB; float: left; background-color: #8E2344;  background:  URL(images/menubg.gif); padding:  0;  margin: 0;">
					<table cellspacing="0" cellpadding="0">
						<tr class="submenulink">
							<td>Submenu1[img]Images/yellow_right_arrow.jpg[/img]</td>
						</tr>
						<tr class="submenulink">
							<td>Submenu2</div></td>
						</tr>
						<tr class="submenulink">
							<td>Submenu3</div></td>
						</tr>
						<tr class="submenulink">
							<td>Submenu4</div></td>
						</tr>
						<tr class="submenulink">
							<td>Submenu5</div></td>
						</tr>
						<tr class="submenulink">
							<td>Submenu6</div></td>
						</tr>
						<tr class="submenulink">
							<td>Submenu7</div></td>
						</tr>
					</table>
				</div>
				<div style="float:  left;  width:  200px;  overflow:  visible;">
					Extra submenu over here.
				</div>
			<div style="clear: both"></div>
			</div>
		</div>
	</div>
	<div id="fakeborder"></div>
</div>
</div>
</body>
</html>

[ADAM Web Design]

Okay, I put in the changes that made the menu work for the most part, but I don't really understand why I did what I did. And since I don't like remaining in the dark on things so that I don't have to ask stupid questions again, I'll ask stupid questions now:

1) What was the purpose of the #bodyx wrapper div? I understand that it contains all the elements I previously had in the body tag for defining width/height/background/etc., but why did we do that?

2) Table cellspacing/cellpadding. I didn't know these were still okay in XHTML; I read they weren't. But are they?

3) What is the FF equivalent of width: 100% for a hyperlink in IE? I want to make all the cell hyperlinks the same width, but for some reason FF ignores this property and as a result, doesn't extend the bottom border all the way to the right like I'd like.

Thanks.

[speed]

1) Fixed that annoying bug you had where on high res screens the background image started halfway through the header images.

2) It validates so yes!

3) It won't work without messing up IE, so you don't draw the bottom border in CSS you draw it by tiling an 8 * 20 pixel (wxh) image with the bottom pixel set to gold.

[ADAM Web Design]

Okay, I'm gonna get to the border as soon as I solve one last issue that I can't seem to figure out for the life of me.

The submenu itself won't show up in either browser. I've made it a very ugly green thing so that it's easy enough to pick out onload.

I have no idea why it's doing this, but in IE, if I hover my mouse over where the submenu is, it won't remove the parent menu (which is exactly what it's supposed to do, so I don't mind that), but 1) it won't activate the colour link like it does for the item menu and 2) it won't show the menu.

FF: if I hover over the area in question, because it's invisible (or so it would appear) the menu closes.

I'm sorry to be such a pain in the ass, but I really don't have a clue and I've gone through all sorts of stuff.

That's why there's a "temparea" div that outputs various things such as the element in question. It appears that when the mouse is hovered over the submenu links, the "flip" procedure is executed twice instead of once. Is this because the div has a mouseover for it as well? I'm really confused.

THanks.

[speed]

Also in IE6 the menu goes wrong when you run the mouse over it, the right arrow graphic drops to the next line.

You really sure you want this functionality?

I take it you've read the CSS menu articles on http://www.alistapart.com/ any use?

My reaction here is this is getting out of hand so junk it and buy in a JS menu script, or you might find a free one.

[ADAM Web Design]

1) I'm too stubborn. 2) I'm too broke since I have to pay to get my dog euthanized. 3) Every javascript menu script I've seen has absolutely sucked for my purposes (and I don't like retrofitting stuff).

Other than that, I have no reason not to.

So...I'm stuck obsessing over this until I figure it out. Thanks anyway.

[mikmik]

The hidden submenu is blocking the arrow and causing the image to wrap.If you make the menu cells wider, and text narrower = align left instaed of center, you may get enough room eventually for the arrow gif in the submenus.
Picture the menu blocks all visible at the sametime and you will be able to visualize this conflict - the arrow and the next sub trying to inabit the same space.
z-index may help, I am not sure.

also, display inline instead of block? No, probably not.

[mikmik]

.submenu {
position: absolute;
top: 19px;
left: 0px;
visibility: hidden;
color: #C7C7AB;
padding: 0;
margin: 0;
}

hidden means it is there. display:none/show might work.
Element type properties

A value of none means that the element will not be visible, nor will it have any effect on the layout of the page. Essentially it is not there. Compare this with the visibility property, where an element is not visible, but is taken into account by the browser when it is laying out the page.

CSS 2 introduced several new values for display related to tables. In CSS 2 any element (say a paragraph) can be a table or part of a table. With HTML this may not make much sense (as there is already the <table> element, table columns, cells, etc.) However, other languages, such as XML, do not have such elements. In those languages, CSS tables become absolutely necessary for displaying tabular data. The table related values for display are

* table - a 'table' is the outer container for all tables. It defines a rectangular block element that contains any number of row groups, rows, column groups, columns, and/or captions, all arranged in an irregular grid pattern. Any rendering objects other than these should be displayed outside the rectangular grid. (HTML analog: table)
* inline-table - an 'inline-table' is identical to a 'table' element, except that it is treated as an inline replaced element in the context surrounding the 'inline-table' element.
* table-column-group - a 'table-column-group' is a container for a number of table columns. This allows the designer to set presentation properties on a group of columns, for example by placing borders around a group of columns. (HTML analog: colgroup)
* table-column - a 'table-column' is a grouping of all cells in a particular vertical column. (HTML analog: col)
* table-row-group - a 'table-row-group' is a container for a number of table rows. This allows the designer to set presentation properties on a group of rows, for example by placing borders around a group of rows. (HTML analog: tbody)
* table-header-group - A 'table-header-group' is a special type of 'table-row-group' that is always displayed at the top of the table, above all other rows and row-groups, but below any captions. (HTML analog: thead)
* table-footer-group - A 'table-footer-group' is a special type of 'table-row-group' that is always displayed at the bottom of the table, below all other rows and row-groups, but above any captions. (HTML analog: tfoot)
* table-row - a 'table-row' groups all cells in a particular horizontal row. (HTML analog: tr)
* 'table-cell' - a 'table-cell' is the rectangular object to be arranged in the table grid. Table cells are only allowed inside rows. (HTML analog: td)
* table-caption - a 'table-caption' is a special type of table cell that appears as a row or column of its own in a table. (HTML analog: caption)

[speed]

ADAMWebDesign in that case I'll poke it around again when I have free moments.

[mikmik]

Oh, you are here!

[speed]

This is closer but I've still got the wrap on the right arrow under IE but Firefox works.

<style type="text/css">
body {
padding: 0;
margin: 0;
background-color: #c7c7ab;
text-align: center;
}
#bodywrapper {
background:  URL(images/background.jpg) #C7C7AB center center no-repeat;
width:  780px;
height:  700px;
vertical-align:  middle;
margin-left:  auto;
margin-right:  auto;
text-align:  center;
padding:  5px;
font-family:  Verdana, Arial, Helvetica, sans-serif;
font-size:  11px;
color:  #000000;
}
#sitecontainer {
width:  760px;
height:  680px;
overflow:  hidden;
padding-top:  5px;
margin-top:  10px;
margin-left:  auto;
margin-right:  auto;
vertical-align:  middle;
text-align:  center;
position: relative;
z-index:  0;
}
#contentwrapper {
position:  absolute;
top:  168px;
left:  38px;
width:  695px;
height:  466px;
overflow:  hidden;
}
#contentheader {
width:  695px;
height:  37px;
background:  URL(images/page_header.jpg) top left no-repeat;
overflow:  hidden;
}
#contentsubwrapper {
position:  absolute;
top:  37px;
left:  15px;
width:  669px;
height:  401px;
background:  URL(Images/center_content_bg.jpg);
}
#content {
width:  669px;
height:  401px;
overflow:  auto;
text-align:  left;
}
#leftborder {
position:  absolute;
top:  37px;
left:  0px;
width:  15px;
height: 401px;
overflow:  hidden;
background:  URL(Images/left_side_content.jpg) top left no-repeat;
}
#rightborder {
position:  absolute;
top:  37px;
left:  684px;
width:  11px;
height: 401px;
overflow:  hidden;
background:  URL(Images/right_content_bg.jpg) top left no-repeat;
}
#bottomborder {
background:  URL(Images/bottom_content_bg.jpg) top left no-repeat;
width:  695px;
height:  28px;
overflow:  hidden;
position:  absolute;
left:  0;
top:  438px;
}
#top {
    position:  absolute;
    top:  8px;
    left:  0;
    width:  760px;
    height:  100px;
    text-align:  center;
    overflow:  hidden;
}
#logo {
    float:  left;
    width:  338px;
    height:  100px;
    overflow:  hidden;
}
#slogan {
    float:  right;
    width:  422px;
    height:  100px;
    overflow: hidden;
}
#menu {
position:  absolute;
top:  108px;
left:  0px;
border:  1px solid #C7C7Ab;
background-color:  #8E2344;
color:  #C7C7AB;
height:  20px;
width:  760px;
text-align:  left;
}
#fakeborder {
position:  absolute;
top:  108px;
left:  759px;
width:  1px;
height:  20px;
background-color:  #C7C7AB;
}
.menudiv {
float:  left;
position:  relative;
background:  none;
background-color:  none;
}
.submenu {
clear:  both;
float:  left;
position:  absolute;
top:  19px;
visibility:  hidden;
height:  0;
color:  #C7C7AB;
background:  none;
background-color:  none;
padding:  0;
margin:  0;
}
.submenutablewrap {
border:  1px solid #C7C7AB;
float: left;
background-color: #8E2344;
border-collapse:  collapse;
background:  URL(images/menubg.gif);
padding:  0;  
margin: 0;
}
img {
    border:  none;
    margin:  0;
    padding:  0;
}
#contentheader h1 {
font-size:  18px;
font-weight:  bold;
letter-spacing:  1px;
color:  #8E2344;
text-align: left;
margin-left:  10px;
margin-top:  2px;
}
.menudiv a {
color:  #C7C7AB;
background-color:  #8E2344;
float:  left;
height:  18px;
display:  block;
padding-left:  8px;
padding-right:  8px;
padding-top:  2px;
border-right:  1px solid #C7C7AB;
text-decoration:  none;
}
.submenu a {
height:  16px;
display:  block;
text-align:  left;
color:  #C7C7AB;
padding-left:  8px;
padding-right:  12px;
padding-top:  2px;
padding-bottom:  0;
border-right:  none;
text-decoration:  none;
font-size:  11px;
background:  none;
float:  left;
}
#menu td {
display:  block;
border:  none;
border-collapse:  collapse;
background:  URL(images/menubg.gif);
height:  20px;
margin:  0;
padding:  0;
font-size:  11px;
}
#menu img {
    margin-left:  8px;
    margin-right:  0px;
    vertical-align:  top;
}
.submenu img {
}
.l2submenu {
    clear: right;
    float:  right;
    padding:  0;
    margin:  0;
    border:  1px solid #C7C7AB;
    background:  URL(images/menubg.gif);
}
.submenu a:hover {
background-color:  #C7C7AB;
color:  #8E2344;
}
</style>

Yes I'm here, just had to do some paid work :)

[ADAM Web Design]

It's now 1 AM and I'm dog-tired, but after spending the weekend working on something completely different, followed by some quality time with the girlfriend, I did figure it for the most part out, thanks mostly to speed but with a little digging of my own.

It turns out that there is a rather obscure property called "white-space: nowrap" which basically forces everything onto one line. This works for both IE and Firefox.

The clear: right, float: right deal worked for the menu.

I've got it displayed in more or less final form on the site. I know there's some cleanup issues (namely a weird rectangular dealy that suddenly appeared in IE, probably because I have to reindent and reevaluate my code) and some minor CSS/Jscript adjustments, but the big problem is now solved (I hope. I'm too damned tired.)

Anyway, I'd like to thank everyone for their help!

Update: just figured out the extra box issue.[/b]

[speed]

Glad you've got it sorted I'd really like to have a look at it once you get the fixed version on the net.