|
CSS - Css Drop Menu Doesn't Work In Firefox
My drop menu works fine in IE7, however in firefox the menu's don't drop. Anyhelp would be appreciated. Here is my css code.
Code:
#menu {
width: 769px;
height: 27px;
margin: 0px auto;
padding: 5px 0px 5px 0px;
background: #000000 url(images/SDCB-menu-bar.gif);
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 125px;
float: left;
}
#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
text-align: center;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}
#menu h2 {
color: #fff;
background: #000000 url(images/SDCB-menu-bar.gif);
text-transform: uppercase;
}
#menu a {
color: #000;
background: #efefef;
text-decoration: none;
}
#menu a:hover {
color: #a00;
background: #fff;
}
#menu li {
position: relative;
}
#menu ul ul {
position: absolute;
z-index: 500;
}
#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
}
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
Here is the HTML. Code:
<div id="menu">
<ul>
<li style="left: 50%;"><a href="http://mysite/index.html" title="HOME"><h2>HOME</h2></a></li>
</ul>
<ul>
<li style="left: 50%;"><a href="http://mysite/index.html" title="ABOUT US"><h2>ABOUT US</h2></a></li>
<ul>
<li><a href="http://mysite/index.html" title="Board of Directors">Board of Directors</a></li>
<li><a href="http://mysite/index.html" title="Ex-Officio Members & Staff">Ex-Officio Members & Staff</a></li>
</ul>
</ul>
<ul>
<li style="left: 50%;"><a href="http://mysite/index.html" title="NEWS/EVENTS"><h2>NEWS/EVENTS</h2></a></li>
<ul>
<li><a href="http://mysite/index.html" title="Calendar">Calendar</a></li>
<li><a href="http://mysite/index.html" title="Newsletter">Newsletter</a></li>
<li><a href="http://mysite/index.html" title="Photo Gallery">Photo Gallery</a></li>
</ul>
</ul>
<ul>
<li style="left: 50%;"><a href="http://mysite/index.html" title="RENEWAL PROJECT"><h2>RENEWAL PROJECT</h2></a></li>
<ul>
<li><a href="http://mysite/index.html" title="History">History</a></li>
<li><a href="http://mysite/index.html" title="Executive Summary">Executive Summary</a></li>
<li><a href="mysite/index.html" title="Plan & Dependencies">Plan & Dependencies</a></li>
<ul>
<li><a href="http://mysite/index.html" title="Renewal Plan">Renewal Plan</a></li>
<li><a href="http://mysite/index.html" title="Appendices">Appendices</a></li>
</ul>
<li><a href="http://mysite/index.html" title="garden">Community Learning Center & Garden</a></li>
<li><a href="http://mysite/index.html" title="Get Involved">Get Involved</a></li>
</ul>
</ul>
<ul>
<li style="left: 50%;"><a href="http://mysite/index.html" title="CONTACT US"><h2>CONTACT US</h2></a></li>
<ul>
<li><a href="http://mysite/index.html" title="Your Thoughts">Your Thoughts</a></li>
<li><a href="http://mysite/index.html" title="Donate Now">Donate Now</a></li>
</ul>
</ul>
</div>
Thank you in advance Similar TutorialsHi, link to wesbite why doesn't the drop down menu, that works in IE6 not work in Firefox 0.8? It is pure CSS, no Javascript. OK, I know it doesn't validate and don't care too much about that. I know putting tables inside an anchor tag is frowned on but hey, it works and I didn't think it up. I thought IE was the worst when it came to CSS compliance? Any ideas how I can fix it? Thanks, John Hi, **UPDATE: Problem Fixed...change the z-index of the parent menu element, thanks mizzory!*** Thank you for viewing this post and your help is greatly appreciated! The navagation menu works great in IE8 and Firefox, however in IE7, the drop-down hides behind the content div. I have tried assigning z-index to the divs, but with no luck. #wrap { margin:auto; width:1000px; background-color: #FFFFFF; background-repeat: repeat-y; min-height:100%; position:relative; } html, body { margin:0; padding:0; height:100%; } #content { min-height: 400px; padding-bottom:50px; /* Height of the footer */ position:relative; } #header { height: 200px; } #footer { position:absolute; bottom:0; width:100%; height:50px; /* Height of the footer */ font-size: 14px; font:Arial, Helvetica, sans-serif, bold; text-align:center; color:#FFFFFF; } /*horizontal menu specifications*/ #menu { background: #FFFFFF; float: left; height:40px; } #menu ul { list-style: none; margin: 0; padding: 0; width: 142.85px; float: left; } #menu a, #menu h2 { font: bold 13px arial, helvetica, sans-serif; display: block; border-width: 1px; border-style: solid; border-color: #FFFFFF; margin: 0; padding: 2px; text-align:center; } /* main menu header: set font colour and background colour */ #menu h2 { color: #FFFFFF; background: #0066CC; text-decoration:none; } /* main menu dropdown: set font colour, background colour, no underline for hyperlink */ #menu a { color: #000000; background: #CCCCCC; border-color: #000000; text-decoration: none; } /* main menu dropdown mouse hovering: set font colour, background colour*/ #menu a:hover { color: #E4001B; background: #FFFFFF; } /*position the pop out menu*/ #menu li { position: relative; } #menu ul ul { position: absolute; z-index: 500; } div#menu ul ul, div#menu ul li:hover ul ul, div#menu ul ul li:hover ul ul { display: none; } div#menu ul li:hover ul, div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul { display: block; } -S Please help. The code listed below validates. It is a 2 level pull out menu using only CSS. It works nicely in FireFox and IE 6, but I don't see the sub-menus in IE 7. Why? Is it related to z-index? The files are organized: html, non IE css, IE css. I pulled out the IE specific css to make things more clear. homepage.mac.com/carlamatusow/testmenu/testmenu.html homepage.mac.com/carlamatusow/testmenu/testmenu.css homepage.mac.com/carlamatusow/testmenu/testmenuIE.css Thanks, Carla Hi, I have a two column CSS layout - the stylesheet and web page that uses it are attached. I tried to put a menu in the left column (technically div) - of this web page. This is a menu that uses JS mouseover and mouseout to set the style of the children menus to block or none - to show or hide the children or submenu items. onmouseover="document.all.child1.style.display='block' onmouseout="document.all.child1.style.display='none' When you mouseover the menu item, children menu items underneath it are supposed to be displayed, but they're not. Please look at the style sheet - and web page. Any idea why this menu works outside of the CSS two column layout, but not when I place the code inside this layout?????? Thanks Vmusic Hey everyone, I am just touching up an old design I made, and I just noticed that Firefox has a weird white-space next to the top menu. Not sure what is causing it, but it is there. Here is a screenshot of what is happening in Firefox. Also, in IE, the container doesn't extend past the bottom menu. Here is a screenshot of what is happening in IE. So far I am just testing in Firefox 2.0.0.11 and IE7. Here is my code: html4strict Code: Original - html4strict Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title></title> <style type="text/css">/* <![CDATA[ */ * { padding: 0; margin: 0; } body { background-color: #6AB2DA; color: #000000; text-align: center; font-size: 13px; font-family: verdana,tahoma,"Bitstream Vera Sans",arial,helvetica,sans-serif; /* Thank you, Kravvitz */ } a { color: #6AB2DA; } a:focus { outline: 0 none; } #container { margin: 0 auto; text-align: justify; width: 50%; } #page { background-color: #FFFFFF; } #header { background-image: url( http://img443.imageshack.us/img443/8114/bg1bp4.jpg ); background-position: bottom left; height: 120px; width: 100%; } #header span { padding-left: 150px; padding-top: 50px; font-size: 21px; font-weight: bold; letter-spacing: -0.1em; color: #666666; display: block; } #menu { background-color: #6DC3DE; width: 100%; } #menu li { float: left; padding-top: 10px; padding-bottom: 11px; list-style-type: none; } #menu a { background-color: #6DC3DE; padding: 10px 20px; boreder: 2px solid transparent; color: #000000; } #news { clear: both; margin-top: 34px; overflow: auto; padding: 15px; height: 100px; border-bottom: 1px solid #0AA; } #news h1 { color: #6DC3DE; font-size: 21px; } #content { margin-top: 15px; padding: 15px; } #content h2 { padding-top: 10px; float: left; color: #6DC3DE; padding-right: 25px; font-size: 31px; border-right: 3px solid #6DC3DE; } #content .info { padding-top: 10px; padding-left: 25px; float: left; font-size: 11px; height: 31px; } #content p { text-indent: 45px; clear: both; border-bottom: 1px dotted #6DC3DE; padding-top: 10px; padding-bottom: 10px; } #bottom { border-top: 1px solid #6DC3DE; margin-top: 10px; padding: 5px; } #bottom ul#one { float: left; } #bottom ul#two { float: right; } #bottom li { padding-top: 10px; padding-bottom: 11px; list-style-type: none; display: block; } #bottom a { background-color: #6DC3DE; padding: 10px 20px; boreder: 2px solid transparent; color: #000000; display: block; width: 250px; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */ /* ]]> */ </style> </head> <body> <div id="container"> <div id="page"> <div id="header"><span>i.love.summer</span></div> <div id="menu"> <ul> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> </ul> </div> <div id="news"> <h1>welcome</h1> Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. </div> <div id="content"> <h2>I rock</h2> <div class="info"> author: BlackNine<br /> date: Today<br /> cat: eventually, right now I want a horse </div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras felis. Aliquam erat volutpat. Nunc sapien. Nunc ante felis, convallis eget, viverra sit amet, porttitor mollis, odio. Maecenas ut lorem sed eros pharetra euismod. Fusce quis est ac erat posuere elementum. Praesent id libero. Phasellus aliquet. Suspendisse pharetra sapien vitae mi. Suspendisse enim lectus, condimentum in, dictum sed, convallis in, sapien. Pellentesque mollis, quam sit amet tincidunt lacinia, urna erat interdum diam, vel aliquam enim nisl vitae velit. Nam sagittis tristique ipsum. Sed auctor eros non tortor. Vestibulum eros mauris, ultrices in, pulvinar ut, placerat in, metus. Nullam est odio, ullamcorper vitae, consequat a, laoreet non, sem. Mauris porttitor diam vel nisl. Curabitur vitae mauris a sem ornare congue. Morbi eu nibh sed enim molestie aliquet. Mauris auctor auctor mi. Nunc ultricies sem eget ipsum. Maecenas risus. Mauris pharetra, quam at luctus nonummy, diam magna porta urna, in fermentum massa enim vel augue. Morbi elit. Quisque posuere tincidunt ipsum. Integer vel metus ac risus venenatis vehicula. Duis lacus. In pellentesque diam at dui. Nunc feugiat elementum nisi. Phasellus auctor viverra sem. Pellentesque erat. Pellentesque mauris velit, posuere a, facilisis ac, gravida in, augue. Vestibulum at sem eu nulla nonummy ultricies. Ut a dui. Aenean sem. Etiam adipiscing, mauris nec mollis congue, quam dolor pretium nisi, vitae adipiscing urna diam a velit. In pellentesque massa vel massa. </p> <h2>I rock</h2> <div class="info"> author: BlackNine<br /> date: Today<br /> cat: eventually, right now I want a horse </div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras felis. Aliquam erat volutpat. Nunc sapien. Nunc ante felis, convallis eget, viverra sit amet, porttitor mollis, odio. Maecenas ut lorem sed eros pharetra euismod. Fusce quis est ac erat posuere elementum. Praesent id libero. Phasellus aliquet. Suspendisse pharetra sapien vitae mi. Suspendisse enim lectus, condimentum in, dictum sed, convallis in, sapien. Pellentesque mollis, quam sit amet tincidunt lacinia, urna erat interdum diam, vel aliquam enim nisl vitae velit. Nam sagittis tristique ipsum. Sed auctor eros non tortor. Vestibulum eros mauris, ultrices in, pulvinar ut, placerat in, metus. Nullam est odio, ullamcorper vitae, consequat a, laoreet non, sem. Mauris porttitor diam vel nisl. Curabitur vitae mauris a sem ornare congue. Morbi eu nibh sed enim molestie aliquet. Mauris auctor auctor mi. Nunc ultricies sem eget ipsum. Maecenas risus. Mauris pharetra, quam at luctus nonummy, diam magna porta urna, in fermentum massa enim vel augue. Morbi elit. Quisque posuere tincidunt ipsum. Integer vel metus ac risus venenatis vehicula. Duis lacus. In pellentesque diam at dui. Nunc feugiat elementum nisi. Phasellus auctor viverra sem. Pellentesque erat. Pellentesque mauris velit, posuere a, facilisis ac, gravida in, augue. Vestibulum at sem eu nulla nonummy ultricies. Ut a dui. Aenean sem. Etiam adipiscing, mauris nec mollis congue, quam dolor pretium nisi, vitae adipiscing urna diam a velit. In pellentesque massa vel massa. </p> </div> <div id="bottom"> <ul id="one"> <li><a href="">asf</a></li> <li><a href="">asf</a></li> <li><a href="">asf</a></li> <li><a href="">asf</a></li> </ul> <ul id="two"> <li><a href="">asf</a></li> <li><a href="">asf</a></li> <li><a href="">asf</a></li> <li><a href="">asf</a></li> </ul> </div> <div class="clearfix"></div> </div> </div> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" Any suggestions would be great. HellO~! I'm current trying to code a website for someone, but I'm having some problems getting the menu to work properly in Firefox. It works great in Chrome and Safari but I have no idea how to make it work properly for firefox. So basically, I have a drop line menu, but instead the sub links all showing up in the same spot when I hover, I want the sub links to show up under the link I'm hovering over. Now, I managed to get this working great by just changing the position of the sub ul and il hover to relative. URL But in Firefox, when you hover over a link, that link expands to the width of the sub navigation and pushes the other links to the right. It just looks terrible and I don't know how to fix this. URL I've tried searching for a solution, but no luck! I'd really appreciate if someone could enlighten me on how this could be fixed? Or if it's even possible? I'm still new to working with drop downs and would love the help! Advance thanks for those who read this! Hopefully someone can help me out with this! EDIT: Looks like my images wont show up after all . Hopefully you will all know what I mean. CSS CODE: Code: * {
margin:0;
padding:0;
}
#nav {
list-style:none;
position:relative;
}
#nav li {
float:left;
text-align:center;
}
#nav a {
display:block;
text-decoration:none;
}
#nav a:active, #nav a:focus, #nav a:hover {
background:#254563;
}
/* --------- Sub Nav --------- */
#nav li.current ul {
left:0px;
}
#nav ul {
position:absolute;
left:-999em;
list-style:none;
padding:0 0 0;
width: 500px;
}
#nav ul li {
width: auto;
margin: 3px 3px 0 0px;
}
#nav ul a {
font-size: 12px;
height: auto;
padding: 5px 10px;
background: #dfeec9;
border-radius: 8px;
-moz-border-radius: 8px;
width: auto;
}
#nav li:active ul, #nav li:hover ul {
height: 30px;
left: 10px;
position: relative;
padding: 0px 3px 5px 3px;
background: none;
width: 500px;
}
.navi01 {
display: block;
padding-top: 0px;
padding-left: 0px;
width: 33px;
height: 44px;
text-decoration: none;
background: url(images/navi_01.png);
}
.navi02 {
display: block;
padding-top: 0px;
padding-left: 0px;
width: 133px;
height: 44px;
text-decoration: none;
background: url(images/navi_02.png);
}
.navi03 {
display: block;
padding-top: 0px;
padding-left: 0px;
width: 86px;
height: 44px;
text-decoration: none;
background: url(images/navi_03.png);
}
.navi04 {
display: block;
padding-top: 0px;
padding-left: 0px;
width: 83px;
height: 44px;
text-decoration: none;
background: url(images/navi_04.png);
}
.navi05 {
display: block;
padding-top: 0px;
padding-left: 0px;
width: 92px;
height: 44px;
text-decoration: none;
background: url(images/navi_05.png);
}
.navi06 {
display: block;
padding-top: 0px;
padding-left: 0px;
width: 82px;
height: 44px;
text-decoration: none;
background: url(images/navi_06.png);
}
.navi07 {
display: block;
padding-top: 0px;
padding-left: 0px;
width: 30px;
height: 44px;
text-decoration: none;
background: url(images/navi_07.png);
}
HTML NAV CODE: Code: <ul id="nav"> <li><span class="navi01"> </span></li> <li><a href="originalart/gallery.php"><span class="navi02"> </span></a> <ul> <li><a href="originalart/gallery.php">Original Art</a></li> <li><a href="fanart/gallery_fanart.php">Fan Art </a></li> <li><a href="commissions/gallery_commissions.php">Commissions</a></li> <li><a href="roughwork/gallery_roughwork.php">Rough Work</a></li> </ul> </li> <li><a href=""><span class="navi03"> </span></a> <ul> <li><a href="info.php">Info</a></li> <li><a href="http://luisarafidi.deviantart.com/journal/11831940/">FAQ </a></li> </ul> </li> <li><a href="oldartwork/gallery_oldartwork.php"><span class="navi04"> </span></a></li> <li><a href="http://blog.luisarafidi.com/"><span class="navi05"> </span></a> <ul> <li><a href="#">Old Artwork</a></li> <li><a href="#">More</a></li> </ul> </li> <li><a href=""><span class="navi06"> </span></a></li> <li><span class="navi07"> </span></li> </ul> I am really stuck on this, can someone guide me to a tutorial or a working double row menu bar that works for both IE and Firefox. I have made several attempts on Spry and CSS but to no avail and no-one has been able to rectify it. Theres always something not going right on both browsers with the double row drop down menu bars I have attempted. The double row drop down menu bar looks like this: [menu1][menu2][menu3] [menu4][menu5][menu6] ............................[menu6a] ............................[menu6b] Hi. I've a div container with a gray bg color then inside I've two DIV (left & right). It works on IE but on firefox the bg color the the two DIV is white and if I add bg color=GRAY for the 2 DIV the middle is white. And I don't want to put bg color on the class = left and right because if I want to reuse these with other stuff then the color won't match to other things. How can I fix this problem? Please take a look at the following link with IE & firefox and u know what I mean. Please take a look at source code or in here. Thank you!!! http://yourbestproduct.com/test.html CSS CODE: body { text-align: center; } #container { width: 800px; margin: 0 auto; } #sub_title { background-color: #E6E6E6; background-repeat: repeat; padding: 2px; width: 796px; color: #848484; } .left { float : left; margin-left: 10px; } .right { float : right; margin-right: 10px; } HTML CODE: <div id="container"> <div id="sub_title"> <div class="left">Left Message</div> <div class="right">Right Message</div> </div> </div> Hello everyone, I have a drop-down menu that is currently working well. The only change I need to make is to have the right edge of the drop-down menu to align with the right edge of the parent menu. When you hover over the menu, it currently "drops" down and to the right, with the left edges aligned. I want the menu to "drop" down and to the left, so the right edges are aligned. I have tried fiddling with floats and absolute/relative positioning. I'm not sure what needs to be changed. Any help you can provide is greatly appreciated! I'm learning via "cut and paste", so please go easy on any terminology you may use. Thank you! Here is the page: http://www.littlebuddymedia.com/site05/012.html The menu currently drops like this (aligned along the left edge): http://www.justskins.com/wp-content/uploads/2008/12/drop-down-menu.gif I want the menu to do this (align along the right edge; see how "Artists" is aligned under "Music" along the right edge): http://artatm.com/wp-content/uploads/2009/11/mtvmenu.JPG Here is my code: Code:
.chromestyle{
width: 100%;
font-weight: bold;
float: left;
height: 29px;
}
.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.chromestyle ul{
border: 0px solid #BBB;
width: 100%;
background: url(chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/
padding: 4px 0;
margin: 0;
text-align: right; /*set value to "left", "center", or "right"*/
}
.chromestyle ul li{
display: inline;
}
.chromestyle ul li a{
color: #000000;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-left: 1px solid #DADADA;
}
.chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
background: url(chromebg-over.gif) center center repeat-x; /*THEME CHANGE HERE*/
}
/* ######### Style for Drop Down Menu ######### */
.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
}
.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
padding: 2px 5px;
text-decoration: none;
font-weight: bold;
color: black;
}
* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}
.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #0000ff;
color: #fff200;
}
I'm going mad with this, I tested the CSS a:hover function over FF 1.0.7 and IE6, and the style file is simple: PHP Code: h3 { margin:10px; color:#636500; font-family: Arial, Helvetica, sans-serif; font-style: normal; } p { margin:10px; color:#636500; font-family: Arial, Helvetica, sans-serif; font-style: normal; } a { text-decoration: none; } a:hover { color:#636500; } a:visited { color:#cecf9c; } a:link { color:#cecf9c; } searched through the forum but seems nobody has got this problem... I just want the link to change color, I imported the css file to my html and it worked for the first time. I clicked on the link and then use brower's "Back" button to test it again, but the hover feature is not working anymore. I think it may be affected by the a:visited style, but how do I make a:hover work all the time? Thanks for helping. (please note, i'm a noob).. What i have right now: ################ HTML: ################ <div id="aboutusimage"></div> ################ CSS: ################ #aboutusimage { width:400px; height:75px; background-image:url(/images/about.jpg); position:relative; left:189px; top: 4px; margin-bottom:30px; } ======================== What i'd like to have: ################ HTML: ################ <div id="banner" class="about"></div> ################ CSS: ################ #banner { width:400px; height:75px; position:relative; left:189px; top: 4px; margin-bottom:30px; } #banner.about { background-image:url(/images/about.jpg); } ====================== For some reason, the image disapears when i do this :\ Any advice? Following sample is from http://www.code-couch.com/jeff/snippets/general/tektips-navigation-example.html is what I am trying to reference to create a template. But how do I how keep the state of Menu on each requested page any help is appreciated. The following menu is saved in a separate jsp file i.e. navs.jsp. I include this navigation jsp file in all of my files. Initially the drop down looks like: Code: . Ask.Jeeves . [+] Google.com . [+] Yahoo.com Now clicking [+] in front of Google.com will look like. Code:
. Ask.Jeeves
. [-] Google.com
. Google.co.ie
. Google.co.ie
. [+] Google.co.nz
. [+] Yahoo.com
Lets's say now if I click on Google.co.ie it takes me to sample.jsp and on this requested page (sample.jsp) how can I show the following menu hierarchy with Google.co.ie bold/underlined/colorchanged showing what menu content I clicked and am viewing the appropriate content i.e. Code:
. Ask.Jeeves
. [-] Google.com
. Google.co.ie
. Google.co.ie
. [+] Google.co.nz
. [+] Yahoo.com
Same way clicking Google.com or Yahoo.com or Ask.Jeeves shows you the following hierarchy on the requested page with higlight/bold/colored the link we just selected. i.e. Code: . Ask.Jeeves . [+] Google.com . [+] Yahoo.com Any time clicking on the menu takes me to some page but on that page I want to show th hierarchy of the menu all the way to which is recently clicked with different color setting. Here is the source for the above: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<meta http-equiv="content-language" content="en"/>
<title>Test Harness</title>
<style type="text/css">
ul li ul {display:none;list-style-type: none;}
#myNav li a:hover {
color: blue;
}
#myNav li a:active {
color: #FF0000;
background: #FFFFFF;
}
#myNav { list-style-image: url(page.GIF); }
</style>
<script type="text/javascript">
<!--
function initNav() {
var navObj = document.getElementById('myNav');
var ulCollection = navObj.getElementsByTagName('li');
for (var loop = 0; loop < ulCollection.length; loop++) {
if(ulCollection[loop].getElementsByTagName('ul').length > 0) {
/* we have an LI that contains a UL */
if (ulCollection[loop].getElementsByTagName('span').length > 0) {
/* there is at least one SPAN tag present */
ulCollection[loop].getElementsByTagName('span')[0].innerHTML = "[<a href=\"javascript://\" onclick=\"this.innerHTML=this.innerHTML=='+'?'-':'+';temp=this.parentNode.parentNode.getElementsByTagName('ul')[0].style;temp.display=temp.display=='block'?'none':'block';\">+</a>] ";
}
}
}
}
window.onload = initNav;
//-->
</script>
</head>
<body>
<ul id="myNav">
<li><a href="http://www.askjeeves.com">Ask.Jeeves</a></li>
<li><span></span><a href="http://www.google.com">Google.com</a>
<ul>
<li><a href="http://www.google.co.uk">Google.co.uk</a></li>
<li><a href="http://www.google.co.ie">Google.co.ie</a></li>
<li><span></span><a href="http://www.google.co.nz">Google.co.nz</a>
<ul>
<li>*3*</li>
<li>*4*</li>
</ul>
</li>
</ul>
</li>
<li><span></span><a href="http://www.yahoo.com">Yahoo.com</a>
<ul>
<li><a href="http://www.yahoo.co.uk">Yahoo.co.uk</a></li>
<li><a href="http://www.yahoo.co.nz">Yahoo.co.nz</a></li>
</ul>
</li>
</ul>
</body>
</html>
Any help is really appreciated thanks. My site works fine with Opera 7 but refuses to work properly with IE6 and Firefox. There's definately a problem with how each browser renders my CSS. I for one cannot figure out what to change so that the site would work with all three browsers. That being said, would anyone be grateful enough to help me out? Thanks! URL: URL I've included some screenshots of how the site looks like on all three browsers. URL URL URL I'm wondering why does the padding doesn't work for the <p> tag... Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
p.pFrontPageTitle
{
margin: 0px;
padding: 200px 0xp 200px 0px;
color: #000000;
font-weight: bold;
font-family: verdana;
font-size: 12pt;
font-style: normal;
background-color: #FF0000;
}
</style>
</head>
<body>
<p class="pFrontPageTitle">What Our Customers Say .....</p>
</body>
</html>
This is my CSS File: PHP Code: .linkbody { padding: 15px 15px 6px; color: white; font-family: Verdana; font-size: 10pt; width: 160px; background-color: #006EA1; } and this my html file: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<head>
<title> Schmid </title>
<link type="text/css" rel="stylesheet" href="css2.css">
</head>
<body>
<center>
<table class="linkbody" width="800">
<tr>
<td>
ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
</td>
</tr>
</table>
</center>
</body>
</HTML>
In Firefox the padding works fine, but in the IE6 it doesn't work at all makes me angry thx for any help Hi guys, I've trying to achieve the following. I want to have a div element floating on the right 100px from the top and the rest of content is filled with text. PHP Code: <div>[image]</div><p>text 1</p><p>text 2</p> I could do this easily with simple float:right but then the image would at 0px from top and if I try to move it down (using margin or padding) the text wouldn't reach above it (would get cut off at the width of the image form the right) If I try to add another div with 100px height and 10px (for example) width above the image, the text overlaps over my image div Any ideas how to achieve this? Below is my full html code PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html > <head> <title>float</title> <style type="text/css"> .content { width: 400px; background: #FFFF00; padding: 5px; } .floatright { float: right; height: 100px; border: 1px solid #000; } .offset { width: 10px; } .imgholder { width: 100px; clear: right; } </style> </head> <body> <div class="content"> <div class="floatright offset"></div> <div class="floatright imgholder"><h1>image</h1></div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ornare. Vestibulum a nulla id velit elementum imperdiet. Nam a purus. Suspendisse non enim. Nullam id sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas aliquet varius tellus. Aliquam sed nunc eu tortor semper vulputate. Nunc risus. </p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ornare. Vestibulum a nulla id velit elementum imperdiet. Nam a purus. Suspendisse non enim. Nullam id sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas aliquet varius tellus. Aliquam sed nunc eu tortor semper vulputate. Nunc risus. </p> </div> </body> </html> http://www.invalidheart.org/carrie/ it doesn't work in anything but my resolution... can anyone help me fix this? I've had a huge hard time with this layout making it fit right, i tried using all css and i couldn't get it to fit. any suggestions? Hi All, We develoepd an Application for a client. This application uses CSS for all text including drop-down menu text and input box text. My client is using XP as their OS and he tells me (sent a screen capture as well) he CANNOT read the drop-down boxes. Text is too small. On our machines (Win 98) there are no problems. Have tested on about 15 different client computers with no problems. Browser is not an issue as its the same for him on both Netscape and IE. Does ANYONE have a clue how to fix this? Doesn't seem logical to me - one OS should be the same as the other. However, we're talkin about MS products and who knows with them. Need urgent help on this one.. please.. anyone with ideas help me! thanks all. Peace. Aaron Hi guys Look here www DOT clickemarketing DOT com The date, before each article, should show at right. This date uses the .createdate css class, which is this Code:
.createdate {
color: #A9A9A9;
vertical-align: top;
padding-bottom:2px;
float: right;
font-size: 11px;
}
I don't know why IE shows it at left... FF shows ok Is there any way to correct this class, and make date show at right in this pseudo browser, worm collector, spyware downloader called IE ? Thanks |
|||||||