CSS - Css Specificity - Disappearing Menu

Hi all, I have been teaching myself CSS for a website I am making, which has all been running smoothly until an issue today.

Basically the issue is with a .class DIV nested inside a #id DIV..

Code:

<div id="wrap">
......
<p>...</p>
.......

     <div class="info_box">
         ........
          <p>.....</p>
           ......
      </div>

.......
</div>

Using CSS, i set the font color (among other things) for <p> to be different in the "wrap" id and "info_box" class.... and I was shocked to find that the styling I had written for the class was ignored, and it was using all the styling specified for the ID.

After searching, I found that this is because of specificity, in which the #id has a higher specificity.

Although I now know the cause, i am not sure what I should do?

I would like to be able to keep "info_box" as a .class, because I would use it more than once on a page. The only solution I can think of is to make the "wrap" a .class, but this does not seem logical, as I only use it once.

Please Help!

Hi,

I'm currently designing a Wordpress skin for someone and trying to style the navigation using CSS. Given that Wordpress is so popular, I expect that someone has encountered this before - but I can't find anything about this particular problem.

Basically, I'm having problems achieving the correct precedence in the CSS cascade for certain elements of my page (navigation) design.

In one part of the CSS I've had to use !important to get it to behave appropriately, but then I have another part which I need to be able to denote as "very important" but I don't think this is possible.

I get the feeling that I can probably do this without !important since I'm aware that it is abusing its purpose a bit (i.e. accessibility?) and instead I could do it according to the selector's specificity if I understood it better: http://www.w3.org/TR/REC-CSS2/casca...cascading-order

Here's a HTML snippet of what I have in the navigation:
html4strict Code:
Original - html4strict Code <div id="sidebar"> <ul> <li class="page_item current_page_item"> <a title="Home" href="home.php">Home</a> <ul> <li class="page_item"> <a title="Directors" href="home.php?page_id=12">Directors</a> </li> </ul> </li> <li class="page_item"><a title="News" href="home.php?page_id=3">News</a> </li> </ul> </div>

  

  


 <div id="sidebar">


   <ul>


     <li class="page_item current_page_item">


       <a title="Home" href="home.php">Home</a>


       <ul>


         <li class="page_item">


           <a title="Directors" href="home.php?page_id=12">Directors</a>


         </li>


       </ul>


     </li>


     <li class="page_item"><a title="News" href="home.php?page_id=3">News</a>


     </li>


   </ul>


 </div> 

I'm then using the following CSS to attempt to style this part:
css Code:
Original - css Code #sidebar { float: left; width: 149px; padding: 1em 0; } #sidebar ul { list-style: none; } #sidebar ul li { margin: 0.4em 0.8em; padding: 1px; } #sidebar ul li a { font-size: 1.5em; font-weight: 500; padding: 0.3em; text-decoration: none; color: #000; background: #FFFACD; display: block; border: 1px solid blue; } #sidebar ul li a:hover { color: #bb2a2a; } #sidebar ul li ul li { display: none; } #sidebar ul li.current_page_item ul li, #sidebar ul li.current_page_parent ul li { /* sub-menu item */ display: inline; padding: 0; margin: 0; border: none; } #sidebar ul li.current_page_item, #sidebar ul li.current_page_parent { border: 1px solid green; } #sidebar ul li.current_page_item ul li a, #sidebar ul li.current_page_parent ul li a { /* sub-menu item link */ font-size: 1.2em; padding: 0.1em 0 0.2em 17px; background: #FFFACD url(images/sub-dot.gif) no-repeat left; } #sidebar ul li.current_page_item a, #sidebar ul li.current_page_parent ul li a.current_page_item { color: #bb2a2a !important; border: none !important; } .current_page_item ul li a { color: #000 !important; border: none !important; } #sidebar ul li.current_page_parent ul li a, .current_page_parent a { border: none !important; } #sidebar ul li.current_page_item ul li a:hover, #sidebar ul li.current_page_parent a:hover { color: #bb2a2a; border: none !important; }

  

  


 #sidebar {


     float: left;


     width: 149px;


     padding: 1em 0;


 }


  


 #sidebar ul {


     list-style: none;


 }


  


 #sidebar ul li {


     margin: 0.4em 0.8em;


     padding: 1px;


 }


  


 #sidebar ul li a {


     font-size: 1.5em;


     font-weight: 500;


     padding: 0.3em;


     text-decoration: none;


     color: #000;


     background: #FFFACD;


     display: block;


     border: 1px solid blue;


 }


  


 #sidebar ul li a:hover {


     color: #bb2a2a;


 }


  


 #sidebar ul li ul li {


     display: none;


 }


  


 #sidebar ul li.current_page_item ul li, #sidebar ul li.current_page_parent ul li { /* sub-menu item */


     display: inline;


     padding: 0;


     margin: 0;


     border: none;


 }


  


 #sidebar ul li.current_page_item, #sidebar ul li.current_page_parent {


     border: 1px solid green;


 }


  


 #sidebar ul li.current_page_item ul li a, #sidebar ul li.current_page_parent ul li a { /* sub-menu item link */


     font-size: 1.2em;


     padding: 0.1em 0 0.2em 17px;


     background: #FFFACD url(images/sub-dot.gif) no-repeat left;


 }


  


 #sidebar ul li.current_page_item a, #sidebar ul li.current_page_parent ul li a.current_page_item {


     color: #bb2a2a !important;


     border: none !important;


 }


  


 .current_page_item ul li a {


     color: #000 !important;


     border: none !important;


 }


  


 #sidebar ul li.current_page_parent ul li a, .current_page_parent a {


     border: none !important;


 }


  


 #sidebar ul li.current_page_item ul li a:hover, #sidebar ul li.current_page_parent a:hover {


     color: #bb2a2a;


     border: none !important;


 } 

