<div> positioning help

HTML & CSS
1

I built a <div> only site where I added a jQuery rotating image section to the left side div, and trying to get some text (news) underneath in another div. I can by styling the news with a position of absolute, and a top: of 225px, but I think using the absolute parameter does not let the container div expand the whole content section down to house the news. So ignored that so the news expands the container, but is behind the images. How can I get the news to flow below the images? Testsite at www dot vsaconsulting dot com/testsite. And it happens in IE6,7,8 and FF of those I tested.

Any help would be appreciated. I added my cms template <body> code and the css below. The bracketed {} items are smarty code. Using CMS Made Simple which uses smarty. The css is only for the slides (rotating images) and the news section (and the fix and content classes). Thanks in advance…

<body>
<div id="pagewrapper">
   <div class="main">
      <div id="header">
        <div class="top">
          <div class="title">
           {search}
            <h1>{cms_selflink dir="start"}</h1>
            <h2>Elevator Engineering, Design, Modernization and Consulting</h2>
          </div>
        </div>
       {menu template='accessible_cssmenu.tpl'}
      </div>
        <div class="content">
          <div id="slideshow" class="slides">
               <img src="uploads/images/building_1.jpg" />
               <img src="uploads/images/building_2.jpg" />
               <img src="uploads/images/building_3.jpg" />
               <img src="uploads/images/building_4.jpg" />
               <img src="uploads/images/building_5.jpg" />
               <img src="uploads/images/building_6.jpg" />
          </div>
                  <div class="fix"></div>
              <div class="news"><h4>COMPANY NEWS</h4>{news}</div>
          <div class="bread">{breadcrumbs}</div>
          <div class="right">{content}</div>
          <div class="fix">
            <img src="images/sp.gif" width="1" height="1" alt="" />
          </div>
        </div>
        <div id="footer">
          <div class="footer">{global_content name='VSA_footer'}</div>
        </div>
   </div>
</div>
</body>

.slides {
    float: left;
    width: 150px;
    padding: 10px 2px 0px 5px;  
    margin:  5px 0px 0px 5px;
}
.slides img {    
    width: 150px;
    height: 220px;
}
.news {
    float: left;
    width: 150px;  
    text-align: justify;
    margin:  5px 0px 0px 5px;
} 
.bread{
  float: right;
  padding-right: 5px;
  font-weight: bold;
  font-size: 10px;  
}
.fix{
  clear: left;
  height: 1px;
}
.content{
  position: relative;
  overflow: auto;
  width: 750px;
  margin: 10px 5px 0px 5px;
  border: 1px solid #807C7C;
}
2

Hi tpullano. Welcome to SitePoint! :slight_smile:

You are definitely right that absolute positioning is not appropriate here. (It’s rarely, if ever, a good layout solution for major elements.)

I would suggest that you wrap the #slideshow and .news divs in a container (say #sidebar) which is floated left.

Then unfloat the #slideshow and .news divs, and you can set margins or padding on them to suit. E.g.


<div id="sidebar">
    <div id="slideshow">
    </div>
    <div class="news">
    </div>
</div>



#sidebar {
    float: left;
    width: 150px;
}

