Image in Nav Bar

hello.
i want to use logout icon in my log out navbar, but when i inseert img target in iamge attributes,
for ex:
#APP_IMAGES#out.pngit doesnt shows enything..
what is problem? can you help me

I think you got to modify your template in order to get that working. See this posting:
Navigation Bar Image
In my demo application
http://apex.oracle.com/pls/otn/f?p=31517:1
you can see that working.
Denes Kubicek
http://deneskubicek.blogspot.com/
http://www.opal-consulting.de/training
http://apex.oracle.com/pls/otn/f?p=31517:1
-------------------------------------------------------------------

Similar Messages

How can I get rid of the earth looking image from nav bar?

Hi, folks:
I tried to replace it with another image, by going to folder-> edit-> image tab-> Title image and Rollover image, I uploaded both images, but the nav bar still shows a blue picture of earth.
null

In the same page click on the Nav Bar tab
Click on the nav bar properties <name> link
click on the Style tab in the nav bar properties
click on the style properties <name> link
choose the background image element and remove the background image(which happens to be the earth img by default)
you can control the rest of the nav bar style elements here
Hope this helps

Background Image in Nav Bar Not Working in IE 6 (but ok in 7 and Firefox 2)

Hi gang,
I'm having a bit of a problem with a background image for a navigation bar not appearing in IE 6. I've also tested it in IE 7 - it works perfectly, as it does in Firefox 2.
http://www.iainmoran.com/update/test.html
The really strange thing is the part of the bar after "Contact" IS fine in IE 6.
Also, is there any way to remove unused styles (in an external CSS) in DW? Just it would be a pain to go through and remove the styles I've tried, but then later decided not to use.
Thanks again,
Iain.

Have you contacted Project VII support or searched their knowledge base?
http://www.projectseven.com/support/index.htm
Also, is there any way to remove unused styles (in an external CSS) in DW? Just it would be a pain to go through and remove the styles I've tried, but then later decided not to use.
Not exaclty a DW answer, but I've used the free FireFox add-on to help me find unused selectors. Point it to a sitemap.xml and it can spider the whole site (as listed in that xml file).
https://addons.mozilla.org/en-US/firefox/addon/5392
But be careful with it. It apparently doesn't read JavaScript and your PMM triggers are actually used.
Mark A. Boyd
Keep-On-Learnin' :-)
If you are reading this via email, be aware that it may not be an accurate representation of my message. Login to read the actual message and/or to reply.

Over image not working in Nav Bar

I have established Up and Over images for my nav bar. The Up
image is all that shows -- even when I mouse-over or click on the
button. Thanks for your help!
Jim
"MM_nbGroup('down','group1','WhatWeDo','Images_and_Video/WhatWeDo_Over.gif',1)"
onmouseover="MM_nbGroup('over','WhatWeDo','Images_and_Video/WhatWeDo_Over.gif','Images_an d_Video/WhatWeDo_Over.gif',1)"
onmouseout="MM_nbGroup('out')"><img
src="Images_and_Video/WhatWeDo_Up.gif" alt="Home page link"
name="WhatWeDo" width="161" height="39" border="0" id="Home"
onload="" /></a></td>
</tr>
<tr>
<td><a href="whoweare.html" target="_top"
onclick="MM_nbGroup('down','group1','WhoWeAre','Images_and_Video/WhoWeAre_Over.gif',1)"
onmouseover="MM_nbGroup('over','WhoWeAre','Images_and_Video/WhoWeAre_Over.gif','Images_an d_Video/WhoWeAre_Over.gif',1)"
onmouseout="MM_nbGroup('out')"><img
src="Images_and_Video/WhoWeAre_Up.gif" alt="Who we are navigation
link" name="WhoWeAre" width="161" height="39" border="0" id="Test"
onload="" /></a></td>

I'm sorry to tell you that the first thing you need to do is
to get rid of
the method you have used. It's quite antique, and was
designed for framed
pages. It adds quite a bit of additional code (some of which
is invalid) to
your page than would the alternative of using just ordinary
image swaps for
your menu.
So, just create your menu from the up images in each row, and
use DW's Swap
image behavior on each.
And put some duct tape over this NavBar option so that you
don't use it
again!
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"JRStaf4ord" <[email protected]> wrote in
message
news:gb85gs$5e$[email protected]..
>I have established Up and Over images for my nav bar. The
Up image is all
>that
> shows -- even when I mouse-over or click on the button.
Thanks for your
> help!
>
> Jim
>
>
>
"MM_nbGroup('down','group1','WhatWeDo','Images_and_Video/WhatWeDo_Over.gif',1)"
>
onmouseover="MM_nbGroup('over','WhatWeDo','Images_and_Video/WhatWeDo_Over.gif','
> Images_and_Video/WhatWeDo_Over.gif',1)"
> onmouseout="MM_nbGroup('out')"><img
> src="Images_and_Video/WhatWeDo_Up.gif" alt="Home page
link"
> name="WhatWeDo"
> width="161" height="39" border="0" id="Home" onload=""
/></a></td>
> </tr>
> <tr>
> <td><a href="whoweare.html" target="_top"
>
onclick="MM_nbGroup('down','group1','WhoWeAre','Images_and_Video/WhoWeAre_Over.g
> if',1)"
>
onmouseover="MM_nbGroup('over','WhoWeAre','Images_and_Video/WhoWeAre_Over.gif','
> Images_and_Video/WhoWeAre_Over.gif',1)"
> onmouseout="MM_nbGroup('out')"><img
> src="Images_and_Video/WhoWeAre_Up.gif" alt="Who we are
navigation link"
> name="WhoWeAre" width="161" height="39" border="0"
id="Test" onload=""
> /></a></td>
>

Slicing an image to be used as a nav bar for html email

The html email that I've created renders as designed in most email clients. It doesn't in Outlook 2007. It was suggested that I slice an image for the nav bar so it displays horizontally as designed instead of vertically.
It's been a long time since I used slicing images in Photoshop. It doesn't appear that Image Ready is there anymore. I use Photoshop CS3. Is there a straightforward document that could walk me through the steps to accomplish this? Using the Photoshop "help" confuses the heck out of me and when I asked this question in the Photoshop forum, many looked at it but I've had no responses. Or could it be done in Dreamweaver somehow?
The web version of the html email is: http://www.theshimogaproject.com/email/riverrun-guests-email.html

You can't use DW to slice an image. Do you have Fireworks? It's really easy to do it in Fireworks, that's what I would use. If you need to use PhotoShop, a quick Google search, "slicing images in photoshop," return plenty of tutorials that you can choose from.

Nav Bar images missing in generated help

