|
CSS - Spry Menu Bar Not Showing Properly On Certain Browsers?
I am having the same problem as a few other posters regarding Spry menu bars. I was wondering if someone here could help us.
The link is The problem link Thanks Similar TutorialsThe submenus are not lining up properly in Firefox or Safari but it looks right in IE. If I fix how it looks in Firefox and Safari, it will not look right in IE. Anyone know how to solve this? Here is the link: link to problem Hello, On the home page of this site: aia.academicimaging.com, the drop down menu for Needs Assessment doesn't appear correctly when it tries to run across the page rather than down like it does in Firefox. This is a Spry menu I made with Dreamweaver CS3. Thanks in advance for any suggestions. Mark Hi folks. I'm hoping someone can help me out. I have a template I've been working with (struggling with). It has a style sheet attached to it and I'm trying to replace the main, static menu with a drop down Spry Menu. I've managed to get most of it figured out but my dropdowns aren't colored correctly. The Spry Menu isn't centered on the page. The menu titles are spread out too far also (ie. it's suppose to be "About Me" but the "Me" is way below the "About"). I'm guessing it's probably an easy fix for you all but I've been playing with it all day without a lot of progress. Thank you. Let me know if I should post links. Hi guys, Bit of an annoying problem here, Ive got this navbar up and running using image rollovers, and it works fine in IE, however if firefox and safari it displays wrong, heres my code and what happens, Thanks in advance, Scott. HTML: Code: <div class="navbar"> <ul id="navlist"> <li><a href="./shop">SHOP NOW</a></li> <li><a href="index.php">HOME</a></li> <li><a href="contact.php">CONTACT</a></li> <li><a href="faq.php">F.A.Q.</a></li> </ul> </div> CSS: Code: .navbar {
font-family:Impact;
font-size: 23px;
text-align:center;
height:54px;
}
.navbar li {
list-style:none;
display:inline;
}
.navbar a {
width:198px;
color:#FFFFFF;
background:url("rollover.gif") no-repeat;
padding:12px 10px 13px;
margin:0 0px;
}
.navbar a:hover {
background-position:0 -59px;
color:#000000;
}
.navbar a:active {
background-position:0 -118px;
color:#FFFFFF;
}
Displayed in IE: URL Displayed in FF/Safari: URL Hi all, I'm a newbie on spry coding and was hoping for some help. I tried to search the forum for a similar probem, but couldn't find one. Here's the basic problem: I have a spry horizontal menu bar and my main menu items are displaying just fine when the browser screen is maximized. However, when I make the browser screen smaller on the screen, the last menu item gets pushed down to a second line. Here's what I mean: With maximized browser screen: [Item 1][Item 2][Item 3][Item 4][Item 5] With smaller browser screen: [Item 1][Item 2][Item 3][Item 4] [Item 5] Is there any way that I can use CSS, or any other method you might know, to force the items to stay on the same line, regardless of the screen size? Thanks so much for any info! I've been working on this issue for nearly 20 hours ... about 10 hours ago I had things working only to realize I hadn't committed my code, and now I have no idea how to get back to where I was (as my process was just hitting and missing). I'm working on installing a vertical spry dropdown menu at: www.leonianj.gov using the drupal framework. You can see by visiting the site that the drop-down menus are positioned underneath the remaining content on the page (not flash). I've manipulated pretty much all z-index values (in as many combinations as I could figure). Of course the menu is fine in FF 2+ and Safari 2+ If anyone out there could point me in the right direction it would be GREATLY appreciated! Regards, Justin I am working on this website babeside dot be Everything is going as I want it in all browsers, except IE. When opening the website in IE, and selecting a babe, the babe-part is shown waaaaay underneath all the other parts of the site. Can anyone help me how to fix this? The following code works in most browsers but not so well in IE, there seems to be an extra block of css shading in the last box in the row. this is what we really want removed. has anyone got any ideas how the issue IE can be fixed. thanks in advance for your help. Code:
<style type="text/css">
<!--
.menucontainer { background:#799BD9; margin:0 5px;}
.menurtop1, .menurbottom1{ display:block; background:#125892; }
.menurtop1 *, .menurbottom1 *{ display: block; height: 1px; overflow: hidden; background:#799BD9; }
.r1{ margin: 0 5px}
.r2{ margin: 0 3px}
.r3{ margin: 0 2px}
.r4{ margin: 0 1px; height: 2px }
a.one:link { color: #000; }
a.one:visited { color: #000; }
a.one:hover { color: #fff; }
a.one:active { color: #000; }
a.one { text-decoration: none; }
h1 { text-align: left; font: small tahoma; font-size: 12px; font-weight: bold; margin: 0 0; padding: 5; }
h2 { text-align: left; font: small tahoma; font-size: 12px; font-weight: bold; margin: 0 5; padding: 5; }
-->
</style>
<style>
<!--
A {color:#000000; font-weight: normal;}
A:hover {color: #0066FF; font-weight: normal;}
-->
</style>
<body bgcolor="#003399">
<table width="100%" style="border-collapse:collapse;">
<tr>
<td width="0%" height="21">
<div class="menucontainer" align="center">
<b class="menurtop1"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<table width="100%" style="border-collapse:collapse;" dwcopytype="CopyTableColumn">
<tr>
<td NOWRAP> <div align="center"><a href="http://<?=$siteurl;?>/?ac=a" STYLE="text-decoration: none"><font color="#FFFFFF" face="Tahoma"> l1</font></a> </div></td>
<td NOWRAP> <div align="center"><a href="http://<?=$siteurl;?>/members/index.php?ac=s" STYLE="text-decoration: none"><font color="#FFFFFF" face="Tahoma"> l2</font></a> </div></td>
<td NOWRAP> <div align="center"><a href="http://<?=$siteurl;?>/members/index.php" STYLE="text-decoration: none"><font color="#FFFFFF" face="Tahoma"> l3</font></a> </div></td>
<td NOWRAP> <div align="center"><a href="http://<?=$siteurl;?>/?ac=f" STYLE="text-decoration: none"><font color="#FFFFFF" face="Tahoma"> l4</font></a> </div></td>
<td NOWRAP> <div align="center"><a href="http://<?=$siteurl;?>/?ac=c" STYLE="text-decoration: none"><font color="#FFFFFF" face="Tahoma"> l5</font></a> </div></td>
<td NOWRAP> <div align="center"><a class="bm" title="link me" href="http://<?=$siteurl;?>/?ac=b" STYLE="text-decoration: none"><font color="#FFFFFF" face="Tahoma"> l6</font></a> </div></td>
<td NOWRAP> <div align="center"><a href="http://<?=$siteurl;?>/?ac=s" STYLE="text-decoration: none"><font color="#FFFFFF" face="Tahoma"> l7</font></a> </div></td>
</tr>
</table>
<b class="menurbottom1"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b></div>
</td>
<td width="5%" NOWRAP><div align="center"><font color="#FFFFFF" size="2" face="Tahoma">123456</font></div></td>
</tr>
</table>
I'm working on a website that I'm having issues with in the CSS. I'm fairly new to CSS and I don't know how to get an image banner to show up next to each other. I though with the css in place I could do that, but some how I'm missing where the nav drops down in to the next div which is suppose to be a slideshow type div. The page is at ukindesigns.com/EBB/ebb.html and the style sheet can be found at ukindesigns.com/EBB/CSS/style.css Thanks, Franky Hi, my site is not showing properly in IE, but looks great in Firefox, I know it is the floats, but why I don't know since I cleared them both This is my doctype <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "(URL address blocked: See forum rules)"> <html xmlns="(URL address blocked: See forum rules)"> here is the code I am using in the php page <? include ("header.txt"); ?> <div id="page"> <div id="headerimg"> </div> <div id="topbar"> </div> <div id="content"> <table summary="main content" width="90%"><tr><td> <p align="justify"><span>Welcome to Call Me Farms, your first choice in breeding for Australian Cattle dogs, Border Collies, and Rat Terriers. Located in Parrish, Florida, Call Me Farms takes pride in bringing you the very best there is to offer in these breeds.</span></p> <p align="justify"><span>Here at Call Me Farms we breed for Ability, Beauty, Brawn. My dogs are tested-OFA Hips, Elbows, Prcd and we have a lot of proven finished Champions that are my best buds. My dogs are in all kinds of venues-agility-herding-flyball-protection-conformation and just being a good dog and your best friend. We have produced five generations of Champions and over 34 home bred Champions. I say it's a good start.</span></p> <p align="justify"><span>Here in our site you will find all the information you will need about our breeds, from confirmation through companionship. There are all the latest updates on how well my dogs are doing in competitions, as well as when the puppies are available. Photos of my dogs abound so you can see how beautiful and well bred they are. There is also a page on my foundation dogs, which started it all.</span></p> <div id="currentevents"> </div> <div style="height: 350px; width: 500px; overflow: auto"> <!--UPDATES BEGIN HERE--> <? include ("update.txt"); ?> <!--UPDATES END HERE--> </div> <div id="publications"> </div> <div align="center"> <p align="justify">These are just some of the publications our dogs have appeared in. They have also appeared in numerous calendars, greeting cards, note cards, stationary, and more!</p> <br /> <br /> <img src="images/books.jpg" alt="Publications" width="500" height="100" /><br /> <br /> <br /> <br /> <? include ("footer.txt"); ?> <br /> </div> </td></tr></table> </div> <div id="sidebar"> <div align="center"> <? include ("menu.txt"); ?> <br /> <br /> <table summary="Recommend Us" class="textbox1" width="200" align="center"> <tr> <td valign="top" class="textboxheader"> <div align="center"> Recommend Us </div> </td> </tr> <tr> <td> <div align="center"> <br /> <form method="post" action="cgi-bin/recommend.cgi"> <small>Friends Name:</small><br /> <input type="text" name="recipient_name" size="15" class="input" /><br /> <small>Friends Email Address:</small><br /> <input type="text" name="recipient_email" size="15" class="input" /><br /> <small>Your Name:</small><br /> <input type="text" name="sender_name" size="15" class="input" /><br /> <small>Your Email Address:</small><br /> <input type="text" name="sender_email" size="15" class="input" /><br /> <br /> <input size="1" type="submit" class="button" value="Submit" /> </form> </div> </td> </tr> </table> <br /> <br /> <small>last updated<br /> <script type="text/javascript" language="JavaScript" src="java/update.js"> </script> </small> <br /> <br /> <!--HIDDEN LINKS REQUIRED FOR COUNTER--> <a href="(URL address blocked: See forum rules)"></a><a href="(URL address blocked: See forum rules)"></a> <!--END HIDDEN LINKS FOR COUNTER--> <a href="(URL address blocked: See forum rules)"><img border="0" src="(URL address blocked: See forum rules)=1308498&c=3925807" alt="Website Visitor Counter" /></a><br /> <small>visitors</small> </div> </div> <div class="clear"> </div> <div id="footer"> </div> </div> </body> </html> and here is the css /* CSS Document */ /* basic elements */ body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #545838; background-color: #e9ebdc; background-image: url(images/bg.jpg); margin-top: 0px; } /* specific divs */ #page { background-color: #fdfdfb; width : 750px; padding : 0; margin : 0 auto; text-align : left; height : auto; border-left : 1px solid #000000; border-right : 1px solid #000000; } #headerimg { background-image : url(images/callmefarms.jpg); margin : 0 auto; width : 750px; height : 280px; padding : 0; } #topbar { background-image : url(images/header1.jpg); margin : 0 auto; width : 750px; height : 85px; padding : 0; } #content { float : left; width : 500px; } #sidebar { float : left; width : 250px; height : auto; padding : 0; } #currentevents { background: #fdfdfb url(images/currentevents.jpg) no-repeat top left; margin-top: 0px; width: 500px; height: 75px; } #publications { background: #fdfdfb url(images/publications.jpg) no-repeat top left; margin-top: 0px; width: 500px; height: 100px; } #footer { background: #a2a876 url(images/footer.jpg); width : 750px; padding : 0; height: 75px; } #resources { background: #e9ebdc url(images/resources.jpg) no-repeat top left; width: 250px; height: 60px; text-align: center; } /* specific classes */ .clear { clear:both; font-size:0; line-height:0px; height:0; } at this point I am totally clueless as to what is the problem here, any help would be most appreciated....thanks!! Hey Everyone, I was wondering if anyone could take a quick look at my Style Sheet and let me know I can do to improve and why it isn't working in all browser's... It works great in most browser's but then there is explorer, and it doesn't seem to work fine in there... Here it is and I would really appreciate it if someone could look at it for me, thanks... Nick Hello Can u hlp me please? have look at www.verexelto.sk/test/test1.php - this is good version of the page but without any text in the footer. after i try tu put any content into footer (f.e. some text) the page wil not do this properly (the way i want it :-) ) have look at www.verexelto.sk/test/test.php (scroll down) What should i have to do , what am i doing wrong? Thank you Hello, I am having problems positioning my left menu on non IE browsers, The menu appears fine in IE, can anyone help please, I have attached my code Code:
body {
margin:20px;
background:#ffffff;
text-align:center;
padding:0;
}
#outer {
text-align:left;
border:0px solid #000000;
width:785px;
margin:auto;
}
#hdr {
height:30px;
background:#ffffff;
}
#bar {
height:25px;
background:#ffffff;
border:solid #000000;
border-width:1px 0 1px 0;
}
#bodyblock {
position:relative;
background: #fffff;
width:785px;
padding:0;
}
#l-col {
width:204px;
height:452px;
float:left;
background:#fff;
background-image:url(images/left.jpg);
background-repeat:no-repeat;
padding-bottom:10px;
}
#cont {
width:565px;
background:#ffffff;
border:solid #000000;
border-width:0 0 0 0px;
}
#middle {
width:5px;
float:left;
background:#fff;
}
#ftr {
height:25px;
background:#c0c0c0;
border:solid black;
border-width:1px 0 0 0;
margin:0;
}
Hi all, This is the xHTML link This is the CSS file. Please open this in Internet Explorer. Notice that when the drop-down menu falls over the drop-down list form, it gets hidden beneath the list. I've spent a whole week trying to fix this but wasn't successful This works perfectly in Firefox though. Thanks!! Hi, While testing our webpage, we found that in all browsers the CSS menu works fine except in Safari, on browsing the child nodes of the menu. The menu just closes on the second or third select. I would greatly appreciate any help to fix this bug. The CSS code is below. Regards, Sharon. Code : <style type="text/css" media="screen"> /**************** menu coding *****************/ #menu { width: 100%; background: #eee; float: left; } #menu ul { list-style: none; margin: 0; padding: 0; width: 12em; float: left; } #menu a, #menu h2 { font: bold 11px/16px arial, helvetica, sans-serif; display: block; border-width: 1px; border-style: solid; border-color: #ccc #888 #555 #bbb; margin: 0; padding: 2px 3px; } #menu h2 { color: #fff; background: #000; 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;} </style> <!--[if IE]> <style type="text/css" media="screen"> #menu ul li {float: left; width: 100%;} </style> <![endif]--> <!--[if lt IE 7]> <style type="text/css" media="screen"> body { behavior: url(csshover.htc); font-size: 100%; } #menu ul li a {height: 1%;} #menu a, #menu h2 { font: bold 0.7em/1.4em arial, helvetica, sans-serif; } </style> <![endif]--> I'm trying to get a dropdown menu to work properly (with IE, it works fine in FF) in the sidebar, thus vertically not horizontally. This dropdown menu has worked fine before, but only when using it horizontally, across the top. Basically, it prevents the user from clicking on the submenu options (I'm thinking it has something to do with z-index), but the parent menu options work fine. You can see the issue here with IE6 or 7: http://www.groundedgroup.com/clients/NWR/ Here's the respective CSS: Code:
/* Sidebar / Menu */
#sidebar {
float: left;
top: 16px;
left: 2px;
display: block;
position: relative;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color:#FFFFFF;
letter-spacing: 1px;
text-align:right;
z-index: 3;
}
#sidebar ul {
list-style-type: none;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
z-index: 4;
}
#sidebar li {
display: block;
float: left;
min-height: 20px;
position: relative;
text-align: left;
padding: 5px 20px 4px 16px;
margin: 0px 0px 0px 0px;
}
#sidebar h2 {
font-size: 1.2em;
padding: 0;
margin: 0;
}
#sidebar li ul {
width: 150px;
height: auto;
top: 100%;
left: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
letter-spacing: 3px;
}
#sidebar li.LargeMenu ul {
width: 200px;
height: auto;
top: 100%;
left: 0px;
}
#sidebar li ul li {
text-align: left;
width: 118px;
height: auto;
min-height: auto;
display: block;
}
#sidebar li.LargeMenu ul li {
text-align: left;
width: 198px;
height: auto;
min-height: auto;
display: block;
}
#sidebar a {
text-decoration: none;
letter-spacing: 1px;
}
#sidebar li li ul {
top: 0;
left: 0;
}
#sidebar li li:hover ul {
left: 150px;
}
/* initialy hide all sub sidemenus */
#sidebar ul ul,
#sidebar ul li:hover ul ul,
#sidebar ul ul li:hover ul ul,
#sidebar ul ul ul li:hover ul ul,
#sidebar ul ul ul ul li:hover ul ul {
position: absolute;
display:none;
}
/* display them on hover */
#sidebar li:hover ul,
#sidebar ul li:hover ul,
#sidebar ul ul li:hover ul,
#sidebar ul ul ul li:hover ul,
#sidebar ul ul ul ul li:hover ul,
#sidebar ul ul ul ul ul li:hover ul {
display: block;
}
#sidebar #PhpWebcontent {
display:none;
}
/* define the consecutive colors */
#sidebar {
color: #FFFFFF;
}
#sidebar ul{
-moz-opacity: 1; /* for mozilla */
opacity: 1; /* for safari */
khtml-opacity: 1/* for konquerer and older safari */
}
#feeds li {
background: url(images/feed.png) top left no-repeat;
padding-left: 18px;
}
#sidebar h2 {
color: #FFFFFF;
}
#sidebar a {
color: #ffffff;
letter-spacing: 1px;
}
#sidebar ul li:hover {
background: #333333;
}
#sidebar ul li ul {
}
#sidebar ul li ul li {
background: #333333;
}
#sidebar ul li ul li:hover {
background: #666666;
}
#sidebar ul li ul ul li{
background: #666666;
}
#sidebar ul li ul ul li:hover {
background: #999999;
}
/* End Sidebar / Menu */
Any ideas on how to make this work properly when used on the side? Thanks in advance. I have a menu that is built using css/html that shows up fine in firefox but doesnt in IE. The rollover buttons work but the submenu that should appear when the rollover is active, doesnt. [submenu is only for 'products' and 'about us'] the site is he http://soem.batcave.net the css for the navmenu is he http://soem.batcave.net/navstyle.css Any help on why this is happening [or not as is the case] would be greatly appreciated. Thanks Any ideas why the text isn't showing up in the main site menu (top left hand side of screen): http://www.thepartyparty.ca Take a look in Firefox and then IE. Firefox works wonderfully (surprise), IE shows no text. Any suggestions? Ryan Hi all, I have this headache problem ... check it out here on my site You see that menu ? it should be all over the #bar, but it just minimizes it to that small size. It should be all over the #bar Thanks !!! |
|||||||