EDIT: Ah, on a second look, I see that the images pave position: absolute on them (totally unnecessary, it seems to me, so if you know how to edit the jQuery, make the change there. Otherwise you might have to set a height on the #slideshow div so that it is taller than the images.

3

Thanks for the welcome Ralph, and the quick response. I was actually going to say nothing work, but I saw your edit, removed the "position: ‘absolute’ " statement in the jquery and now very close. The jquery jumps upon rotating, else it looks good…so thank you. Not sure if you know how to fix, but I will do some searching on this as I thought I saw a mention of this somewhere…

Current CSS:

.left_column{
   float: left;
   width: 150px;
}
.slides {
    width: 150px;
    margin:  5px 0px 0px 5px;
}
.slides img {    
    width: 150px;
    height: 220px;
}
.news {
    width: 150px;  
    text-align: justify;
    margin:  5px 0px 0px 5px;
}

Current template:

<div class="content">
          <div id="leftcolumn" class="left_column">
            <div id="slideshow" class="slides">
               <img src="uploads/images/building_1.jpg" />
               <img src="uploads/images/building_2.jpg" />
               <img src="uploads/images/building_3.jpg" />
               <img src="uploads/images/building_4.jpg" />
               <img src="uploads/images/building_5.jpg" />
               <img src="uploads/images/building_6.jpg" />
             </div>
             <div class="news"><h4>COMPANY NEWS</h4>
               {news}
             </div>
           </div>
4

Hi,

The images are supposed to fade in and out which means that they need to be overlaid on top of each other.

As they are the same height then just make room for them on the parent (.slide) and absolutely place the image.
e.g.


.slides {
    width: 150px;
    margin:  5px 0px 0px 5px;
       [B] height:230px;
        position:relative;[/B]
}
.slides img {    
  width: 150px;
  height: 220px;
[B]    position:absolute;
    top:0;
    left:0;[/B]
}
5

Awesome!, thanks very much Ralph and Paul for the help. Get better at understanding this…glad I found sitepoint. One last question if I may:

In IE6 & 7 my header has some spacing at the top, whereas FF and IE8 look fine. The logo and search are right near the top. Do I need some kind of conditional statement to correct? I attached the CSS for those elements and the divs:

body {
  font-family: Verdana, Arial, Tahoma, sans-serif;
  font-size: 11px;
  margin: 0px 0 0 0;
  padding: 0;
  background: url('uploads/images/background.gif') repeat;
  background-color: #807C7C;
  color: #000000;
}
.main{
  width: 760px;
  margin: 39px auto;
  text-align: left;
  border: 1px solid #807C7C;
  background-color: #FFFFFF;
  color: #000000;
}
.top{
  border: 1px solid #807C7C;
  margin: 5px;
  height: 114px;
  width: 750px;
}
.search-input{
	float:right;
        margin:0px 5px 0px 5px;
}
.search-button{
	float:right;
	padding:1px 5px 4px 5px;
	height:20px;
        width:55px;
	border:1px solid #807C7C;
	background-image:url(uploads/images/s_bg.jpg);
	background-repeat:repeat-x;
}
#header{
  height: 151px;
  width: 760px;
  margin: 5px;
  padding: 0;
  background: #ffffff;
  text-align: left;
}
div#header {
            margin: 0;
            padding: 0;
            background: #ffffff;
            text-align: left;
}
h2{
  color: #008080;
  background-color: inherit;
  font-size: 12px;
  margin: 1px 12px 5px 11px;
  padding: 0;
}

.title{
  text-align: left;
  padding: 5px 0px 0px 2px;
}

.title p{
  margin: 5px 0 0 23px;
  padding: 0;
}


<div class="main">
      <div id="header">
        <div class="top">
          <div class="title">
           {search}
            <h1>{cms_selflink dir="start"}</h1>
            <h2>Elevator Engineering, Design, Modernization and Consulting</h2>
          </div>
        </div>
6

HI, IE is giving the form there a top margin pushing the rest down.

#header form{margin:0;}

You might want to look into using a reset to avoid these kind of issues :slight_smile:

7

For RyanReese:

Not sure you can post links here, so…

www dot vsaconsulting dot com/testsite

8

You saw my post before I deleted it…very fast of you :p.

I reread your first post and noticed you posted a link so I deleted it. My advice above stands.

9

yes, I’m pretty quick. Not sure I follow though. The #header only shows a 5px; margin. And by a reset, do you mean an IE conditional statement?

10

Huh? I said in my code “#header form”

It is targeting the form. Not the actual #header

By reset I mean a reset. To remove margin/paddings of hte page :slight_smile:

11

Yes as Ryan said it’s the default margin/padding on the form element causing the most upset to the header spacing so set it to zero.

Ie6 also has some problems with the height you set on the nav because it is actually higher than you set due to the padding on the anchor ( you also have a different height for Ie in the csss anyway).

However a fix wont be that easy because you cant hide the overflow as you want the nav to drop down. You would be better off giving the top nav a specific height and set the line-height to the same as the height and float the anchor also but remove top and bottom padding. This would of course involve multiple changes to nested elements so you may not think it’s worth it just for ie6 :wink:

12

Yes, setting the form to zero took care of it. I didn’t do anything in terms of the reset. Thanks guys…

And yes, forget IE6…not worth the time, and “hopefully” most will be off of it soon…ha!

But if you notice in IE7, the hover extends a bit past the menuwrapper (which I have a conditional for IE7 below to set the menuwrapper to 38px; - normally 43px for FF and IE8):

    <!--[if lte IE 7]>
    <style type="text/css">
    #menuwrapper {height: 38px;}
     </style>
    <![endif]-->

Would it involve the same for IE7, or is there any way to limit the hover height?

13

I think the way you’ve done it would require too many changes as the code is a little messy in places and would need re-organising. If you can live it with it as is just keep the hack. It seems that your menu is too high with the padding hence the differences you are getting in various browsers. I would as mentioned above set a specific height of 43px on the list and anchor elements and just used line-height43px to center it without the need for vertical padding.

I’m not sure why you have absolutely placed the nav anyway when you could just let it come in the flow as normal and then browsers would look the same. You woudn’t have need to set heights on the header and the nav wouldn’t have needed to be placed at xxpx etc.

Usually for drop downs it is also better to use left:-999em to hide the menu instead of display:none and then use left:0 to bring it back instead of display:block. It works better in IE and is better for screen readers also.

14

