White rectangle in nav bar

I believe this question was answered some time ago, but it didn't pertain to me at the time. On two pages (page 4 and 5) of my web site for grandmacs.org, there is a white rectangle in the nav bar - it is not clickable when I try to remove it. I have even deleted the page and started over with a new page and it still shows up!
Has anyone else had this happen to them? Suggestions and solutions, please.

What you see is part of the background because the links area moves down when you add more pages.
From a design perspective you have too many links at the top of the page. It looks ugly.
Perhaps you can add Sites and link to them from your main page.
It not technical, but organisational.
Or use another template that does not suffer from this anomaly.

Similar Messages

On iPod & iPad, site with scrolling is flush left, white space on right & nav bar disabled

I am having an issue with a site I am creating.
I noticed the site displays differently on iPod. When the site address begins with nothing (no http://) - it displays OK. (Although I am trying to make it more centered).
But when the site address begins with http:// - it displays far left - cutting off the text on left. And it shows a wide amount of white space on the right.
I am using Safari on the iPod.
How can I correct this? How will my site look when it loads to the final web host?
You can see the two versions here:
With http: http://jeannordstrom-landscape.businesscatalyst.com
Without http: jeannordstrom-landscape.businesscatalyst.com
Must be typed exactly like this in address on iPod.
It has scrolling effects. I want to create one site that can be viewed on all sizes. I know it won't pinch to zoom on small devices. It displays OK on a computer and iPad using Safari, Firefox and Chrome.
Any comments welcome. This is driving me crazy.
Message was edited by: scvdesigns
This further defines the problem: What I found on iPad & iPod, was that the site initially loads fine using the link: jeannordstrom-landscape.businesscatalyst.com. However, if I use the nav bar to navigate to another section, like contacts. Then after I am there, I press the reload page icon on the browser, I get a hiccup. The nav bar then will not take me back up or anywhere. It becomes disabled. And the page appears flush left with text cut off. And there's white space on the right. Does anyone know what the problem could be?

See if either of the two options that I've suggested in your other thread would work for you.

How do I remove the white rectangle that appears when you hover over a nav button or email link?

In properties I have link color white, visited blank, rollover blank and active blank. When viewed in chrome, IE or firefox a white rectangle appears when you hover over each link. What is the procedure for removing this?

This is my CSS
.gridContainer {
          width: 89.0217%;
          max-width: 1232px;
          padding-left: 0.4891%;
          padding-right: 0.4891%;
          margin: auto;
          clear: none;
          float: none;
          margin-left: auto;
          color: #FFFFFF;
          background-color: #0033FF;
          border-radius: 15px;
          padding-top: 2%;
          padding-bottom: 2%;
#div1 {
          width: 100%;
          padding-top: 2%;
          background-color: #FFFFFF;
#Navdiv {
width: 24.1758%;
#Intro1 {
width: 74.7252%;
margin-left: 1.0989%;
clear: none;
#Intro2 {
          width: 74.7252%;
          margin-left: 1.0989%;
          clear: none;
          text-align: center;
#Intro3 {
width: 49.4505%;
#Intro4 {
width: 49.4505%;
margin-left: 1.0989%;
clear: none;
#Intro5 {
width: 100%;
#Footer1 {
          width: 100%;
          text-align: center;
          padding-top: 2%;
          padding-bottom: 2%;
#Footer2 {
          width: 100%;
          text-align: center;
          padding-top: 2%;
          padding-bottom: 2%;
#Footer3 {
          width: 100%;
          text-align: center;
          padding-top: 2%;
          padding-bottom: 2%;
#Footer4 {
          text-align: center;
          padding-bottom: 2%;
#Navheader {
          margin-left: 0;
          clear: both;
          width: 100%;
          text-align: center;
          background-image: -webkit-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(0,51,255,1.00) 100%);
          background-image: -moz-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(0,51,255,1.00) 100%);
          background-image: -o-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(0,51,255,1.00) 100%);
          background-image: linear-gradient(180deg,rgba(255,255,255,1.00) 0%,rgba(0,51,255,1.00) 100%);
