css menu-page display problems
Hi,
I am new to CSS and I am using Expression Web 2. The menu portion I created following The No-Code Way to a Pure CSS Horizontal Drop-Down Menu with Expression Web
It didn't occur to me to create in Firefox or Opera first...now I will do that. In he meantime the page & menu 'appear' okay in IE7 but not in Firefox or Opera.
I thought I was doing so well and then discovered the awful formatting in Firefox and Opera.
PLEASE if there is an example on how this can be corrected I would greatly appreciate it. THANK YOU!
greg posted this at 20:41 — 20th April 2009.
He has: 1,581 posts
Joined: Nov 2005
Hi welcome to TWF
I fixed the link on your post, you just use the links here the same as normal HTML
<a href="http:/link">link text</a>Your top navigation menu is floated left to allow for all the links to be along a horizontal.
So it looks to me like you need to clear that left float after the top nav menu code as the second (left nav menu) is trying to float next to the top nav menu:
So after this:
<div id="topNavigation"></div>Have this:
<div style="clear: left;"></div>That sorts the left menu.
The top menu in my Firefox also needs sorting.
You are define things more than once and sometimes this is conflicting with another.
For example you have:
ul li a{background-color: #ebebeb;
}
But then also
ul li ul li a {background-color:#EBEBEB;
font-family:Arial Narrow;
text-decoration:none;
}
ul li ul li a:hover {
background-color:#FFCCFF;
font-family:Arial Narrow;
text-decoration:none;
}
ul li a:hover {
background-color:#EBEBEB;
font-family:Arial Narrow;
}
The top nav menu really needs a good sorting out.
decibel.places posted this at 20:49 — 20th April 2009.
He has: 1,494 posts
Joined: Jun 2008
HI and Welcome to TWF!
cross-browser css is fun, isn't it?
some pointers:
do not use HTML comments
<!-- -->inside<style></style>tagsdo not use quotes for the @import stylesheet url
@import url(css/sshc.css);that fixes some problems right away...
I also added these styles that help with some of the problems, but I got bored and I usually earn good money for this kind of work...
ul {display: inline;}
ul li {
width:140px;
padding: -5px 0;
}
ul li a{
z-index: 100;
}
#outerWrapper #topNavigation a, a:link {
z-index: 100;
}
#outerWrapper #contentWrapper #leftColumn1 {width: 170px}
p.search {position: relative; margin-bottom: 0px}
decibel.places posted this at 21:19 — 20th April 2009.
He has: 1,494 posts
Joined: Jun 2008
funny how two developers will take different approaches
the left sidebar was actually displaced by the menu: fix the menu and it is more manageable.
@pccoach - maybe you should start over with a workable and tested cross-browser menu - there are some good ones at Dynamic Drive
greg posted this at 00:08 — 21st April 2009.
He has: 1,581 posts
Joined: Nov 2005
Clearing floats when required should always be done though. Floats can often return different results between the different browsers, more so if you don't clear them where you meant to.
I.E. If you didn't intend for the left nav menu to be floated next to the top nav menu (which is just before the left nav and is also floated left) then you should clear it's float property.
Even if without clearing it works fine, if nothing else it's good practice. And should make it future proof for any changes browsers make to handling of floats.
Brutal posted this at 10:55 — 22nd April 2009.
They have: 134 posts
Joined: Feb 2009
Hello pccoach, hello guys.
*confusing*
What is going on with navigation in http://soundsidehealthcare.com/SSHC/?
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.