Thanks Paul…wish I could redo, as this was a stock horizontal menu css that came with the CMS I am using. My abilities are a bit lacking on divs and css though, and been spending countless hours on this to try to get it right.

The last line seems easy enough, though I am sure it would be much more than replacing the displays with the lefts. But would be interested in changing the menuwrapper. I hate being tied down to absolute positioning and specific tops: I figure something would eventual go wrong somewhere. I’ll try to study your notes and see if I can play with it a bit, more for the learning experience.

15

Yes sorry I would have provided some code but I think it may have just confused the issue :slight_smile: It’s probably better if you play with it anyway as it will help you get to grips with it. Just shout if you get really stuck or break something :wink:

16

Please provide! Might help me understand it a bit better…

17

Hi,

Which version is working the way you want it?

In Ie7 the top nav highlights with a repeating background image and Firefox doesn’t show the rollover (neither does the drop down rollover in Firefox). In Ie7 The highlighted image is taller than the nav itself and the dropdown therefore further away.

Which browser is working as you want or are they both just half working:)

It seems to be that the top row should highlight in both browsers but that the highlight should be the same height as the nav itself and not taller.

I’m not sure whether you want the drop downs to roll over with that repeating image either.

Are you going to have levels on the dropdown (i.e. another flyout on the already drop-downed menu)? If not then some of the code can be removed to tidy it up.

If you can answer those question I’ll see if I can come up with the relevant code later today :slight_smile:

18

Very much appreciated in advance Paul.

From my perspective, IE8 and Firefox seem to be working/looking just about right, but would like the drop-down with the repeating image (as it does in IE7), and obviously the highlight being the same height. As an FYI, I would vote to eliminate the repeating image and just go with a solid color close to the color of the repeating image…I think it would be easier to manage, and not have to worry about another image.

I am really not worried about IE6, so just IE7 presents the biggest challenge, as you say with the hover being a different height.

Another flyout is not needed (and I doubt would be added in the future), so it can most likely be eliminated.

I included some template code that my main template uses to call the menu system with this smarty code: {menu template=‘accessible_cssmenu.tpl’}. This is a part of the CMS. I guess it is where some of the divs are defined for use by the menu CSS. This kinda makes it easy to call the menu and would be a nice to have.

Thanks again…

