CSS - Disappearing Uls In Safari

This site was done using all CS and is showing correctly in Firefox. When I test it in IE 6.0 All of the top navigation and images disappear. Still shows in the source code but doesn't display. I have no idea why. I've tried changing the order of my divs on the page and double checked all my z-indices. Any help would be appreciated!

I can't post the link to the site (forum rules) but here are the bits of code that I think are relevent:

Code:

<div class="logo"><img src="../images/logo.png" alt="ConnectSuite" width="264" height="84" /></div>
<div class="navigation"><a href="../default.asp">home</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="../officeware.asp">officeware</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="../contactware.asp">contactware</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="../projectware.asp">projectware</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="../exware.asp">EXware</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="triware.asp">about triware</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="contact.asp">contact us</a></div>
<div class="headerText2">
	<!-- TemplateBeginEditable name="PageTitle" --><h1>officeware</h1>
	<p>Shouldn&rsquo;t everything you need to connect your business be available in one box?</p>
	<h2 align="right">We think so.</h2><!-- TemplateEndEditable -->
</div>
<div class="topBand"></div>
<div class="whiteBand"></div>
<div class="greyBand"></div>
<div class="whiteBand"></div>
<div class="greenBand2"></div>

Code:

.topBand {
	background-image: url(../images/topgradient.png);
	background-repeat: repeat-x;
	float: left;
	height: 25px;
	width: 100%;
	position: relative;
	z-index: 0;
}
.whiteBand {
	background-color: #FFFFFF;
	float: left;
	height: 6px;
	width: 100%;
	position: relative;
	z-index: 0;
}
.greyBand {
	background-image: url(../images/greygradient.png);
	background-repeat: repeat-x;
	float: left;
	height: 35px;
	width: 100%;
	position: relative;
	color: #FFFFFF;
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 10pt;
	z-index: 0;
}
.greenBand {
	background-image: url(../images/greengradient.png);
	background-repeat: repeat-x;
	float: left;
	height: 224px;
	width: 100%;
	position: relative;
	z-index: 0;
}
.greenBand2 {
	background-image: url(../images/greengradient2.png);
	background-repeat: repeat-x;
	float: left;
	height: 142px;
	width: 100%;
	position: relative;
	z-index: 0;
}
.contentBand {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12pt;
	color: #333333;
	float: left;
	width: 100%;
	position: relative;
	z-index: 0;
}
.content {
	width: 975px;
	position: relative;
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 10pt;
	color: #666666;
	margin-left: -487px;
	left: 50%;
	z-index: 1;
}
.navigation {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 10pt;
	color: #FFFFFF;
	position: absolute;
	left: 50%;
	top: 38px;
	z-index: 2;
	margin-left: -200px;
}
.silhouettes {
	margin-right: -487px;
	position: absolute;
	z-index: 2;
	top: 100px;
	right: 50%;
}
.headerText {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 10pt;
	color: #FFFFFF;
	width: 500px;
	margin-left: -480px;
	position: absolute;
	left: 50%;
	top: 100px;
	z-index: 2;
}
.logo {
	position: absolute;
	z-index: 2;
	height: 84px;
	left: 50%;
	width: 264px;
	margin-left: -480px;
	top: 25px;
}

I am currently designing a website using CSS and I have a peculiar problem where some images are appearing and then disappearing in IE6. They are showing up fine in IE7 and Firefox. The image in question is not a background image.

On another page I am using background images for bullet points and the first two on the page are appearing. The third appears and then disappears.

This is only when viewing in IE6 and it is only happening with these two particular pages. The thing they have in common is both are running the body ID "page8" and each image that vanishes represents the last image in the content area.

Can anyone shed any light on this for me? I figure it has to be a stylesheet problem with a peculiarity in IE6 for which I would need to write around it. Question is what am I suppose to write around?

Code:

http://lakesideint.server266.com/about/getting_here.php

is the page where the image disappears.

Code:

http://lakesideint.server266.com/business/index.php

is the page where the one bullet point appears and disappears.

Cheers
Terry

