Hi Nancy; I fixed the borders issue, but cannot seem to get over the fact that everytime I add the full height (50px) for the line height, all that happens is the links are pushed down several pixels. There must be something in the Wordpress theme CSS that's making this happen. I rarely build CSS menus from scratch...
This works fine, but the borders, backgrounds, etc. only extend the height of the font:
#menu {
height: 50px;
width: 960px;
margin-top: 0px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
background-image: url(menu_bg.jpg);
background-repeat: no-repeat;
padding-top: 12px;
#menu ul {
display: inline;
margin-left: 14px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #FFC315;
line-height: normal;
#menu li {
display: inline;
line-height: 100%;
#menu li a {
height: 50px;
border-right-width: 1px;
border-right-style: solid;
font-size: 14px;
font-weight: bold;
border-right-color: #ffc315;
color: #262927;
padding-right: 9px;
padding-left: 9px;
#menu a:link {
#menu a:hover {
color: #679800;
#menu li a:hover {
color: #679800;
The full CSS file looks like this, and contains some strange things I suppose are WP-oriented:
Theme Name: Subway
Theme URI: none
Description: site
Tags:
Author: me
Author URI:
Latest updated:
/* CSS RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
/* remember to define focus styles! */
:focus {
outline: 0;
body {
line-height: 1;
color: black;
ol, ul {
list-style: none;
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
caption, th, td {
text-align: left;
font-weight: normal;
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
blockquote, q {
quotes: "" "";
/* END CSS RESET */
html{ background-color:#262927; font-family:Tahoma, Arial, Helvetica, sans-serif}
#wrapper{margin:0px auto; margin-top:20px;background-color:#181B19; width:960px; border:1px solid #383C37;
font-family: 'Trebuchet MS', Tahoma, Arial, Helvetica, sans-serif;
font-size:0.7em;
line-height:1.4em;}
#header{
background-image:url('banner.jpg');
width:920px;
height:312px;
background-repeat:no-repeat;
padding-top:10px;
margin-top: 20px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
#menu {
height: 50px;
width: 960px;
margin-top: 0px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
background-image: url(menu_bg.jpg);
background-repeat: no-repeat;
padding-top: 12px;
#menu ul {
display: inline;
margin-left: 14px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #FFC315;
line-height: normal;
#menu li {
display: inline;
line-height: 100%;
#menu li a {
height: 50px;
border-right-width: 1px;
border-right-style: solid;
font-size: 14px;
font-weight: bold;
border-right-color: #ffc315;
color: #262927;
padding-right: 9px;
padding-left: 9px;
#menu a:link {
#menu a:hover {
color: #679800;
#menu li a:hover {
color: #679800;
#blog-title,#blog-description{margin-top:10px;margin-left:10px;}
#blog-title *{color:white; text-decoration:none}
#blog-description *,#blog-description{color:#DDDCD2;}
.sidebar{float:right; width:300px;margin-right:20px;margin-bottom:19px; color:#C1BCAC; background-color:#1f2320; border:1px solid #262927;padding:10px 0px 10px 0px;}
#container{float:left; width:580px; margin-left:20px; color:#C1BCAC; font-size:1.1em;margin-bottom:19px;}
#container blockquote{margin:0;padding:5px;background-color:#1f2320; border-top:1px solid #262927;border-bottom:1px solid #262927;}
#container blockquote blockquote{margin:0px 10px;padding:5px;background-color:#1f2320; border-top:1px solid #262927;border-bottom:1px solid #262927;}
.post {padding-bottom:30px;}
.clearboth{clear:both;}
.page-link{clear:both;width:100%;}
/* -----| Typography |--------------------------------------------------- */
a{color:white; text-decoration:none;}
a:hover{text-decoration:underline;}
h1, h2, h3, h4, h5, h6, #container blockquote, .entry-date,#wp-calendar caption {margin-bottom:0.8em; font-family: Georgia, 'Times New Roman', serif; font-weight: normal; margin-top:0px; padding-top:0px;line-height:1.3em;}
h1{
font-size:1.7em;
display: none;
h2{font-size:1.4em;}
h3, #wp-calendar caption{font-size:1.2em;}
p, #container li{margin-bottom:0.9em;margin-top:0.5em;line-height:1.7em;}
blockquote p{margin-bottom:0.5em;}
#container ul{ list-style-type:disc;padding-left:2em;}
#container ol{ list-style-type: decimal;padding-left:2em;}
.day{font-size:2em; color:white;}
#container h1{
color:#ffc315;
border-bottom:1px solid #262927;
margin-bottom:20px;
display:block;
#container h1 a,#container h2 a{
color:#ffce15;
padding-bottom:10px;
display:block;
text-decoration:none;
#container h1 a:hover,#container h2 a:hover{background-color:#262927;}
h2,h3,h4,h5,h6{
color:#ffce15;
.author{padding-bottom:5px;}
#container h2 a{border-bottom:1px solid #262927;}
#container .entry-meta{border-top:none;clear:both;line-height:1.4em;padding-bottom:10px;}
.entry-content{clear:both;}
/*DATE*/
.entry-date{float:right;border:1px solid #262927; background-color:#262927;padding:2px 5px 2px 5px;margin:0px 0px 10px 10px;}
.entry-date *{text-align:center;}
.sidebar ul, .sidebar ul li{list-style-type:none; padding:0;margin:0}
.sidebar ul{margin:0px 20px 0px 20px;}
.sidebar ul ul{margin:0px;}
.sidebar ul li{margin-bottom:15px;margin-top:15px;}
.sidebar ul li ul li{margin-bottom:5px;margin-top:5px;}
#wp-calendar, .calendar_wrap{width:100%; text-align:center;}
#wp-calendar caption{
color:#ffc315;
#wp-calendar td,#wp-calendar th{text-align:center;}
#wp-calendar th{font-weight:bold;}
#wp-calendar a{
color:#ffce15;
background-color:#181B19;
border:1px solid #262927;
display:block;
text-align:center
#wp-calendar a:hover{
color:#ffce15;
background-color:#262927;
display:block;
border:1px solid #262927;
text-decoration:none;
#footer{margin:10px auto; font-size:0.7em; padding:5px 0px 5px 0px; width:920px; color:#666666; text-align:right}
#footer a{color:#666666;}
.meta-sep{color:#333333;}
.nav-previous{float:left; width:45%;}
.nav-next{float:right; width:45%; text-align:right;}
.nav-previous a, .nav-next a{
display:block;
padding:3px;
color:#ffce15;
background-color:#1f2320;
border:1px solid #262927;
.nav-previous a:hover, .nav-next a:hover{ background-color:#262927; color:white; text-decoration:none;}
.navigation{margin-bottom:20px;margin-top:20px;}
.entry-meta{border-top:1px solid #262927;margin-top:20px;padding-top:10px;}
abbr{border:none;}
#s{border:1px solid #262927; background:#181B19; width:180px; color: #C1BCAC;padding:3px;}
#searchsubmit{border:1px solid #262927; width:50px;background:#262927; color:#C1BCAC;padding:3px;}
#searchsubmit:hover{
color:#ffce15;
border:1px solid #C1BCAC;
#noresults-s,#comment{border:1px solid #383C37; background:#262927; width:180px; color: #C1BCAC;padding:3px;}
#comment{width:450px;}
#noresults-searchsubmit{border:1px solid #262927; width:50px;background:#262927; color:#C1BCAC;padding:3px;}
#submit{border:1px solid #262927; background:#262927; color:#C1BCAC;padding:3px;margin-top:5px;}
#noresults-searchsubmit:hover{
color:#ffce15;
border:1px solid #C1BCAC;
#submit:hover{
color:#ffce15;
border:1px solid #C1BCAC;
.alignright{float:right; margin:10px 0px 5px 10px;}
.alignleft{float:left; margin:10px 10px 5px 0px;}
.aligncenter{margin:10px auto;}
.avatar{float:right; padding:5px; border:1px solid #999999; background-color:#FFFFFF;}

Similar Messages

CSS menu in flash site

Is there any way I can link my css built menu in the html of the page containing a flash movie, to parts of a flash movie once it's saved as a swf? Or would I need to split the content up and then create separate pages for it each page?
Many thanks

One way to approach this could be to use the ExternalInterface class where you could have javascript commands communicating with the swf. Search Google using terms like "AS3 ExternalInterface" and "AS3 ExternalInterface tutorial" to get details.

Banner on wordpress site doesn't show in safari

On my Wordpress site I have added a banner from an external link to be displayed on my frontpage. After saving it doesn't show the banner in Safari (but it does show it in Chrome and someone externally tested and said it showed in Explorer; so the html code must be right). The weird thing is it does show the image of the banner in the Snippet Editor. Anyone has an idea what causes this or how to fix this, I want all Safari users out there to be able to see and click on the banner as well!

Some browsers are far more forgiving of errors than Safari, and not everything works the same way in different browsers.
If the image is visible when you use Safari - Develop menu - Disable Styles, then it's presumably a CSS problem that only shows in Safari.
Do test with all Safari extensions switched off, since they can have unexpected results.

Firefox not displaying changes made to Wordpress site

I have been making changes to my style.css files for my wordpress sites. It appears my changes are visible on other computers. However on my MAC OS X the changes do not appear to show on Firefox. I can see the changes fine on Safari (on my MAC) I have cleared cache, I have reset Firefox, I have cleared DNS on my MAC and really have no idea where to go from here.
My preference to use Firefox as my working browser is to use Firebug.
Please advise what are my options...
I really look forward to some solution to this.
Regards
Karen Kirchmann

Hi Karen,
Can you give us a link to your website (if it's not private or protected by a password) to see if we can see if it's reproducible for us.
You can try these steps in case of issues with web pages:
You can reload web page(s) and bypass the cache to refresh possibly outdated or corrupted files.
*Hold down the Shift key and left-click the Reload button
*Press "Ctrl + F5" or press "Ctrl + Shift + R" (Windows,Linux)
*Press "Command + Shift + R" (Mac)
Clear the cache and cookies only from websites that cause problems.
"Clear the Cache":
*[[Image:new fx menu]] > Options/Preferences> Advanced > Network > Cached Web Content: "Clear Now"
"Remove Cookies" from sites causing problems:
*[[Image:new fx menu]] > Options/Preferences > Privacy > "Use custom settings for history" > Cookies: "Show Cookies"
----

Downloading and editing an existing WordPress site in Dreamweaver CS5.

Hello! New to the forums, here.
I'll try to be brief. I've got a WordPress site in-place at metalmeter.com that is hosted through HostGator. Basically, what I'm looking to do is get the site from the remote server and edit it in Dreamweaver CS5, previewing all changes on a local testing server before putting the updated contents back on the remote server.
Now, let me be clear: I've tried plenty of the tutorials. I've watched hours of videos. I still can't get it configured properly. I've got the FTP connection to the remote server running smoothly. I've got XAMPP installed. I'm having difficulties (and I apologize for being vague), and I just don't know where the problem is located. In my htdocs folder for XAMPP, I've got two subfolders 'metalmeter' for the remote server's downloaded contents, and 'wordpress' for the wordpress installation that every page seems to be pointing me toward. What confuses me is that when I try and open the uppermost index.php file on the remote server, the dynamically discovered content is not being displayed in the live view with my local testing server. I want to be viewing my existing WordPress site in its entirety exactly as I see it online while I'm editing it, and then pushing back updated files to the /public_html/ root directory of the remote server so that I can edit the site from my local client. I'm extremely new to Dreamweaver, so any help you could offer would be greatly appreciated.
If you know how to do exactly what I'm trying to do and have been successfully viewing and editing your existing WordPress site in Dreamweaver for upload, please take some time to explain the set-up. I'd be forever in your debt!

Nancy O. wrote:
I've been following this discussion for a while now and I don't understand why you hope to edit articles from DW. That's what the WP Admin panel is specifically designed for. Besides, you won't find your articles in any of the site files because they don't exist there.
I agree I don't see any reason to want to edit a Wordpress site in Dreamweaver. If you are using Wordpress then you may as well put Dreamweaver in the bin. Although people do actually want to edit and manipulate the design in Dreamweaver (including myself) and from what I've read its possible but I've never found a source which explains fully how to achieve this and those that I have it seems too much effort to even bother about.
I guess the Dreamweaver environment feels more like home and is more user friendly.
To put it another way, a typical WordPress installation contains around 800 files in some 80 folders. Those files don't contain any content, just a whole lot of PHP code. In fact, the only page most people ever see on your site is the index.php page which is dynamically created over & over by the server with content from the MySql and various include files.
For sure and that's why people who use Dreamweaver and feel the need to manipulate a Wordpress site in Dreamweaver because Wordpress is 'in vogue' get lost. Wordpress just containes a lot of pages with nothing to see apart from some php, many of who will not understand one jot.
Unless you're a coding guru, you should definitely NOT touch any of the core WP files as this could cripple your site. If you want to customize your Theme, look at the CSS and include files in your Themes folder. See Anatomy of a WordPress Theme:http://yoast.com/wordpress-theme-anatomy/
lol your not wrong there!
For a quick tip on Theming, open your remote site in Firefox equipped with the 'Web Developer Toolbar'. Edit CSS on screen. Save changes to your local site and upload it to the remote server. No testing server required.
Wordpress is Wordpress and Dreamweaver is Dreameaver. As far as I can make out the two don't mix.
Ideally you would just choose a Wordpress theme which most relates to the nice site you have designed in Fireworks of which you won't find any however goodthe themes are. Then manipulate the themes css that's if you can understand it. Even for a seasoned css expert its heavy going because everyone produces css differently to achieve the same results.
Leave Wordpress well anlone unles you're going to use it out of the box so to speak or as a web-developer don't mind a bit of reverse engineering.

I can log in to my wordpress site or rather I can get into the back end of my site but I can no longer see the edit button on Firefox

I use firefox 24 and it was working fine up until last weekend then I could no longer see the edit button on my wordpress site.
The thing is that I can get into my site via the site-wp-admin url as cookies allow me to do so but once I click on visit site then I cannot do anything because there are no edit buttons and not a log in button either so I do not even have the option of trying and failing or succeeding.
It is quite puzzling as it happened just recently.
I now have to use chrome to do all my editing since there is no problems on that browser

Let me start with the general advise...
When you have a problem with one particular site, a good "first thing to try" is clearing your Firefox cache and deleting your saved cookies for the site.
(1) Bypass Firefox's Cache
Use Ctrl+Shift+r to reload the page fresh from the server.
Alternately, you also can clear Firefox's cache completely using:
orange Firefox button (or Tools menu) > Options > Advanced
On the Network mini-tab > Cached Web Content : "Clear Now"
If you have a large hard drive, this might take a few minutes.
(2) Remove the site's cookies (save any pending work first). While viewing a page on the site, try either:
* right-click and choose View Page Info > Security > "View Cookies"
* Alt+t (open the classic Tools menu) > Page Info > Security > "View Cookies"
In the dialog that opens, you can remove the site's cookies individually.
Then try reloading the page. Does that help?

Help Please On My New WordPress Site

Please Help with my Wordpress Site? I have a big problem with slider pics not showing correctly and blogs missing on menu. Can anyone please help?
Site is www.azbodybuilding.com

There are tutorial websites available on the web, you can search out for the solution, as of now, have read a post recently.. http://blog.pixelcrayons.com/wordpress/beginners-guide-to-launch-a-wordpress-plugin/
Hope this helps you.. Or you can hire wordpress developers for the same.

In the spry css menu, how do i know what does what?

I have two questions,
(1) In the spry css menu, is it just a case of trial and error to find out what each one does or is there a recognisable freature of each line to tell me what each one does, there are so many of them and most of them are alike. I cant help thinking there is a simple way of identifying what each one does without having to search around in the dark until i stumble on the right one that dose what i am trying to tweak in the appearance of the menu bar.
(2) When I am inserting the data for each of the navigation links when i first insert the spry menu I.E.... HOME...ABOUT...COURSES....CONTACT and the list items under "COURSES" link successfully to each page when clicked in the browser. When i click the "HOME" button, a drop down menu of the navigation options ( HOME...ABOUT...COURSES...CONTACT) appears under it. How do I eliminate this when i insert the spry menu bar so it does not appear in the browser.

Have a look here http://www.dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php#one
Have proper markup.
Although the above are true answers to your questions, I have reason to believe that it will not satisfy you. Remember that these are user to user forums and that we do not have much time to spare. We can answer most specific questions, but do not have the time to answer generic questions to their fullest extent.
What I am trying to say is, please supply a link to your site with a specific question and we will help where we can.
Gramps

CSS Menu hover issue in IE7

Hi all,
I've created a CSS based drop down menu for this site:
http://www.elizabethgorcey.com.
In IE7 the menus don't drop down. They pop up and cover the parent
item they are supposed to descend from. Can anyone tell me why this
is and how to fix it?
Thanks,
John

On Sat, 19 Jul 2008 01:21:08 +0000 (UTC), "John Ciccolini"
<[email protected]> wrote:
>Hi all,
> I've created a CSS based drop down menu for this site:
>
http://www.elizabethgorcey.com.
In IE7 the menus don't drop down. They pop up
>and cover the parent item they are supposed to descend
from. Can anyone tell
>me why this is and how to fix it?
> Thanks,
> John
Seems to work ok in IE7 for me. But not in IE6 ! ?
works ok in Safari & Opera - and FF of course
I popped the code into Dw and ran the compatibility check and
says
there is a problem with IE6 - Expanding box problem
Googled it - and not sure that is 100% correct - but it might
be a
steer........ ?
minor css issue - which I doubt affects the problem ?
#breastpumpposter {
position: relative;
top: 0px;
padding-top: -3.5em;
margin-left: 20px;
padding-bottom: 10px;
margin-bottom: 20px;
padding-top cannot be negative
~Malcolm~*...
~*

Css menu on hover is wrong height

Hi Everyone,
I usually use spry so not versed in building a CSS menu but thought I'd give it a go on this simple site. I have a full width 1024 bar. No dropdowns. A vertical line between central menu items. The bar needs to have a fade from left to right so I have put this as a backgroundimage div. So far so good. Created my menu items and after much trial and error managed to get the positioning just about right, and the hover changes right. BUT, when you hover, the background needs to change to white background (so no longer looking at the gradient bar beneath it), and text to blue. Works perfectly EXCEPT that the size of the 'white' over is bigger (rises above and below the div) and I am trying to get it to be the same height as everything should be the same.
I have tried putting a height; attribute on everything but it makes no difference. The bar is 41px high. Everything else should also be 41px high. I added a 10px padding which worked in lowering the text in the bar to be more central, but I don't think this has caused the problem I'm getting as that was there before and nothing I try seems to make it size correctly.
I know it's somethign simple that someone could fix in a jiffy and hoping you're out there! Many thanks.
Page is displayed here http://www.charlieapple.co.uk/hamilton/index2.html
css is here
@charset "utf-8";
#wrapper {
    background-color: #CAD0D5;
#container {
    background-color: #CFF;
    width: 1024px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
#banner {
    height: 179px;
    width: 1024px;
#leftbody {
    padding-top: 20px;
#navbar {
    background-image: url(images/blue-grad-bar.png);
    height: 41px;
    width: 1024px;
#navigation {
    font-family: Calibri;
    background-image: url(images/blue-grad-bar.png);
    text-decoration: none;
    color: #FFF;
    padding-top: 10px;
    height: 31px;
#navigation ul
    margin: 0;
    padding: 0;
    text-decoration: none;
    height: 41px;
#navigation ul li
    list-style-type: none;
    display: inline;
    text-decoration: none;
    height: 41px;
#navigation ul li a {
    text-decoration: none;
    font-size: 16px;
    color: #FFF;
    height: 41px;
    padding-top: 20px;
    padding-right: 15px;
    padding-bottom: 20px;
    padding-left: 15px;
#navigation a:hover {
    color: #354777;
    text-decoration: none;
    background-color: #FFF;
    height: 31px;
#navigation li:before {
content: "      |       ";
#navigation li:first-child:before {
content: none;
#leftcol {
    float: left;
    width: 640px;
    margin-left: 27px;
#rightcol {
    background-color: #CCF;
    float: right;
    width: 307px;
    margin-right: 24px;
    margin-left: 26px;
#pagename {
    font-family: Cambria, "Bell MT";
    font-size: 30px;
    color: #354777;
    width: 640px;
    margin-top: 10px;
    border-bottom-width: thick;
    border-bottom-style: dotted;
    border-bottom-color: #354777;
    padding-bottom: 10px;

Thanks Nancy O, I've made this change and it has fixed the height problem but now I have a new problem in the 'home' hover is completely weird! I'm copying the css below so you can see the changes I've made that you suggested and previously to that made the adjustments that Murray suggested. Could you also tell me if it's possible to get the hover for each button so the white stretches from the vertical lines left-right? many thanks.
@charset "utf-8";
#wrapper {
    background-color: #CAD0D5;
#container {
    background-color: #CFF;
    width: 1024px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
#banner {
    height: 179px;
    width: 1024px;
#leftbody {
    padding-top: 20px;
#navbar {
    background-image: url(images/blue-grad-bar.png);
    height: 41px;
    width: 1024px;
#navigation {
    font-family: Calibri;
    background-image: url(images/blue-grad-bar.png);
    text-decoration: none;
    color: #FFF;
#navigation ul
    margin: 0;
    padding: 0;
    text-decoration: none;
    height: 41px;
    overflow:hidden;
#navigation ul li
    list-style-type: none;
    height: 41px;
    float:left;
#navigation ul li a {
    text-decoration: none;
    font-size: 16px;
    color: #FFF;
    line-height: 41px;
    padding: 41px 20px;
#navigation a:hover {
    color: #354777;
    text-decoration: none;
    background-color: #FFF;
    height: 31px;
#navigation li:before {
content: "      |       ";
#navigation li:first-child:before {
content: none;
#leftcol {
    float: left;
    width: 640px;
    margin-left: 27px;
#rightcol {
    background-color: #CCF;
    float: right;
    width: 307px;
    margin-right: 24px;
    margin-left: 26px;
#pagename {
    font-family: Cambria, "Bell MT";
    font-size: 30px;
    color: #354777;
    width: 640px;
    margin-top: 10px;
    border-bottom-width: thick;
    border-bottom-style: dotted;
    border-bottom-color: #354777;
    padding-bottom: 10px;

Link BC blog to html/css menu

Re the Blog
Client site is not using BC Dynamic Menus - I'm using html/css menu.
How can I link the menu item to the BC Blog in Admin or DW
Appreciate all your support
Will

Hi
Is this what you're looking for: http://screencasteu.worldsecuresystems.com/AP/menu.swf
Here's the kb on this as well: http://helpx.adobe.com/business-catalyst/partner/create-menu.html
Kind Regards,
Alex

Does Firefox now "read a page ahead" for WordPress sites?

Hi there,
I've just noticed something odd in Firefox 26.0. Using Fiddler, I see that when I am browsing WordPress sites, the browser is requesting an additional page (only the source page, not the links on the page) to the one I am actually looking at. In effect it appears to be browsing "ahead" one page along the Wordpress menu, storing this page in case that happens to be the one I will look at next. This activity also happens in Safe Mode and does not happen with the latest version of Chrome.
Is this a new feature and, if so, how do I switch it off?

That did the trick cor-el, many thanks!
For anyone else reading this thread, the following article might prove useful: http://www.ghacks.net/2013/04/27/firefox-prefetching-what-you-need-to-know/
It appears that the WordPress page isn't using rel="prefetch" as described in the above article, but instead FF is prefetching the page indicated by rel="next".

Dropdown menu on my site is not working correctly anymore

I use a CSS-based dropdown menu that has a 1 pixel white frame. In FF3.6 and in IE, Safari, Chrome it is working as dedired, but in FF4 the menu disappears as soon as I hover on the white frame. This normally only happens if I leave the area of the menu.

Problem still exists with safemode on a freshly installed 4.0b11. The installation was done in parallel to 3.6.12.
I have two sites with exactly the same css menu. The one written in xhtml 1.0 works correct, but the one written in html 4.01 has the problem. Both sites validate with no errors also for css.
When I move the mouse over the dropdown menu on my site the menu disappears when I'm exactly over the white frame.

Inserting iFrame and css menu script

Something in this isn't working.
I've downloaded the css menuscript from css menu generator, uploaded the "menu" folder to the root folder www.widman.biz/Corvair
then put the following in the html widget
Time for help.
this is what I'm getting instead of a menu across the top where the menu should be
"The requested URL /Corvair/English//Englishfiles/widget0markup.html was not found on this server."
I uploaded the "menu" folder from CSS menu maker to the "Corvair" folder of www.widman.biz
This is what I put in the snippet:
<iframe src="http://www.widman.biz/Corvair/menu/menu_style.css" frameborder="0" width="775" height="90" scrolling="no"></iframe>
<textarea>
<head>
<link rel="stylesheet" type="text/css" href="/menu/menu_style.css" />
</head>
followed by all the rest of the text generated by the css menu site, which if I post here actually ends up as a text menu instead of the script. (see other post
(http://discussions.apple.com/thread.jspa?threadID=2209476&tstart=25)
I'm supposed to end up with a drop down menu across the top
I'm guessing I'm not putting the script in right, or what?

There's a lot wrong with [your HTML Snippet|http://www.widman.biz/Corvair/English//Englishfiles/widget1markup.html]:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><body></p>
<textarea>
<head>
<link rel="stylesheet" type="text/css" href="http://www.widman.biz/Corvair/menu/menu_style.css" />
</head>
<More code that should be displayed but isn't.>
The body, p and textarea elements should not be there. Plus a body element in the place where it should be is missing.
[Here's the page you want.|http://www.wyodor.net/_Discussions/widman.html] Save it as HTML and copy/paste the entire code in the HTML Snippet.
[Using the HTML Snippet in iWeb|http://www.wyodor.net/blog/archives/2009/07/entry_213.html]
Paying attention to detail is the name of the game.

CSS Menu issues

hi.
Can anyone help tell me why my menu is displaying like shown in the picture?
* I want About Us and Services to be the same height as home and contact
* The sub menus are all weird, as you can see there are three additional items that should be showing but they end up as little grey boxes. There are no sub sub menus.
I have naughtily copied and chopped a menu from another site I did a while back so is probably random bits in there (sub sub menu bits). I don't do sites very often as I am not very good (as you can tell) and have been messing for 90 mins now and getting hardly nowhere so any pointers would be good.
My site will be a fluid width so it adapts to different devices (to a fashion!)
CSS:
@charset "utf-8";
#nav, #nav ul{
    font:Arial, Helvetica, sans-serif;
    font-size:95%;
    align:center;
    padding:0;
    list-style-type:none;
    list-style-position:outside;
    position:relative;
    /*line-height:30px;*/
    width: 99%;
    Z-index:1000;
    border: 1px solid #000;
#nav a:link, #nav a:active, #nav a:visited{
    display:block;
    color:#000;
    text-decoration:none;
    background:#E0E0E0;
    z-index:1000;
    padding: 8px 5px;
    line-height: 30px;
#nav a:hover{
    background:#CCC;
    color:#000;
    z-index:1000;
#nav li{
    float:left;
    position:relative;
    width:24%;
    background: #CCC;
    z-index:1000;
    text-align: center;
    border: 1px solid #000;
#nav ul {
    position:absolute;
    width:25%;
    top:30px;
    left:-1em;
    display:none;
    z-index:1000;
#nav li ul a{
    width:12em;
    float:left;
    z-index:1000;
#nav ul ul{
    top:auto;
    height:inherit
    z-index:1001;
#nav li ul ul {
    left:12em;
    margin:-1px 0 0 10px;
    z-index:1001;
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
    display:none;
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
    display:block;
Thanks in advance.

<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>CSS Menu</title>
<style>
    padding:0;
    margin:0;
     -moz-box-sizing:border-box;
     -webkit-box-sizing:border-box;
     box-sizing:border-box;
nav ul {
    list-style-type:none;
    height:0px;
    min-width:440px;
nav li {
    width:25%;
    background-color:gray;
    float:left;
    min-width:100px;
nav a {
    display:block;
    height:100%;
    width:100%;
    padding:5px 8px;
    text-decoration:none;
    color:white;
nav ul li ul {
    display:none;
nav ul li:hover {
    background-color:#B7B7B7;
nav ul li:hover ul {
    display:block;
nav ul li ul li {
    float:none;
    width:100%;
</style>


<title>Kutbax Arboricultural Contractors</title>



<style type="text/css">

</style><link href="../kutbaxmenu.css" rel="stylesheet" type="text/css" />
<link href="../kutbaxmenu.css" rel="stylesheet" type="text/css" />
</head>
<body class="oneColLiqCtrHdr">
<div id="header">
    <p class="HEADER"><img src="../Kutbax Logo.jpg" width="100" height="97" hspace="10" vspace="5" align="left" /></p>
    <p class="HEADER">KUTBAX</p>
    <p class="HEADER"><strong> ARBORICULTURAL CONTRACTORS</strong><strong></strong></p>
    <p class="a2">Telephone: 01827 874818 Email: <a href="mailto:[email protected]">[email protected]</a></p>

</div>
</head>
<div><body>
<p> </p>
<div> <nav>
    <ul>
      <li><a href="../index.html">Home</a></li>
      <li><a href="#">About Us</a>
        <ul>
          <li><a href="../company.html">Company</a></li>
          <li><a href="../insurance.html ">Insurance</a></li>
          <li><a href="../policies.html ">Policies</a></li>
          <li><a href="../machinery.html">Machinery</a></li>
          <li><a href="../workscompleted.html ">Works Completed</a></li>
        </ul>
      </li>
      <li><a href="#">Services</a>
        <ul>
          <li><a href="../treesurgery.html">Tree Surgery</a></li>
          <li><a href="../japaneseknotweed.html ">Japanese Knotweed</a></li>
          <li><a href="../siteclearance.html ">Site Clearance</a></li>
          <li><a href="../treeplanting.html">Tree Planting</a></li>
        </ul>
      </li>
      <li><a href="../contact.html">Contact Us</a></li>
    </ul>
    </nav>
</div>

<div id="mainContent">
    <h1> Content </h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
    <h2>H2 level heading </h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
    
</div>

<div id="footer">
    <p align="center"><span class="bottomtext">© Copyright 2014 - Kutbax Arboricultural Contractors Ltd - UK Reg No. 06475048 -   All Rights Reserved<br />
Kutbax House, 134 Hurley Common, Hurley, Atherstone, CV9 2LR</span></p>
    <div align="center">
      
    </div>
</div>
</div>
</body>
</html>

CSS Menu in Wordpress site

Similar Messages

Maybe you are looking for