{* CSS classes used in this template:
#menuwrapper - The id for the <div> that the menu is wrapped in. Sets the width, background etc. for the menu.
#primary-nav - The id for the <ul>
.menuparent - The class for each <li> that has children.
.menuactive - The class for each <li> that is active or is a parent (on any level) of a child that is active. *}
{if $count > 0}
<div id="menuwrapper">
<ul id="primary-nav">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}

	{repeat string="<ul>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}

	{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
	</li>
{elseif $node->index > 0}</li>
{/if}
{if $node->parent == true or ($node->current == true and $node->haschildren == true)}
	<li class="menuactive menuparent"><a class="menuactive menuparent" 
{elseif $node->current == true}
	<li class="menuactive"><a class="menuactive" 
{elseif $node->haschildren == true}
	<li class="menuparent"><a class="menuparent" 
{elseif $node->type == 'sectionheader'}
        <li class="sectionheader"><span>{$node->menutext}</span>
{elseif $node->type == 'separator'}
        <li style="list-style-type: none;"> <hr class="separator" />
{else}
	<li><a 
{/if}
{if $node->type != 'sectionheader' and $node->type != 'separator'}
href="{$node->url}" {if $node->accesskey != ''}accesskey="{$node->accesskey}" {/if}{if $node->tabindex != ''}tabindex="{$node->tabindex}" {/if}{if $node->titleattribute != ''}title="{$node->titleattribute}"{/if}{if $node->target ne ""} target="{$node->target}"{/if}><dfn>{$node->hierarchy}: </dfn><span>{$node->menutext}</span></a>
{elseif $node->type == 'sectionheader'}
><dfn>{$node->hierarchy}: </dfn><span>{$node->menutext}</span></a>
{/if}

{/foreach}

	{repeat string="</li></ul>" times=$node->depth-1}		</li>
	</ul>
<div class="clearb"></div>
</div>
{/if}
19

Hi,

Ok here’s a re-jig of the menu which is now in the flow and not absolutely positioned.

The menu heights have been sorted and you don’t need the hack for IE and the menu lines up the same in all browsers.

I think I’ve done the rollovers as you wanted as they seem logical to me and they all highlight properly. I removed the third level code as it was confusing things.

The menu uses the margin-left technique instead of display:none.

I copied all the three css files into the head for testing so you will need ot move them back to their original places. I also used absolute path names for testing but you can change them back to relative (use a search and replace).

If you just copy this html and save it locally, you can then view it straight away ( as long as you are online) and you can see how the menu looks before you try to apply the changes to your own site.


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Vertical Systems Analysis - Home</title>
<base href="http://www.vsaconsulting.com/testsite/" />
<meta name="Generator" content="Vertical Systems Analysis - All rights reserved." />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="elevator consulting, elevator engineering, elevator design, elevator modernization, vertical systems analysis, vertical transportation consulting, elevator consultants, elevator, elevators, vertical systems, elevator maintenance, elevator inspection, elevator modernization, elevator lift, consultants, consulting, vertical transportation consultants, vertical transportation, vertical and horizontal transportation, global consulting, elevator equipment maintenance, consultants, consulting,  elevator design, modernization, VSA" />
<meta name="description" content="VSA (Vertical Systems Analysis) is an established elevator design and consulting firm, and has provided design and engineering expertise to numerous clients since its inception." />
<!--
<link rel="stylesheet" type="text/css" media="screen" href=
"http://www.vsaconsulting.com/testsite/stylesheet.php?cssid=52&amp;mediatype=screen" />
<link rel="stylesheet" type="text/css" media="screen" href="http://www.vsaconsulting.com/testsite/stylesheet.php?cssid=31&amp;mediatype=screen" />
<link rel="stylesheet" type="text/css" media="screen" href="http://www.vsaconsulting.com/testsite/stylesheet.php?cssid=51&amp;mediatype=screen" />
-->
<link rel="start" title="Home Page, shortcut key=1" href="http://www.vsaconsulting.com/testsite/" />
<link rel="next" title="Mission Statement &amp; Philosophy" href="http://www.vsaconsulting.com/testsite/home/mission_statement.html" />
<style>
/* stylesheet.php - first one*/
/* Start of CMSMS style sheet 'VSA' */
body {
    font-family: Verdana, Arial, Tahoma, sans-serif;
    font-size: 11px;
    margin: 0px 0 0 0;
    padding: 0;
    background: url('http://www.vsaconsulting.com/testsite/uploads/images/background.gif') repeat;
    background-color: #807C7C;
    color: #000000;
}
.main {
    width: 760px;
    margin: 39px auto;
    text-align: left;
    border: 1px solid #807C7C;
    background-color: #FFFFFF;
    color: #000000;
}
.top {
    border: 1px solid #807C7C;
    margin: 5px 5px 1px;
    height: 114px;
    width: 750px;
}
.search-input {
    float:right;
    margin:0px 5px 0px 5px;
}
.search-button {
    float:right;
    padding:1px 5px 4px 5px;
    height:20px;
    width:55px;
    border:1px solid #807C7C;
    background-image:url(http://www.vsaconsulting.com/testsite/uploads/images/s_bg.jpg);
    background-repeat:repeat-x;
}
.right {
    float: left;
    width: 520px;
    font-size: 12px;
    margin: 0 0 0 5px;
    padding: 0 10px;
    text-align: justify;
}
.left_column {
    float: left;
    width: 150px;
    border-right: 1px solid #807C7C;
    padding: 0px 10px 0px 5px;
    margin:  5px 5px 5px 5px;
}
.slides {
    float: left;
    width: 150px;
    height:230px;
    position:relative;
}
.slides img {
    width: 150px;
    height: 220px;
    position:absolute;
    top:0;
    left:0;
}
.news {
    float: left;
    width: 150px;
    text-align: justify;
    margin:  5px 0px 0px 5px;
}
.bread {
    float: right;
    padding-right: 5px;
    font-weight: bold;
    font-size: 10px;
}
#header form {
    margin:0;
}
#header {
    width: 760px;
    margin: 5px 0 1px;
    padding: 0;
    background: #ffffff;
    text-align: left;
    position:relative;
    z-index:9;
}
a {
    color: #000000;
    background-color: inherit;
}
a:hover {
    text-decoration: none;
}
div#header h1 a {
    /* you can set your own image here */
    background: url('http://www.vsaconsulting.com/testsite/uploads/images/vsalogo.JPG') no-repeat 10px;
    /* this will make the "a" link a solid shape */
    display: block;
    /* adjust according your image size */
    height: 80px;
    /* this hides the text */
    text-indent: -999em;
    /* old firefox would have shown underline for the link, this explicitly hides it */
    text-decoration: none;
}
div#header h1 {
    margin: 0;
    padding: 0;
    /*these keep IE6 from pushing the header to more than the set size*/
    line-height: 0;
    font-size: 0;
    /* this will keep IE6 from flickering on hover */
    background: url('http://www.vsaconsulting.com/testsite/uploads/images/vsalogo.JPG') no-repeat 10px;
}
h1 {
    padding: 1px 0 0 5px;
    margin: 0;
    font-size: 28px;
    font-weight: normal;
    color: #008080;
    background-color: inherit;
    font-family: "Trebuchet MS", verdana, arial, sans-serif;
}
h2 {
    color: #008080;
    background-color: inherit;
    font-size: 12px;
    margin: 1px 12px 5px 11px;
    padding: 0;
}
h3 {
    color: #666666;
    background-color: inherit;
    font-size: 14px;
    margin: 0px 0px 5px 0px;
    padding: 0;
}
h4 {
    color: #008080;
    background-color: inherit;
    font-size: 11px;
    margin: 1px 0px 10px 0;
    padding: 0;
}
.title {
    text-align: left;
    padding: 5px 0px 0px 2px;
}
.title p {
    margin: 5px 0 0 23px;
    padding: 0;
}
#footer {
    position: relative;
}
.footer {
    font-size: 11px;
    background-color: #008080;
    border: 1px solid #000000;
    margin: 5px 3px 5px 5px;
    padding: 7px 5px;
    height: 15px;
    text-align: center;
}
.fix {
    clear: left;
    height: 1px;
}
.content {
    position: relative;
    overflow: auto;
    width: 750px;
    margin:0 5px 0 5px;
    border: 1px solid #807C7C;
}
.cp1 {
    float: left;
}
/* End of 'VSA' */
/* end stylesheet one */