This is the first page I've made in CSS and am just putting together the basic structure. In firefox, everything works as it should. I used a .png with transparency for a header element(picture of buildings) and floated the transparent nav-bar over that. Pictures below show firefox and IE results. Notice how the image doesn't even show up at all in IE. I cannot figure this out, it's probably something I just don't know about yet but it's driving me freakin crazy

Firefox: (how it should look-space between H and t)
h ttp://i3.photobucket.com/albums/y100/timcorley/firefox.jpg

IE: how it looks in IE
h ttp://i3.photobucket.com/albums/y100/timcorley/IE.jpg

My code might have some issues as I've never really done this before, but I appreciate the help.

CSS:

Code:

html, body {
	background:#1d1d1d;
	margin: 0;
	padding: 0;
}

h1,h2 {
	margin: 0;
	padding: 0;
}


#page-container {
	width:860px;
	margin:auto;
	
}

#branding {
	background: url(../images/luxeheaderbgrnd.png) repeat-x;
	height: 117px;
}
#branding a{
	text-indent:-9999px;
	display:block;
	width: 200px;
}
#branding h1 a{
	height:113px;
	background:url(../images/logo.png) no-repeat;
}

#header {
	background: url(../images/h2bgrnd.gif) repeat-x;
	height: 247px;
}


#header h2{
	position:relative;
	width:465px;
	height:301px;
	float: right;
	margin-top: -60px;
	margin-left: 200px;
	margin-right: 20px;
	z-index:2;

}
	
#main-nav {
	background:url(..images/navbartrans.png);
	position:relative;
	height:53px;
	width:860px;
	float:left;
	margin-top:-52px;
	z-index:3;
}

#features h1 {
	background: url(../images/features.gif);
	width:860px;
	height:248px;
}
#footer {
	background: yellow;
	height:20px;
}

I'm having a problem with the way one of my divs is being displayed in IE. An example of the page can be found he http://www.rit.edu/~jmw9523/help/

My problem is with the "Marketing literature" menu. There are supposed to be six menu item divs that consist of an arrow div and a description div. The description is only being displayed on the last menu item div in IE, and i can't figure out why. It looks fine in mozilla.

the code for the div is as follows:

Code:

<div id="menuSecondary">
<div id="secondaryHead" class="menuSecondaryHead">Marketing literature</div>
<div class="menuSecondarySpacer">&nbsp;</div>
<div class="menuSecondaryItem" onmouseover="rolloverArrow(1, 'red');" onmouseout="rolloutArrow(1, 'red');">
	<a href="ninesteps">
	<div class="menuSecondaryArrow" id="menuSecondaryArrow1"><img src="images/red/rightarrow.png"></div>
	<div class="menuSecondaryItemDesc">Creating marketing collateral that is less expensive and more effective: Nine steps</div>
	</a>
</div>
<div class="menuSecondarySpacer">&nbsp;</div>
<div class="menuSecondaryItem" onmouseover="rolloverArrow(2, 'red');" onmouseout="rolloutArrow(2, 'red');">
	<a href="ninesteps">
	<div class="menuSecondaryArrow" id="menuSecondaryArrow2"><img src="images/red/rightarrow.png"></div>
	<div class="menuSecondaryItemDesc">Creative Design and Editorial</div>
	</a>
</div>
<div class="menuSecondarySpacer">&nbsp;</div>
<div class="menuSecondaryItem" onmouseover="rolloverArrow(3, 'red');" onmouseout="rolloutArrow(3, 'red');">
	<a href="ninesteps">
	<div class="menuSecondaryArrow" id="menuSecondaryArrow3"><img src="images/red/rightarrow.png"></div>
	<div class="menuSecondaryItemSelected">Services</div>
	</a>
</div>
<div class="menuSecondarySpacer">&nbsp;</div>
<div class="menuSecondaryItem" onmouseover="rolloverArrow(4, 'red');" onmouseout="rolloutArrow(4, 'red');">
	<a href="ninesteps">
	<div class="menuSecondaryArrow" id="menuSecondaryArrow4"><img src="images/red/rightarrow.png"></div>
	<div class="menuSecondaryItemDesc">Custom Publications</div>
	</a>
