CSS - Ff Display Problem In Menu
Hola,
I'm trying to add a menu I got from CSSplay to my site. It's displaying dot in the upper right of each li space in FF, but it's fine in IE. The original file is fine, of course, Anyone ever had this problem? brizfoto dot com slash test Similar TutorialsAlrite, I have a dropdown menu that is fully CSS driven. The menu works fine except that the dropdown links dont work in Firefox. Once clicked the menu goes to the main heading link for the dropdown menu, instead of the dropdowns item link. However if u right click on the link and say open in new window/tab it works fine. I have attached the files. Thanks a lot Nick Hey everyone, The page below displays perfectly in both IE6 and Firefox, but in IE7 my navigation disappears and the right navigation in the header is all crunched together. livedifference dot com slash test slash home I'm not really a CSS guru, but I've tried clearing floats via tons of methods and adding random things, but nothing seems to work. Any help would be GREATLY appreciated, I really need to get this up and running. Thanks, Brad I was wondering if anyone knows of any tutorials or resources for creating a menu system using css. The problem I have is that when I change the submenu's which are divs to display, they pop into place. I want to change this aspect and assume there is a javascript solution to make the display slow down, but have not been able to find one on this forum or using google. Perhaps a pointer or two? I'm trying to update my main navigation bar for my site into a something a bit more useful and clean. I've gotten it to work pretty much exactly as I want to in FF and Opera, but of course it's displaying very wrong in IE. I thought I had found the code needed to fix IE, but I've either used it incorrectly, or it's just not the right bit of code. Here's a page with the navbar live: http://www.skullcrow.com/community_upload.php Here's the css being used: Code: /* horizontal drop down navbar - basic formatting */ #centering_wrap {width:100%; position:relative;} #menu {margin:0 auto;width: 955px;font: bold 11px/16px arial, helvetica, sans-serif;color:#666;} /* Main width and default font properties */ #menu ul {list-style: none;margin: 0;padding: 0;float: left; line-height:42px;} /* Main format for top categories */ #menu ul ul{ position:relative; top:35px; left:5%; width: 90%;} /* child element widths */ #menu ul li{ background-position:bottom left;} /* set nav bg position */ #menu ul li:hover{ background-position:top left;} /* set nav bg position hover position */ /* Positioning popouts (2nd level only) */ #menu li {position: relative;} /* make "ABSOLUTE" work correctly */ #menu ul ul {position: absolute; z-index: 500;} /* prevent menu from "pushing" contents down */ #menu ul ul ul {position: absolute; top: 0; left: 100%;} /* move child elements to the side */ /* Hover behavior */ 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;} /* Additional text formatting */ #menu a {display: block;width: 100%;height: 100%;} #menu ul ul li { font: bold 11px/16px arial, helvetica, sans-serif; border-width: 0px 1px 1px 1px; border-style: solid; border-color: #ccc #323E6B #456594 #323E6B ; margin: 0; padding: 3px 4px; background: #2B3344; } #menu ul ul a {color: #CCC;text-decoration: none;} #menu ul ul a:hover {color: #FFF;background:#06F;} ...and here's the html from the menubar (which is contained in a separate php.includes, if that matters at all): Code: <div id="centering_wrap"> <div id="menu"> <ul style="width:195px;"> <li style="background-image:url(../images/nav_com_home.png);"><a href="http://www.skullcrow.com/" alt="Home"> </a> <ul> <li><a href="http://www.skullcrow.com/">Storefront</a></li> <li><a href="http://www.skullcrow.com/community_home.php">Community</a></li> </ul> </li> </ul> <ul style="width:188px;"> <li style="background-image:url(../images/nav_com_store.png);"><a href="http://www.skullcrow.com/" alt="Store"> </a> <ul> <li><a href="http://www.skullcrow.com/">Shirts</a></li> <li>Hats</li> <li>Stickers</li> <li>Misc Stuff</li> </ul> </li> </ul> <ul style="width:188px;"> <li style="background-image:url(../images/nav_com_community.png);"><a href="http://www.skullcrow.com/community_home.php" alt="Community"> </a> <ul> <li><a href="http://www.skullcrow.com/forum">Forum</a></li> <li><a href="http://www.skullcrow.com/community_upload.php">Upload Photos</a></li> <li><a href="http://www.skullcrow.com/community_designers.php">Submit Shirt Designs</a></li> <li><a href="http://www.skullcrow.com/skullcrow_blog">SkullCrow Blog</a></li> </ul> </li> </ul> <ul style="width:188px;"> <li style="background-image:url(../images/nav_com_help.png);"><a href="http://www.skullcrow.com/help.php" alt="Help"> </a> <ul> <li><a href="http://www.skullcrow.com/help.php">Contact Us</a></li> <li><a href="http://www.skullcrow.com/forum/faq.php">FAQ</a></li> <li><a href="http://www.skullcrow.com/aboutus.php">About Us</a></li> </ul> </li> </ul> <ul style="width:196px;"> <li style="background-image:url(../images/nav_com_otherstuff.png);"><a href="#" alt="Other Stuff"> </a></li> </ul> </div> </div> ...and finally, here's the small snippet of code I used up in the header of the main php file that I thought was suppose to fix the display issue but didn't: Code: <!--[if IE]> <style type="text/css" media="screen"> body { behavior: url(css/csshover3.htc); font-size: 100%; } #menu ul li {float: left; width: 100%;} #menu ul li a {height: 1%;} #menu a, #menu h2 { font: bold 0.7em/1.4em arial, helvetica, sans-serif; } </style> <![endif]--> That last bit is contained at the very of the header, and is the very last item before the </head> tag. In addition to the other 'adjustments', it's also suppose to be including the csshover3.htc file that I thought was suppose to fix a lot of display problems. The site I got that file from is he http://www.xs4all.nl/~peterned/csshover.html Whatever help is always very appreciated. I'm still sort of a css newb, although I think I'm starting to understand more, but IE is a bastard and I think most web developers would probably agree. Thanks again. Hi all! I have just started a not so small project converting my layouts to EM units. I have got so far and have a nav menu based on nested lists. (This code was saved by ie and then formatted cleanly for inclusion here, so please ignore the capitals for tags and lack of quotation marks). Quote: <DIV id=topNav> <UL id=nav> <LI class=long><A class="firstParent selected" href="http://www.wellandpower.net/" alt="Diesel Generator Sets">Generator Home</A></LI> <LI class=long><A href="http://www.wellandpower.net/index.php?wwwreq=www_products">Generator Products</A> <UL> <LI><A href="http://www.wellandpower.net/index.php?wwwreq=www_products">Generator Product Range</A></LI> <LI><A href="http://www.wellandpower.net/gallery/">Generator Image Gallery</A></LI> <LI><A href="http://www.wellandpower.net/perkins_diesel_generator/WP150/index.php?wwwreq=www_certification">Generator Certifications</A></LI> </UL> </LI> <LI class=short><A href="http://www.wellandpower.net/index.php?wwwreq=www_services">Services</A></LI> <LI class=short><A href="http://www.wellandpower.net/index.php?wwwreq=www_about">About Us</A></LI> <LI class=short><A href="http://www.wellandpower.net/index.php?wwwreq=www_contact">Contact Us</A></LI> <LI class=short><A href="http://www.wellandpower.net/perkins_diesel_generator/WP150/index.php?wwwreq=www_support">Support</A> <UL> <LI><A href="http://www.wellandpower.net/index.php?wwwreq=www_support">Generator Support Page</A></LI> <LI><A href="http://www.wellandpower.net/forums/" target=_blank>Diesel Generator Forums</A></LI> <LI><A href="http://www.wellandpower.net/index.php?wwwreq=www_support_spares">Diesel generator Spare Parts</A></LI> <LI><A href="http://www.wellandpower.net/index.php?wwwreq=www_links">DieselGenerator Support Links</A></LI> </UL> </LI> <LI class=short><A href="http://www.wellandpower.net/index.php?wwwreq=www_tracking">Tracking</A></LI> <LI class=right><A href="http://www.wellandpower.net/wpmm-online3/index.php">WPMM Home</A></LI> </UL> </DIV> The nested list works perfectly when then font-size in the browser is set to medium or smaller. When it gets larger, it all seems to get bigger with no problem, except I get the menu "about us" shifting down about 0.3em or so. I tried deleting the "about us" menu, and the same effect happened but with the next menu along. I am 100% stummped where this extra space appears from!? Any ideas greatly appreciated. Quote: #topNav {font-size: 0.8em; background-color:#000066;position:relative;z-index:1000;margin:0;padding:0;height: 1.5em; } #topNav ul {padding:0em;margin:0em;list-style:none;background-color:#000066;} #topNav ul li {display:inline;position:relative;float:left;white-space:nowrap;} #topNav ul li.topNavRBorder {border-right:0.05em solid #ffffff;} #topNav ul li.short {width: 8em; border: 1px solid black;} #topNav ul li.long {width: 11em; border: 1px solid black;} #topNav ul li.right {float: right; width: 8em;} #topNav ul li ul li {width: 18em; z-index: 5000;} #topNav ul li a {z-index: 5000; border-left:0.05em solid #ffffff;padding:.3em 0.5em .3em 0.5em;height: 1.5em;display:block;text-decoration:none;color:#fff;background-color:#000066;white-space: nowrap;} #topNav p{padding:.3em 0.05em .3em 0.05em;height:0.1em;display:block;text-decoration:none;color:#fff;background-color:#000066;white-space: nowrap;} #topNav ul li a.firstParent {border-left:none;} #topNav ul li a.firstChild {border-top:0.05em solid #ffffff;} #topNav ul li a:hover {color:#99ccfb;text-decoration:none;} #topNav ul li ul li a {border-right:0.05em solid #ffffff;border-bottom:0.05em solid #ffffff;} #topNav li ul {position:absolute;display: none;} #topNav li:hover ul, #topNav li.displayBlock ul {display:block;} #topNav ul li a.selected {color:#99ccfb;} 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 Hi, I'm new using CSS and was just handed the task of creating an external style sheet that will 'brand' the web page of a new service we are using with my company's logo and menu. Our page has a logo on the left, with a menu bar extending to the right of it, then a graphic bannner with the company's slogan below all of it. The requirements are for an external style sheet which will apply this to each page of the services hosted pages. I desperately need an example of how this is done, or CAN it be done with an external style sheet (and what code needs to go into the HTML file to make it work). Any help would be greatly appreciated. I've spent 4 days searching for an example and have come up dry, or what I did find didn't work. This is my last resort and I need to finish the project today. Tillius Hi all. I got problem with display content in IE 6 and 7, It throws the content totally on left side, while in firefox its on center, like it should be. I think problem could be he #countrydivcontainer { text-align: left; margin-top: 0pt; margin-right: auto; margin-bottom: 0pt; margin-left: auto; width: 965px; color: #666666; clear: both; padding-top: 20px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; } Unfortunately i dont know how to explain the problem without the url to really see it Can someone help? I am having CSS DIV issues with IE6. When dislayed in Firefox, IE7, IE8 it is fine, but my nice rounded boxes look like crap in IE6. I've attached a screen shot of the box as it looks in IE6 Code: <!-- CONTENT BEGIN --> <div id="box1" > <div id="lb" ><div id="rb"><div id="bb"><div id="blc"> <div id="brc"><div id="tb"><div id="tlc"><div id="trc"> <br /> <span class="style1" style="padding-left: 15px"><?php echo $Title; ?></span> <br /> <br /> </div> </div></div></div></div> </div></div></div></div> **the middle divs are all the corners for borders box1 css Code: #box1 { position: relative; margin-left: 5px; margin-right: auto; margin-top: 1em; padding: 0; text-align: left; //width:100%; /* <-- use this to tie width to viewport size*/ width: 55em; /* <-- use this for a set width */ background-color: #eeeeee;; } Code: <!-- #Include virtual="/webcontent/doctype.txt" --> <html> <head> <!-- #Include virtual="/tagsm.htm" --> <!-- #Include virtual="/webcontent/cssinclude.htm" --> <title>EPIC Performance</title> <SCRIPT LANGUAGE="JavaScript" SRC="/webcontent/nav.js"> </SCRIPT> </head> <body> <div class="wrapper"> <div class="lefthandnav"> <div class="headerimgleft"> EPIC LOGO </div> <div class="bl"><div class="br"><div class="tl"><div class="tr"> <a href="index.shtml">Home </a><br/> <a href="login.asp">Log In </a><br/> <a href="shopping.asp">Products</a><br/> <a href="history.shtml">History</a><br/> <a href="podcasts.shtml">Podcasts</a><br /> <a href="news.asp">News</a><br /> <a href="faq.asp">FAQ</a><br /> <a href="contact.shtm l">Contact Us</a><br/> </div></div></div></div> <div class="clear"> </div> <div class="bl"><div class="br"><div class="tl"><div class="tr"> <b>Sponsors</b><br/><br/> <p><img src="/images/PowerLift_logo.jpg"></p> <p><img src="/images/Uesaka_logo.jpg"></p> </div></div></div></div> <div class="clear"> </div> <div class="bl"><div class="br"><div class="tl"><div class="tr"> <b>EPIC Athletic Performance Inc.</b><br/> P.O Box 61689<br/> Colorado Springs, CO 80906<br/> <b>epicindex.com</b> </div></div></div></div> <div class="clear"> </div> </div> <div class="righthandnav"> <hr class="topline"/> <h2 class="headingtitle">Evaluate and Improve Athletic Performance</h2> <hr class="topline"/> <div id="menu"> <dl> <dt onmouseover="javascript:montre('smenu5');">Testing</dt> <dd id="smenu5"> <ul> <li><a href="#">Talent Identification</a></li> <li><a href="#">Big 33</a></li> <li><a href="#">Test Procedures</a></li> <li><a href="#">Test Equipment</a></li> <li><a href="#">Test Card</a></li> </ul> </dd> </dl> <dl> <dt onmouseover="javascript:montre('smenu1');">Evaluation </dt> <dd id="smenu1"> <ul> <li><a href="#">Five Star Rating</a></li> <li><a href="#">Vertical Jump Index</a></li> <li><a href="#">Talent Identification Index</a></li> <li><a href="#">Individual Index</a></li> <li><a href="#">Multiple Test History</a></li> <li><a href="#">Team Data</a></li> </ul> </dd> </dl> <dl> <dt onmouseover="javascript:montre('smenu2');">Goals</dt> <dd id="smenu2"> <ul> <li><a href="#">Setting Goals</a></li> <li><a href="#">Six Weeks</a></li> <li><a href="#">High School</a></li> <li><a href="#">College</a></li> <li><a href="#">Pyramid Poster</a></li> </ul> </dd> </dl> <dl> <dt onmouseover="javascript:montre('smenu3');">Program</dt> <dd id="smenu3"> <ul> <li><a href="#">Selecting a Program</a></li> <li><a href="#">Strength Disk</a></li> <li><a href="#">Books</a></li> <li><a href="#">CD's</a></li> <li><a href="#">Videos</a></li> <li><a href="#">Posters</a></li> <li><a href="#">Nutrition</a></li> <li><a href="#">Make the Play Clinic</a></li> <li><a href="#">Performance Speakers</a></li> <li><a href="#">Program Equipment</a></li> </ul> </dd> </dl> <dl> <dt onmouseover="javascript:montre('smenu4');">Equipment</dt> <dd id="smenu4"> <ul> <li><a href="#">Program Equipment</a></li> <li><a href="#">Testing Equipment</a></li> <li><a href="#">Clothing</a></li> </ul> </dd> </dl> </div> </div> </div> </body> </html> the problem is when you look at the website in mozilla and IE I like the way it looks in mozilla but when you look in IE the top navigation is not aligning properly there is a problem with the HR tag here is the CSS code Code: body { margin: 0; padding: 0; font-family: arial; color: #000; } .wrapper { width: 900px; height:605px; } .lefthandnav { float: left; width: 145px; background-color:white; padding:0px 5px 0px 0px; } .righthandnav { float: left; width: 745px; background-color:white; padding: 0px 0px 0px 5px } .headerimgleft { height:75px; } .clearing { clear:both; } .headingtitle { font-weight: bold; font-size: 15; text-align:center; } .topline { margin: 0; padding: 0; width:94.3%; margin:0px; color: #CC0000; background-color: #CC0000; height: 5px; } .bl {background: url(bl.gif) 0 100% no-repeat #e68200;} .br {background: url(br.gif) 100% 100% no-repeat} .tl {background: url(tl.gif) 0 0 no-repeat} .tr {background: url(tr.gif) 100% 0 no-repeat; text-align:center;padding:5px} .clear {font-size: 1px; height: 1px} dl, dt, dd, ul, li { margin: 0; padding: 0; list-style-type: none; } #menu { position: absolute; padding:5px 0px 0px 0px; } #menu dl { float: left; width: 8.7em; margin: 0 1px; } #menu dt { cursor: pointer; text-align: left; font-weight: bold; background: #CC0000; border: 1px solid gray; } #menu dd { border: 1px solid gray; } #menu li { text-align: left; background: #fff; } #menu li a, #menu dt a { color: #000; text-decoration: none; display: block; height: 100%; border: 0 none; } #menu li a:hover, #menu dt a:hover { background: #eee; } #site { position: absolute; z-index: 1; top : 70px; left : 10px; color: #000; background-color: #ddd; padding: 5px; border: 1px solid gray; } a {text-decoration: none; color: black; color: #222; } any idea why its doing like that todd I'm having some issues with website I'm putting together. Don't flame me for the code, it started as exported code from Photoshop. I need to get it up quick, after that, I'll convert it over to full CSS. http://www.foltzconstruction.com Try navigating to one of the subpages. Everything displays perfect in FF, but wrong in IE. Anyone got any clues as to why? I've attached my CSS file to make your life a little easier. Thanks, guys. I have a page that seems to display well in most browsers except in IE 6 (and possibly below). The content that should appear in the right_sidebar is shifted to the bottom left of the page. Dreamweaver has shown a "three-pixel text jog" error. I have read several articles on the IE bugs especially the ones at positioneverything.com but I still can't solve my problem. This seems to be the suggested fix, but I apparently am not applying it correctly: Code: <!--[if IE]> <style type="text/css"> /* place css fixes for all versions of IE in this conditional comment */ #column, #right_sidebar { zoom: 1; } /* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */ </style> <![endif]--> i have some tables done on my site with the display:none property. when you make a selection from the drop-down list, that table appears. my problem is that when page refreshes all object hide again. i use a javascript case statement to display the correct selection from the drop-down box. any ideas?? Hi, I have this code and i need some text next to the drop down. I am attaching the image how it looks like the text " Hold Ctrl key 4 multiple " is next to the drop down and it sticks to the drop down i need some space between the text and drop down and its not working here is the css code The text scorlls next to the drop down and i want the space to be uniform on the 3 lines where the text scrolls down also can i have Hold Ctrl key 4 on one line and then multiple on the second line thank you princecharles Code: .credfont { font-weight:bold; font-size:12px; padding:0px 0px 0px 4px; color: #f00; } <tr class="oddrow"> <td class="lbl" width="152">Subjects: </td> <td width="170"><span style="float:left;"><select name="Subjects" id="Subjects" multiple="multiple" size="2"> <option>Maths</option> <option>Science</option> <option>PT</option> <option>Arts</option> </select> </span> <span class="credfont">( Hold Ctrl key 4 multiple )</span> </td> <td class="lbl" width="92" > Class: </td> <td colspan="2"> <input type="text" class="writein" name="class" id="class" size="30" value=""> </td> </tr> I have a small problem with the login bar on my homepage. In IE it decides to pad extra space on the bottom , however in Firefox all is displayed ok. Please visit www.wecook.co.uk to see the problem. I think the problem is this bit of css Code: #login { width: 736px; background-color: #e4e2df; border-left: 1px solid #000000; border-right: 1px solid #000000; border-top: 1px solid #000000; padding-top: 1px; padding-bottom: 1px; text-align: right; } label:after { content: ": "; } label { color: black; font-weight: bold; padding: 1px; text-transform: uppercase; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8px; } input { display: block; width: 100px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: xx-small; padding: 4px; border: solid black; border-width: 1px 2px 2px 1px; } .buttonLogin { width: 60px; color: black; text-transform: uppercase; border: 1px solid #5C5C5C; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8px; text-align:center; } Offending bit of HTML Code: <!-- If no cookies display login bar --> <!-- start login --> <div id = "login"> <form action="Login.do" method="post"> <table width="736" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="445" align="right"> </td> <td width="112" align="center"> <input name="uname" type="text" id="uname" value="Username" size = "10" /> <br /> </td> <td width="112" align = "center"> <input name="pword" type="password" id="pword" value="Password" size = "10" /> <br /> </td> <td width="67" align = "center" valign="bottom"> <input type="submit" name="Login" value="Login" class="buttonLogin" /> </td> </tr> </table> </form> <!-- end login --> </div> Any help is appreciated. Thanks. I think its to do with the login button - but dont know how to fix it. Here's a 1st for me. Got a problem in Firefox NOT in IE Sometimes my floated div displays under div next to it, instead of beside it. If I refresh, then it always will display correctly next to it. Realized this was a much bigger problem when I tested in Firefox on another computer and half the pages did it first time they loaded. Within my div container I have my div menu floated left with a width of 20%, then my div maincontent also floats left with a width of 78%. (I've verified there is 5-10px extra space. So the two are not stretching the entire width) Tried floating the #maincontent right, but then my footer completely screwed up and couldn't fix. Not sure what kinda change I might need to make. Any insights? Anyone else encounter this in Firefox? Thanks, James Hi, My site is loading fine in IE but messing up in FF, the tables (yes tables, sry) are loosing all height and widths. Ive had a look about but cant work out how to fix/get around this. HTML Code: <div id="products"> <table border="0" cellpadding="0" cellspacing="0" bgcolor="#ED1C24" style="width:194px; height:114px; margin-right:5px;margin-bottom:5px;"> <tr> <td align="left" class="code" style="padding-left:3px;"> AKA </td> <td align="right" class="name" style="padding-right:3px;"> TITLE </td> </tr> <tr> <td colspan="2" align="center" valign="middle" style="background-image: url(images/item_bg.gif); background-repeat:no-repeat;"> <a href="details.php?id=CODE"> <img src="images/products/photos/CODE.jpg" alt="TITLE" border="0" style="height:84px; width:184;" /></a> </td> </tr> </table> </div> CSS Code: #products { padding-bottom:10px; line-height:20px; font-family:Arial, Helvetica, sans-serif; font-size:11px; letter-spacing:1px; display:inline-table; vertical-align:top;} #products table {display: inline} How can i get the same effect so FF looks the same as IE? Thanks for any help. Mike the page is http://www.mostardesigns.com/fmrehabv2/ as you can see in FF it shows up right but in IE the little menu splitters on the left menu are like 10px high instead of 2px for some reason, help! thanks in advance. hello gurus i am having a problem with my autosfill script .. i am using pHP as a server side. while i am filling a text box i can see a available records froms the db. but it shows html elements are getting displayed over div box (records) i am attaching image so you will get exact idea. is there any css property available so that i can display this properly? |