Dreamweaver - Anyone see anything wrong with the CSS here?

Author

Anyone see anything wrong with the CSS here?

Nancy Gill

2005-10-25, 6:26 pm

I have two menus at the top of a page .. a main menu to the top left and a
shopping menu on the top right. Both are in the header div and each have
their own nested div inside header. Both need to display inline and both
have that specified. But for some reason I have yet to fathom, while the
shop menu on the right is inline, the main one on the left continues to
display block! I'm on deadline .. can anyone spot anything in either the
code or the CSS?

Many thanks!

HTML:

<div id="header">
<div id="mainmenu">
<ul>
<li>About<br /> Reimers' </li>
<li>Customer <br />Service</li>
<li>Candy <br />Shop</li>
<li>Gift <br />Shop</li>
</ul>
</div>

<div id="shopmenu">
<ul>
<li>Home | </li>
<li>View Cart | </li>
<li>Check Out | </li>
<li>My Account | </li>
<li>Order History</li>
</ul>
</div>

</div>

CSS:

#header {width: 770px;
height: 80px;
}
#mainmenu {
width: 400px;
float: left;
font-family: Georgia, "Times New Roman", Times, serif;
color: #FFCC00;
font-size: 12px;
}
#mainmenu ul {margin: 0;
padding: 0;
list-style: none;
text-align: left;
}
#main menu ul li {
padding: 4px;
margin: 0;
display: inline;
}
#shopmenu {
width: 320px;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
margin-top: 25px;
}
#shopmenu ul {margin: 0;
padding: 0;
list-style: none;
text-align: right;
}
#shopmenu ul li {
display: inline;
margin: 0;
padding: 0;
}

The nasty results can be seen here:

http://216.119.97.124/top.htm

--
Nancy Gill
Team Macromedia Member: Dreamweaver MX/UltraDev
http://www.macromedia.com/go/team/
Co-Author: Dreamweaver MX: Instant Troubleshooter (August, 2003)
Technical Editor: DMX 2004: The Complete Reference, DMX 2004: A Beginner's
Guide, Mastering Macromedia Contribute
Technical Reviewer: Dynamic Dreamweaver MX/DMX: Advanced PHP Web Development

Gary White

2005-10-25, 6:27 pm

On Tue, 25 Oct 2005 06:45:56 -0700, "Nancy Gill" <nancy@webwish.com>
wrote:

>#main menu ul li {

Change the above to:

#mainmenu ul li {

Also, my personal preference is to use float:left instead of
display: inline.

Gary

Nancy Gill

2005-10-25, 6:27 pm

> >#main menu ul li {
>
>
> Change the above to:
>
> #mainmenu ul li {

lololol .. I knew it had to be something like that!!! GEEZ!

Thanks, Gary .. much appreciated! The different eyes concept can be so
helpful! :)

> Also, my personal preference is to use float:left instead of
> display: inline.

hmm .. hadn't thought of that .. thanks .. will give that a shot!

Nancy

Michael Fesser

2005-10-25, 6:27 pm

..oO(Nancy Gill)

>But for some reason I have yet to fathom, while the
>shop menu on the right is inline, the main one on the left continues to
>display block! I'm on deadline .. can anyone spot anything in either the
>code or the CSS?
>[...]
> <div id="mainmenu">
> <ul>
> <li>About<br /> Reimers' </li>
> <li>Customer <br />Service</li>
> <li>Candy <br />Shop</li>
> <li>Gift <br />Shop</li>
> </ul>
> </div>

Why not simply

<ul id="mainmenu">
....
</ul>

> <div id="shopmenu">
> <ul>
> <li>Home | </li>
> <li>View Cart | </li>
> <li>Check Out | </li>
> <li>My Account | </li>
> <li>Order History</li>
> </ul>
> </div>

<ul id="shopmenu">
....
</ul>

>#main menu ul li {
^
There's the problem. Should be

#mainmenu ul li {...}

or just

#mainmenu li {...}

Micha

Michael Fesser

2005-10-25, 6:27 pm

..oO(Nancy Gill)

>Thanks, Gary .. much appreciated! The different eyes concept can be so
>helpful! :)

So can the DOM Inspector in the Firefox browser. ;)

With this you can investigate not only the internal document structure,
but also the applied and computed styles for every element. In this case
it showed that there were no styles (besides the browser defaults)
applied to the 'li' elements in the first list.

Micha

Gary White

2005-10-25, 6:28 pm

On Tue, 25 Oct 2005 07:14:27 -0700, "Nancy Gill" <nancy@webwish.com>
wrote:

>lololol .. I knew it had to be something like that!!! GEEZ!
>
>Thanks, Gary .. much appreciated! The different eyes concept can be so
>helpful! :)

You're welcome, Nancy.

>
>hmm .. hadn't thought of that .. thanks .. will give that a shot!

Good luck!

Gary

Nancy Gill

2005-10-25, 6:28 pm

Thanks, Micha .. a great tip! :)

Nancy

"Michael Fesser" <netizen@gmx.de> wrote in message
news:6ffsl1pc304m5dvmqhe3mdqa746fvns6af@4ax.com...
> .oO(Nancy Gill)
>
>
> So can the DOM Inspector in the Firefox browser. ;)
>
> With this you can investigate not only the internal document structure,
> but also the applied and computed styles for every element. In this case
> it showed that there were no styles (besides the browser defaults)
> applied to the 'li' elements in the first list.
>
> Micha

Bonnie

2005-10-25, 6:29 pm

Michael Fesser wrote:
> So can the DOM Inspector in the Firefox browser. ;)
>
> With this you can investigate not only the internal document structure,
> but also the applied and computed styles for every element. In this case
> it showed that there were no styles (besides the browser defaults)
> applied to the 'li' elements in the first list.
>
> Micha

Micha,

Where is the DOM inspector? I have the developer's toolbar but don't
find it anywhere?

--
Bonnie in California
kroko at
sbcglobal dot net
http://www.theanimalrescuesite.com/...ts/CTDSites.woa

Michael Fesser

2005-10-25, 6:29 pm

..oO(Bonnie)

>Where is the DOM inspector? I have the developer's toolbar but don't
>find it anywhere?

It's in the Tools menu. You probably have to do a custom install so it
will also install the developer tools.

Micha