</div>
<div class="menuSecondarySpacer">&nbsp;</div>
<div class="menuSecondaryItem" onmouseover="rolloverArrow(5, 'red');" onmouseout="rolloutArrow(5, 'red');">
	<a href="ninesteps">
	<div class="menuSecondaryArrow" id="menuSecondaryArrow5"><img src="images/red/rightarrow.png"></div>
	<div class="menuSecondaryItemDesc">Worldwide Language Services</div>
	</a>
</div>
<div class="menuSecondarySpacer">&nbsp;</div>
<div class="menuSecondaryItem" onmouseover="rolloverArrow(6, 'red');" onmouseout="rolloutArrow(6, 'red');">
	<a href="ninesteps">
	<div class="menuSecondaryArrow" id="menuSecondaryArrow6"><img src="images/red/rightarrow.png"></div>
	<div class="menuSecondaryItemDesc">Beyond Paper: Electronic Collateral</div>
	</a>
</div>
</div>

the css for the div elements are as follows:

Code:

.menuSecondaryArrow
{
	float: left;
	clear: left;
	width: 5px;
	height: 10px;
}

.menuSecondaryArrow IMG
{
	border: 0px;
}

.menuSecondaryItemDesc
{
	float: left;
	clear: none;
	position: relative;
	left: 5px;
	width: 150px;
	top: -1px;
}

.menuSecondaryItemSelected
{
	float: left;
	clear: none;
	position: relative;
	left: 5px;
	width: 150px;
	top: -1px;
}

.menuSecondaryHead
{
	position: relative;
	left: 10px;
	font-weight: bold;
	font-size: 11px;
	line-height: 12px;
	color: white;
}

.menuSecondaryHead A:hover
{
	color: black;
	text-decoration: none;
}

.menuSecondaryHead A
{
	color: white;
	text-decoration: none;
}

.menuSecondarySpacer
{
	height: 7px;
	line-height: 7px;
	float: none;
	clear: both;
}

.menuSecondaryItem
{
	width: 170px;
	position: relative;
	display: inline;
}

.menuSecondaryItem a:hover
{
	color: white;
	text-decoration: none;
}

.menuSecondaryItem a
{
	color: black;
	text-decoration: none;
}

.menuSecondaryItemSpacer
{
	float: left;
	clear: none;
	width: 5px;
}

I'm hoping there is something obvious i am missing. Thanks for your help.

Yes, this is actually a CSS question, despite me providing HTML code...

I'm at my wit's end with IE. In the code below, "outer" is losing all formatting--background color, border, you name it, it's gone. html4strict Code:
Original - html4strict Code <div id="outer" style="width: 410px;"> <div id="left" style="float: left; width: 200px;"><p>stuff</p></div> <div id="right" style="float: right; width: 200px;"><p>stuff</p></div> <div style="clear:both; font-size: 0; height: 0; width: 0;">&nbps;</div> </div>

  

 <div id="outer" style="width: 410px;">


   <div id="left" style="float: left; width: 200px;"><p>stuff</p></div>


   <div id="right" style="float: right; width: 200px;"><p>stuff</p></div>


   <div style="clear:both; font-size: 0; height: 0; width: 0;">&nbps;</div>


 </div> 

My stylesheet is set up just fine (works fine in Firefox), so I assume this is one of those weird float bugs in IE. The thing is, it was rendering fine until I added another <div> in an entirely different location. Yes, it's all formatted correctly and validates XHTML 1.0 strict.

Am I missing something, or is a known bug that I can't find documented, or does anyone have a suggestion for an alternate approach? Thanks all!

I have a page and it's a massive mess of nested tables and abs-positioned divs. Amongst these are two that become visible/invisible on the onclick of a checkbox. They start out with display:none inline.

Still with me?

There arent any floating elements in use, and pretty much everything has a width and height specified, so if there's some hasLayout freakyness going on i'd love to know what.