I'm creating HTML Help using RoboHelp 70.2.001. When I view
the skin, the Nav Bar (that appears below the Main navigation bar
and above the TOC) images are present (even in Preview). But when I
generate the help, they are missing. What appears is an empty Nav
Bar - except for the close x that is right-justified.
I have created my own skin with custom images in other
regions, but have not (knowingly) modified these images. When I
click on each of them in the skin editor, a Toolbar Item - <Nav
Bar item name> dialog box displays, with the Default Image radio
button selected.
I have also tried adding different images, but with the same
results.
Suggestions?
Suggestions?

Welcome to the forums.
I'm guessing you're generating either WebHelp or FlashHelp.
Which buttons show up in that bar depends on your settings. For
example, the forward and back buttons are present only if you have
a browse sequence set up. The sync button (a circular arrow) does
not appear if you have the TOC set to sync automatically. With my
settings, I get nothing but the X as well.
Hope this helps,
Ben

Nav bar resizes table

Hi, I am trying to create a page that is 800 px wide with a
nav bar that is also 800 px wide but the nav bar seems to increase
by 21px when it is exported out of fireworks and then imported into
dreamweaver. This then forces the rest of the page out by 21px. I
have tried deleting the spacers fireworks creates and just resizing
the table itself but this does not help. I have coloured the
background of the header black to illustrate this. Please find my
problem at
http://www.cambridgestainedglass.co.uk/
. Thanks in advance

>>when it is exported out of fireworks and then
imported into dreamweaver
Sorry to say but that is likely the cause of all your
problems. Exporting
anything but single images (i.e. HTML) from Fireworks,
Photoshop, etc. is a
poor practice as those apps create very wonky HTML code. I
suggest you go
back to FW, export single images/slices only and then build
the nav bar in
DW.
But DO NOT use the built-in DW menus either. Either code your
own menus (nav
bar) or use an add-on like the P7 stuff.
Walt
"Stefan83" <[email protected]> wrote in
message
news:f87dqu$nps$[email protected]..
> Hi, I am trying to create a page that is 800 px wide
with a nav bar that
> is
> also 800 px wide but the nav bar seems to increase by
21px when it is
> exported
> out of fireworks and then imported into dreamweaver.
This then forces the
> rest
> of the page out by 21px. I have tried deleting the
spacers fireworks
> creates
> and just resizing the table itself but this does not
help. I have coloured
> the
> background of the header black to illustrate this.
Please find my problem
> at
>
http://www.cambridgestainedglass.co.uk/
. Thanks in advance
>

Is There A Nav Bar Plugin?