/* stylesheet.php - second one*/
/* Start of CMSMS style sheet 'Accessibility and cross-browser tools' */
/* accessibility */
/* menu links accesskeys */
span.accesskey {
    text-decoration: none;
}
/* accessibility divs are hidden by default, text, screenreaders and such will show these */
.accessibility, hr {
    /* position set so the rest can be set out side of visual browser viewport */
    position: absolute;
    /* takes it out top side */
    top: -999em;
    /* takes it out left side */
    left: -999em;
}
/* definition tags are also hidden, these are also used for accessibility menu links */
dfn {
    position: absolute;
    left: -1000px;
    top: -1000px;
    width: 0;
    height: 0;
    overflow: hidden;
    display: inline;
}
/* end accessibility */
/* wiki style external links */
/* external links will have "(external link)" text added, lets hide it */
a.external span {
    position: absolute;
    left: -5000px;
    width: 4000px;
}
a.external {
    /* make some room for the image, css shorthand rules, read: first top padding 0 then right padding 12px then bottom then right */
    padding: 0 12px 0 0;
}
/* colors for external links */
a.external:link {
    color: #18507C;
    /* background image for the link to show wiki style arrow */
    background: url(images/cms/external.gif) no-repeat 100&#37; -100px;
}
a.external:visited {
    color: #18507C;
    /* a different color can be used for visited external links */
/* Set the last 0 to -100px to use that part of the external.gif image for different color for active links external.gif is actually 300px tall, we can use different positions of the image to simulate rollover image changes.*/
    background: url(images/cms/external.gif) no-repeat 100% -100px;
}
a.external:hover {
    color: #18507C;
    /* Set the last 0 to -200px to use that part of the external.gif image for different color on hover */
    background: url(images/cms/external.gif) no-repeat 100% 0;
    background-color: inherit;
}
/* end wiki style external links */
/* clearing */
/* clearfix is a hack for divs that hold floated elements. it will force the holding div to span all the way down to last floated item. We strongly recommend against using this as it is a hack and might not render correctly but it is included here for convenience. Do not edit if you dont know what you are doing*/
/* clearing technique */
.clearfix:after {
    content:"."; 
    display:block; 
    height:0; 
    clear:both; 
    visibility:hidden;
}
.clearfix {display:inline-block;}
/* mac hide \\*/
.clearfix {display: block;}
 /* End hide */

.clear {
    height: 0;
    clear: both;
    width: 90%;
    visibility: hidden;
}
#main .clear {
    height: 0;
    clear: right;
    width: 90%;
    visibility: hidden;
}
* html .clear {
    /* Hides from IE-mac \\*/
   height: 1%;
    clear: right;
    width: 90%;/* End hide from IE-mac */
}
/* end clearing */
/* End of 'Accessibility and cross-browser tools' */

/* end stylesheet two */

/* stylesheet.php - third one*/
/* Start of CMSMS style sheet 'VSA: CSSMenu - Horizontal' */
/* by Alexander Endresen and mark and Nuno */

.clearb {
    /* needed for some browsers */
  clear: both;
}
#menuwrapper {
    position:relative;
    width: 752px;
    height: 43px;
    margin: 0 0 0 5px;
  background: #008080;
    padding: 0;
    z-index: 1000;
}
ul#primary-nav, ul#primary-nav ul {
  list-style-type: none;
    margin: 0;
    padding: 0;
}
ul#primary-nav {
  padding-left: 10px;
    height:43px;
}
ul#primary-nav li {
  float: left;
  position: relative;
    height:43px;
    line-height:43px;
}
ul#primary-nav li a {
  font-size: 1em;
  font-weight: bold;
  color: #000;
  padding:0 15px 0;
    float:left;
  text-decoration: none;
    height:43px;
    line-height:43px;
}

