CSS - Css Menu Positioning

I've been developing a content management system, and one of the final things I have to clean up is a stylesheet problem involving the float property. I'm trying to position two boxes next to each other id: menu and id: content, but until I set the width property on content it would drop beneath menu. I want the content box to fill any remaining space to the right of the menu, with appropriate padding and spacing and such.

Can anyone help make suggestions as to the best way of achieving this?

Here is some of my css code which is also viewable on the website which is located at: 8< snip >8

Code:

#container 
{
	margin: 1em 4em 1em 4em;
	/* width: 750px;  dynamic width */
	text-align: left;
	background: #FFFFCC;
	border: 2px solid black;
}

#menu 
{
	float: left; 
	margin-top: 20px;
	margin-bottom: 20px;
	margin-left: 20px;
	margin-right: 20px;
	font-family: Verdana;
	font-size: 12px;
	width: 150px;
	display: inline;
}

#content 
{
	float: right;
	width: 20em;
	margin-top: 0px;
	margin-right: 20px;
	margin-bottom: 0px;
	/* margin-left: 170px; */
	padding-top: 5px;
	padding-left: 20px;
	padding-bottom: 20px;
	border-left: 2px solid black;
	height: 100%;
}

Thanks for trying to help, I've been getting really frustrated trying to get css to work in both ie and firefox.

BTW: I've been finding the Web Developer firefox extension very helpful for this kind of work.

Hello! I'm hoping someone can help me out here. I'm sure it's something simple I'm overlooking, but I've trialed-and-errored it enough and it's time to seek help!

I'm trying to adjust the location of the "main menu" on this page he

http://www.jeditemplearchives.com/hasbrodb/welcome.php

Currently, it is set in reference to the side of the browser in this CSS code:

Code:

.menuContainer
{
	position: absolute;
	top:113px;
	right:210px;
	margin: 10px;
	margin-top: 50px;

}

I've tried making the position relative but it really whacks out the page when I do that. I want to make it relative to the border of the content so that no matter what size resolution or if the browser is minimized it stays fixed and doesn't float left. I was able to do this to the links directly above it, but the same thing doesn't seem to work for this. Here's the code for the 'advanced' and 'login' links:

Code:

#header ul.headerLinks
{
	list-style-type: none;
	margin: 0px;
	padding: 10px;
	position: absolute;
	right: 0px;
	top: 95px;
	white-space: nowrap;
}

Thanks for any suggestions anyone comes up with!

If you look at the main menu(Home-About MCAEC-The Academy-Adult Education-Shining Star-Giving) on this page and hover over one of the parent categories you'll see issues with the positioning of the dropdown. I adjusted the margin and it looks fine in IE but the dropdown floats over the parent tabs in Firefox and Opera. Is there a way to adjust this so it's consistent in all browsers?
Here's the code for the dropdown ul ul li a:
Code:

#dropmenu { z-index:100; position:relative;}
#dropmenu .menu ul ul {z-index:99; margin:0; width:160px; background:url(images/bg_sub.png) top left no-repeat    !important; margin: 10px 0px 0px 0px ;  position: absolute; display:none; padding-bottom:10px !important; clear:both; padding-top:13px;}	
#dropmenu .menu ul ul li { line-height:inherit; height:auto; text-align:left; width:160px; text-align:left; line-height:1.69em;}
#dropmenu .menu ul ul li a{ font-weight: normal; color:#fff; font-size:13px; text-transform:none; }	
#dropmenu .menu ul ul li a:hover {  color:#edc951; font-weight:normal; }

Thanks

For my website at btccaction.co.uk I have chosen a CSS menu at the top as the ideal solution.

However I'm having some problems positioning it so that the menu is in the same position in both Firefox and Internet explorer, and on various screen sizes. Does anyone have any tips for me here regarding positioning elements such as this so that they appear in the same position no matter what the operating system variables?

For reference I'm using the code from he
http://www.cssplay.co.uk/menus/ultimate.html

Any help kindly appreciated.

Andy

Dear clever CSSers

I am currently changing my flyout menu from something rather complex, to the Suckerfish version.

I have one problem: I have been using some mouseover tooltip-like information boxes giving extra details of the contents of a link, by having a div within the text of the hyperlink, to come visible when hovered. It has worked very well in my old version. Here's my test page