Using "View Formatted Source" in FF I'm finding that the color defined in ".current_page_item ul li a" is over-ruled by "#sidebar ul li.current_page_item a, #sidebar ul li.current_page_parent ul li a.current_page_item".

As you can perhaps tell, the current_page_item class is set on the list item that matches the current page, and if the current page is within a sub-section (i.e. it has a parent), current_page_parent will be set to the parent list item.

This gives me a navigation such as:

> Home
>> Directors

If we're on the Home page (as in example code above), I want that to have the red colored text, but Directors to be black. If Directors is the current page, I want that to be red, and Home to be black.

Basically anything that isn't the current page should be black...

At the moment (because .current_page_item ul li a doesn't seem to work) I'm getting red text for Home and Directors when on the Home page... I want Directors to be left black in this situation.

N.B. It's more complicated than above because I also want to do some styling with borders on the top level list items (well, the a element within), but if someone can point out where I'm going wrong with the above I think I should be able to sort the rest out...

Thanks in advance - please let me know if you need more details!

I am trying to compose several pages with a similar theme. They work on FireFox and several Mac broswers that I've tried, however in IE6 for windows, my div that is position:absolute; does not appear at all. It does appear when I change the value to relative. The other browsers I've tried show the absolute div with no problems. I have no idea what is going on.

http://navpress.ecommercerep.com/chicken_soup_for_soul_bible/index_IE.htm

The 'invisible' div should have a green background and some text.

The above is a scaled-down version of

http://navpress.ecommercerep.com/chicken_soup_for_soul_bible/index.htmhttp://navpress.ecommercerep.com/ch...le/index_IE.htm http://navpress.ecommercerep.com/ch...le/index_IE.htm

Here's an odd behavior, and the last on my hit-list for this design.

IE5/Mac (not extremely high on my compatibility needs list) is doing something strange: the nav links (which are bitmaps that utilize Petr Stanicek's Fast Rollovers Without Preload technique) are disappearing - god knows where - but only on the bottom row. The top row works great...

The strange thing is, I figured it was the :hover, so I used the Sam Foster commenting hack to hide the :hovers.

This worked, the hover effect was not read. But the bottom row vanishes anyway.

If you have an IE5/Mac build handy, check it out:

Website Template: http://www.spearsphotography.com/test_index.html

CSS File: http://www.spearsphotography.com/css/style.css

Again, I'm not concerned about fixing it, but it's a really strange behavior I haven't encountered before and my forum searches were unfruitful. I figured I would document the oddity in case someone else has the another piece of the puzzle.

--
Aiden

hi,

im having a strange problem and i cannot see why it is doing it, i am building a 2 column layout and have floated and img to the right so and vertical align to the top so the text wraps around it, this is working fine in firefox but in ie the image is not there, the space is there, the alt attribute shows up when you hover over it and you can copy it.

the page is at http://www.kevinarrowsmith.co.uk/wol/neighbourhood.php

can anyone see why ie is behaving this way.
Thanks.

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.

Hello,

This is my first post here, so hi everyone. I'm relatively new at css or any of it. I been working on a navbar with a javascript fader. Anyway...

I finally got my buttons to work! It's time for the Smirnoff!

But my button are still giving me ...!

Anyway I was wondering if someone...anyone could please help me before I slam this laptop against the wall! Just joking...

Everything checks out with W3C except my buttons. Here's the html:
Code:

<div>
<span id="navcontainer1" class="button1">
<ul>
<li>
<a href="guardian_angel_figurines.html"><img src="images/homebuttonlight.jpg" alt="Takes You to Home Page" style="filter:alpha(opacity=0)" onmouseover="pWidgets(this,100,50,5)" onmouseout="pWidgets(this,0,50,5)" /></a>
</li>
</ul>
</span>

<span id="navcontainer2" class="button2">
<ul>
<li>
<a href="#"><img src="images/aboutusbuttonlight.jpg" alt="Our Policies, Mission, and Company Information" style="filter:alpha(opacity=0)" onmouseover="pWidgets(this,100,50,5)" onmouseout="pWidgets(this,0,50,5)" /></a>
</li>
</ul>
</span> 

<span id="navcontainer3" class="button3">
<ul>
<li>
<a href="#"><img src="images/aboutfigurinesbuttonlight.jpg" alt="For More Information About Figurines" style="filter:alpha(opacity=0)" onmouseover="pWidgets(this,100,50,5)" onmouseout="pWidgets(this,0,50,5)" /></a>
</li>
</ul>
</span> 

<span id="navcontainer4" class="button4">
<ul>
<li>
<a href="about_angels.html"><img src="images/aboutangelsbuttonlight.jpg" alt="For Angelic Understandings, Mysteries and More" style="filter:alpha(opacity=0)" onmouseover="pWidgets(this,100,50,5)" onmouseout="pWidgets(this,0,50,5)" /></a>
</li>
</ul>
</span> 

<span id="navcontainer5" class="button5">
<ul>
<li>
<a href="policy.html"><img src="images/contactusbuttonlight.jpg" alt="To Contact Us with Your Questions, Sugestions, Ect" style="filter:alpha(opacity=0)" onmouseover="pWidgets(this,100,50,5)" onmouseout="pWidgets(this,0,50,5)" /></a></li>
</ul>
</span></div>

Don't laugh...they work! Here's the stylesheet:
Code:

.button1 {
position: relative;
bottom: 100px;
right: 40px;
}

#navcontainer1 ul li {
display: block;
float: left;
background: url("images/homebuttondark.jpg");
}

#navcontainer1 a {
display: block;
width: 140px;
height: 30px;
}