Anyway, in IE7 when you click said checkboxes their target divs and thier contents appear correctly - but the divs' borders are missing, re-toggling the checkbox off and on again shows the border and then again for any subsequent re-showing. it's just the initial setting of display:''

I can't post the code but it looks something ten times freakier than the attatched recreation attempt, unfortunately i can't rectreate it, but you'll get the idea.

Can anyone help? I'm going to try running some javascript after the page has loaded to do a quick double toggle to simulate the first no-border instance!

Hello,

I've been working on a site http://www.chequedelarealidad.org, and have recently experienced a problem with the 'links' page.

Initially, the page appears as normal, but if I tab between windows to another program and then return to this page, the contects on the right hand side become invisible.

I have validated the code using the W3C validator. Am not sure what the problem could be. Has anyone experienced anything similar to this? Or have a solution for me.

Thanks,

Victoria

I have this test site using CSS drop down menus, but when you scroll over, they disappear. Seems to be happening in IE9, Firefox and Chrome. Can't figure it out.

Any help would be appreciated!

Here is the script:

Code:

<head>
<title>Untitled Document</title>
<style type="text/css">
body {background-color: #FFFFFF; font-family: verdana, arial; font-size: 10pt; font-weight: bold; color: #0000ff;}
.box1 {
	width: 1000px;
	height: 600px;
	position:relative;
	left: 150px;
	top: 0px;
} 
.blue_box {
	width: 900px;
	position:absolute;
	top: 5px;
	left: 20px;
	height: 15px;
}
.box2 {
	width: 1050px;
	position:absolute;
	top: 40px;
	left: 20px;
	height: 15px;
	z-index: 2;
}
.main_image {
	position: relative;
	top: 3px;
}
.pic_box {
	width: 738px; /* 10px longer than actual jpg */
	position:absolute;
	top: 75px;
	height: 167px;
	left: 20px;
	z-index; 1;
}
.text_box1 {
	width: 738px;
	position:absolute;
	top: 218px;
	height: 159px;
	left: 26px;
	border-color: #ff0000;
}
.education_box {
	width: 881px;
	position:absolute;
	top: 321px;
	height: 350px;
	left: 21px;
}
.top_news_box {
	width: 136px;
	position:absolute;
	top: 1px;
	height: 317px;
	margin-left: 5px;
	left: 715px;
	border-color: #ff0000;
}

/*Credits: Dynamic Drive CSS Library */
/* Top menu */

.menu ul{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: center; /*set to left, center, or right to align the menu as desired*/
}
.menu li{
display: inline;
margin: 0;
}
.menu li a{
text-decoration: none;
padding: 5px 7px;
margin-right: 5px;
border: 1px solid #778;
color: white;
background: #3282c2;
border-radius: 8px; /*w3c border radius*/
box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* w3c box shadow */
-moz-border-radius: 8px; /* mozilla border radius */
-moz-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* mozilla box shadow */
background: -moz-linear-gradient(center top, #a4ccec, #72a6d4 25%, #3282c2 45%, #357cbd 85%, #72a6d4); /* mozilla gradient background */
-webkit-border-radius: 8px; /* webkit border radius */
-webkit-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* webkit box shadow */
background: -webkit-gradient(linear, center top, center bottom, from(#a4ccec), color-stop(25%, #72a6d4), color-stop(45%, #3282c2), color-stop(85%, #357cbd), to(#72a6d4)); /* webkit gradient background */
}
.menu li a {
background: darkred;
background: -moz-linear-gradient(center top, #f5795d, #e55e3f 25%, #d02700 45%, #e55e3f 85%, #f5795d);
background: -webkit-gradient(linear, center top, center bottom, from(#f5795d), color-stop(25%, #e55e3f), color-stop(45%, #d02700), color-stop(85%, #e55e3f), to(#f5795d)); 
}
.menu li a:hover{
color: #FFFFFFF;
background:#0033CC;
}

/* Drop down menu buttons */

.blue ul {  /* For all tags under <ul> (main and sub) */
	padding: 3px 0;
	margin-left: 0;
	margin-top: 1px;
	margin-bottom: 0;
	font: bold 10pt Verdana;
	list-style-type: none;
	text-align: center; /*set to left, center, or right to align the menu as desired*/
	}
.blue li { /* Sets the properties associated with <li> */
	display: inline; /* Sets li tags horizontal(main and sub) */
	position: relative;
	margin: 0;
	}
.blue li a { /* Sets the properties associated for all anchor tags  */
	text-decoration: none;
	padding: 5px 7px;
	margin-right: 15px; /* Sets margin to 15px, which spaces out each menu button by 15px */
	border: 1px solid #778;
	color: white;
	background: #3282c2;
	border-radius: 8px; /*w3c border radius*/
	box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* w3c box shadow */
	-moz-border-radius: 8px; /* mozilla border radius */
	-moz-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* mozilla box shadow */
	background: -moz-linear-gradient(center top, #a4ccec, #72a6d4 25%, #3282c2 45%, #357cbd 85%, #72a6d4); /* mozilla gradient background */
	-webkit-border-radius: 8px; /* webkit border radius */
	-webkit-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* webkit box shadow */
	background: -webkit-gradient(linear, center top, center bottom, from(#a4ccec), color-stop(25%, #72a6d4), color-stop(45%, #3282c2), color-stop(85%, #357cbd), to(#72a6d4)); /* webkit gradient background */
	}
.blue li ul { /* Sets the properties for all li ul (sub menus). Rest is inherited */
	position: absolute; /* All settings (e.g. left, top, etc.) will be relative to the top menu buttons (non sub menu buttons) */
	left: 1px; 
	display: none; /* Blocks all sub menu tags */
	}	
.blue li:hover ul{ 
	display: block;  /* Shows all elements under each other (as opposed to next to each other) */ 
	}
.blue li:hover ul a {
	position: absolute;
	
	width: 150px;
	top: 5px; /* Amount of space the first sub menu starts from the parent button */
	border-radius: 8px;
	text-decoration: none;
	background-color: #0000FF;
	padding: 5px; /* Pads area around text 5x in all 4 directions */
	border: 1px solid #cccccc;
	border-bottom: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9pt;
	font-weight: bold;
	color: #FFFFFF;
	}
</style>
</head>

<body>
<div class="box1">
 <div class="blue_box">
    <div class="menu">
      <ul>
        <li><a href="">Join MSSNY</a></li>
        <li><a href="">Pay Dues On Line</a></li>
        <li><a href="">Directory Questionaire</a></li>
        <li><a href="">MSSNYPAC</a></li>
        <li><a href="">Grassroots Action Center</a></li>
        <li><a href="">Member Login</a></li>
      </ul>
    </div><!-- Close menu -->
  </div><!-- Close box2 -->
 
  <div class="box2">
    <div class="blue">
      <ul> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">About MSSNY</a> 
      <ul> 
        <li><a href="#">Divisions</a></li> 
        <li><a href="#">Governance</a></li> 
        <li><a href="#">Committees</a></li> 
		<li><a href="#">Member Sections</a></li> 
        <li><a href="#">House of Delegates</a></li> 
		<li><a href="#">Position Statements</a></li> 
		<li><a href="#">By Laws</a></li> 
        <li><a href="#">Contact Us</a></li> 
      </ul> 
    </li> 
    <li><a href="#">Membership</a> 
      <ul> 
        <li><a href="#">Applications</a></li> 
        <li><a href="#">Pay Dues Online</a></li> 
        <li><a href="#">AAPI Physicians</a></li> 
        <li><a href="#">NYS Medical Directory</a></li> 
      </ul> 
    </li>
    <li><a href="#">Medical Community</a> 
      <ul> 
        <li><a href="#">County Societies</a></li> 
        <li><a href="#">Speciality Societies</a></li> 
        <li><a href="#">State Societies</a></li> 
        <li><a href="#">Ethnic Medical Associations</a></li> 
		<li><a href="#">American Medical Association</a></li> 
        <li><a href="#">NYS Department of Health</a></li> 
        <li><a href="#">Additional Medical Links</a></li> 
      </ul> 
    </li> 
	<li><a href="#">Public Health</a> 
      <ul> 
        <li><a href="#"></a></li> 
        <li><a href="#"></a></li> 
        <li><a href="#"></a></li> 
        <li><a href="#"></a></li> 
      </ul> 
    </li> 
	<li><a href="#">Physician Advocacy</a> 
      <ul> 
        <li><a href="#"></a></li> 
        <li><a href="#"></a></li> 
        <li><a href="#"></a></li> 
        <li><a href="#"></a></li> 
      </ul> 
	  <li><a href="#">Practice Resources</a> 
      <ul> 
        <li><a href="#">WCB Guidelines and Fee Schedule</a></li> 
        <li><a href="#">EHR Implementation Services</a></li> 
        <li><a href="#">CME Physicial Education</a></li> 
        <li><a href="#">MSSNY Online Library</a></li> 
      </ul> 
    </li> 
  </ul>
    </div>
    <!-- Close blue -->
  </div>
  <!-- Close blue_box -->
 
  <div class="pic_box"><img src="050211a_Original.jpg" class="main_image" width="691" height="136" border="0" />
      <!-- Close top_news_Box -->
      <div class="top_news_box">
        <p><img src="Facebook-Twitter-Linkedin.JPG" border="0" /></p>
        <p>Visit the MSSNY Blog Forum. .</p>
        <p>News of New York<br />
        Rate Card and Classifieds </p>
        <p> MSSNY eNews 6/17/11 </p>
        <p>MSSNY Legal Resources </p>
        <p> *** Members Section *** <br />
        Members: Click Here</p>
        <p> Non Members: <br />
        Browse Our Benefits Join US </p>
        <p> <br />
        </p>
    </div>
  </div>
  <!-- Close pic_box -->
  <div class="text_box1">To All New York Physicians: No Tort Reform &nbsp;&nbsp;&nbsp; HOD
    Ref. Comm. Documents &nbsp;&nbsp;&nbsp; Health Care Reform <br />
        <br />
    WCB Guidelines and Fee Schedule    6-Credit CME Course on New Workers Compensation
    <br />
    Treatment Guidelines&nbsp;&nbsp;&nbsp; <br />
    <br />
    Influenza Surveillance: How to become an ILINET Provider for 2010-11 flu
    season <br />
  </div>
  <div class="education_box"><img src="MED101014-Infection-Course-Image_1.jpg" width="263" height="219" border="0" /> <img src="MED100513-Course-Graphic.jpg" border="0" /></div>
  <!-- Close pic_box -->
</div>
</body>
</html>

I've got navigation images disappearing in IE. I've looked at bugs and workarounds, but I can't work out what's going on. I'm very much a newbie at this, so I'm prepared to be roundly mocked for being a numpty

Having tried with deleting and replacing some code, I think that the trouble might be with this bit of CSS Quote:
div#leftcontent img {height: 7%; width: 200px; border-width: 0; background-color: #ecfffd; color: #000000;}
div#leftcontent a:visited img {background-color: #EDEDED;color: #000000;}
div#leftcontent a:hover img {background-color: #FF9; color: #000000;}



I'm assuming, because if I put in some plain text with this CSS Quote:
div#leftcontent a:hover {background-color: #FF9; color:#3300FF;}
I get the effect I want with the images (and that I get fine in Firefox)

Images will not appear in my leftcontent div at all; they're sized appropriately, and show up fine in the rightcontent div. All CSS and HTML validated, works great in Firefox etc.

Thanks for any pointers!

I am working on the design for a forum, but the date in the upper left hand corner of each post box is slowly disappearing...here is a screenshot of what is happening.



The code for the date is as follows:

Code:

<h2><span><span class="conr">#7&nbsp;</span><a href="#msg510" name="msg510">Oct 21, 2006 7:32pm</a></span></h2>

.conr is floated to the right. This is punBB if that helps...

Any idea why that would be happening?

Suckerfish came into my life recently and has not only offered a great deal of freedom with dynamic menus at lower overheads than most (totally) Javascript alternatives, but has also had me tearing hairs out more frequently than most other things I know.

The problem I currently face is when viewing my menus in IE6. At first this suggests that the issues lie within the Javascript of the Suckerfish menus...

The pages in questions are located at the following addresses (please excuse the mid-construction state of each):
www.cheapboilers.com/sandbox/index.html
www.cheapboilers.com/sandbox/baxi_105.html

Take the grey vertical menu on the left hand side. The first level appears fine, but the problem is with the second level. In index.html all appears well. However in baxi_105.html when moving down the list in the second level menu the menu disappears when moving from the first to the second item.

At first I thought the problem was to do with the margins surrounding the elements - I thought the li element had detected the mouse as having left the element as it passed over the border. If this were true then the same would happen with the index.html page (which uses the same code/html/css). It does not.

My current theory is that the other elements on the page are somehow interfering with the Suckerfish menus. Index.html has nothing but text in the content of the page. baxi_105.html has images, links etc in it. This theory is backed up by going to the bottom list item in index.html (Worcester) and viewing the second level menu for it. The menu vanishes as with all the menus on baxi_105.html. It is as if the footer of the page is interfering with the operation of the menus.

This disappearing menu issue is driving me up the wall. Please can someone offer a solution?

Thanks in advance.
Andy

Hello,

This should be a pretty simple fix. I have drop downs which I am testing to work in IE 6. They are working perfectly, however once i move the mouse past the first LI or so in the drop down, it disappears. I am not sure whether it is the link on the page below interfering, or me exiting the div, or just an error in my css.

Here is a link:
(Keep in mind it must be opened in IE6 to see the issue..it works fine in firefox and IE7)

http://www.fieldspianos.com/new/index.php

Here is my CSS:

Code:

div#dropdownmenu {
	float: left;
	padding-top: 5px;
	background-color: #000000;
	color: #EEB810;
	font-size: 11px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	height: 25px;
}

ul#nav {
  padding: 0;
  margin: 0;
  list-style: none;
}

ul#nav li {
  float: left;
  position: relative;
  vertical-align: middle;
  margin-right: 2px;
}

ul#nav li.nomargin {
	margin-right: 0;
}

ul#nav li a {
	display: block;
	text-decoration: none;
	color: #EEB810;
	background: #000000;
	font-size: 11px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	padding: 2px;
}

ul#nav li ul li a {
	display: block;
	text-decoration: none;
	color: #660000;
	background: #BDB35E;
	padding: 3px;
	border: 1px solid #000000;
	border-bottom: 0;
	font-size: 11px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

ul#nav li ul li a:hover {
	display: block;
	text-decoration: none;
	color: #FFFFFF;
	background: #000000;
	padding: 3px;
	border: 1px solid #000000;
	border-bottom: 0;
	font-size: 11px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

li ul {
  display: none;
  position: absolute; 
  left: 0;
}

li ul li {
	width: 13em;
	clear: both;
	margin: 0;
}

li > ul {
	top: auto;
	left: auto;
}

li:hover ul, li.over ul { 
	display: block;
}

Hi... I have a big problem with FireFox, and especially Safari...

http://www.laventanaband.com/Music%20Samples.htm

When you roll over a pop out menu item (like "music and pics") these problems occur:

In FireFox... if you roll past the edge of the frame, the menu item disappears.

In Safari... the pop up menu section disappears below the content menu (!).

I this doesn't happen on the main page because the content area does not use overflow:auto; .... it uses overflow:hidden;

Somehow the use of that cause those problems...

Here is my css doc.

Any ideas?

Thanks in advance!

Regards,
-Max Dykstra

i was having trouble getting rid of the padding between cells in IE, i used the advice i got from this forum and added the style border-colapse and now everything is lined up perfect in IE, but in netscape (version 7.1) the top and left borders just vanished, can anyone help?
contact.html
Code:

<table>
<tbody>
<tr>
<td>
  telephone
  </td>
  <td>
    757.555.2888
  </td?
</tr>
<tr>
  <td>
    e-mail
  </td>
  <td>
    jonathonball@cox.net
  </td>
</tr>
</tbody>
</table>

body.css
Code:

table { border-collapse: collapse; }
td { border: 1px black solid; }

you can see what it's doing at my temporary web page
http://members.cox.net/jonathonball/
in the Contact section

Hi Forum,
A small non-profit group I am working with has put together a website.

Unfortunately, the horizontal navigation menu disappears on IE browsers. The links are still in place, but are invisible. The shaded boxes around them do not load.

Unfortunately we have no idea how to fix it. I am a beginner with CSS-- any helpful hints or advice?

Thanks.
-Sellicott

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
>

<html xmlns="" xml:lang="en" lang="en">
<head>
<title>BUTT OUT! Ending Tobacco Industry Exploitation of the Lesbian, Gay, Bisexual and Transgender Community</title>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="sitename"><img src=></div>
</div>
<div id="navigation">
%%MENU%%
</div>

<div id="content-wrapper">
<div id="content">%%CONTENT%%</div>
</div>
<div id="footer">
<div id="footer-content">%%WEEBLYFOOTER%%</div>
</div>
</div>
</body>
</html>

*|*{
margin:0pt;
padding:0pt;
}
body{
background:transparent url(pattern3.gif)repeat-x center top;
background-color:#FFFFFF;
font-family:"lucida grande", arial, sans-serif;
font-size:12px;
color:#464e54;
margin:0;
padding:0;
}
p {
line-height:18px;
}
h1, h2, h3{
line-height:40px;
}
#wrapper {
width:760px;
margin:0pt auto;
}
#header {
float:left;
width:760px;
height:170px;
}
#sitename {
color:#fff;
padding-top:0px;
font-size:2em;
text-transform:uppercase;
}
#navigation {
float:left;
height:30px;
width:760px;
position:relative;
}
#navigation ul {
float:left;
padding:5px 10px 0 0;
margin-left:0;
}
#navigation li {
float:left;
display:inline;
font-family:"lucida grande", arial, sans-serif;
text-align:center;
font-size:1em;
font-weight:bold;
padding:6px 15px 8px 4px;
margin-right:3px;
}
*html #navigation li {
margin-right:4px;
padding-right:15px;
padding-bottom:9px;
}
#active {
background: transparent url(tab_left2.gif) no-repeat left top;
padding:6px 13px 6px 4px;
color:#fff;
font-weight:bold;
}
*html #active {
padding-right:15px;
}
#navigation a:link {
color:#fff;
text-decoration:none;
}
#navigation a:visited {
color:#fff;
text-decoration:none;
}
#navigation a:hover {
color:;
text-decoration:none;
}
#active a {
background: transparent url(tab_right2.gif) no-repeat right top;
color:#464e54;
padding:6px 14px 9px 10px;
}
#active a:link {
color:#fff;
text-decoration:none;
}
#active a:hover {
color:#fff;
text-decoration:none;
}
#active a:visited {
color:#fff;
text-decoration:none;
}
a:link,a:hover,a:visited {
color:464e54;
font-weight:normal;
text-decoration:underline;
}
a:link {
color: #464e54;
}
a:visited {
color: #464e54;
}
a:active {
color: #464e54;
}
.weebly_header {
float:left;
background:
width:760px;
height:1200px;
margin-top:35px;
}
*html .weebly_header {
margin-top:28px;
padding-top:14px;
}
#content-wrapper {
float:left;
background: transparent url(content_background.jpg) no-repeat center top;
width:760px;
height:700px;
}
*html #content-wrapper {
margin-top:-9px;
}
#content {
padding-top:20px;
padding-bottom:20px;
}
*html #content{
padding-top:35px;
}
img.image-left {
margin-right:15px;
float:left;
}
img.image-right {
margin-left:15px;
float:right;
}

#footer {
visibility:hidden;
padding-top:280px;
padding-bottom:10px;
float:center;
}