/* set the "a" link look here */
ul#primary-nav li a:hover {
    color: #fff;
}
ul#primary-nav li a.menuactive {
    color: #fff;
    /* bold to set it off from non active */
  font-weight: bold;
    /* set your image here */
}
ul#primary-nav li a.menuactive:hover {
    color: #000;
    /* keep it the same */
  font-weight: bold;
}
/* secondary level */
ul#primary-nav ul {
  position: absolute;
  top:100%;
  left:0;
    margin-left:-999em;
    border: 1px solid #000;
  background: #008080;
    z-index: 999;
    border-bottom: 1px solid #374B51;
  opacity: 0.95;/* CSS 3 */
    width: auto;
    height: auto;
}
#primary-nav li li {
  width: 220px;
  float: left;
    clear:left;
    height:auto;
    line-height:normal;
}
#primary-nav li li a{
    float:left;
    width:202px;
    height:auto;
    line-height:normal;
  text-align: left;
  position: relative;
  color: #000;
  font-weight: normal;
  padding: 6px 3px 6px 15px;
}
/* Styling the appearance of menu items on hover */

#primary-nav li:hover{
    /* set your image here, dark grey image */
  background: url(http://www.vsaconsulting.com/testsite/uploads/ngrey/darknav.png) repeat-x left center;
    visibility:visible;
}
#primary-nav li:hover a{color:#fff}
#primary-nav li:hover li a{color:#000}
#primary-nav li li:hover a{color:#fff}
/* The magic - set to work for up to a 3 level menu, but can be increased unlimited, for fourth level add
#primary-nav li:hover ul ul ul,
#primary-nav li.menuparenth ul ul ul,
*/

#primary-nav ul, #primary-nav li:hover ul, #primary-nav li:hover ul ul, #primary-nav li.menuparenth ul, #primary-nav li.menuparenth ul ul {
    margin-left:-999em;
}
/* for fourth level add
#primary-nav ul ul ul li:hover ul,
#primary-nav ul ul ul li.menuparenth ul,
*/

#primary-nav li:hover ul, #primary-nav ul li:hover ul, #primary-nav ul ul li:hover ul, #primary-nav li.menuparenth ul, #primary-nav ul li.menuparenth ul, #primary-nav ul ul li.menuparenth ul {
    margin-left:0
}
/* End of 'VSA: CSSMenu - Horizontal' */


/* end stylesheet three */
</style>
<!--[if lt IE 8]> 
  <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js"  
  type="text/javascript"></script> 
<![endif]-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.vsaconsulting.com/testsite/js/jquery.cycle.lite.1.0.js"></script>
<script type="text/javascript">
                $(function()
        {
            $("#slideshow").cycle();
        });
</script>
<!--[if lte IE 6]>
    <script type="text/javascript" src="http://www.vsaconsulting.com/testsite/modules/MenuManager/CSSMenu.js"></script>
    <![endif]-->
<!--[if lte IE 7]>
    <style type="text/css">
     </style>
    <![endif]-->
<ul class="accessibility">
    <li><a href="/testsite/#menu_vert" title="Skip to navigation" accesskey="n">Skip to navigation</a></li>
    <li><a href="/testsite/#main" title="Skip to content" accesskey="s">Skip to content</a></li>
</ul>
<hr class="accessibility" />
<!-- TinyMCE Session vars empty -->
</head>
<body>
<div id="pagewrapper">
    <div class="main">
        <div id="header">
            <div class="top">
                <div class="title">
                    <form id="cntnt01moduleform_1" method="get" action="http://www.vsaconsulting.com/testsite/">
                        <div class="hidden">
                            <input type="hidden" name="mact" value="Search,cntnt01,dosearch,0" />
                            <input type="hidden" name="cntnt01returnid" value="15" />
                        </div>
                        <input type="text" class="search-input" id="cntnt01searchinput" name="cntnt01searchinput" size="15" maxlength="50" value="Enter Search..." onfocus="if(this.value==this.defaultValue) this.value='';" onblur="if(this.value=='') this.value=this.defaultValue;"/>
                        <input class="search-button" name="submit" value="Submit" type="submit" />
                    </form>
                    <h1><a href="http://www.vsaconsulting.com/testsite/" title="Home Page, shortcut key=1" >Home</a></h1>
                    <h2>Elevator Engineering, Design, Modernization and Consulting</h2>
                </div>
            </div>
            <div id="menuwrapper" class="clearfix">
                <ul id="primary-nav">
                    <li class="menuactive menuparent"><a class="menuactive menuparent" 
href="http://www.vsaconsulting.com/testsite/" accesskey="1" title="Home Page, shortcut key=1"><dfn>1: </dfn><span>Home</span></a>
                        <ul>
                            <li><a 