In the new version, there are two lines of CSS allowing the popup to open, which is also enclosed in a balloon-style info graphic, actually in two halves so that it can open like a clamshell if there is extra text in there, or a user has a larger than normal font setting:

Code:

#nav a span {visibility:hidden;position:absolute;top:-120px;left:175px;background: url(http://www.internetevangelismday.com/images/balloontop.png) no-repeat transparent top left;width:196px;height:105px;line-height:1.2em;text-align:left;word-wrap:break-word;text-wrap:normal;white-space:normal;padding:0px;} #nav a:hover span {visibility:visible;z-index:9999;min-height:130px;} 

This CSS does allow the popup to appear, but unfortunately it positions each popup at the same position on the page. I would prefer it that they appeared with the 'point' of the balloon pointing at the relavent link. You can see that if you hover '2nd level here', and then 'page 1', or 'page 2' or 'another page', the info balloon appears in exactly the same place on the page.

Changing the positioning from position absolute to position relative causes the popup to appear in about the correct position, but it also expands the link area on the menu itself to a huge blank area and misses off the balloontop.png graphic from the popup, which I presume is staying inserted, hidden, within the menu item and causing it to expand.

Thanks for any ideas on this. BTW, the javascript is a neat one that repositions submenus where necessary so they can't vanish below the bottom of the page.

Best wishes

Tony

Hi all,

I'm a newbie on spry coding and was hoping for some help. I tried to search the forum for a similar probem, but couldn't find one.

Here's the basic problem: I have a spry horizontal menu bar and my main menu items are displaying just fine when the browser screen is maximized. However, when I make the browser screen smaller on the screen, the last menu item gets pushed down to a second line.

Here's what I mean:

With maximized browser screen:
[Item 1][Item 2][Item 3][Item 4][Item 5]

With smaller browser screen:
[Item 1][Item 2][Item 3][Item 4]
[Item 5]

Is there any way that I can use CSS, or any other method you might know, to force the items to stay on the same line, regardless of the screen size?

Thanks so much for any info!