.button2 {
position: relative;
bottom: 100px;
right: 40px;
}
#navcontainer2 ul li {
display: block;
float: left;
background: url("images/aboutusbuttondark.jpg");
}

#navcontainer2 a {
display: block;
width: 140px;
height: 30px;
}

.button3 {
position: relative;
bottom: 100px;
right: 40px;
}
#navcontainer3 ul li {
display: block;
float: left;
background: url("images/aboutfigurinesbuttondark.jpg");
}

#navcontainer3 a {
display: block;
width: 140px;
height: 30px;
}

.button4 {
position: relative;
bottom: 100px;
right: 40px;
}
#navcontainer4 ul li {
display: block;
float: left;
background: url("images/aboutangelsbuttondark.jpg");
}

#navcontainer4 a {
display: block;
width: 140px;
height: 30px;
}

.button5 {
position: relative;
bottom: 130px; <-----this is weired! all the other buttons lined up with the same coordinates but this strange one. 
left: 520px;
}

#navcontainer5 ul li {
display: block;
float: left;
background: url("images/contactusbuttondark.jpg");
}

#navcontainer5 a {
display: block;
width: 140px;
height: 30px;
}

W3C Validation says there is something wrong with the <ul> tag on each button html. I've tried a million different combinations but this is the only way I can get them to work. Only thing is they create empty space around them and unless I put something "above" them they disappear all together (where the go I have know idea!)

I was just thinking if they could somehow "validate" then maybe they would be more predictable.

Any suggestions?
Thanks

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

http://www.mbsnyder.com/index2.shtml

On the "profile" and "contact" areas, there are two separate uls that are acting strange in Safari. The "profile: the rest of the story" section appears almost semi-transparent, and the "contact: email" link doesn't appear unless you mouseover it.

These issues only seem to occur in Safari. Not sure what's wrong here. Any help is, as always, much appreciated! Thanks in advance.

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 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!

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'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!

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!