.Ulnav {
width: 100%;
margin-left: 0;
.Listnav {
          width: 100%;
          margin-left: 0;
          text-align: center;
          background-color: #0033FF;
          padding-top: 1%;
          padding-bottom: 1%;
          color: #0033FF;
#spacer1 {
width: 100%;
margin-left: 0;
clear: none;
#spacer2 {
.zeroMargin_desktop {
margin-left: 0;
.hide_desktop {
display: none;

I have created a site with iWeb. I have replaced the iWeb Nav bar with a vertical one I made myself. Problem is, my top button disables itself if it overlaps into the "hidden" nav bar area. I can cmd click and drag it into this area, but then all the rest

I have created a site with iWeb. I have replaced the iWeb Nav bar with a vertical one I made myself. Problem is, my top button disables itself (and the animation doesn't work) if it overlaps into the "hidden" nav bar area (indicated by a blue rectangle). I can cmd click and drag it into this area, but then all the rest of my site is pushed down the page. Don't know what to do about this. I don't know how to bring the rest of the page up without dragging it also into the designated nav bar area. Also, by doing this, is it affecting my site in ant way? see my site here at www.steveburrowsimages.com
The home page is with it all draged into the nav bar area and the about page is with is outside the nav bar area (notice that the top button does not animate or work as a button.
Getting confused here. Anyone got any ideas?

Well, you made a good start with SEO by getting rid of the iWeb default navigation since it doesn't help the spiders and, out there in the real world, there are more people than you would think with javascript turned off in their browsers.
One of the downsides of iWeb is that it doesn't allow for the alt attribute in the img tag. Its well worth adding these to give you extra keywords even if you have captioned all your images. Use iWeb SEO Tool for this...
http://www.iwebformusicians.com/Search-Engine-Optimization/Tags.html
iWeb, just like most drag and drop software, creates a huge amount of code which causes the pages to load slowly in the browser. Running you files through an optimizer will help to reduce this problem and further reduce the size of image files even beyond the initial optimization you do before loading them into iWeb...
http://www.iwebformusicians.com/Search-Engine-Optimization/Optimize.html

Spry Navigation 2.0 - Spacing for div for nav bar

Hello:
I am once again working on an navigation bar that renders somewhat differently in various browsers (problems with IE 8 & 6). The navigation is to fit into a div that is bordered by a gold coloured border top and bottom (top border is attached to the header). The problem is one of calculating the appropriate height based on the settings for the custom nav css file. I have taken the font size, padding (top and bottom) and border (top and bottom) together with padding on the overall container of the nav bar. Accordingly I have set the height of the navigation container div at 41px. In most browsers this works fine, however there are some glitches that cause excess white space to appear either above the navigation bar or below it, thus separating the border from the navigation bar.
The url for the site is http://socls.org/PCLC-testing/CorePages.html
I have included the css for the custom nav settings, and the css relating to the navigation in the general css file as well as a screen shot of IE 8.
Thanks for any help in advance.
Steve.
The custom nav css is as follows:
@charset "UTF-8";
/* CSS Document */
/* BeginOAWidget_Instance_2141544: #MenuBar */
/* Settable values for skinning a Basic menu via presets. If presets are not sufficient, most skinning should be done in
    these rules, with the exception of the images used for down or right pointing arrows, which are in the file SpryMenuBasic.css
     These assume the following widget classes for menu layout (set in a preset)
    .MenuBar - Applies to all menubars - default is horizontal bar, all submenus are vertical - 2nd level subs and beyond are pull-right.
    .MenuBarVertical - vertical main bar; all submenus are pull-right.
    You can also pass in extra classnames to set your desired top level menu bar layout. Normally, these are set by using a preset.
    They only apply to horizontal menu bars:
        MenuBarLeftShrink - The menu bar will be horizontally 'shrinkwrapped' to be just large enough to hold its items, and left aligned
        MenuBarRightShrink - Just like MenuBarLeftShrink, but right aligned
        MenuBarFixedLeft - Fixed at a specified width set in the rule '.MenuBarFixedLeft', and left aligned.
        MenuBarFixedCentered - - Fixed at a specified width set in the rule '.MenuBarFixedCentered',
                        and centered in its parent container.
        MenuBarFullwidth - Grows to fill its parent container width.
    In general, all rules specified in this file are prefixed by #MenuBar so they only apply to instances of the widget inserted along
    with the rules. This permits use of multiple MenuBarBasic widgets on the same page with different layouts. Because of IE6 limitations,
    there are a few rules where this was not possible. Those rules are so noted in comments.
#MenuBar {
    background-color:#7888c7;
    font-family: Arial, Helvetica, sans-serif; /* Specify fonts on on MenuBar and subMenu MenuItemContainer, so MenuItemContainer,
                                                MenuItem, and MenuItemLabel
                                                at a given level all use same definition for ems.
                                                Note that this means the size is also inherited to child submenus,
                                                so use caution in using relative sizes other than
                                                100% on submenu fonts. */
    font-weight: normal;
    font-size: 17px;
    font-style: normal;
    padding:0;
    border-color: #4457a2 #333366 #2c3868 #4457a2;
    border-width:3px;
    border-style: none none none none;
/* Caution: because ID+class selectors do not work properly in IE6, but we want to restrict these rules to just this
widget instance, we have used string-concatenated classnames for our selectors for the layout type of the menubar
in this section. These have very low specificity, so be careful not to accidentally override them. */
.MenuBar br { /* using just a class so it has same specificity as the ".MenuBarFixedCentered br" rule bleow */
    display:none;
.MenuBarLeftShrink {
    float: left; /* shrink to content, as well as float the MenuBar */
    width: auto;
.MenuBarRightShrink {
    float: right; /* shrink to content, as well as float the MenuBar */
    width: auto;
.MenuBarFixedLeft {
    float: left;
    width: 80em;
.MenuBarFixedCentered {
    float: none;
    width: 80em;
    margin-left:auto;
    margin-right:auto;
.MenuBarFixedCentered br {
    clear:both;
    display:block;
.MenuBarFixedCentered .SubMenu br {
    display:none;
.MenuBarFullwidth {
    float: left;
    width: 100%;
/* Top level menubar items - these actually apply to all items, and get overridden for 1st or successive level submenus */
#MenuBar .MenuItemContainer {
    padding: 0px 0px 0px 0px;
    margin: 0;     /* Zero out margin on the item containers. The MenuItem is the active hover area.
                For most items, we have to do top or bottom padding or borders only on the MenuItem
                or a child so we keep the entire submenu tiled with items.
                Setting this to 0 avoids "dead spots" for hovering. */
#MenuBar .MenuItem {
    padding: 0px 24px 0px 0px;
    background-color:#7888c7;
    border-width:3px;
    border-color: #8899cf #566a99 #333366 #8899cf;
    border-style: solid solid solid solid;
#MenuBar .MenuItemFirst {
    border-style: solid solid solid solid;
#MenuBar .MenuItemLast {
    border-style: solid solid solid solid;
#MenuBar .MenuItem .MenuItemLabel{
    text-align:center;
    line-height:1.4em;
    color:#331e0d;
    background-color:#7888c7;
    padding: 6px 15px 6px 39px;
    width: 10em;
    width:auto;
.SpryIsIE6 #MenuBar .MenuItem .MenuItemLabel{
    width:1em; /* Equivalent to min-width in modern browsers */
/* First level submenu items */
#MenuBar .SubMenu .MenuItem {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 14px;
    font-style: normal;
    background-color:#7888c7;
    padding:0px 2px 0px 0px;
    border-width:3px;
    border-color: #8899cf #333366 #333366 #8899cf;
    /* Border styles are overriden by first and last items */
    border-style: solid solid solid solid;
#MenuBar .SubMenu .MenuItemFirst {
    border-style: solid solid solid solid;
#MenuBar .SubMenu .MenuItemFirst .MenuItemLabel{
    padding-top: 6px;
#MenuBar .SubMenu .MenuItemLast {
    border-style: solid solid solid solid;
#MenuBar .SubMenu .MenuItemLast .MenuItemLabel{
    padding-bottom: 6px;
#MenuBar .SubMenu .MenuItem .MenuItemLabel{
    text-align:center;
    line-height:1em;
    background-color:#7888c7;
    color:#331e0d;
    padding: 6px 12px 6px 5px;
    white-space:normal;
    width: 210px;
/* Hover states for containers, items and labels */
#MenuBar .MenuItemHover {
    background-color: #3b4b8d;
    border-color: #5266b7 #14192f #14192f #5266b7;
#MenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
    background-color: #3b4b8d; /* consider exposing this prop separately*/
    color: #fefefe;
#MenuBar .MenuItemHover .MenuItemLabel{
    background-color: #3b4b8d;
    color: #fefefe;
#MenuBar .SubMenu .MenuItemHover {
    background-color: #3b4b8d;
    border-color: #5266b7 #14192f #14192f #5266b7;
#MenuBar .SubMenu .MenuItemHover .MenuItemLabel{
    background-color: #3b4b8d;
    color: #fefefe;
/* Submenu properties -- First level of submenus */
#MenuBar .SubMenuVisible {
    background-color: #7888c7;
    min-width:0%; /* This keeps the menu from being skinnier than the parent MenuItemContainer - nice to have but not available on ie6 */
    border-color: #3b4b8d #3b4b8d #3b4b8d #3b4b8d;
    border-width:0px;
    border-style: none none none none;
#MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
    top: 100%;    /* 100% is at the bottom of parent menuItemContainer */
    left:0px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
                    and your personal taste.
                    0px will left align the dropdown with the content area of the MenuItemContainer. Assuming you keep the margins 0
                    on MenuItemContainer and MenuItem on the parent
                    menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align
                    the dropdown with the left of the menu item label.*/
    z-index:10;
#MenuBar.MenuBarVertical .SubMenuVisible {
    top: 0px;
    left:100%;
    min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse */
/* Submenu properties -- Second level submenu and beyond - these are visible descendents of .MenuLevel1 */
#MenuBar .MenuLevel1 .SubMenuVisible {
    background-color: #7888c7;
    min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse*/
    top: 0px;    /* If desired, you can move this down a smidge to separate top item''s submenu from menubar -
                that is really only needed for submenu on first item of MenuLevel1, or you can make it negative to make submenu more
                vertically 'centered' on its invoking item */
    left:100%; /* If you want to shift the submenu left to partially cover its invoking item, you can add a margin-left with a
                negative value to this rule. Alternatively, if you use fixed-width items, you can change this left value
                to use px or ems to get the offset you want. */
/* IE6 rules - you can delete these if you do not want to support IE6 */
/* A note about multiple classes in IE6.
* Some of the rules above use multiple class names on an element for selection, such as "hover" (MenuItemHover) and "has a subMenu" (MenuItemWithSubMenu),
* giving the selector '.MenuItemWithSubMenu.MenuItemHover'.
* Unfortunately IE6 does not support using mutiple classnames in a selector for an element. For a selector such as '.foo.bar.baz', IE6 ignores
* all but the final classname (here, '.baz'), and sets the specificity accordingly, counting just one of those classs as significant. To get around this
* problem, we use the plugin in SpryMenuBarIEWorkaroundsPlugin.js to generate compound classnames for IE6, such as 'MenuItemWithSubMenuHover'.
* Since there are a lot of these needed, the plugin does not generate the extra classes for modern browsers, and we use the CSS2 style mutltiple class
* syntax for that. Since IE6 both applies rules where
* it should not, and gets the specificity wrong too, we have to order rules carefully, so the rule misapplied in IE6 can be overridden.
* So, we put the multiple class rule first. IE6 will mistakenly apply this rule. We follow this with the single-class rule that it would
* mistakenly override, making sure the misinterpreted IE6 specificity is the same as the single-class selector, so the latter wins.
* We then create a copy of the multiple class rule, adding a '.SpryIsIE6' class as context, and making sure the specificity for
* the selector is high enough to beat the single-class rule in the "both classes match" case. We place the IE6 rule at the end of the
* css style block to make it easy to delete if you want to drop IE6 support.
* If you decide you do not need IE6 support, you can get rid of these, as well as the inclusion of the SpryMenuBarIEWorkaroundsPlugin.js script.
* The 'SpryIsIE6' class is placed on the HTML element by the script in SpryMenuBarIEWorkaroundsPlugin.js if the browser is Internet Explorer 6. This avoids the necessity of IE conditional comments for these rules.
.SpryIsIE6 #MenuBar .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector */{
    background-color: #3b4b8d; /* consider exposing this prop separately*/
    color: #fefefe;
.SpryIsIE6 #MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector */{
    background-color: #3b4b8d; /* consider exposing this prop separately*/
    color: #fefefe;
.SpryIsIE6 #MenuBar .SubMenu .SubMenu /* IE6 selector */{
    margin-left: -0px; /* Compensates for at least part of an IE6 "double padding" version of the "double margin" bug */
/* EndOAWidget_Instance_2141544 */
The css for the page in general (as it relates to the navigation bar) is:
#main_nav_contents {
    width: 960px;
    height: 41px;
    position: relative;
    padding-left:0px;
    border-bottom: 3px solid #C56F2C;

Hello Again:
Based on some recalculations I realized that with a font size of 17px, 6px padding (top and bottom = 12px) and 3 px border (top and bottom =6) that the height of the nav container should be 35px; I have change the general style sheet to reflect that change, but still have rendering problems accross browsers.
To perhaps add clarity, the following is a screen shot of how it appears in most browsers, and how I intended it should look.
Thanks (again) in advance for any help that can be offered. Steve.

Nav bar question

I have built the first handful of pages for a site using DW CS4. I have a couple of glitches that I can't seem to get sorted out.
Here is the site:
http://www.prospectrealty1.fatcow.com/index.html
First question is regarding the main (in the header) navigation bar. I created it by floating css background images and using a:link and a:hover and a:active. It works fine (in firefox) except for one thing. I want the links to be the active(orange) color when the user is on the associated page. So the link for FEATURED is white when up, has the shadow effect on hover and would be the Orange color on down. I can't figure out how to get the down state to work.
Second problem is with the horizontal ul at the very top. It looks fine in Firefox but in IE 8 the right most email link gets put on a second/lower line and that's not good plus it seems to be messing up the nave bar at the bottom of the header.
Any help with this will be very much appreciated.
Thanks!

markf12 wrote:
I have built the first handful of pages for a site using DW CS4. I have a couple of glitches that I can't seem to get sorted out.
Here is the site:
http://www.prospectrealty1.fatcow.com/index.html
First question is regarding the main (in the header) navigation bar. I created it by floating css background images and using a:link and a:hover and a:active. It works fine (in firefox) except for one thing. I want the links to be the active(orange) color when the user is on the associated page. So the link for FEATURED is white when up, has the shadow effect on hover and would be the Orange color on down. I can't figure out how to get the down state to work.
Second problem is with the horizontal ul at the very top. It looks fine in Firefox but in IE 8 the right most email link gets put on a second/lower line and that's not good plus it seems to be messing up the nave bar at the bottom of the header.
Any help with this will be very much appreciated.
Thanks!
Hello,
Your CSS is a little out of whack!
To create an active tab/link, make a copy of the portion of your CSS that fires the rollover(hover).
Change the color to orange and name the CSS(selector) like this:
.activeLink and place it in the link of the current page like this, than add the style to this selector that you want the link to have.
Based on your CSS, if it does not work, you should use the CSS !important declaration.
<li id="top-home" class=".activeLink"><a href="/index.html"></a></li>, meaning one per page.
Remember add this style only to the the current page.
There are two reasons why the link above could drop. 1). Not enough space for the amount of text you have, eg: too much margin or padding. 2). If the text are floated, you must clear them or at least clear the email so that it does not wrap around the previous text. Example: Clear none or clear right.
Chow!

Nav bar doesnt line up in browsers - help please

Hi All
Well I spent another day trying to get this to look the way I
want to and again I just cant seem to do what I thought would be an
easy thing,
I have upload so you can see this
http://homepage.ntlworld.com/j.beauchamp/test.htm
Ok in firefox it puts the nav bar exactly where I want it -
the nav bar vertcial is centered with the blue line, but if you
look at this in the dreaded Internet explorer 6 to which if I met
the person /s who invented this (mentioning no names ) i would
probably give them a good telling off. - the nav bar is slighty
lower - and nearly in the blue rectangle
I know there is a lot of <p>'s - its just to show you
what this is doing
I have tried making it an absoloute div - the results are the
same. Please if there is anyone out there who knows how to rectify
this I would be extremely grateful.
The css is this
/* CSS Document */
html, body, ul, ol, li, p, hi, h2, h3, h4, h5, h6, form,
fieldset {
margin: 0;
padding: 0;
border: 0;
body {
font: 100.01% Arial, Helvetica, sans-serif;
color: #666666;
background: #fff;
margin: 0px;
margin-top:10px;
padding: 0px;
text-align: center;
#wrapper {
background-color:#FFF;
width:760px;
position:relative;
margin:auto;
border:#789 solid 1px;
background-image:url(../bluebkgrd.gif);
background-position:left;
background-repeat:repeat-x;
h1 {
font: normal 165% Arial, Helvetica, sans-serif;
text-align: right;
padding:0px;
margin:0px;
color:#789;
#header {
padding:15px 50px 15px 5px;
#container {
padding-top: 40px;
#navcontainer{
margin: 0;
padding: 0 0 0 12px;
#navcontainer ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
#navcontainer li {
display: block;
margin: 0;
padding: 0;
float: left;
width: auto;
#navcontainer a{
color: #444;
display: block;
width: auto;
text-decoration: none;
background: #DDDDDD;
margin: 0;
padding: 2px 10px;
border-left: 1px solid #fff;
border-top: 1px solid #fff;
border-right: 1px solid #aaa;
#navcontainer A:hover, #navcontainer A:active { background:
#BBBBBB; }
#navcontainer A.active:link, #navcontainer A.active:visited
regards
lorna17

Hi All
Sorry to sound impatient but would anyone have any ideas on
this?
Regards
Lorna17

How to get externally made nav bar css into dreamweaver

How do I insert 'purecssmenu' made nav bar into dreamweaver? I have a zip file with just the interactive nav bar in it. There used to be an insert nav bar but that seems to have vanished in cs6 presumably because Adobe want you to use Spry!!!
I am completely new to this game but it is not helpful to be constantly told that you should learn coding.
I just want to make 1 tiny personal site. Any constructive help would be very much appreciated.

Sorry you're having such a terrible time not only getting the navbar to work, but interpreting the help here. (That's what it is... help, only you really didn't give us a lot to go on)
You need to do one of two things if you'd like people to stop "guessing" what's wrong with your page.
1.Upload your page to your server and post the URL here so others can download the source code and analyze it.
or
2. Copy and paste your ENTIRE page of code here so it can be seen, downloaded and viewed in someone else's Dreamweaver on their computer. Something like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>Generated by Pure CSS Menu.com : Free CSS Drop Down Menu Generator</title>
    <meta name="description" content="Online CSS Menu Maker. Create No-Javascript, 100% CSS Dropdown Menu in seconds! Horizontal css menu & Vertical css menu." />
</head>
<body bgcolor="#ffffff">

<style>
#pcm{display:none;}
ul.pureCssMenu ul{display:none}
ul.pureCssMenu li:hover>ul{display:block}
ul.pureCssMenu ul{position: absolute;left:-1px;top:98%;}
ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}
ul.pureCssMenu,ul.pureCssMenu ul {
margin:0px;
list-style:none;
padding:0px 2px 2px 0px;
background-color:#333333;
background-repeat:repeat;
border-color:#cccccc #111111 #111111 #cccccc;
border-width:1px;
border-style:solid;
ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
display:block;
zoom:1;
float: left;
ul.pureCssMenu ul{
width:155.4px;
ul.pureCssMenu li{
display:block;
margin:2px 0px 0px 2px;
font-size:0px;
ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
outline-style:none;
ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
display:block;
vertical-align:middle;
background-color:#333333;
border-width:1px;
border-color:#333333;
border-style:solid;
text-align:left;
text-decoration:none;
padding:2px 5px 2px 10px;
_padding-left:0;
font:normal 12px Trebuchet MS,Tahoma;
color: #cccccc;
text-decoration:none;
cursor:default;
ul.pureCssMenu span{
overflow:hidden;
ul.pureCssMenu li {
float:left;
ul.pureCssMenu ul li {
float:none;
ul.pureCssMenu ul a {
text-align:left;
white-space:nowrap;
ul.pureCssMenu li.sep{
text-align:left;
padding:0px;
line-height:0;
height:100%;
ul.pureCssMenu li.sep span{
float:none;     padding-right:0;
width:3px;
height:100%;
display:inline-block;
background-color:#cccccc #111111 #111111 #cccccc;     background-image:none;}
ul.pureCssMenu ul li.sep span{
width:100%;
height:3px;
ul.pureCssMenu li:hover{
position:relative;
ul.pureCssMenu li:hover>a{
background-color:#377D9F;
border-color:#377D9F;
border-style:solid;
font:normal 12px Trebuchet MS, Tahoma;
color: #FFFFFF;
text-decoration:none;
ul.pureCssMenu li a:hover{
position:relative;
background-color:#377D9F;
border-color:#377D9F;
border-style:solid;
font:normal 12px Trebuchet MS, Tahoma;
color: #FFFFFF;
text-decoration:none;
ul.pureCssMenu li.dis a {
color: #666 !important;
ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:2px;width:16px;
height:16px;
ul.pureCssMenu ul img {width:16px;
height:16px;
ul.pureCssMenu img.over{display:none}
ul.pureCssMenu li.dis a:hover img.over{display:none !important}
ul.pureCssMenu li.dis a:hover img.def {display:inline !important}
ul.pureCssMenu li:hover > a img.def {display:none}
ul.pureCssMenu li:hover > a img.over {display:inline}
ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover a:hover img.over{display:inline}
ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover a:hover img.def{display:none}
ul.pureCssMenu a:hover ul,ul.pureCssMenu a:hover a:hover ul,ul.pureCssMenu a:hover a:hover a:hover ul{display:block}
ul.pureCssMenu a:hover ul ul,ul.pureCssMenu a:hover a:hover ul ul{display:none}
ul.pureCssMenu span{
display:block;
background-image:url(./images/arr_white.gif);
background-position:right center;
background-repeat: no-repeat;
   padding-right:12px;}
ul.pureCssMenu li:hover>a>span{     background-image:url(./images/arrv_white.gif);
ul.pureCssMenu a:hover span{     _background-image:url(./images/arrv_white.gif)}
ul.pureCssMenu ul span,ul.pureCssMenu a:hover table span{background-image:url(./images/arr_white.gif)}
</style>


<ul class="pureCssMenu pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="index.html">Home Page</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Product Info</span><![if gt IE 6]></a><![endif]>
<ul class="pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="#">What is New?</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Menu Features</span><![if gt IE 6]></a><![endif]>
<ul class="pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Free Online Generator</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">100% Pure CSS Menu</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">No Javascript Required</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Multi Level Submenus</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Search-Engine Friendly</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Advanced Styling</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Horizontal & Vertical</a></li>
</ul>
</li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>How To Use</span><![if gt IE 6]></a><![endif]>
<ul class="pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="#">1. Select Template</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">2. Customize Items</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">3. Download Zip</a></li>
</ul>
</li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Supported Browsers</span><![if gt IE 6]></a><![endif]>
<ul class="pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Windows OS</span><![if gt IE 6]></a><![endif]>
<ul class="pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Internet Explorer</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Firefox</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Chrome</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Safari</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Mozilla</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Opera</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Netscape Navigator</a></li>
</ul>
</li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>MAC OS</span><![if gt IE 6]></a><![endif]>
<ul class="pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Firefox</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Safari</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Internet Explorer</a></li>
</ul>
</li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Unix/Linux OS</span><![if gt IE 6]></a><![endif]>
<ul class="pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Firefox</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Konqueror</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Templates</span><![if gt IE 6]></a><![endif]>
<ul class="pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Template 1</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Template 2</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Template 3</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Template 4</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Template 5</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Template 6</a></li>
</ul>
</li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">FAQ</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Contact Us</a></li>
</ul>
<a id="pcm" href="http://www.purecssmenu.com/">CSS Drop Down Menu by PureCSSMenu.com</a>


<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>
Based on your reply, and the troubles you had just getting the domain, I'll have to assume that you can't upload the page, so be a dear, and paste your code here so we can actually see it and troubleshoot it for you.
Let's see if we can get that egg boiled, eh?

White rectangle on screen

Just showed up today. Near teh middle of the screen an odd small rectangle in on teh screen, regardless of what window is open it is always on top and has a small black shadow on screen. whats the deal?

Hello Tempelaffe,
It sounds like you get this whit rectangle in the screen shot out of nowhere, but it goes away when you restart the computer. I would start by performing a Safe Boot, and then resetting your PRAM in that order. Due to the nature of the issue, try it out for a while to see how it goes.
OS X: What is Safe Boot, Safe Mode?
http://support.apple.com/kb/HT1564?viewlocale=en_US
Starting up in Safe Mode
To start up into Safe Mode (to Safe Boot), follow these steps.
Be sure your Mac is shut down.
Press the power button.
Immediately after you hear the startup tone, hold the Shift key.
The Shift key should be held as soon as possible after the startup tone, but not before the tone.
Release the Shift key when you see the gray Apple logo and the progress indicator (looks like a spinning gear).
After the logo appears, you should see a progress bar during startup. This indicates that your computer is performing a directory check as part of Safe Mode.
To leave Safe Mode, restart your computer without holding any keys during startup.
And:
About NVRAM and PRAM
http://support.apple.com/kb/ht1379
Shut down your Mac.
Locate the following keys on the keyboard: Command (⌘), Option, P, and R. You will need to hold these keys down simultaneously in step 4.
Turn on the computer.
Press and hold the Command-Option-P-R keys before the gray screen appears.
Hold the keys down until the computer restarts and you hear the startup sound for the second time.
Release the keys.
After resetting NVRAM or PRAM, you may need to reconfigure your settings for speaker volume, screen resolution, startup disk selection, and time zone information.
Thank you for using Apple Support Communities.
All the best,
Sterling

White rectangle on screen with beachball

Hi all,
now and then i get a white rectangle on my screen. I can not delet it or move it or do anything with it. I don´t know why or when it appears. But if its there, i can not undo it. When i restart, its gone.
Does anybody have an idea what that can be?
Pleas help me.
Thanks
Tempelaffe

Hello Tempelaffe,
It sounds like you get this whit rectangle in the screen shot out of nowhere, but it goes away when you restart the computer. I would start by performing a Safe Boot, and then resetting your PRAM in that order. Due to the nature of the issue, try it out for a while to see how it goes.
OS X: What is Safe Boot, Safe Mode?
http://support.apple.com/kb/HT1564?viewlocale=en_US
Starting up in Safe Mode
To start up into Safe Mode (to Safe Boot), follow these steps.
Be sure your Mac is shut down.
Press the power button.
Immediately after you hear the startup tone, hold the Shift key.
The Shift key should be held as soon as possible after the startup tone, but not before the tone.
Release the Shift key when you see the gray Apple logo and the progress indicator (looks like a spinning gear).
After the logo appears, you should see a progress bar during startup. This indicates that your computer is performing a directory check as part of Safe Mode.
To leave Safe Mode, restart your computer without holding any keys during startup.
And:
About NVRAM and PRAM
http://support.apple.com/kb/ht1379
Shut down your Mac.
Locate the following keys on the keyboard: Command (⌘), Option, P, and R. You will need to hold these keys down simultaneously in step 4.
Turn on the computer.
Press and hold the Command-Option-P-R keys before the gray screen appears.
Hold the keys down until the computer restarts and you hear the startup sound for the second time.
Release the keys.
After resetting NVRAM or PRAM, you may need to reconfigure your settings for speaker volume, screen resolution, startup disk selection, and time zone information.
Thank you for using Apple Support Communities.
All the best,
Sterling

Whats going with itunes store ? after all this updates. win 7 64 bit store does not upload completly and very slow, no nav bar.

I re-installed itunes and by this i mean part by part itunes, quicktime and so on. Once I re-installed it looked like all was going well. I went to the store and upload like it use to before the upadtes. Than I pluged my Ipad2 no problem but I went to store once more the problem started agian the up-load was very slow it didn't up load completly. the nav bar on the store page is missing no apps, music, books,tabs are all gone. I think it has to do with the new itunes upates in the last few days. I also did the firewall and anti virus off step no fix and i'm running Norton 2011. Has itunes put any message on this ? Is it only window 7 64bit with the problem ? Oh one more thing I was getting a 3259 error but that looks like is good now, but it did take me a few days to download one book and one app the download is very slow.

Hi,
I am using a Nvidia 4200M adapter in my Laptop, Driver 266.96, Direct X 11
In my desktop I am using an ATI XFX 6950, latest revision drivers (I am not at home right now so I cant get that info).
The issue I did describe above, but it was a long explanation.
In some flash games the game files load initially and get as far as the "click to start" button. Then the flash area usually goes either all white or all black (usually depending on the falsh game default background color) and then it stays that color. Cant see anything after hitting start (usually most games have an intro video or animation before the game starts, but I cant see any of it.
For the very few games that do start, the flash game or application does not seem to work correctly in that when the rare game starts, it wont save any game files or save files to the pc and so if I exit the game (navigate away to another page or close browser) and then later come back, even though I click the option to save games (and ensure that the flash application slider shows it can save files and lots of space) it does not save and I have to start from the beginning all the time.
More explanation I gave above.

Strange white rectangle on the desktop

Only just started doing this, but when Bridge is running, there's a white rectangle on the desktop, which goes away when Bridge (CS3) is quit. This happening to anyone else??

It definitely does matter. Like I mentioned earlier, when you have a fixed width of 1,000px for your content container, your 100% width setting for your outer container will be ignored - which means priority is given to 1,000px thereby rendering the whitespace to the right as your background is again a 128px square image. One solution I can think of is to make your background image 1x1px square that you can repeat. See if this makes any difference.'
My site, the autoscroller - I didn't use any plug-in as such. I simply used scrollTop from jQuery API and changed the settings to match . You can read about it here: http://api.jquery.com/scrollTop/
Here's my actual function that I'm calling when a menu button is pressed to scroll the div ID associated with it to scroll to Top of the screen. Again, this works for me, as my menu is fixed to the top, unlike your site where each site has a menu bar.
$('ul#menu li a').click(function(){
               var id = $(this).attr("href");
               $('html,body').animate({scrollTop: $("div"+id).offset().top},'slow');
     return false;
$('a#link').click(function(){
               var id = $(this).attr("href");
               $('html,body').animate({scrollTop: $("div"+id).offset().top},'slow');
     return false;

Strange white rectangles appear behind "menu commands"

When I hover over the menu commands in Photoshop or Illustrator (both CS2), white rectangles appear behind the Menu Commands and so cluttering the otherwise nice GUI. As I experienced this before on another computer but still have no clue what is going wrong could someone give me a clue what's going on here? I am using Windows XP Service Pack 2.
kind regards,
tomasio

can you show a screen shot? try http://www.pixentral.com upload the screen shot and copy the url in your address bar to a post here.
from your description it SOUNDS like it might be a display driver issue, but it's hard to tell. a screen shot might help someone nail it.
might as well try updating your video driver to see if there's anything newer out there than what you're currently running.

I have 5 html pages that share a common header, footer, and sidebar. how do i use my nav bar to change the content of the body without duplicating a lot of code?

i have 5 html pages that share a common header, footer, and sidebar. how do i use my nav bar to change the content of the body without duplicating a lot of code? thank you!

i inherited the website. It’s for a non-profit and is not very
sophisticated, and neither am I in webdesign. It currently has multiple
pages that are identical except for that body section, so whenever i change
the navigation (in the sidebar) I have to update every html page. I want
to have one basic page, and just call in the different body content based
on the link the user selects from the nav bar. How can i do that using a
script? i am using Dreamweaver.
~ in love and light ~
Jeannie
On Sat, Feb 7, 2015 at 4:07 AM, Ben Pleysier <[email protected]>

FWs Nav Bar - Make Hyperlinks

Hi
I am currently making a website and I have created a nav bar
in fireworks using slices and pop-up menus etc. Anyway I have
imported it to my website in Dreamweaver, but I cant figure out how
to make a hyperlink from the from down and nav bar buttons to the
corresponding page. Do I make the links in Fireworks? If so, how?
In Dreamweaver also how?
Any help much appreciated, thanks.

It would be easiest to add the hyperlinks in Fireworks, which
you can do in the pop-up menu editor (same place you entered the
text for the buttons).
If you wanted to add the links in Dreamweaver you'd have to
do it in source-code view. Search for the text that you entered for
the button name, and Fireworks should have entered a pound/hash
symbol (#) for your link (don't quote me on that though). Replace
that with your page link and you should be good to go.
Someone should be along shortly to tell you that the
Fireworks menus suck though, so stand by for that.

White rectangle in nav bar

Similar Messages

Maybe you are looking for