|
CSS - <li> Cascading Oddly In Ie On Pc... No Others
hi all. thanks for looking. i'll be quick. i am trying to learn css vs tables and this is my first foray.
here's the link: http://www.rightbraintools.com/DEV on my PC, it looks fine in opera 7.something and netscape 7.2. terrible in IE 6. perfect on safari and just a mess on i.e 5 for mac. i'll worry about that last one later!!! please let me know what's going on with the staggered lists. If anyone can help, i'd love it. it is sooooo easy to do this in tables that i'm close to reverting!!! oh nooo! here's my css sheet and html in case anyone doesn't want to download it: body{ background-color: #FFF; margin: 0; padding: 0; font-family: Verdana; font-size: 11px; color: #000; } #container{ border: 0; margin: 0; width: 657px; } #logo{ height: 100px; padding: 20px 0 5px 0; } #design{ } #content{ display: block; height: 330px; width: 657px; padding: 0; border: 0; } #sidebar{ width:220px; height: 328px; padding:3px 0 3px 0; text-color: grey; border: 0; float: left; } #menu{ width: 430px; height: 328px; padding: 3px 0 3px 0; float: left; border: 0; } #menu ul, #menu ul.copy{ list-style:none; margin:0; padding:0; clear:both; } #menu ul li a:link, #menu ul li a:visited, #menu ul li.empty, #menu ul li.copy{ width: 134px; padding:3px 0 3px 5px; float: left; margin: 0 2px 0 2px; } #menu ul li.copy{ color: #666666; height: 90px; display: block; word-wrap: break-word ; border: 0; } #menu ul li a:link, #menu ul li a:visited { color: #000; height: 11px; background:url(../i/btn_bg.gif); vertical-align:middle; text-decoration:none; } #menu ul li a:hover { background:url(../i/btn_bg_over.gif); } img { border: 0px; } #menu ul li.empty img{ margin: -4px 0 0 -4px; } and my html: <!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>Home </title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> <link href="css/layout.css" rel="stylesheet" type="text/css"/> </head> <body> <div id="container"> <div id="logo"> [logo img goes here]</div> <div id="design"><img src="i/hd_placeholder.gif" width="657" height="108"/></div> <div id="content"> <div id="menu"> <ul > <li><a href="#">Introduction</a></li> <li><a href="#">Current Developments</a></li> <li><a href="#">Collections</a></li> </ul> <ul > <li class="copy">this is content this is content this is content</li> <li class="copy">this is content this is content this is content</li> <li class="copy">this is content this is content this is content</li> </ul> <ul> <li><a href="#">Document of the Week</a></li> <li><a href="#">Bibliography</a></li> <li><a href="#">Links</a></li> </ul> <ul > <li class="copy">this is content this is content this is content</li> <li class="copy">this is content this is content this is content</li> <li class="copy">this is content this is content this is content</li> </ul> <ul > <li><a href="#">Information</a></li> <li class="empty"><img src="i/full.gif" width="137" height="107" /></li> <li class="empty"><img src="i/full.gif" width="137" height="107" /></li> </ul> </div> <div id="sidebar"> sidebar here </div> </div> </div> </body> </html> Similar TutorialsHi, I have designed a webpage for a local organization, and am having some trouble with the navbar at the top of the page. This issue only happens in Firefox, as far as I can tell. The homepage (go to radnorhistory.org) is correct, and several other pages are messed up (click on 'membership,' for example); the first link, titled "collection" shows up as a text link above the navbar and not an image. Any ideas? -Thanks! This is best explained by example. Please see http://www.drudolph.org/new/test.php for a proof of concept. Basically, there's an outside layer (red border) that contains several layers inside (blue borders), and is styled so that it has fixed dimensions and can scroll vertically if necessary. Over the blue layers, I want to position another layer (green box). This layer should move with the blue boxes, so that if you scroll up and down, the green box stays with it. On top of that - and here's the kicker - the green box, which will be large enough that it sometimes will expand beyond the outside red layer, should be completely visible. So, the green layer needs to 1.) move relative to the blue layer but 2.) be seen outside the parent red layer at all times. You can see on the test two attempts. One puts the green layer in with the blue layers, so that it can be positioned relatively. Unfortunately, this puts it "inside" the red "stack," so I don't believe any z-indexing will allow it to show outside of the red layer. The second attempt puts the green div along side the red div, or on the same "stacking level." This allows you to use a z-index to put it above the red layer, but then it can't scroll relative to the blue layers inside. So, at this point, I believe it's impossible to do. Thoughts? Alright, here's the situtation: Imagine a bunch of random DIVs... let's say a hundred. These DIVs come in three different widths, but their heights are entirely variable. Now, let's give these DIVs margins of 5px each. I want all of the DIVs to show up, in their respective dimensions, in order as much as possible... but I want them all 10px apart from all sides... including top and bottom. How would I achieve this effect? I tried floats, but that doesn't quite work for EDIT* - vertical spacing in all cases. Basically, if a smaller DIV can fit in an empty space, I want it to go there, so everything--despite the randomness--is uniformly spaced. Is this possible using CSS? Maybe with Javascript? I am using what I thought was a fairly simple stylesheet and layout, but it is giving more trouble than I have ever had with stylesheets. Essentially, I have a container div, which is used to center a page. I have set the background color of that div to be white. I would expect that the divs inside of this div (navigation, content, etc.) would perpetuate that color, but they do not! They do in Dreamweaver and IE, but not in Firefox! I am quite confused, and would greatly appreciate feedback from anyone who would care to look and explain. I am sure I am missing something relatively simple. You can find the HTML and Stylesheet at http://www.levatinodentist.com/about.htm and http://www.levatinodentist.com/main.css Thank you - lambrite Hi all, I've searched around and haven't been able to find anything. I'm writing a site whose CSS sheet has the following in it: a:link { color: #200963; text-decoration: underline; } .sidelink { color: #ffffff; text-decoration: none; } The sidelink class is used for my side nav menu. A line from it is: <p><a href="about-us.htm"><span class="sidelink" onmouseover="this.style.color=\'yellow\';" onmouseout="this.style.color=\'\';">About Us</span></a></p> Why does Firefox insist on showing the menu links as underlined? IE doesn't. Is this a W3C standard that Firefox implements? Thanks, Dave Hi all! I've got a slight problem with my div layout, and seem to be stuck, maybe one here has had similar troubles, and found a solution *g* I've got a Layout, that needs the following things: *) repeat-y background image for a parchment background *) header and footer images for the beginning and end of the parchment *) text that flows over the parchment, header and footer images Normally I'd just put the parchment in a parent div, put the header and footer in another div (contained in the parent div) and put the text in another div with biggest z-index (also contained in parent div). Unfortunately, as the text needs to stretch the parent div so that the parchment background is behind the whole text, I can not set the text div as position absolute, 'cause absolute divs don't expand their parents. I also can not position the header and footer divs without position absolute. But position absolute divs are always above non absolute divs, even is z-index is set higher in the non absolute divs. Is there anything i miss? Is it simply not possible? Thanks in advance! Roman 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. |
|||||||