Hello. This is probably not good practice but I have two problems arising with the same piece of code.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>My site</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
     <style type="text/css">
       body {
         font-family: verdana, arial, helvetica, sans-serif;
         font-size: 0.8em;
         background: #cfcf00;
         margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
         padding: 0;
         padding-bottom: 2em;
         text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
         color: #303030; } /* end body */
      #logo_search {
        width: 100%;
        min-width: 957px; 
        max-height: 79px;
        padding: 32px 0 0 0; 
        border: 0;
        margin: auto;
        overflow: hide; 
        background: #ffffff; } /* end #logo_search */
      #logo_container { 
        width: 40%;
        float: left;
        background: #ffffff; 
        text-align: right;
        border: 0;
        border-bottom: 1px solid #ffffff;
        height: 51px;
        padding: 0;
        margin: auto; } /* end #logo_container */
      #base { 
        clear: both;
        padding-top: 1px;
        border-top: 1px solid #ffffff;
        border-bottom: 1px solid #ffffff;
        width: 100%; 
        background: #c0c0c0;  } /* end #base */
      #main_block { 
        background: #ff0000;
        margin: auto;
        text-align: left;
        width: 955px; } /* end #main_block */
      #main_content { 
        background: #ffffff;
        border-left: 1px solid #ff0000;
        padding-top: 1em;
        padding-bottom: 1em;
        border-right: 1px solid #ff0000; } /* end #main_content */
      #top_main_content ul {
        float: left;
        list-style-type: none;
        border-spacing: 0;
        padding: 0;
        text-align: right;
        border-top: 1px solid #00ff00;
        height: 243px;
        width: 266px; } /* end #top_main_content #links_table */
      #top_main_content ul li {
        vertical-align: middle;
        color: #0000ff;
        border-bottom: 1px solid #00ff00; } /* end #top_main_content #links_table td */
      #top_main_content ul li a { 
        line-height: 26px;
        padding-right: 1em;
        display: block;
        color: #0000ff;
        width: 259px; } /* end #top_main_content ul li a */
      #top_main_content ul li a:hover {
        background: #cfcf00; 
        color: #000000; } /* end #top_main_content ul li a:hover */
      #top_main_content img { 
        border-bottom: 1px solid #00ff00;
        border-top: 1px solid #00ff00;
        margin-top: 12px;
        text-align: right;
        vertical-align: top; } /* end #top_main_content img */
    </style>
  </head>
  <body>
    <div id="logo_search">
      <div id="logo_container">
        &nbsp;
      </div>
    </div>
    <div id="base">
      <div id="main_block">
        <div id="main_content">
          <div id="top_main_content">
            <ul>
              <li><a href="#">Link 1</a></li>
              <li><a href="#">Link 2</a></li>
              <li><a href="#">Link 3</a></li>
              <li><a href="#">Link 4</a></li>
              <li><a href="#">Link 5</a></li>
              <li><a href="#">Link 6</a></li>
              <li><a href="#">Link 7</a></li>
              <li><a href="#">Link 8</a></li>
              <li><a href="#">Link 9</a></li>
            </ul>
            <img src="#" alt="" id="main_graphic" height="243" width="687"/>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Problem 1 (Opera rendering): Opera (and only Opera from what I've noticed) is extended the border for the menu options into the side border. How can I eliminate this behavior? I added a margin-left: 1px to the menu and that will render it correctly in Opera but have an extra 1px of whitespace everywhere else.

Problem 2: I'm trying to position this menu such that it lines up exactly with an image 243px high. One question I have is that if I add a 1px top and bottom border to an image that is 243px high, would that object still be 243px high or now 245px high? Also, I want to indent the menu options slightly so that they aren't exactly next to the image but I still need the entire bar to serve as a link. What would be the best approach to line up these objects. I can sort of do it with margin-top but I'm sure that's not the best way to go.

Edited to add:
Problem 3: The menu does not align with the left edge of the main section in IE and only IE. What can I do to fix this?

i am trying to use the suckerfish dropdown menu. starting from the pretty example, i got it going in IE6 but it looked pretty off in mozilla. i tinkered around further the the IE code which changed things a bit there and made things look a bit better in mozilla but not much!
my code is at http://www.fizzycherry.com/menutest.html - i would *really* appeciate any ideas.
the main things really bugging me a
how can i get the menu bar to fill the width of the screen in mozilla? my navbar div did this before i inserted the sub menus!
once i tinkered with my css, placing padding on the links rather than the li elements, huge vertical gaps started appearing in the submenus in both IE and Mozilla, even with no margins padding and borders. i need to *add* a bottom border (same colour as background) to remove these gaps! why??
ideally i would like the submenus to look somethign like they do in ie6 but even if someone could just tell me how to make the bar fill the screen i'd be chuffed!

Hi all!

I'm trying to make a horizontal menu with vertical drop downs.. However, the dropdowns don't go where they're supposed to.
The menu is more or less at hybrid between a horizontal menu and a drop-down menu, so it's probably all more or less messed up

You can check out the site at:
cleopatra.gebodesign.no

The files are at:
gebodesign.no/cleopatra/menu.php
gebodesign.no/cleopatra/stylesheet.css

Thanks for any input

Hi, I'm trying to make a drop-down menu using CSS and javascript. I'm posting this here because the javascript (and most of the css!) is working fine, I just need some help with the positioning.

You can see the menu so far on the website I'm beginning to develop, 10pinleague.com. As you can see the initial drop downs work as intended but when you attempt to open a submenu, that should appear to the right of the drop down menu, it appears in completely the wrong place. And for some odd reason the distance from the drop-down menus to the submenus increases more and more as you progress from Menu 1 to Menu 2 and 3.

I'm no expert at either javascript or CSS, so the drop down menu was something that I downloaded from a website, here, and then adapted to suit my site. Perhaps this wasn't intended to work as a cascading drop down menu. I just thought if I apply the same principle of wrapping the link in a div and getting that to show another new div containing the submenu it should work. And it kind of does, just in the wrong place - which I do not understand why this happens.

Here is the HTML code for the menu. (note this is not the actual code on my website, this is code that is generated from a php loop I've made. But the HTML remains the same).
Code:

<!--	  START OF MENU	  !-->

<table width='730' height='30'>
<tr>
	
	
	<td width='20%' align='center'>
	<div id='menu1a'>
	<a href='#'>Menu 1</a>
	</div>
	<div id='menu1b' class='menu_dropdown'>
	<table width='150' height='50'>
	<tr>
		<td class='padded'>
		<table width='100%' height='100%'>
		<tr>
			<td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'>
			<div id='submenu1_1a'>
			<a href='#'>Item 1</a>
			</div>
			</td>
		</tr>
		<tr>
			<td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'>
			<div id='submenu1_2a'>
			<a href='#'>Item 2</a>
			</div>
			</td>
		</tr>
		<tr>
			<td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'>
			<div id='submenu1_3a'>
			<a href='#'>Item 3</a>
			</div>
			</td>
		</tr>
		</table>
		</td>
	</tr>
	</table>
	</div>
	<script type='text/javascript'>at_attach('menu1a', 'menu1b', 'hover', 'y', 'pointer');</script>
	</td>
	
	
	<td width='20%' align='center'><div id='menu2a'>
	<a href='#'>Menu 2</a>
	</div>
	<div id='menu2b' class='menu_dropdown'>
	<table width='150' height='50'>
	<tr>
		<td class='padded'>
		<table width='100%' height='100%'>
		<tr>
			<td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'>
			<div id='submenu2_1a'>
			<a href='#'>Item 2</a>
			</div>
			</td>
		</tr>
		<tr>
			<td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'>
			<div id='submenu2_2a'>
			<a href='#'>Item 2</a>
			</div>
			</td>
		</tr>
		<tr>
			<td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'>
			<div id='submenu2_3a'>
			<a href='#'>Item 3</a>
			</div>
			</td>
		</tr>
		<tr>
			<td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'>
			<div id='submenu2_4a'>
			<a href='#'>Item 4   ></a>
			</div>
			
			<div id='submenu2_4b' class='menu_dropdown'>
			<table width='150' height='50'>
			<tr>
				<td class='padded'>
				<table width='100%' height='100%'>
				<tr>
					<td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'>
					<a href='#'>Item 4a</a>
					</td>
				</tr>
				<tr>
					<td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'>
					<a href='#'>Item 4b</a>
					</td>
				</tr>
				</table>
				</td>
			</tr>
			</table>
			</div>
			<script type='text/javascript'>at_attach('submenu2_4a', 'submenu2_4b', 'hover', 'y', 'pointer');</script>
			
			</td>
		</tr>					
		<tr>
			<td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'>
			<div id='submenu2_5a'>
			<a href='#'>Item 5</a>
			</div>
			</td>
		</tr>
		</table>
		</td>
	</tr>
	</table>
	</div>
	<script type='text/javascript'>at_attach('menu2a', 'menu2b', 'hover', 'y', 'pointer');</script></td><td width='20%' align='center'><div id='menu3a'><a href='#'>Menu 3</a></div><div id='menu3b' class='menu_dropdown'><table width='150' height='50'><tr><td class='padded'><table width='100%' height='100%'><tr><td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'><div id='submenu3_1a'><a href='#'>Item 3</a></div></td></tr><tr><td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'><div id='submenu3_2a'><a href='#'>Item 2</a></div></td></tr><tr><td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'><div id='submenu3_3a'><a href='#'>Item 3</a></div></td></tr></table></td></tr></table></div><script type='text/javascript'>at_attach('menu3a', 'menu3b', 'hover', 'y', 'pointer');</script></td><td width='20%' align='center'><div id='menu4a'><a href='#'>Menu 4</a></div><div id='menu4b' class='menu_dropdown'><table width='150' height='50'><tr><td class='padded'><table width='100%' height='100%'><tr><td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'><div id='submenu4_1a'><a href='#'>Item 4</a></div></td></tr><tr><td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'><div id='submenu4_2a'><a href='#'>Item 2</a></div></td></tr><tr><td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'><div id='submenu4_3a'><a href='#'>Item 3</a></div></td></tr></table></td></tr></table></div><script type='text/javascript'>at_attach('menu4a', 'menu4b', 'hover', 'y', 'pointer');</script></td><td width='20%' align='center'><div id='menu5a'><a href='#'>Menu 5</a></div><div id='menu5b' class='menu_dropdown'><table width='150' height='50'><tr><td class='padded'><table width='100%' height='100%'><tr><td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'><div id='submenu5_1a'><a href='#'>Item 1</a></div></td></tr><tr><td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'><div id='submenu5_2a'><a href='#'>Item 2</a></div></td></tr><tr><td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'><div id='submenu5_3a'><a href='#'>Item 3</a></div></td></tr></table></td></tr></table></div><script type='text/javascript'>at_attach('menu5a', 'menu5b', 'hover', 'y', 'pointer');</script></td>				
	
</tr>
</table>

Here is the related CSS.....but I doubt this is important.
Code:

.menu_dropdown { background-color: #a5caad; border: 1px solid #057c1f; position: absolute; visibility: hidden; font-size: small; }
.menu_dropdown A:link {text-decoration: none; color: #000; font-weight: normal; }
.menu_dropdown A:visited {text-decoration: none; color: #000; font-weight: normal; }
.menu_dropdown A:active {text-decoration: none; color: #000; font-weight: normal; }
.menu_dropdown A:hover {text-decoration: underline; color: #000; font-weight: normal; }

td.menuNormal
{padding: 0px;
font-weight: bold;
vertical-align: top;
background-color:#a5caad;}

td.menuHover
{padding: 0px;
font-weight: bold;
vertical-align: top;
background-color: #87bc93;}

And here is the javascript file, that I have not modified in any way from the site I linked to above.
Code:

// <script>

// Copyright (C) 2005 Ilya S. Lyubinskiy. All rights reserved.
// Technical support: http://www.php-development.ru/
//
// YOU MAY NOT
// (1) Remove or modify this copyright notice.
// (2) Distribute this code, any part or any modified version of it.
//     Instead, you can link to the homepage of this code:
//     http://www.php-development.ru/javascripts/dropdown.php.
//
// YOU MAY
// (1) Use this code on your website.
// (2) Use this code as a part of another product provided that
//     its main use is not creating javascript menus.
//
// NO WARRANTY
// This code is provided "as is" without warranty of any kind, either
// expressed or implied, including, but not limited to, the implied warranties
// of merchantability and fitness for a particular purpose. You expressly
// acknowledge and agree that use of this code is at your own risk.

function expand(s)
{
  var td = s;
  var d = td.getElementsByTagName("div").item(0);

  td.className = "menuHover";
}

function collapse(s)
{
  var td = s;
  var d = td.getElementsByTagName("div").item(0);

  td.className = "menuNormal";
}

// ----- Popup Control ---------------------------------------------------------

function at_display(x)
{
  var win = window.open();
  for (var i in x) win.document.write(i+' = '+x[i]+'<br>');
}

// ----- Show Aux -----

function at_show_aux(parent, child)
{
  var p = document.getElementById(parent);
  var c = document.getElementById(child );

  var top  = (c["at_position"] == "y") ? p.offsetHeight+2 : 0;
  var left = (c["at_position"] == "x") ? p.offsetWidth +2 : 0;

  for (; p; p = p.offsetParent)
  {
    top  += p.offsetTop;
    left += p.offsetLeft;
  }

  c.style.position   = "absolute";
  c.style.top        = top +'px';
  c.style.left       = left+'px';
  c.style.visibility = "visible";
}

// ----- Show -----

function at_show()
{
  var p = document.getElementById(this["at_parent"]);
  var c = document.getElementById(this["at_child" ]);

  at_show_aux(p.id, c.id);

  clearTimeout(c["at_timeout"]);
}

// ----- Hide -----

function at_hide()
{
  var c = document.getElementById(this["at_child"]);

  c["at_timeout"] = setTimeout("document.getElementById('"+c.id+"').style.visibility = 'hidden'", 333);
}

// ----- Click -----

function at_click()
{
  var p = document.getElementById(this["at_parent"]);
  var c = document.getElementById(this["at_child" ]);

  if (c.style.visibility != "visible")
       at_show_aux(p.id, c.id);
  else c.style.visibility = "hidden";

  return false;
}

// ----- Attach -----

// PARAMETERS:
// parent   - id of visible html element
// child    - id of invisible html element that will be dropdowned
// showtype - "click" = you should click the parent to show/hide the child
//            "hover" = you should place the mouse over the parent to show
//                      the child
// position - "x" = the child is displayed to the right of the parent
//            "y" = the child is displayed below the parent
// cursor   - Omit to use default cursor or check any CSS manual for possible
//            values of this field

function at_attach(parent, child, showtype, position, cursor)
{
  var p = document.getElementById(parent);
  var c = document.getElementById(child);

  p["at_parent"]     = p.id;
  c["at_parent"]     = p.id;
  p["at_child"]      = c.id;
  c["at_child"]      = c.id;
  p["at_position"]   = position;
  c["at_position"]   = position;

  c.style.position   = "absolute";
  c.style.visibility = "hidden";

  if (cursor != undefined) p.style.cursor = cursor;

  switch (showtype)
  {
    case "click":
      p.onclick     = at_click;
      p.onmouseout  = at_hide;
      c.onmouseover = at_show;
      c.onmouseout  = at_hide;
      break;
    case "hover":
      p.onmouseover = at_show;
      p.onmouseout  = at_hide;
      c.onmouseover = at_show;
      c.onmouseout  = at_hide;
      break;
  }
}

Can somebody please help me get the submenus appearing next to the divs in the drop-down menus that they relate to, rather than half way across the page? Thank you very much!


PS. If you think I've asked this in the wrong place and it should be in the Javascript forum, could you move it for me? Thanks.

Hello,

I am having problems positioning my left menu on non IE browsers, The menu appears fine in IE, can anyone help please, I have attached my code

Code:

body {
 margin:20px;
 background:#ffffff;
 text-align:center;
 padding:0;
 }

#outer {
 text-align:left;
 border:0px solid #000000;
 width:785px;
 margin:auto;
 }

#hdr {
 height:30px;
 background:#ffffff;
 }

#bar {
 height:25px;
 background:#ffffff;
 border:solid #000000;	
 border-width:1px 0 1px 0;
 }

#bodyblock {
 position:relative;
 background: #fffff;
 width:785px;
 padding:0;
 }

#l-col {
width:204px;
height:452px;
		float:left;
		background:#fff;
		background-image:url(images/left.jpg);
		background-repeat:no-repeat;
		padding-bottom:10px; 
		}

#cont {
 width:565px;
 background:#ffffff;
 border:solid #000000;	
 border-width:0 0 0 0px;
 }
 
#middle {
		width:5px;
		float:left;
		background:#fff;
		}

#ftr {
 height:25px;
 background:#c0c0c0;
 border:solid black;
 border-width:1px 0 0 0;
 margin:0;
 }

My first question relates to my earlier problem which I fixed, excpet that the code that was messing it up was "img { border-width: 0; }"

The problem w/ this is that I do not want any borders around my images, it makes the page look bad. Does anyone have a workaround?

(Note that I also tried #menu a img { border-width....etc } )

For the second question:: I've noticed that my background positions fine in IE but the rest of the images won't move to where I positioned them.

link to my page:: main
link to css page:: css page

Hi all, haven't had to post for awhile. Need some help!

Am trying to create a popup box below menu when hovering over link, strictly using CSS. My problem is everything's working perfect in IE(a rarity), but in Firefox the box pops up too high and is wider than I want

Here's the code...

CSS:
Code:

body {
	margin: 0; padding: 0;
	background: url(bodybg.jpg) repeat-x #000;
	}

#header {
	position: absolute; top: 0; left: 0;
	width: 100%; height: 100px;
	background: url(metalpipe2.png) bottom repeat-x;
	margin: 0; padding: 0;
	}

#leftcontent {
	position: absolute; top: 110px; left: 0;
	width: 125px; height: 700px;
	margin-left: 15px; padding: 0;
	}
	/*moved background to #leftcontent a. Can now create transparent gap for background to show between links.*/