href="http://www.vsaconsulting.com/testsite/home/mission_statement.html" ><dfn>1.1: </dfn><span>Mission Statement &amp; Philosophy</span></a> </li>
                            <li><a 
href="http://www.vsaconsulting.com/testsite/home/services.html" ><dfn>1.2: </dfn><span>Services</span></a> </li>
                        </ul>
                    </li>
                    <li><a 
href="http://www.vsaconsulting.com/testsite/design_approach.html" ><dfn>2: </dfn><span>Design Approach</span></a> </li>
                    <li class="menuparent"><a class="menuparent" 
href="http://www.vsaconsulting.com/testsite/management_team.html" ><dfn>3: </dfn><span>Management Team</span></a>
                        <ul>
                            <li><a 
href="http://www.vsaconsulting.com/testsite/management_team/management-team.html" ><dfn>3.1: </dfn><span>Management Team</span></a> </li>
                            <li><a 
href="http://www.vsaconsulting.com/testsite/management_team/principals.html" ><dfn>3.2: </dfn><span>Principals</span></a> </li>
                            <li><a 
href="http://www.vsaconsulting.com/testsite/management_team/senior_staff.html" ><dfn>3.3: </dfn><span>Senior Staff</span></a> </li>
                            <li><a 
href="http://www.vsaconsulting.com/testsite/management_team/office_staff.html" ><dfn>3.4: </dfn><span>Office Staff</span></a> </li>
                            <li><a 
href="http://www.vsaconsulting.com/testsite/management_team/testing_division.html" ><dfn>3.5: </dfn><span>Testing Division</span></a> </li>
                        </ul>
                    </li>
                    <li class="menuparent"><a class="menuparent" 
href="http://www.vsaconsulting.com/testsite/portfolio.html" ><dfn>4: </dfn><span>Portfolio</span></a>
                        <ul>
                            <li><a 
href="http://www.vsaconsulting.com/testsite/portfolio/portfolio-2.html" ><dfn>4.1: </dfn><span>Portfolio</span></a> </li>
                            <li><a 
href="http://www.vsaconsulting.com/testsite/portfolio/commercial.html" ><dfn>4.2: </dfn><span>Commercial</span></a> </li>
                            <li><a 
href="http://www.vsaconsulting.com/testsite/portfolio/residential.html" ><dfn>4.3: </dfn><span>Residential</span></a> </li>
                            <li><a 
href="http://www.vsaconsulting.com/testsite/portfolio/retail.html" ><dfn>4.4: </dfn><span>Retail</span></a> </li>
                            <li><a 
href="http://www.vsaconsulting.com/testsite/portfolio/hotel.html" ><dfn>4.5: </dfn><span>Hotel</span></a> </li>
                            <li><a 
href="http://www.vsaconsulting.com/testsite/portfolio/healthcare.html" ><dfn>4.6: </dfn><span>Healthcare</span></a> </li>
                            <li><a 
href="http://www.vsaconsulting.com/testsite/portfolio/educational.html" ><dfn>4.7: </dfn><span>Educational</span></a> </li>
                            <li><a 
href="http://www.vsaconsulting.com/testsite/portfolio/government.html" ><dfn>4.8: </dfn><span>Government</span></a> </li>
                            <li><a 
href="http://www.vsaconsulting.com/testsite/portfolio/housing_authority.html" ><dfn>4.9: </dfn><span>Housing Authority</span></a> </li>
                        </ul>
                    </li>
                    <li class="menuparent"><a class="menuparent" 
href="http://www.vsaconsulting.com/testsite/clients.html" ><dfn>5: </dfn><span>Clients</span></a>
                        <ul>
                            <li><a 
href="http://www.vsaconsulting.com/testsite/clients/clients-2.html" ><dfn>5.1: </dfn><span>Clients</span></a> </li>
                            <li><a 
href="http://www.vsaconsulting.com/testsite/clients/architects.html" ><dfn>5.2: </dfn><span>Architects</span></a> </li>
                            <li><a 
href="http://www.vsaconsulting.com/testsite/clients/building_owners.html" ><dfn>5.3: </dfn><span>Building Owners</span></a> </li>
                            <li><a 
href="http://www.vsaconsulting.com/testsite/clients/building_management.html" ><dfn>5.4: </dfn><span>Building Management</span></a> </li>
                            <li><a 
href="http://www.vsaconsulting.com/testsite/clients/general_contractors.html" ><dfn>5.5: </dfn><span>General Contractors</span></a> </li>
                            <li><a 
href="http://www.vsaconsulting.com/testsite/clients/engineers.html" ><dfn>5.6: </dfn><span>Engineers</span></a> </li>
                        </ul>
                    </li>
                    <li><a 
