CSS Menus in Explorer 7

I'm trying the Spry Widget Menu bar. It works great in
Netscape and Firefox 2, but Explorer is another matter all
together.
The CS3 DW validation tool indicates the style sheet has an
error that affects EX 6 and 7 but doesn't define which section it
is in.
The menu displays as a white bar in EX 7 instead of being
transparent as I designed it. Interestingly the type and links are
there, although one submenu displays in the wrong position.
Anybody?

As
thanx´s for my answer please se if U can answer my
Question
Hi Last Cowboy
Im pretty sure your problem is within the CSS style, I
created a Spry Widget Menu bar and made all bagground colors
tranparent, but I also removed all tags to Bagground-Images, and
when I previewed it IE 7 all was transparent.
I hope this can help U.
Kind regards
Mr Jensen

Similar Messages

Contribute and drop down CSS menus

Is it possible to edit drop down horizonal CSS menus with
Contribute? I'd like to recommend this product to a client but
their site (which I'm building in Dreamweaver) will have drop downs
and the client will need to be able to change, add, or delete them
later.
Any help would be greatly appreciated.

Maybe you could use serverside (php, asp, ssi) -includes in
combination with a CSS based menu with hyperlinks en provide your
client with the url to the included files, so they can update the
content. For ideas you could take a look at this site
http://www.cssplay.co.uk/menus/index.html.

ANNC: MX CSS Menus 2 released

Hello,
We've just released a new version of our MX CSS Menus -
version 2.
As compared with the previous version, we did a lot of
improvements and
changes:
- the product now works with simple HTML pages and
Dreamweaver
templates (DWT)
- we've rewritten the CSS file from scratch for easier
editing (you
can even edit it directly from the Dreamweaver 8 CSS panel)
- we provide 23 CSS skins (PSD files included) for the 4
types of
menus that are included (horizontal, vertical, tab and
expandable)
- we have included a visual CSS skin builder with live
preview - that
will generate the CSS for you
- we have reduced the JS files size three times and doubled
the
rendering speed
- of course, we've preserved the database connectivity that
made
version 1 a hit
- several visual effects are now available (zoom, fade,
slide)
- we've tested the menu thoroughly on as many browsers as
possible
(except IE 5 on MAC, we provide at least partial support on
all browsers)
- and many others (better Dreamweaver UIs, rewritten
documentation and
tutorials, etc)
See a MX CSS Menus 2 live demo:
http://www.interaktonline.com/demos/MXCSSMenu/index.php
Check out the avaialble CSS skins:
http://www.interaktonline.com/Products/Dreamweaver-Extensions/MXCSSMenus/Skins/
Download a trial version:
http://www.interaktonline.com/Products/Dreamweaver-Extensions/MXCSSMenus/Try-Download/
Read more on MX CSS Menus 2:
http://www.interaktonline.com/Products/Dreamweaver-Extensions/MXCSSMenus/Overview/
Alexandru
Alexandru COSTIN
Division Manager
http://www.interaktonline.com/
+4021 312 5312

Shane,
I am not going to splash out �400 + for a program I
have no real use for and
if a product is being supplied for use with Dreamweaver then
the supplied
images should be editable in Fireworks (as Alexandru has now
confirmed) IMHO
Dave Buchholz
I-CRE8
www.i-cre8.co.uk
"Shane H" <[email protected]> wrote in
message
news:[email protected]...
Now that Adobe owns Macromedia, I don't see why that is an
issue. I supply
.PSD files with my templates, personally.
Shane H
[email protected]
http://www.avenuedesigners.com
"Dave Buchholz" <[email protected]>
wrote in message
news:[email protected]...
> Alexandru,
>
> why psd files for the skins and not png's ?
>
> --
> Dave Buchholz
> I-CRE8
> www.i-cre8.co.uk
>
>
> "Alexandru Costin" <[email protected]>
wrote in message
> news:[email protected]...
> Hello,
> We've just released a new version of our MX CSS Menus -
version 2.
>
> As compared with the previous version, we did a lot of
improvements and
> changes:
> - the product now works with simple HTML pages and
Dreamweaver
> templates (DWT)
> - we've rewritten the CSS file from scratch for easier
editing (you
> can even edit it directly from the Dreamweaver 8 CSS
panel)
> - we provide 23 CSS skins (PSD files included) for the 4
types of
> menus that are included (horizontal, vertical, tab and
expandable)
> - we have included a visual CSS skin builder with live
preview - that
> will generate the CSS for you
> - we have reduced the JS files size three times and
doubled the
> rendering speed
> - of course, we've preserved the database connectivity
that made
> version 1 a hit
> - several visual effects are now available (zoom, fade,
slide)
> - we've tested the menu thoroughly on as many browsers
as possible
> (except IE 5 on MAC, we provide at least partial support
on all browsers)
> - and many others (better Dreamweaver UIs, rewritten
documentation and
> tutorials, etc)
>
> See a MX CSS Menus 2 live demo:
>
http://www.interaktonline.com/demos/MXCSSMenu/index.php
>
> Check out the avaialble CSS skins:
>
http://www.interaktonline.com/Products/Dreamweaver-Extensions/MXCSSMenus/Skins/
>
> Download a trial version:
>
http://www.interaktonline.com/Products/Dreamweaver-Extensions/MXCSSMenus/Try-Download/
>
> Read more on MX CSS Menus 2:
>
http://www.interaktonline.com/Products/Dreamweaver-Extensions/MXCSSMenus/Overview/
>
> Alexandru
>
> --
> Alexandru COSTIN
> Division Manager
>
http://www.interaktonline.com/
> +4021 312 5312
>
>

Advanced css menus

Some days back I found a site that was selling some sort of
extension/plugin, or pre built code for advanced css menus,
however, shortly after finding this site and bookmarking it, my
hard disk died and I subsequently lost the bookmark. I am hoping
some of you might be able to point me in the right direction.
Basically, it seemed to me that the menus on this site were
VERY advanced css menus, in that they weren't just a row or column
of links, but rather almost like a popup with coloumns of links and
images similar to the ones now found on www.webassist.com.
Any ideas where I can get it from? Any ideas what I am on
about as I have tried searching, but no joy :(
Thanks
Mat

Could it have been
http://www.projectseven.com?
=20
--=20
Nancy Gill
Adobe Community Expert
Author: Dreamweaver 8 e-book for the DMX Zone
Co-Author: Dreamweaver MX: Instant Troubleshooter (August,
2003)
Technical Editor: Dreamweaver CS3: The Missing Manual,
DMX 2004: The Complete Reference, DMX 2004: A Beginner's
Guide
Mastering Macromedia Contribute
Technical Reviewer: Dynamic Dreamweaver MX/DMX: Advanced PHP
Web =
Development
"matthew stuart" <[email protected]> wrote
in message =
news:gomtbr$ajd$[email protected]..
> Some days back I found a site that was selling some sort
of =
extension/plugin,=20
> or pre built code for advanced css menus, however,
shortly after =
finding this=20
> site and bookmarking it, my hard disk died and I
subsequently lost the =
> bookmark. I am hoping some of you might be able to point
me in the =
right=20
> direction.
>=20
> Basically, it seemed to me that the menus on this site
were VERY =
advanced css=20
> menus, in that they weren't just a row or column of
links, but rather =
almost=20
> like a popup with coloumns of links and images similar
to the ones now =
found on=20
> www.webassist.com.
>=20
> Any ideas where I can get it from? Any ideas what I am
on about as I =
have=20
> tried searching, but no joy :(
>=20
> Thanks
>=20
> Mat
>

Can't click links under text menus (CSS menus)

I have an issue clicking certain text menus while using mobile browsers including Firefox Beta and even chrome.
I'm pretty sure they are CSS text menus.. but say I click a header, and there are link options below that header.. I can't click the links that are below it because it quickly loads the link at the top of the menu.
Say this is the menu:
Account
-- info
-- security
-- etc
And account is the header link, and I want to access "security" it doesn't even give me a chance to because it loads the Account link.
Confused and don't know why its happening
The pic is an example of a menu with links incant use

This is a common problem with traditional menus because unlike using a mouse, there's no way to "hover" over a menu on mobile, you have to touch it, which then gets processed like a click. Unfortunately I'm not aware of any workarounds.
(My blog has this problem and I probably need a new template that can tell the difference between desktop and mobile browsers and adapt how the menus work.)

CSS for Internet Explorer 6

I'm having a tough time with CSS displaying correctly in IE6,
and as usual, am at my wits end.
I've built a site that uses a single-page template
throughout, on every page. It displays fine in about every browser
except for the one my client is using...IE6.
All my CSS is stored in a single file, and the template is
linked to that file. The CSS that is assigned at the
master-template level seems to work ok. However, any CSS that I
apply while working on one of my pages (based on the template) does
not display in IE6.
Anyone know why this might be? I've even tried to assign this
simple CSS to a test page and it doesn't display either in IE6.
Links below:
www.arkansasascd.org/proof
www.arkansasascd.org/proof/testpage.html

IE6 has more than its share of the world's CSS
idiosyncrasies. Start here:
http://css-tricks.com/ie-css-bugs-thatll-get-you-every-time/
Walt
"Zimmerman74" <[email protected]> wrote in
message
news:gk89l2$3bv$[email protected]..
> I'm having a tough time with CSS displaying correctly in
IE6, and as
> usual, am
> at my wits end.
>
> I've built a site that uses a single-page template
throughout, on every
> page.
> It displays fine in about every browser except for the
one my client is
> using...IE6.
>
> All my CSS is stored in a single file, and the template
is linked to that
> file. The CSS that is assigned at the master-template
level seems to work
> ok.
> However, any CSS that I apply while working on one of my
pages (based on
> the
> template) does not display in IE6.
>
> Anyone know why this might be? I've even tried to assign
this simple CSS
> to a
> test page and it doesn't display either in IE6. Links
below:
>
> www.arkansasascd.org/proof
> www.arkansasascd.org/proof/testpage.html
>

CSS differences in Explorer and firefox

http://www.captivationstudios.com/menutest1.html
Well its working! (er well at least I thought it was!) Silly
me I checked this the whole time with Mozilla and Opera, within
which of course it works perfectly with, I then went to check it
with Explorer and hey presto its not doing what it is supposed to
do!
I guess this could well be a general problem (checking it
with Explorer 6), it could also be that I have done something very
stupid in the construction, does anyone know of a way to remedy
this situation?
Thanks

What's it supposed to be doing? You've said nothing about the
problem you're
having with it. From just looking at the page in Firefox and
IE - I see no
difference, they both display the menu when hovered over.
What problem are you having? You need to explain yourself a
bit more to get
any help.
HTH, take care.
Shane H
[email protected]
http://www.avenuedesigners.com
=============================================
Proud GAWDS Member
http://www.gawds.org/showmember.php?memberid=1495
Delivering accessible websites to all ...
=============================================
"freddyfries" <[email protected]> wrote in
message
news:e89mbh$f2m$[email protected]..
>
http://www.captivationstudios.com/menutest1.html
>
> Well its working! (er well at least I thought it was!)
Silly me I checked
> this
> the whole time with Mozilla and Opera, within which of
course it works
> perfectly with, I then went to check it with Explorer
and hey presto its
> not
> doing what it is supposed to do!
>
> I guess this could well be a general problem (checking
it with Explorer
> 6), it
> could also be that I have done something very stupid in
the construction,
> does
> anyone know of a way to remedy this situation?
>
> Thanks
>
>

Help with CSS image Gallery

Found this simple css image gallery. However I'm having trouble adjusting it do my needs. I ideally want to make each small image slightly bigger than currently and have 3 or 4 on each line. Also want to make the enlarged image bigger. The width would need to be around 550px.
<style type="text/css">
* This notice MUST stay intact for legal use.
* This script was created for FREE CSS Menus.
* Visit: www.freecssmenus.co.uk for more CSS.
* Also visit our Free online menu creator.
/* credits: www.freecssmenus.co.uk */
#pg { width:390px;
height:200px;
border:2px dotted #666;
padding:5px;
padding-top:15px;
#pg ul { list-style:none;
padding:0;
margin:0;
width:180px;
position:relative;
float:left;
#pg ul li { display:inline;
width:52px;
height:52px;
float:left;
margin:0 0 8px 8px;
#pg ul li a { display:block;
width:50px;
height:50px;
text-decoration:none;
border:1px solid #000;
#pg ul li a img { display:block;
width:50px;
height:50px;
border:0;
#pg ul li a:hover { white-space:normal;
border-color:#336600;
background-color:#AABB33;
#pg ul li a:hover img { position:absolute;
left:190px;
top:0;
width:auto;
height:110px;
border:1px solid #000;
#pg ul li a span {display:none}
#pg ul li a:hover span { display:block;
position:absolute;
left:5px;
top:130px;
width:350px;
height:auto;
font-size:12px;
color:#999999;
</style>
html
<div id="pg">
<ul>
<li>
<a href="css_rollover_uk_map.php">
<img src="upimage/ukmap345.jpg" alt="Css Rollover Map" />


CSS Map.
CSS Image swap on rollover/hover. This simple display of CSS shows the versatility of Cascading Style Sheets. Remember this animation is 100% User Accessible.
</a>
</li>
<li>
<a href="big_css_button.php">
<img src="upimage/bigbutton1390.jpg" alt="Large Css Button" />


CSS Big Button.
Css buttons can be as large and as extravagant as you like. Using one image you can create simple css buttons like this. This button is still a hyperlink not just an image.
</a>
</li>
<li>
<a href="menu_opacity.php">
<img src="upimage/003opacity639.jpg" alt="Css Opacity" />


CSS Opacity Menu.
you can use styles to change the opacity of an image. This creates interesting effects when creating a menu. 
</a>
</li>
<li>
<a href="#">
<img src="upimage/freemusic885.jpg" alt="Free Mp3 Downloads: Unborn Records" />


Unborn Records 
Download free mp3 music for your ipod or mp3 player. Download free music from unsigned artists
</a>
</li>
<li>
<a href="#">
<img src="upimage/trix363.jpg" alt="Visit Trix the dog at www.catandtwodogs.co.u" />


Cat And Two Dogs 
Visit my three pets at www.catandtwodogs.co.uk . This is a picture of trix, he's a border collie.
</a>
</li>
<li>
<a href="#">
<img src="upimage/colours238.jpg" alt="A picture of colours in a swirl" />


A swirl of colours. 
This is just a picture of colours in a swirl effect.
</a>
</li>
</ul>
</div>

Sorry can't do this at the moment.
I've decided to switch to the JQuery Lightbox Image Gallery instead. In IE8 I get the following message:
Message: Script error
Line: 0
Char: 0
Code: 0
URI: file:///C:/Documents%20and%20Settings/User/My%20Documents/SRC12-13/all%20html%205/all%20ht ml%205/Simple-HTML-5-Template/Simple%20HTML%205%20Template/js/jquery.lightbox-0.5.min.js
My page works and my js is refenced correctly. Not sure if this is just a IE8 thing, or whether the page needs uploading to work correctly. Works fine in Chrome.
Wonder if there is a way to fix this?

Link to css error

<link href="rescueRegister.css" rel="stylesheet" type="text/css" />
Check browser compatibility in DW CS4 on mac returned the following but did not suggest solution. Anyone have a suggestion?
Found 4 errors in rescueRegister.css
Affects: Internet Explorer 6.0, 7.0; Internet Explorer for Macintosh 5.2; Opera 8.0, 9.0; Safari 2.0
Here is the css
@charset "UTF-8";
body {
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
background-color: #000;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
.thrColFixHdr #container {
width: 1024px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
height: 825px;
.thrColFixHdr #header {
background-color: #DDDDDD;
background-image: url(images/rescuehead.jpg);
height: 200px;
padding-top: 0;
padding-right: 10px;
padding-bottom: 10;
padding-left: 20px;
margin: 0px;
.thrColFixHdr #sidebar1 {
float: left; /* since this element is floated, a width must be given */
width: 205px; /* padding keeps the content of the div away from the edges */
padding-top: 25px;
padding-right: 0px;
padding-bottom: 15px;
padding-left: 0px;
height: 500px;
background-color: #F9F4EF;
}.smallprint {
font-size: 10px;
color: #444;
CSS
#navcontainer
background: #f0e7d7;
width: 205px;
font-family: georgia, serif;
font-size: 13px;
text-align: center;
text-transform: lowercase;
margin-top: 0;
margin-right: 0px;
margin-bottom: 0;
margin-left: 0px;
padding-top: 1em;
padding-right: 0;
padding-bottom: 1em;
padding-left: 0;
ul#navlist
text-align: left;
list-style: none;
padding: 0;
width: 205px;
margin-top: 0;
margin-right: 0px;
margin-bottom: 0;
margin-left: 0px;
ul#navlist li
display: block;
margin: 0;
padding: 0;
ul#navlist li a
display: block;
width: 100%;
padding: 0.5em 0 0.5em 2em;
border-width: 1px;
border-color: #ffe #aaab9c #ccc #fff;
border-style: solid;
color: #555;
text-decoration: none;
background: #f7f2ea;
#navcontainer>ul#navlist li a { width: auto; }
ul#navlist li#active a
background: #f0e7d7;
color: #800000;
ul#navlist li a:hover, ul#navlist li#active a:hover
color: #800000;
background: transparent;
border-color: #aaab9c #fff #fff #ccc;
.thrColFixHdr #mainContent {
margin-top: 0;
margin-right: 55px;
margin-bottom: 0;
margin-left: 220px;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;
.thrColFixHdr #footer {
padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
background:#DDDDDD;
.thrColFixHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
font-size: 11px;
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
h2 {
font-size: 18px;
a:link {
color: #022A4E;
text-decoration: none;
a:visited {
text-decoration: none;
color: #5D1A0F;
a:hover {
text-decoration: none;
a:active {
text-decoration: none;
h1 {
font-size: 24px;
line-height: normal;
font-style: normal;
text-align: left;
padding: 0px;
margin-top: 21px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
#mainContent p small print {
font-size: 12px;
color: #777;
#mainContent p small print {
font-size: 10px;
color: #444;

I found 2 errors with your CSS. First, the body background-color and color are the same (black #000). Black on black will make things not visible. Second, your .thrColFixHdr #header padding-bottom is set to 10. You have to add px after the 10 for the code to be valid, otherwise the browser does not know what the units should be.
As far as Browser Compatibility checks go, open up that window and click the Play button (I call it that, little green arrow for running check) and choose settings. Uncheck IE for Mac, set IE to 7.0, Safari to 3.0, Firefox to 2.0. Unless you have statistics for your site proving otherwise, this would tend to be a good place to start the DW browser check. IE for Mac support was dropped back at 10.3, IE has dropped support for IE 6 (but if you have statistics proving other keep it), Safari 3 was released with Leopard and as of February 80% of Mac users were on either Leopard or Snow Leopard ( http://www.appleinsider.com/articles/10/02/27/mac_os_x_market_share_up_29_leopard_still_mo st_common.html ) and Firefox 2.0 was released in 2006. In all honesty Firefox could be bumped up to 3.0 because those users tend to upgrade as well.

Css positioning

More css dumbness on my part:
I have two DIVs on a page that both have a table inside it.
The intention is that both tables should center within their DIV.
In IE on the PC, the content table centers, but the footer table
aligns left. In Mozilla, it's the other way around!
In the case of the #content, if I remove the nav class from
that table, the table will center in Mozilla, but then my text has
no formating. I don't see what it is about my .nav styles that
would cause the table to align left (?)
In the case of the #footer, the table in that is set to
center and has 80% width, with an expanding cell in between the
logo and text. Here, I can get it to center in IE if I write: div
align="center" but then my type is centered, where I want it align
left.
I'm sure part of my problem is doing this stuff past my
bedtime.
Link to home
page
Link to style
sheet

"Fun Leprechaun" <[email protected]> wrote
in message
news:gb9pep$1hj$[email protected]..
> Hi there,
>
> Can anyone tell me why my left sidebar div jumps to the
right-hand side of
> my
> monitor when the browser window is expanded larger than
the standard
> browser
> size? Also, I'm having difficulty with the alignment of
the columns -
> isn't
> there something I can do with the margin of the
maincontent div to make
> the
> columns flush? Furthermore, I want the width of my
footer to be the same
> as my
> header but when I put in a fixed pixel width it doesn't
work - any
> suggestions?
>
> Here's the url address:
>
> www.saponelawfirm.com
Remove "float:left" from .twoColLiqLtHdr #header {}
For the width of the footer try this value: 1180px (not
1200px)
Thierry
http://www.TJKDesign.com/go/?0
| Articles and Tutorials
http://divahtml.com/products/scripts_dreamweaver_extensions.php
| Extensions
that keep your markup clean
http://www.fourlevel.com/ |
CSS Menus, Gallery, Tab Panels, etc

CSS What have i done wrong

Hi,
When i open my HTML page in Explorer from my desktop folder
the CSS doesn't work.
When i open the HTML file in Dreamweaver the CSS file works?
If i open afile from another project with CSS attahced in
Explorer it works.
It worked yesterday.
Any ideas?

> When i open my HTML page in Explorer from my desktop
folder the CSS
> doesn't
> work.
>
> When i open the HTML file in Dreamweaver the CSS file
works?
This means that you have used root relative links for your
page, which will
not work when you open the files directly in the browser.
They will work on
the web, or when you preview in DW (assuming you have enabled
temp files for
Preview in Browser preferences), but not when you open
directly.
> If i open afile from another project with CSS attahced
in Explorer it
> works.
That means you did not use root relative links for that page.
http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_13129&sliceId=2
http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_15546&sliceId=2
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
==================
"josh the cat" <[email protected]> wrote in
message
news:gf3qsq$gbf$[email protected]..
> Hi,
>
> When i open my HTML page in Explorer from my desktop
folder the CSS
> doesn't
> work.
>
> When i open the HTML file in Dreamweaver the CSS file
works?
>
> If i open afile from another project with CSS attahced
in Explorer it
> works.
>
> It worked yesterday.
>
> Any ideas?
>

CSS Menu in Wordpress site

I am attempting to update a menu in a Wordpress site using CSS. I would like to have a repeating background image for each list item that is currently active and on hover, as I have done below. The problem is the image, although 50px high, only shows as the font size (14x) and only shows for the length of the characters. I need to figure out how to force the image to display full height and give some left and right padding.
#menu {
height: 50px;
width: 960px;
margin-top: 0px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
background-image: url(menu_bg.jpg);
background-repeat: no-repeat;
padding-top: 12px;
#menu ul {
display: inline;
height: 50px;
#menu li {
display: inline;
#menu a {
color: #1f2320;
font-size: 14px;
margin-left: 20px;
font-weight: bold;
#menu a:link {
#menu a:hover {
color: #679800;
text-decoration: none;
#menu li a:hover {
color: #679800;
text-decoration: none;
background-image: url(menu_over.jpg);
background-repeat: repeat-x;

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

Dynamic Menus - What to use?

Hi -
Any good suggestions for a replacement for the old abandoned MX CSS Menus extension?
I want to create a dynamic " user updateable " site meny system/tree menu, and need any suggestions for a good system to choose.
Kind r
Bjørn.

"hough probably not something I'd want a client to update if they are at a "Contribute" level"
Beth...
The CSS Menu from Interakt WAS a very nice extension to DW that allow users to add new menu items based on a recordset. HOWEVER the style was made by the designer.
For example: You have a back-end page where the user can add, remove produts and categories. When the user add a new categorie to the "Admin Products" page, a new link will magicly appear on the front end. :) With the style defined by the designer.
Adobe Spry Menu blabla, for now, doesn't know what a recordset is. >;)
Like Bjørn-Tore:
Any good suggestions for a replacement for the old abandoned MX CSS Menus extension?
Regards,
Márcio

CSS class syntax

Hello.
I have a site with a template and a menu built from graphic buttons.
Here is a button from my template :
<a href="../mypage1.html" class="@@(attr_1)@@"><img src="../web_images/mybutton1.gif" width="100" height="35" class="nostyle" longdesc="../mypage1.html" /></a> 
and a class "nostyle" that does nothing.
I have created an editable attribute in my template attr_1 for my button. In mypage1.html I have modified the template properties for that attribute and instead of nostyle class I want a new defined class named change_button_image to change the image of the button with another image.
What CSS code must I use in the new class?
Please give me the syntax about how to change the original image for the button.
Thank You !

Open your main Template.dwt and add an editable region to that paragraph.
NOTE: This will effect all other child pages.
Sitewide menus are typically maintained inside the main.dwt file and not on individual pages.
CSS Menus
http://alt-web.com/DEMOS/CSS2-Horiz-Drop-Menu.shtml
Persistent Page Indicator on CSS Menus
http://alt-web.com/Articles/Persistent-Page-Indicator.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Inserting fireworks html into dreamweaver css

I have been using Fireworks CS4 to design layouts and export CSS into Dreamweaver CS4, which works just fine.
I want to import a Fireworks HTML pop-up menu in my CSS based Dreamweaver page. I have used Fireworks Export HTML and Dreamweaver's insert Fireworks HTML in the past but the pop-up behaviours are lost when I import it into a template that is CSS based. I figure I'm missing something simple, as usual.
Can the two be mixed? Do I need to edit the code view and insert a DIV manually or something? Can I just link to it with css somehow?
Getting rather frustrated now!

I had a lengthy reply written for this but lost it when I was logged out - seems the forum has a bit of a problem at the moment (at least for me !).
I'm not up to re-writing it all again, but in essence, I agree totally with Nancy, do not use html generated by Fireworks or any graphics program for that matter. If you were to ask the same question over at the FWs forum, you would be told the same thing, exporting HTML and CSS is ok for protypes, but not for live production sites.
TAKING FIREWORKS COMP TO DREAMWEAVER:
http://www.adobe.com/devnet/dreamweaver/articles/dw_fw_css_pt1.html
The rule of thumb is to design the layout in FWs but build the site in Dreamweaver. The Spry menus are much better than the old popup menus, but the customisation of them does depend on your knowledge of CSS.
Customizing a Spry Menu:
http://foundationphp.com/tutorials/sprymenu/customize1.php
There are many websites that show how to use CSS to create nicely styled menus, including Dropdowns and I'm sure with a lot less code bloat :-)
Basic css menus: horizontal / vertical:
http://css.maxdesign.com.au/listamatic/index.htm
CSS Dropdown menus by Suckerfish:
http://www.htmldog.com/articles/suckerfish/dropdowns/

CSS Menus in Explorer 7

Similar Messages

Maybe you are looking for