#leftcontent a {
	display: block;
	margin: 0; padding: 5px;
	font-weight: bold; font-size: 17px;
	background: #222; color: #C00;
	font-family: Arial;
	text-align: center;
	text-decoration: none;
	}

#leftcontent a:hover {
	color: lightgrey;
	border: none;
	}
	/*had to add border: none; to make span box work in IE*/ 

#leftcontent a span {
	display: none;
	}

#leftcontent a:hover span {
	display: block;
	position: absolute; top: 255px; left: 0;
	width: 135px;
	margin-left: -5px; padding: 5px;
	background: #000; color: lightgrey;
	font-size: 12px;
	border: 1px solid white;
	} 

#midcontent {
	position: absolute; top: 110; left: 155px; right: 25px;
	height: 700px;
	margin: 0; padding: 0;
	background: #F5F5F5;
	}

#midcontent p {
	margin: 0; padding: 20px;
	}

HTML:
Code:

<html>
<head>
<title>Test Page</title>

<link rel="stylesheet" href="TestPage.css" type="text/css" media="screen" />

<style type="text/css">
<!--
#leftcontent a#link1 {
	color: #C00;
	background: #444; 
	border: none;
	padding: 5px;
	}
 --> </style>
</head>

<body>


  <div id="header">
	<img src="x-fire_logo_t4.png" alt="X-Fire logo" />
  </div> <!-- end #header -->

  <div id="leftcontent">
	<a href="link" id="link1">Home</a>
	<a href="link" id="link2">Home Fire Sprinklers<span>Text for<br />a:hover span { }<br />popup window</span></a>
	<a href="link" id="link3">Fire Alarm Systems</a>
	<a href="link" id="link4">Burglar Alarm Systems</a>
	<a href="link" id="link5">Insurance<br /> Info.</a>
	<a href="link" id="link6">Contact Us</a>
  </div> <!-- end #leftcontent -->

	
  <div id="midcontent">	  
	<p>Here's my dilema. Hover over Home Fire Sprinklers link. There should be a popup window below menu.<br />Popup location & width looks great in IE.<br />But in Firefox it pops up higher & wider than I wish. </p>