href="http://www.vsaconsulting.com/testsite/contact.html" ><dfn>6: </dfn><span>Contact</span></a> </li>
                </ul>
            </div>
        </div>
        <div class="content">
            <div id="leftcolumn" class="left_column">
                <div id="slideshow" class="slides"> <img src="http://www.vsaconsulting.com/testsite/uploads/images/building_1.jpg" alt="Flatiron Building" title="The Flatiron Building - 175 Fifth Avenue, NYC" /> <img src="http://www.vsaconsulting.com/testsite/uploads/images/building_2.jpg" /> <img src="http://www.vsaconsulting.com/testsite/uploads/images/building_3.jpg" /> <img src="http://www.vsaconsulting.com/testsite/uploads/images/building_4.jpg" /> <img src="http://www.vsaconsulting.com/testsite/uploads/images/building_5.jpg" /> <img src="http://www.vsaconsulting.com/testsite/uploads/images/building_6.jpg" /> </div>
                <div class="news">
                    <h4>COMPANY NEWS</h4>
                    <!-- Displaying News Module -->
                    <!-- News Categories: '' -->
                    <!-- Start News Display Template -->
                    <div class="NewsSummary">
                        <div class="NewsSummaryPostdate"> <b>Feb 10, 2010</b> </div>
                        <div class="NewsSummaryLink"> <a href="http://www.vsaconsulting.com/testsite/news/1/15/VSA-Announces-New-Website.html" title="VSA Announces New Website">VSA Announces New Website</a> </div>
                        <div class="NewsSummarySummary"> Vertical Systems Analysis has announced that they have gone live with   their new website effective March 1st, 2010. </div>
                        <div class="NewsSummaryMorelink"> [<a href="http://www.vsaconsulting.com/testsite/news/1/15/VSA-Announces-New-Website.html">More</a>] </div>
                        <br />
                    </div>
                    <div class="NewsSummary">
                        <div class="NewsSummaryPostdate"> <b>Feb  1, 2010</b> </div>
                        <div class="NewsSummaryLink"> <a href="http://www.vsaconsulting.com/testsite/news/3/15/VSA-Announces-New-Vice-President.html" title="VSA Announces New Vice President">VSA Announces New Vice President</a> </div>
                        <div class="NewsSummarySummary"> VSA is pleased to annouce their new Vice President, Anthony A. Giordano. </div>
                        <div class="NewsSummaryMorelink"> [<a href="http://www.vsaconsulting.com/testsite/news/3/15/VSA-Announces-New-Vice-President.html">More</a>] </div>
                        <br />
                    </div>
                    <!-- End News Display Template -->
                </div>
            </div>
            <div class="bread"><span class="lastitem">Home</span></div>
            <div class="right">
                <h3>Vertical Systems Analysis</h3>
                <h4>"Let's Take you to the Top"</h4>
                <p><strong>Vertical Systems Analysis</strong>, Inc. is an established consulting firm in the United States of America and has provided design and engineering expertise to numerous clients since its inception.  Over the years, our company has evolved with the changing times and the needs of our clientele into a top notch engineering firm with state-of-the-art design and reporting methods and equipment. <br />
                    <br />
                    Our design and consulting experience has run the entire gamut from providing engineering and design services for complex elevator/escalator systems (New York Methodist Hospital) and performing elevator surveys and audits of prestigious and Landmarked properties such as the Flat Iron Building (175 Fifth Avenue, New York, NY), apartment Cooperatives and Condominiums, to public transit structures. <br />
                    <br />
                    <strong><span style="text-decoration: underline;">Company History</span></strong></p>
                For over twenty-four (24) years, Vertical Systems Analysis (VSA) has been providing vertical transportation consulting  services to many of the leading professionals, in all sectors of this industry  for the entire tri-state area.
                <p>Conveniently located in mid-town Manhattan, our team of  professional staff including two (2) working Principals, fifteen (15) field personnel  and licensed inspectors, supported by ten (10) administrative employees are available on a moment&#8217;s notice, to address any situation relative to our Client&#8217;s needs.</p>
            </div>
        </div>
        <div id="footer">
            <div class="footer"><a href="../undefined/testsite" target="_blank"><strong>Vertical Systems Analysis</strong></a> &#169; 1985-2010 | 322 Eight Avenue, Suite 201 | New York, NY 10001 | <strong>212-989-5525</strong></div>
        </div>
    </div>
</div>
</body>
</html>

I checked ie7, ie8, firefox and Safari and they all seem to be the same. (I didn’t look at ie6 though).

Hope you can manage to work it all out. :slight_smile:

20

Ummmm, not sure what to say, as you put much time into this, so a very big thank you…I was expecting some code, but got a whole re-write.

I can see right away that the menu css is much easier to deal with, and makes a lot more sense. So modifying will be much easier if need be.

I will compare this to my current and modify accordingly. Again Paul, very much appreciated. Saved me much time & effort.