Is there I can get a navagation bar from this website and put it on this one but get it all working?
I have the nav bar on the website but it tries to locally link to the webite making it un-avilable... any help would be appriciated...
I orignally took this code from serif X4 and put it into dreamweaver...if you need to look at all the code here you go:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en-us">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="Generator" content="Serif WebPlus X4 (12.0.5.033)">
<title>Better Community News - Montrose, Grand Junction, Delta & Western Colorado</title>
<meta name="keywords" content="Better Community News | Local News | Entertainment | FREE CLASSIFIED ADS | Events | Advertising | Local Stories | Grand Junction, Montrose, Delta, Hotchkiss, Cedaredge, Paonia, Nucla, Naturita, Norwood, Ridgway, Ouray, Telluride, Colorado, CO">
<meta name="description" content="Better Community News is the fastest growing & best source for local news & entertainment.      | Local News | Entertainment | FREE CLASSIFIED ADS | Events | Advertising | Local Stories | Grand Junction, Montrose, Delta, Hotchkiss, Cedaredge, Paonia, Nucla, Naturita, Norwood, Ridgway, Ouray, Telluride, Colorado, CO">
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Refresh" content="240;URL=index.html">
<meta name="robots" content="index,follow">
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36182012-1']);
_gaq.push(['_trackPageview']);
(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
</script>
<script type="text/javascript" src="wpscripts/jsNavBarFuncs.js"></script>
<script type="text/javascript" src="wpscripts/global_navtree.js"></script>
<script type="text/javascript" src="wpscripts/wp_navbar_textmenu.js"></script>
<link rel="stylesheet" href="wpscripts/wp_navbar_textmenu_H1.css" type="text/css">
<style type="text/css">

</style>
<script type="text/javascript" src="wpscripts/jsFlashVer.js"></script>
<script type="text/javascript" src="wpscripts/jspngfix.js"></script>
<script type="text/javascript"></script>
<script type="text/javascript" src="../../includes/JQuerySlider/jquery.extend.js"></script>
<script type="text/javascript" src="../../includes/JQuerySlider/JQuerySlider.js"></script>
<script type="text/javascript" src="../../includes/JQuerySlider/JQuerySlider5.js"></script>
<link href="../../includes/JQuerySlider/JQuerySlider5.css" rel="stylesheet" type="text/css" />
<link href="Style Sheets/Text.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="includes/JQuerySlider/jquery.extend.js"></script>
<script type="text/javascript" src="includes/JQuerySlider/JQuerySlider.js"></script>
<script type="text/javascript" src="includes/JQuerySlider/JQuerySlider1.js"></script>
<link href="includes/JQuerySlider/JQuerySlider1.css" rel="stylesheet" type="text/css" />
</head>
<body text="#000000" style="background-color:#e9e8e8; text-align:center; height:2125px;">
<div style="background-color:#ffffff;text-align:left;margin-left:auto;margin-right:auto;positi on:relative;width:1024px;height:2125px;">
<div style="position:absolute; left:724px; top:0px; width:300px; height:172px;">
    <img src="better-community-news.com/NewDirectory/wpimages/wpbbb6aaa6.png" width="300" height="172" border="0" id="pic_1314" name="pic_1314" title="" alt="" onload="OnLoadPngFix()"></div>
<div style="position:absolute; left:86px; top:954px; width:263px; height:31px;">
    <div id="frag_68" style="text-align:left;">
    <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-36182012-1']);
      _gaq.push(['_trackPageview']);
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    </script>
    </div></div>
<div style="position:absolute; left:0px; top:0px; width:668px; height:40px;">
    <img src="better-community-news.com/NewDirectory/wpimages/wp74efab21.png" width="668" height="40" border="0" id="pic_385" name="pic_385" title="" alt="" onload="OnLoadPngFix()"></div>
<div id="site_search_3" style="position: absolute; top:5px; left:393px; width:208px; height:22px;"><form action="" onSubmit="return false;" style="margin: 0; padding: 0;">
    <input id="site_search_3_input" name="site_search_3_input" onkeypress="if (event.keyCode==13) window.location.href='page203.html?site_search_results_1='+document.getElementById('site_ search_3_input').value+'&depth=0';" style="width: 113px;" type="text"><div style="display: inline"><button onclick="window.location.href='page203.html?site_search_results_1='+document.getElementBy Id('site_search_3_input').value+'&depth=0';" style="width: 83px;">Search</button></div>
</form></div>
<script type="text/javascript" id="nav_205_script"></script>
<noscript>
</noscript>
<div style="position:absolute; left:0px; top:1875px; width:1024px; height:250px;">
    <img src="wpimages/wp76459c23.png" width="1024" height="250" border="0" id="pic_1315" name="pic_1315" title="" alt="" onload="OnLoadPngFix()"></div>
<div id="txt_521" style="position:absolute; left:75px; top:2048px; width:914px; height:77px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-bo x; overflow:hidden;">
<p class="Normal-P"><span class="Normal-C">Copyright © Better Community News 2012. </span></p>
<p class="Normal-P"><span class="Normal-C">909 S. Townsend Ave.     |     Montrose, CO 81401     |     (970) 573-<wbr>NEWS (6397)</span></p>
<p class="Normal-P"><span class="Normal-C">Montrose, Delta, Grand Junction, Western Colorado, Ridgway, Ouray, Telluride, Paonia,
    Cedaredge, Hotchkiss, Gunnison, Norwood, Naturita, North Fork</span></p>
</div>
<div style="position:absolute; left:636px; top:1px; width:119px; height:29px;">
    <map id="map0" name="map0">
        <area shape="rect" coords="11,5,109,25" href="subscribe_now.html" alt="">
        <area shape="rect" coords="3,3,117,27" href="subscribe_now.html" alt="">
        <area shape="rect" coords="11,5,109,25" href="subscribe_now.html" alt="">
    </map>
    <img src="better-community-news.com/NewDirectory/wpimages/wp05836530.png" width="119" height="29" border="0" id="art_206" name="art_206" title="" alt="Subscribe To Emails" onload="OnLoadPngFix()" usemap="#map0"></div>
<div style="position:absolute; left:33px; top:398px; width:640px; height:25px;">
    <div class="Normal-P0">
        <span class="Normal-C0">Scroll Down To Click On These & Other Great Local Stories</span></div>
</div>
<div style="position:absolute; left:238px; top:459px; width:220px; height:4px;">
    <img src="wpimages/wp590c292b.png" width="220" height="4" border="0" id="pcrv_147" name="pcrv_147" title="" alt="" onload="OnLoadPngFix()"></div>
<div style="position:absolute; left:238px; top:797px; width:220px; height:4px;">
    <img src="wpimages/wp590c292b.png" width="220" height="4" border="0" id="pcrv_150" name="pcrv_150" title="" alt="" onload="OnLoadPngFix()"></div>
<div style="position:absolute; left:238px; top:745px; width:169px; height:50px;">
    <div class="Normal-P0">
        <span class="Normal-C1">Positive<br></span>
        <span class="Normal-C1">Perspectives</span></div>
</div>
<div id="txt_843" style="position:absolute; left:238px; top:543px; width:220px; height:59px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-bo x; overflow:hidden;">
<p class="Normal-P0"><span class="Default-C"><a href="GJ_City_Council_Discusses_Shelter_for_Chronically_Homeless.html" style="color:#000000;text-decoration:none;"><img src="wpimages/wpcbd38127_00.jpg" width="50" height="37" border="0" title="" alt="" style="float:left; margin:6px 6px 6px 0px">GJ City Council Discusses Shelter for Chronically Homeless</a></span></p>
<p class="Body-Text-P"><span class="Body-Text-C"><a href="GJ_City_Council_Discusses_Shelter_for_Chronically_Homeless.html" style="color:#000000;text-decoration:none;"> </a></span></p>
</div>
<div style="position:absolute; left:468px; top:459px; width:220px; height:4px;">
    <img src="wpimages/wp590c292b.png" width="220" height="4" border="0" id="pcrv_148" name="pcrv_148" title="" alt="" onload="OnLoadPngFix()"></div>
<div style="position:absolute; left:468px; top:432px; width:190px; height:25px;">
    <div class="Normal-P0">
        <span class="Normal-C1">Montrose Area</span></div>
</div>
<div style="position:absolute; left:468px; top:797px; width:220px; height:4px;">
    <img src="wpimages/wp590c292b.png" width="220" height="4" border="0" id="pcrv_149" name="pcrv_149" title="" alt="" onload="OnLoadPngFix()"></div>
<div style="position:absolute; left:468px; top:770px; width:223px; height:25px;">
    <div class="Normal-P0">
        <span class="Normal-C1">Sports & Hunting</span></div>
</div>
<div id="txt_842" style="position:absolute; left:468px; top:887px; width:220px; height:64px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-bo x; overflow:hidden;">
<p class="Normal-P0"><span class="Default-C0"><a href="Kokanee_Salmon_Eggs_Decline.html" style="color:#000000;text-decoration:none;"><img src="wpimages/wp53434f33_00.jpg" width="89" height="64" border="0" title="" alt="" style="float:left; margin:0px 3px 0px 0px">Kokanee Salmon Eggs Decline</a></span></p>
</div>
<div style="position:absolute; left:469px; top:1088px; width:237px; height:4px;">
    <img src="wpimages/wp773a069e.png" width="237" height="4" border="0" id="pcrv_157" name="pcrv_157" title="" alt="" onload="OnLoadPngFix()"></div>
<div style="position:absolute; left:469px; top:1061px; width:257px; height:50px;">
    <div class="Normal-P0">
        <span class="Normal-C1"><a href="Letters_To_The Editor.html" style="color:#b60000;text-decoration:none;">Letters to the Editor</a><br></span>
        <span class="Normal-C1"><a href="page158.html" style="color:#b60000;text-decoration:none;"></a></span></div>
</div>
<div id="txt_958" style="position:absolute; left:469px; top:1102px; width:237px; height:161px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-b ox; overflow:hidden;">
<p class="Normal-P0"><span class="Default-C1"><a href="Letters_To_The Editor.html">Curt Robinson Resigns from Chamber for Failure to Take Position Against New Tax</a></span></p>
<p class="Normal-P0"><span class="Default-C2"><a href="Letters_To_The Editor.html"> </a></span></p>
<p class="Normal-P0"><span class="Default-C3"><a href="Letters_To_The Editor.html">Don't Be Fooled on April Fools Day</a></span></p>
<p class="Normal-P0"><span class="Text-body-C"><a href="Letters_To_The Editor.html"> </a></span></p>
<p class="Normal-P0"><span class="Text-body-C0"><a href="Letters_To_The Editor.html">RE: Why a Recreation District in the first place?</a></span></p>
<p class="Normal-P0"><span class="Text-body-C"><a href="Letters_To_The Editor.html#Obama"> </a></span></p>
<p class="Normal-P0"><span class="Text-body-C0"><a href="Letters_To_The Editor.html#Obama">Obama Fails the Millenials</a></span></p>
<p class="Normal-P0"><span class="Default-C2"><a href="Letters_To_The Editor.html"> </a></span></p>
<p class="Normal-P0"><span class="Text-body-C0"><a href="Letters_To_The Editor.html#Why">Why Repurpose the Aquatic Center</a></span></p>
<p class="Normal-P0"><span class="Default-C4"> </span></p>
<p class="Normal-P0"><span class="Default-C3"><a href="Letters_To_The Editor.html">Commissioner Races</a></span></p>
<p class="Normal-P0"><span class="Default-C2"> </span></p>
<p class="Normal-P0"><span class="Default-C5"><a href="Letters_To_The Editor.html">Time To Take Control Of Our Own Destiny</a></span></p>
</div>
<div style="position:absolute; left:238px; top:432px; width:110px; height:25px;">
    <div class="Normal-P0">
        <span class="Normal-C1">GJ Area</span></div>
</div>
<div id="txt_1378" style="position:absolute; left:468px; top:814px; width:220px; height:68px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-bo x; overflow:hidden;">
<p class="Normal-P0"><span class="Default-C0"><a href="Winter_Rim_Romp.html" style="color:#000000;text-decoration:none;"><img src="wpimages/wpcab52c93_00.jpg" width="90" height="68" border="0" title="" alt="" style="float:left; margin:0px 3px 0px 0px">Winter Rim Romp</a></span></p>
</div>
<div style="position:absolute; left:238px; top:1337px; width:220px; height:4px;">
    <img src="wpimages/wp590c292b.png" width="220" height="4" border="0" id="pcrv_166" name="pcrv_166" title="" alt="" onload="OnLoadPngFix()"></div>
<div style="position:absolute; left:238px; top:1318px; width:226px; height:16px;">
    <div class="Normal-P0">
        <span class="Normal-C2"><a href="page456.html" style="color:#b60000;text-decoration:none;">Kiwanis Student of the Week</a></span></div>
</div>
<div id="txt_1127" style="position:absolute; left:238px; top:1345px; width:220px; height:70px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-bo x; overflow:hidden;">
<p class="Normal-P0"><span class="Table-Contents-C"><a href="page456.html" style="color:#000000;text-decoration:none;"><img src="wpimages/wp4c78cadc_00.jpg" width="93" height="70" border="0" title="" alt="" style="float:left; margin:0px 4px 6px 0px">Erika Tatman</a></span></p>
</div>
<div id="txt_1128" style="position:absolute; left:238px; top:1419px; width:220px; height:70px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-bo x; overflow:hidden;">
<p class="Normal-P0"><span class="Table-Contents-C"><a href="page456.html" style="color:#000000;text-decoration:none;"><img src="wpimages/wp2a0c75fd_00.jpg" width="93" height="70" border="0" title="" alt="" style="float:left; margin:0px 4px 6px 0px">Austin Eichert</a></span></p>
</div>
<div id="txt_1453" style="position:absolute; left:238px; top:471px; width:220px; height:67px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-bo x; overflow:hidden;">
<p class="Normal-P0"><span class="Default-C"><a href="Did_Marijuana_Blow_the_Joint.html" style="color:#000000;text-decoration:none;"><img src="wpimages/wp097d475b_00.jpg" width="61" height="61" border="0" title="" alt="" style="float:left; margin:6px 6px 6px 0px">Did Marijuana Blow the Joint?</a></span></p>
<p class="Normal-P0"><span class="Body-Text-C"><a href="Did_Marijuana_Blow_the_Joint.html" style="color:#000000;text-decoration:none;"> </a></span></p>
</div>
<div id="txt_1490" style="position:absolute; left:469px; top:462px; width:220px; height:76px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; overflow:hidden;">
<p class="box_text"><strong>Montrose County Sheriff's Office's Susan Byrne Named APCO Communications Director of the Year</strong></p>
</div>
<div style="position:absolute; left:706px; top:459px; width:300px; height:4px;">
    <img src="wpimages/wpb0c95be0.png" width="300" height="4" border="0" id="pcrv_151" name="pcrv_151" title="" alt="" onload="OnLoadPngFix()"></div>
<div style="position:absolute; left:706px; top:432px; width:190px; height:25px;">
    <div class="Normal-P0">
        <span class="Normal-C1"><a href="page158.html" style="color:#b60000;text-decoration:none;">Entertainment</a></span></div>
</div>
<div id="txt_841" style="position:absolute; left:706px; top:196px; width:303px; height:227px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-b ox; overflow:hidden;">
<p><a href="http://www.better-community-news.com/Montrose_County_Sheriff_Office_Susan_Byrne_Named_APCO _Communications_Director_of_the_Year.html">Montrose County Sheriff's Office's Susan Byrne Named APCO Communications Director of the Year</a></p>
<p><a href="http://www.better-community-news.com/Women_Only_Bowhunter_Education_In_Fruita.html">Women-Only Bowhunter Education In Fruita</a></p>
<p><a href="http://www.better-community-news.com/Did_Marijuana_Blow_the_Joint.html">Did Marijuana Blow the Joint?</a></p>
<p><a href="http://www.better-community-news.com/GJ_City_Council_Discusses_Shelter_for_Chronically_Hom eless.html">GJ City Council Discusses Shelter for Chronically Homeless</a></p>
<p><a href="http://www.better-community-news.com/GJ_POLICE_Can_You_ID_This_Man.html">GJ POLICE – Can You ID This Man?</a></p>
</div>
<div id="txt_840" style="position:absolute; left:744px; top:722px; width:219px; height:197px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-b ox; overflow:hidden;">
<h3 class="Normal-P0"><span class="Heading-3-C"><img src="wpimages/wpa77fa963.png" width="77" height="64" border="0" onload="OnLoadPngFix()" title="" alt="" style="float:left; margin:0px 3px 3px 0px"></span></h3>
<h3 class="Normal-P0"><span class="Heading-3-C"> </span></h3>
<h3 class="Normal-P0"><span class="Heading-3-C"> </span></h3>
<h3 class="Normal-P"><span class="Heading-3-C"> </span></h3>
<h3 class="Normal-P"><span class="Heading-3-C0">NOW RECRUITING</span></h3>
<h3 class="Normal-P"><span class="Heading-3-C1">Sports Announcer</span></h3>
<h3 class="Normal-P"><span class="Heading-3-C">Local &/or National Sports</span></h3>
<h3 class="Normal-P"><span class="Heading-3-C2"> </span></h3>
<h3 class="Normal-P"><span class="Heading-3-C">CALL 573-<wbr>NEWS (6397)</span></h3>
</div>
<div style="position:absolute; left:705px; top:191px; width:300px; height:4px;">
    <img src="wpimages/wpb0c95be0.png" width="300" height="4" border="0" id="pcrv_152" name="pcrv_152" title="" alt="" onload="OnLoadPngFix()"></div>
<div style="position:absolute; left:705px; top:164px; width:266px; height:25px;">
    <div class="Normal-P0">
        <span class="Normal-C1"><a href="page158.html" style="color:#b60000;text-decoration:none;">Latest Top Headlines</a></span></div>
</div>
<div id="txt_1500" style="position:absolute; left:238px; top:932px; width:220px; height:51px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-bo x; overflow:hidden;">
<p class="Normal-P0"><span class="Default-C0"><a href="The_Eagles_Nest.html" style="color:#000000;text-decoration:none;"><img src="wpimages/wp487bab49_00.jpg" width="74" height="51" border="0" title="" alt="" style="float:left; margin:0px 3px 3px 0px">The Eagle's Nest</a></span></p>
</div>
<div style="position:absolute; left:7px; top:1579px; width:680px; height:243px;">
    <div id="frag_70" style="text-align:left;">
    <script src="//www.gmodules.com/ig/ifr?url=http://andrewgadget.googlepages.com/google-news.xml&synd=open&w=670&h=250&title=&border=ht tp%3A%2F%2Fwww.gmodules.com%2Fig%2Fimages%2F&output=js"></script>
    </div></div>
<div style="position:absolute; left:698px; top:1579px; width:296px; height:243px;">
    <div id="frag_69" style="text-align:left;">
    <script src="//www.gmodules.com/ig/ifr?url=http://www.meteogroup.com/meteo/gadgets/wetter24.xml&up_loc=&up_loccode=&up_temp_unit=&syn d=open&w=300&h=250&title=Change+Your+Settings+For+Local+Weather&lang=all&country=ALL&borde r=%23ffffff%7C3px%2C1px+solid+%23999999&output=js"></script>
    </div></div>
<div id="txt_1516" style="position:absolute; left:238px; top:875px; width:220px; height:52px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-bo x; overflow:hidden;">
<p class="Normal-P0"><span class="Default-C"><a href="Christine_Terrel_Receives_Apple_Award.html" style="color:#000000;text-decoration:none;"><img src="wpimages/wpc7ff6be0_00.jpg" width="67" height="52" border="0" title="" alt="" style="float:left; margin:0px 3px 3px 0px"></a>Christine Terrel Receives Apple Award</span></p>
<p class="Normal-P0"><span class="Body-Text-C"><a href="Crime_Free_Housing_Program_Increases_Quality_of_Life.html" style="color:#000000;text-decoration:none;"> </a></span></p>
<p class="Normal-P0"><span class="Body-Text-C"><a href="Crime_Free_Housing_Program_Increases_Quality_of_Life.html" style="color:#000000;text-decoration:none;"> </a></span></p>
</div>
<div style="position:absolute; left:238px; top:1088px; width:220px; height:4px;">
    <img src="wpimages/wp590c292b.png" width="220" height="4" border="0" id="pcrv_160" name="pcrv_160" title="" alt="" onload="OnLoadPngFix()"></div>
<div id="txt_1077" style="position:absolute; left:238px; top:1102px; width:220px; height:65px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-bo x; overflow:hidden;">
<p class="Normal-P0"><span class="Default-C"><a href="Contests_Food_Music_Handmade_Wares_to_Shine_at_Dragon_Unchained_Festival_in_Delta.h tml" style="color:#000000;text-decoration:none;"><img src="wpimages/wp9c7e6e59_00.jpg" width="37" height="29" border="0" title="" alt="" style="float:left; margin:6px 6px 6px 0px">Contests, Food, Music & Handmade Wares to Shine at Dragon Unchained Festival in Delta</a></span></p>
</div>
<div style="position:absolute; left:238px; top:1061px; width:143px; height:25px;">
    <div class="Normal-P0">
        <span class="Normal-C1">Delta Area</span></div>
</div>
<div style="position:absolute; left:8px; top:1088px; width:220px; height:4px;">
    <img src="wpimages/wp590c292b.png" width="220" height="4" border="0" id="pcrv_159" name="pcrv_159" title="" alt="" onload="OnLoadPngFix()"></div>
<div style="position:absolute; left:8px; top:1061px; width:111px; height:25px;">
    <div class="Normal-P0">
        <span class="Normal-C1"><a href="opinion.html" style="color:#b60000;text-decoration:none;">Opinion</a></span></div>
</div>
<div style="position:absolute; left:8px; top:459px; width:220px; height:4px;">
    <img src="wpimages/wp590c292b.png" width="220" height="4" border="0" id="pcrv_154" name="pcrv_154" title="" alt="" onload="OnLoadPngFix()"></div>
<div style="position:absolute; left:8px; top:797px; width:220px; height:4px;">
    <img src="wpimages/wp590c292b.png" width="220" height="4" border="0" id="pcrv_146" name="pcrv_146" title="" alt="" onload="OnLoadPngFix()"></div>
<div style="position:absolute; left:9px; top:1337px; width:220px; height:4px;">
    <img src="wpimages/wp590c292b.png" width="220" height="4" border="0" id="pcrv_165" name="pcrv_165" title="" alt="" onload="OnLoadPngFix()"></div>
<div style="position:absolute; left:9px; top:1318px; width:219px; height:16px;">
    <div class="Normal-P0">
        <span class="Normal-C2"><a href="Rotary_Student_of_the_Week.html" style="color:#b60000;text-decoration:none;">Rotary Student of the Week</a></span></div>
</div>
<div id="txt_1126" style="position:absolute; left:9px; top:1419px; width:220px; height:70px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-bo x; overflow:hidden;">
<p class="Normal-P0"><span class="Default-C0"><a href="Rotary_Student_of_the_Week.html" style="color:#000000;text-decoration:none;"><img src="wpimages/wpaf237000_00.jpg" width="93" height="70" border="0" title="" alt="" style="float:left; margin:0px 4px 6px 0px">Kendall Cox</a></span></p>
<p class="Normal-P0"><span class="Default-C3"><a href="Rotary_Student_of_the_Week.html" style="color:#4487c6;text-decoration:none;"> </a></span></p>
<p class="Normal-P0"><span class="Default-C6"><a href="Rotary_Student_of_the_Week.html" style="color:#000000;text-decoration:none;"> </a></span></p>
<p class="Normal-P0"><span class="Default-C7"><a href="Rotary_Student_of_the_Week.html" style="color:#4487c6;text-decoration:none;"> </a></span></p>
<p class="Normal-P0"><span class="Default-C7"><a href="Rotary_Student_of_the_Week.html" style="color:#4487c6;text-decoration:none;"> </a></span></p>
</div>
<div id="txt_1264" style="position:absolute; left:8px; top:953px; width:220px; height:57px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-bo x; overflow:hidden;">
<p class="Normal-P0"><span class="Default-C0"><a href="Family_History_Classes_Start_Up_In_February.html" style="color:#000000;text-decoration:none;"><img src="wpimages/wp398f5a30_00.jpg" width="81" height="57" border="0" title="" alt="" style="float:left; margin:0px 3px 3px 0px">Family History Classes Start Up In February</a></span></p>
</div>
<div id="txt_1442" style="position:absolute; left:8px; top:814px; width:220px; height:71px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-bo x; overflow:hidden;">
<p class="Normal-P0"><span class="Default-C0"><a href="When_Monkeys_Fly.html" style="color:#000000;text-decoration:none;"><img src="wpimages/wp8d5178ab_00.jpg" width="94" height="71" border="0" title="" alt="" style="float:left; margin:0px 3px 3px 0px">When Monkeys Fly</a></span></p>
</div>
<div id="txt_1142" style="position:absolute; left:8px; top:889px; width:220px; height:60px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-bo x; overflow:hidden;">
<p class="Normal-P0"><span class="Default-C0"><a href="Internet-Based_Hunter_Education_Class_Offered_For_Southwest_Colorado.html" style="color:#000000;text-decoration:none;"><img src="wpimages/wp31dff18a_00.jpg" width="51" height="60" border="0" title="" alt="" style="float:left; margin:0px 3px 3px 0px">Internet-<wbr>Based Hunter Education Class Offered For Southwest Colorado</a></span></p>
</div>
<div style="position:absolute; left:8px; top:432px; width:123px; height:25px;">
    <div class="Normal-P0">
        <span class="Normal-C1">Colorado</span></div>
</div>
<div style="position:absolute; left:8px; top:770px; width:159px; height:25px;">
    <div class="Normal-P0">
        <span class="Normal-C1">Western CO</span></div>
</div>
<div id="txt_1515" style="position:absolute; left:8px; top:472px; width:220px; height:49px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-bo x; overflow:hidden;">
<p class="Normal-P0"><span class="Default-C"><a href="House_Passes_Tipton_Water_Rights_Bill.html" style="color:#000000;text-decoration:none;"><img src="wpimages/wpc5bec71d_00.jpg" width="31" height="49" border="0" title="" alt="" style="float:left; margin:0px 3px 3px 0px">House Passes Tipton Water Rights Bill</a></span></p>
<p class="Normal-P0"><span class="Default-C1"> </span></p>
<p class="Normal-P0"><span class="Default-C"><a href="Ken_Buck_releases_Ken_Cares_video_featuring_victim_he_helped_in_2008.html" style="color:#000000;text-decoration:none;"> </a></span></p>
</div>
<div id="txt_1520" style="position:absolute; left:8px; top:622px; width:220px; height:45px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-bo x; overflow:hidden;">
<p class="Normal-P0"><span class="Default-C"><a href="Student_Art_Competition.html" style="color:#000000;text-decoration:none;"><img src="wpimages/wp563d913d_00.jpg" width="53" height="39" border="0" title="" alt="" style="float:left; margin:6px 6px 6px 0px">Student Art Competition</a></span></p>
<p class="Normal-P0"><span class="Default-C"><a href="KEEP_DOGS_AWAY_FROM_WILDLIFE_WARNS_CPW.html" style="color:#000000;text-decoration:none;"> </a></span></p>
</div>
<div id="txt_1563" style="position:absolute; left:8px; top:537px; width:220px; height:79px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-bo x; overflow:hidden;">
<p class="Normal-P0"><span class="Default-C0"><a href="index.html" style="color:#000000;text-decoration:none;"><img src="wpimages/wpb1e1b002_00.jpg" width="58" height="73" border="0" title="" alt="" style="float:left; margin:6px 6px 6px 0px">Udall: Situation in Ukraine Shows Urgent Needs to Leverage Colorado's Natural Gas,
    Expedite LNG Exports</a></span><span class="Strong-Emphasis-C"><a href="index.html" style="color:#000000;text-decoration:none;"><br></a></span><span class="Default-C3"><a href="index.html" style="color:#4487c6;text-decoration:none;"> </a></span></p>
</div>
<div id="txt_1598" style="position:absolute; left:8px; top:1102px; width:220px; height:62px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-bo x; overflow:hidden;">
<p class="Normal-P0"><span class="Default-C"><a href="opinion.html" style="color:#000000;text-decoration:none;">Udall’s “Talk-<wbr>a-<wbr>Thon” Highlights His Extreme Environmental Record</a></span><span class="Body-Text-C"><a href="opinion.html" style="color:#000000;text-decoration:none;"> </a></span></p>
</div>
<div id="txt_1604" style="position:absolute; left:9px; top:1345px; width:220px; height:70px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-bo x; overflow:hidden;">
<p class="Normal-P0"><span class="Default-C0"><a href="Rotary_Student_of_the_Week.html" style="color:#000000;text-decoration:none;"><img src="wpimages/wp27d482d1.png" width="110" height="70" border="0" onload="OnLoadPngFix()" title="" alt="" style="float:left; margin:0px 4px 6px 0px"></a></span><span class="Default-C"><a href="Rotary_Student_of_the_Week.html" style="color:#000000;text-decoration:none;">Clayton Beutler</a></span></p>
<p class="Normal-P0"><span class="Default-C7"><a href="Rotary_Student_of_the_Week.html" style="color:#4487c6;text-decoration:none;"> </a></span></p>
</div>
<div id="txt_1428" style="position:absolute; left:8px; top:1239px; width:220px; height:60px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-bo x; overflow:hidden;">
<p class="Normal-P0"><span class="Default-C0"><a href="opinion.html" style="color:#000000;text-decoration:none;"><img src="wpimages/wpb3e78df6_00.jpg" width="47" height="61" border="0" title="" alt="" style="float:left; margin:0px 3px 3px 0px">Udall Among President Obama’s Most Loyal Supporters in the Senate</a></span></p>
<p class="Normal-P0"><span class="Default-C0"><a href="opinion.html" style="color:#000000;text-decoration:none;"> </a></span></p>
</div>
<div id="txt_1521" style="position:absolute; left:8px; top:1168px; width:220px; height:67px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-bo x; overflow:hidden;">
<p class="Normal-P0"><span class="Strong-Emphasis-C0"><a href="opinion.html#Ken" style="color:#000000;text-decoration:none;"><img src="wpimages/wp4e955d70_00.jpg" width="63" height="67" border="0" title="" alt="" style="float:left; margin:0px 3px 3px 0px">Ken Buck within striking distance of Mark Udall in new poll</a></span></p>
</div>
<div id="txt_1615" style="position:absolute; left:468px; top:543px; width:220px; height:67px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; overflow:hidden; color: #000; font-size: 18px;"><strong>City of Montrose Youth Council Teen Opportunity Expo</strong></div>
<div id="txt_1623" style="position:absolute; left:468px; top:615px; width:220px; height:67px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; overflow:hidden; color: #000000; font-weight: bold; font-size: 18px;">Hypothermia Claims Life</div>
<div id="txt_1624" style="position:absolute; left:238px; top:820px; width:220px; height:52px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-bo x; overflow:hidden;">
<p class="Normal-P0"><span class="Default-C"><a href="page392.html" style="color:#000000;text-decoration:none;"><img src="Images/3-18/julie baird.jpg" width="67" height="52" border="0" title="" alt="" style="float:left; margin:0px 3px 3px 0px">Julie Baird Receives Apple Award</a></span></p>
</div>
<div id="txt_1637" style="position:absolute; left:706px; top:468px; width:303px; height:227px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-b ox; overflow:hidden;">
<p class="Normal-P0"><span class="Body-Text-C"><a href="Defiant_Mouse.html">HERO Act -<wbr> Defiant Mouse</a></span></p>
</div>
<div id="txt_1645" style="position:absolute; left:238px; top:1174px; width:220px; height:67px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-bo x; overflow:hidden;">
<p class="Normal-P0"><span class="Default-C"><a href="Reduction_in_Readmission_Rates_Achieved_by_Delta_Hospital.html" style="color:#000000;text-decoration:none;"><img src="Images/3-18/Hospital.jpg" width="94" height="61" border="0" title="" alt="" style="float:left; margin:6px 6px 6px 0px">20% Reduction in Readmission Rates Achieved by Delta</a></span></p>
</div>
<div id="txt_1649" style="position:absolute; left:238px; top:606px; width:220px; height:59px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-bo x; overflow:hidden;">
<p class="Normal-P0"><span class="Default-C"><a href="GJ_POLICE_Can_You_ID_This_Man.html" style="color:#000000;text-decoration:none;"><img src="Images/3-18/Car Theft.jpg" width="69" height="53" border="0" title="" alt="" style="float:left; margin:6px 6px 6px 0px">GJ POLICE – Can You ID This Man?</a></span></p>
</div>
</div>
</body>
</html>

I wouldn't dream of using anything from Serif Web creator. The code is horrendous.
All you need is a CSS styled list.   Copy & paste this code into a new, blank document. Adjust CSS styles to suit your needs.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Document</title>
<style>
* BEGIN HORIZONTAL DROP-MENU */
nav {
    position: relative;
    width: 100%; /**adjust width as needed**/
    margin: 0 auto;
    padding: 0;
    text-align: center;
    z-index:1000;
nav ul {
    margin: 0;
    padding: 0
nav li {
    list-style: none;
    font-size: 12px;
    float: left;
    text-align: center;
/**top level menu**/
nav li a {
    display: block;
    text-decoration: none;
    margin-right: 2px;   /* space between links */
    width: 9em;   /* adjust as needed or use auto */
    padding: 6px 15px;
    font-weight: bold;
    line-height: 2em;
    color:#1e5799;
    border: 1px solid #FFF;
    background:#C7D5E3;
/**top menu style on mouse over**/
nav li:hover > a {
    color: #FFF;
    background: #1e5799;
/**sub-menu**/
nav li ul {
    display: none;
    text-align: center;
    margin: 0;
    padding: 0 1em;
    background:#C7D5E3;
    font-weight:normal;
    font-style:oblique;
/**sub-menu, help for older IE**/
nav li:hover ul, nav li.hover ul {
    display: block;
    position: absolute;
    padding: 0;
nav li:hover li,
nav li.hover li {float: none;}
/**drop-menu style**/
nav li:hover li a, nav li.hover li a {
    width: 9em; /* adjust width as needed or use auto */
    margin-top: 0;
    line-height:1.25em;
    font-weight:normal;
    border:none;
/**drop-menu style on mouse over**/
nav li li a:hover {
    background:#D3E1B7;
    color: #004A43;
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">Menu Item1 ▼</a>
<ul>
<li><a href="#">Sub_menu1a</a> </li>
<li><a href="#">Sub_menu1b</a> </li>
</ul>
</li>
<li><a href="#">Menu Item2 ▼</a>
<ul>
<li><a href="#">Sub_menu2a</a> </li>
<li><a href="#">Sub_menu2b</a> </li>
<li><a href="#">Sub_menu2c</a> </li>
<li><a href="#">Sub_menu2d</a> </li>
</ul>
</li>
<li><a href="#">Menu Item3</a></li>
</ul>
</nav>
</body>
</html>
Nancy O.

How can I get Firefox 4 to correctly display CSS padding for a horizontal nav bar (works in most other browsers, incl. earlier FF)?

I have just coded a horizontal nav bar for a site with CSS rollover effects using a:hover and a: focus effects. There are no images, just HTML and CSS. The layout works beautifully in IE 6 - 8, Safari for Windows, Opera for Windows...and Firefox 3.X but behaves poorly in Firefox 4. I've hardly ever had problems with FF before. :(
Here's the menu: http://sddlr01.hottubretailer.com/TestNav2.html
The rollovers extend below the height of the background div and the extra padding on the first and last li tag don't display correctly either. The page passes WebDeveloper toolbar CSS and HTML validation as well.
This is making me batty! Any help deeply appreciated!
Thanks.
All CSS code is in the page for debugging purposes.

I do not understand what you mean with "the rollover will extend the full width of the background"
A good place to ask questions and advice about web development is at the mozillaZine Web Development/Standards Evangelism forum.<br />
The helpers at that forum are more knowledgeable about web development issues.<br />
You need to register at the mozillaZine forum site in order to post at that forum.<br />
See http://forums.mozillazine.org/viewforum.php?f=25

Nav Bar disappears in live view and in all browsers

Hello all,
I have an issue I haven't had before. I created a navigation bar right under the header. After adding my text for the links, I checked in all browsers and each time, the nav bar disappeared, leaving me with just the words. Also the font changed back to the page default. I solved the font problem by creating images using the font I want and now I get them all to show up, but the nav bar is still missing even though it is always there in Design View. Here is my code so far. The CSS is below the HTML.
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Kendall Home</title>
<link href="kendall_styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="cobra_div"></div>
<div class="container">
<div class="header"><img src="Kendall High/Images/Cobra Final Cropped.jpg" height="150" alt="Cobra Logo" /><img src="Kendall High/Images/KHS-Header.gif" width="572" height="150" alt="Header" /></div>
<div class="navbar"><img src="Kendall High/Images/Amienne - School Calendar.png" width="124" height="30" alt="calendar" /> *** <img src="Kendall High/Images/Amienne - Cobras Schedule.png" width="114" height="30" alt="schedule" /> *** <img src="Kendall High/Images/Amienne - Email.png" width="126" height="30" alt="email" /> *** <img src="Kendall High/Images/Amienne - Lindsey's Diary.png" width="101" height="30" alt="diary" /> *** <img src="Kendall High/Images/Amienne - Game Stories.png" width="102" height="30" alt="stories" /> *** <img src="Kendall High/Images/Amienne - Store.png" width="132" height="30" alt="store" /></div>
<p>Container Content</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<div class="return"><a href="index.html">Click Here to Return to aquiverofcobras.com</a></div>
<div class="footer">Content for class "footer" Goes Here</div>
</div>
</body>
</html>
CSS Code:
@charset "utf-8";
/* CSS Document */
body,td,th {
            color: #000000;
body {
            background-color: #000000;
a:link {
            color: #0000FF;
            text-decoration: none;
a:visited {
            text-decoration: none;
            color: #0000FF;
a:hover {
            text-decoration: none;
            color: #9900CC;
a:active {
            text-decoration: none;
            font-family: Amienne;
            font-size: 20px;
a img {
            border: none;
.container {
            margin: auto;
            width: 900px;
            background-color: #FFFFFF;
            border: medium groove #666;
            font-size: 18px;
            text-align: center;
.header {
            padding: 10px;
            height: 150px;
            width: 900px;
            font-family: Amienne;
            font-size: 60px;
            font-weight: bold;
.return {
            text-align: center;
            width: 900px;
            font-family: Amienne;
            font-size: 20px;
</sty
.navbar {
            background-color: #000000;
            padding: 3px;
            height: 30px;
            width: 888px;
            border: medium groove #666;
            text-align: center;
            font-family: Amienne;
            font-size: 25px;
            color: #CCC;
.footer {
            background-color: #000000;
            color: #CCC;
            padding: 3px;
            height: 100px;
            width: 888px;
            border: medium groove #666;
.footer_div {
            height: 50px;
            width: 100px;
.floatright {
            float: right;
            margin-left: 5px;
            margin-top: 10px;
.floatleft {
            float: left;
            margin-right: 5px;
            margin-bottom: 5px;
            font-family: Amienne;
            font-size: 16px;

What is this???
.return {
            text-align: center;
            width: 900px;
            font-family: Amienne;
            font-size: 20px;
</sty
.navbar {
            background-color: #000000;
            padding: 3px;
            height: 30px;
            width: 888px;
            border: medium groove #666;
            text-align: center;
            font-family: Amienne;
            font-size: 25px;
            color: #CCC;

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

New desktop has wrong path for page links in nav bar

I created a new desktop and have the following problem. The image links to portal
pages in the horizontal nav bar in the top have wrong path.
Example.
In the original portal the home page link in the nav bar has a image associated
with it in workshop.
\framework\skin\classic\images\home.gif
The partial url generated for the image looks liek this:
\mywebapp\\framework\skin\classic\images\home.gif.
I created a new desktop everything works fine except for the images. The href's
are created for the links but the image path is wrong.
the url generated is : \mywebapp\appmanager\framework\skin\classic\images\home.gif
The "appmanager" in the path causes the problem.
Is this a bug?

Hi Subbu,
I used workshop page properties to associate the image to the page.
framework/skins/classic/images/home.gif
- Shankar
Subbu Allamaraju <[email protected]> wrote:
Shankar,
Did you use any tag to create the img tag? Do you have any sample
HTML/JSP snippet?
Subbu
Shankar Bala wrote:
I created a new desktop and have the following problem. The imagelinks to portal
pages in the horizontal nav bar in the top have wrong path.
Example.
In the original portal the home page link in the nav bar has a imageassociated
with it in workshop.
\framework\skin\classic\images\home.gif
The partial url generated for the image looks liek this:
\mywebapp\\framework\skin\classic\images\home.gif.
I created a new desktop everything works fine except for the images.The href's
are created for the links but the image path is wrong.
the url generated is : \mywebapp\appmanager\framework\skin\classic\images\home.gif
The "appmanager" in the path causes the problem.
Is this a bug?

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 "justify" problem

http://www.ronancuanflynn.com
Hi im trying to get my menu to stretch across the logo. I have done this using the following method but it only works in Safari from what i can tell.
<div id="menu">
<ul>
    <li><a href="#">Menu item 1</a></li>
    <li><a href="#">Menu item 2</a></li>
    <li><a href="#">Menu item 3</a></li>
    <li><a href="#">Menu item 4</a></li>
    <li><a href="#">Menu item 5</a></li>
</ul>
</div>
ul{
    text-align:justify;
    list-style: none; list-style-image: none; margin: 0; padding: 0;
ul:after{content:""; margin-left:100%;}
li{display:inline;}
a{display:inline-block;}
My own html is the following:
<body>
<div class="navbar">
<ul>
<li><a class="home" href="index.php">HOME</a></li>
<li> <a class="news" href="news.php">NEWS</a></li>
<li><a class="music" href="music.php">MUSIC</a></li>
<li><a class="shows" href="shows.php">SHOWS</a></li>
</ul>
</div>
</div>
</body>
</html>
And relevant CSS:
ul{
    text-align:justify;
    list-style: none; list-style-image: none; margin: 0; padding: 0;
ul:after{content:""; margin-left:100%;
li{
          display:inline;
a{display:inline-block;
#navbar {
          margin-top: 0px;
          width: 375px;
          padding-left: 1px;
Does anyone know how i could tweak it to work on all browsers? I would be so greatful if anyone has any ideas?
Thanks
AB

A: Nav bar "justify" problem

On line 57 of layout.css change this:
ul:after{content:""; margin-left:100%;}
li {display:inline}
to this:
#menu li a{
padding:0 23px;
display:inline;

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!

Image in Nav Bar

Similar Messages

Maybe you are looking for