<p>Could someone tell me what I'm overlooking?...Many Thanks!</p>
<p>Got idea from <a href="http://www.meyerweb.com/eric/css/edge/popups/demo.html">Eric Meyer's site</a>. His page doesn't encounter this problem and I can't see anything special in the source that's much different from mine.</p>
  </div> <!-- end #midcontent -->



</body>
</html>

Many Thanks,
James

Hi,

I spend many hours on the net to fix this problem, hope you can help me.

I made a site with 3 frames; header, menu and main. In the menu I made a table (width and height 100%), with rows with one cell each. In each cell is a link.

With some links I want to choose between more pages. So I found a nice dhtml menu, witch looks like http://dhtml-menu.com/examples/dhtml-menu-ex2.html.

Everything works fine, ecxept the position of the submenus.


Here is some HTML:
<table><tr><td>
<a href="#" target="#" onMouseOver="hideAll(); showLayer('layer1'); stopTime();" onMouseOut="startTime();">Name</a>
</td></tr></talbe>

...

<div id='layer1'>
<a href="#" target="#" onMouseOver="stopTime();" onMouseOut="startTime();">Name</a><br>
<a href="#" target="#" onMouseOver="stopTime();" onMouseOut="startTime();">Name2</a><br>
</div>


And here is some CSS:
#layer1, #layer2, #layer3, #layer4
{
position: absolute;
z-index : 90;
visibility : hidden;
width : 150pt;
left: 10pt
}

#layer1
{
top : 0pt
}


Questions:
1 is it possible to position the submenu exactly next (or under or above)to the corresponding main menu item, I think it should be with relative positioning.
2 since I use frames and the menu takes the left frame, is it possible to position this submenu on the right side of the main menu item, i.e. on top of the main frame, or in the main frame.
3 I read a lot about this and many people say that a page like this should be made using tables (or CSS-P?), instead of frames. If I have to or want to change it, does that mean that I have to write a table structure in every page and when I want to change a menu item, I have tot change that in every page?

Hope some can help me!

Hey guys,

Here's my problem:

http://www.3rdcoastpc.com/moonstoys/

Basically I want the menu in the rounded rectangle area, not underneath (outside) of it. You can see what's happening in the URL. If I use a span tag instead of a div in the head_content class, the background (the right corner of the rounded rectangle) doesn't show. I'm not sure what's going on here because in my HTML I'm putting the <ul> tags right after the logo image, so I would think that it would sit next to the logo and not underneath it. I'm just confused as this is my first attempt at doing a tableless design.

Here's my css:
http://www.3rdcoastpc.com/moonstoys/main.css

and the HTML:
http://www.3rdcoastpc.com/moonstoys/index.html

Thanks in advance!
Dustin