CSS - Css Navigation Menu (firefox Issue)

When I change pages on my website, my navigation buttons don't change color like they should. I keep going through the code and just can't figure it out. I had somebody else write the code, and they are no longer around. I would sure appreciate any help anybody could offer.

Is it ok if I post the website here? Or if someone is knowledgeable, I can PM them the website for a quick look?

Any help would be greatly appreciated!

I cant seem to get it to work with IE7 or IE9. It works fine in every other browser.

Code:

http://www.sdindependentplumbing.com/

This my [ if IE ] CSS code for IE 8 & 9:

.l-triangle-top { }

.l-triangle-bottom {}

.r-triangle-top {}

.r-triangle-bottom {}

Thanks in advance for any help or comments.

hey guys. wanna use an UL as navigation. my problem is I am unsure how to get this centered and get that tail of black off. here is the code.

Code:

 ul#navlist
{
padding: 0;
margin: 10;
list-style-type: none;
float: center;
width: 85%;
color: #fff;
background-color: #000000;
}

ul#navlist li { display: inline; }

ul#navlist li a
{
float: center;
width: 5em;
color: #fff;
background-color: #000;
padding: 0.2em 1em;
text-decoration: none;
border-right: 1px solid #fff;
}

ul#navlist li a:hover
{
background-color: #369;
color: #fff;
}

html
Code:

<ul id="navlist">
<li><a href="#">Home</a></li>
<li><a href="#">Band<font face="Times New Roman">&nbsp;</font>Bios</a></li>
<li><a href="#">Multimedia</a></li>
<li><a href="#">Shows</a></li>
<li><a href="#">Lyrics</a></li>
<li><a href="#">Merchandise</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Guestbook</a></li>
</ul>

Hi there, I am in the process of making a website to purchase tickets for Cannon and Ball's show in Morecambe, and I've tried to make it as standards compliant and usable as possible. I've made a nav bar using a UL tag. This works fine in opera and mozilla, but the hover effect doesn't kick in in IE until you are actually on the text.

I've tried using the IE7 patch and that helps none.

Can anyone tell me what I'm doing wrong?

The site is: http://cannonandball.1stmorecambe.net/
Style sheet: http://cannonandball.1stmorecambe.net/style.css

I want to make a left side navigation menu that nested menus popup beneath the parent menu when click the parent menu, submenus will be closed when clicks parent menu again
How can do that using css and html?

Hello,
I want to create Vertical Navigation menu with pure CSS.

Navigation menu will have main menus name. When user click on any of main menu, it should open list of sub-menu under same navigation(menubar). i mean like tree naviation but sub-menus should open under same menus. Navigation menu is vertical menus.

Example:
please go to : http://www.projectseven.com/tutorials/navigation/swapclassmenu/index.htm

Under Overview:How it works section: Please click on See the finished SwapClass menu link.

In that page they have left hand side vertical nav-menu with sub-menus open under same navbar.

I want to create like above example.

Is there any tutorials or open source for this?

Thank you,
tec

Please delete...

Ok, 'guys' I've hit a snag.

I'm trying to redesign my website and am using blueprint css framework for the first time in my life.

I've tested the layout in FF3.6, Google Chrome v8.0, Safari for Windows v5.03, IE8, and IE8 in compatibility mode [to emulate IE7].

It works great in ALL browsers I tested except emulated IE7.
In this mode, the menu completely disappears except for a separate div that holds the left nav image.

I have validated the html and my customized css file and have gotten rid of all errors found...but, still cannot get the nav menu to show up in emulated IE7 mode.

So, I'm hoping Kravvitz or some other CSS god will come to my rescue.

the short link to my dev page is http://drw65.servehttp.com/

this is a url redirect link that will redirect to my personal webspace from my ISP.

thanks for reading.

Hello I have a site uptogether but having a problem with my top navuigation.I have my whole pag centered in the container but the navigation is to the left and i cant seem to move it.Here is the code I have used for the navigation :-

#navigation {
BACKGROUND: url(../_images/navbg.jpg) #0038ba repeat-x; WIDTH: 700px; HEIGHT: 35px;
}
#menu {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; FLOAT: left; PADDING-BOTTOM: 0px; COLOR: #ffffff; PADDING-TOP: 11px
}
#menu .item {
PADDING-RIGHT: 20px; PADDING-LEFT: 20px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; TEXT-DECORATION: none
}
#menu .item A {
COLOR: #ffffff; TEXT-DECORATION: none
}
#menu .item A:hover {
COLOR: #ffc45d; TEXT-DECORATION: none
}
#categories {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: right; PADDING-BOTTOM: 0px; WIDTH: 240px; PADDING-TOP: 9px; TEXT-ALIGN: center
}
.catSelect {
FONT-SIZE: 100%; WIDTH: 200px
}
.catSelectOrange {
BACKGROUND: #ffae22
}

Can anyone help me please. Cheers

Stevo!!

I have a CSS, drop-down navigation menu for my company's site, at the top of every page: http://www.mediamogulsweb.com/.

It works fine in Firefox and IE6.

At first it seems to work in IE7. But if you mouse over the pop-out menus a few times, you'll notice that every so often the menu breaks (in IE7).

My guess is that it has to do with the display property set for the embedded unordered lists in the menu. But I have "display" set to "none", so it seems like I shouldn;t be having this problem.

Can anyone help? thanks...

I dont understand what I am missing, the menu is suppose to be a drop down menu (and suppose to be horizontal, but i havent got that far yet) but its not dropping, its displaying everything? I would appreciate any help on making it work correctly, thanks much!

-Sean

nav_style.css file:
Code:

body {
	font-family: Arial, Helvetica, sans-serif;
}

#nav {
	width: 200px;
	font-family: Arial, Helvetica, Sans-serif;
}

#nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#nav li { 
	border-bottom: 1px solid #ed9f9f;
}

#nav li a:link, #nav li a:visited {
	display: block;
	padding: 5px 5px 5px 0.5em;
	border-left: 12px solid #711515;
	border-right: 1px solid #711515;
	background-color: #b51031;
	color: #ffffff;
	text-decoration: none;
}

#nav li a:hover {
	background-color: #711515;
	color: #ffffff;
}

#nav ul ul {
	margin-left; 12px;
}

#nav ul ul li {
	border-bottom: 1px solid #711515;
	color: #ffffff;
}

#nav ul ul a:link, #nav ul ul a:visited {
	background-color: #ed9f9f;
	color: #711515;
}

#nav ul ul a:hover {
	background-color: #711515;
	color: #ffffff;
}

and here is the head_nav.php file:
Code:

<?php echo "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?".">"; ?>
<!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>
<title>?</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="css_inc/nav_style.css" />
</head>

<body>

<div id="nav">
 <ul>
  <li><a href="#">Services</a>
  	<ul>
  	<li><a href="#">Cinematography</a></li>
  	<li><a href="#">Photography</a></li>
   </ul>
  </li>
  <li><a href="#">Video</a>
  	<ul>
  	<li><a href="#">Demo Reel</a></li>
  	<li><a href="#">Music Video</a></li>
	<li><a href="#">Commercial</a></li>
   </ul>
  </li>
  <li><a href="#">Photo Gallery</a></li>
  <li><a href="#">About Valliant</a>
   <ul>
  	<li><a href="#">Biography</a></li>
  	<li><a href="#">Resume</a></li>
	<li><a href="#">Contact</a></li>
   </ul>
  </li>
  <li><a href="#">Links</a></li>
  <li><a href="#">Home</a></li>
 </ul>
</div>

</body>
</html>

I'm trying to get my horizontal navigation to work for a PTA page I'm creating. New to CSS and I think I've got a bit of the gist of it... but I'm really struggling with this. I've mostly "found" the coding I needed and then modified it to suit my needs.

As a designer, though, I still want it to look the way I want it to and I'm not quite able to accomplish that.

Basically, I would like a drop down menu added to the navigation I've created here - lwptsa . org/newsite/

This is the solution I found - lwptsa . org/newsite/dropdown . html

But I am unable to get the dark blue to continue to the end of the container.

** ACK, not allowed to post images. You can find the image I'm referring to he lwptsa . org/newsite/images/navigation . jpg

I'd like to fix the left margin spacing and it's coloring (A), making the lines between the buttons/blocks white (B) and having the blue flush with the white containers above and below (A). I'd also like to keep the top lines between the drop-down menu (C) but remove it from the main menu/navigation (B).

Hopefully this makes sense. My style sheets a

No drop-down menu, but working spacing and white separating lines (id - navigation):
lwptsa . org/newsite/
Code:

body
{
	margin: 20px;
	padding: 0;
	font: 100%/1.3 arial;
	font-size: medium;
	color: #000;
	background: #ccc;
}

h1, h2, h3, h4, h5, h6
{
	margin: 0 0 1em;
	line-height: 1.1;
}

h2, h3 { color: #00693e; }
h2 { font-size: 110%; }
h3 { font-size: 90%; }
h4 { font-size: 118.75%; }
h5 { font-size: 112.5%; }
p { margin: 0 0 1em;
	font: 80%/1.3 helvetica, arial, sans-serif;
 }
img { border: none; }

a:link { color: blue;text-decoration:none; }
a:visited { color: blue;text-decoration:none; }
a:hover { color: green;text-decoration:underline; }

a:link.aside { color: #00693e;font-style:italic;text-decoration:none; }
a:visited.aside { color: #00693e;font-style:italic;text-decoration:none; }
a:hover.aside { color: #002664;font-style:italic;text-decoration:underline; }

a:link.title { color: #00693e;text-decoration:none; }
a:visited.title { color: #00693e;text-decoration:none; }
a:hover.title { color: #002664;text-decoration:underline; }

#container
{
	margin: 0 auto;
	width: 1024px;
	background: #fff;
}

#container table
{
	font: 80%/1.3 helvetica, arial, sans-serif;
}

#header
{
	font-style:italic;
	font-size:small;
	color: #00693e;
	background: #fff;
	text-align: center;
	height: 115px;
	padding: 20px 20px 20px 30px;
}

#navigation
{
	font-size:small;
	float: left;
	width: 1024px;
	background: #002664;
}

#navigation ul
{
	margin: 0;
	padding: 0;
}

#navigation ul li
{
	list-style-type: none;
	display: inline;
}

#navigation ul ul
{
position: absolute;
background: #d1d5da;
top: 0;
left: 100%; /* to position them to the right of their containing block */
width: 100%; /* width is based on the containing block */

}

#navigation li a
{
	float: left;
	padding: 5px 10px;
	color: #fff;
	text-decoration: none;
	border-right: 1px solid #fff;
}

#navigation li a:hover { color: #a3d869; }

#content-container
{
	float: left;
	width: 1024px;
	background: #fff;
}

#content
{
	height:	inherit;
	clear: left;
	float: left;
	width: 590px;
	padding: 0 20px 0 0;
	margin: 20px 0 20px 30px;
	display: inline;
	border-right: 1px solid #00693e;
}

#content h2 { margin: 0; }

#aside
{
	float: right;
	width: 340px;
	padding: 20px 0;
	margin: 0 20px 0 20px;
	display: inline;
}

#aside h3 { font-size: 90%;margin: 20px 0 0 0; }
#aside p { font-size: 80%;margin: 0; }

#footer
{
	font-size: x-small;
	clear: both;
	color: #fff;
	background: #002664;
	text-align: center;
	padding: 5px;
	height: 1%;
}

#translator
{
	text-align: center;
	margin: auto;
	position: absolute;
}

Drop-down menu, but issue with the blue not continuing to the end and weird issues with separating lines and margins (id - menu):
lwptsa . org/newsite/dropdown . html
Code:

body
{
	margin: 20px;
	padding: 0;
	font: 100%/1.3 arial;
	font-size: medium;
	color: #000;
	background: #ccc;
}

h1, h2, h3, h4, h5, h6
{
	margin: 0 0 1em;
	line-height: 1.1;
}

h2, h3 { color: #00693e; }
h2 { font-size: 110%; }
h3 { font-size: 90%; }
h4 { font-size: 118.75%; }
h5 { font-size: 112.5%; }
p { margin: 0 0 1em;
	font: 80%/1.3 helvetica, arial, sans-serif;
 }
img { border: none; }

a:link { color: blue;text-decoration:none; }
a:visited { color: blue;text-decoration:none; }
a:hover { color: green;text-decoration:underline; }

a:link.aside { color: #00693e;font-style:italic;text-decoration:none; }
a:visited.aside { color: #00693e;font-style:italic;text-decoration:none; }
a:hover.aside { color: #002664;font-style:italic;text-decoration:underline; }

a:link.title { color: #00693e;text-decoration:none; }
a:visited.title { color: #00693e;text-decoration:none; }
a:hover.title { color: #002664;text-decoration:underline; }

#container
{
	margin: 0 auto;
	width: 1024px;
	background: #fff;
}

#container table
{
	font: 80%/1.3 helvetica, arial, sans-serif;
}

#header
{
	font-style:italic;
	font-size:small;
	color: #00693e;
	background: #fff;
	text-align: center;
	height: 115px;
	padding: 20px 20px 20px 30px;
}

#menu ul
{
  font-family: Arial, Verdana;
  font-size:small;
  margin: 0;
  padding: 0;
  list-style: none;}

#menu ul li
{
  display: block;
  position:	relative;
  float: left;}

#menu li ul { display: none; }

#menu li a
{
  display: block;
  text-decoration: none;
  color: #ffffff;
  border-top: 1px solid #ffffff;
  padding: 5px 15px 5px 15px;
  background: #002664;
  margin-left: 1px;
  white-space: nowrap;}

#menu ul li a:hover {   background: #00693e; }

#menu li:hover ul {
  display: block;
  position: absolute;
}

#menu li:hover li {
  float: none;
  font-size: 11px;
}

#menu li:hover a { background: #00693e; }
#menu li:hover li a:hover { color: #fff;background: #008d53; }

#content-container
{
	float: left;
	width: 1024px;
	background: #fff;
}

#content
{
	height:	inherit;
	clear: left;
	float: left;
	width: 590px;
	padding: 0 20px 0 0;
	margin: 20px 0 20px 30px;
	display: inline;
	border-right: 1px solid #00693e;
}

#content h2 { margin: 0; }

#aside
{
	float: right;
	width: 340px;
	padding: 20px 0;
	margin: 0 20px 0 20px;
	display: inline;
}

#aside h3 { font-size: 90%;margin: 20px 0 0 0; }
#aside p { font-size: 80%;margin: 0; }

#footer
{
	font-size: x-small;
	clear: both;
	color: #fff;
	background: #002664;
	text-align: center;
	padding: 5px;
	height: 1%;
}

#translator
{
	text-align: center;
	margin: auto;
	position: absolute;
}

Any and all help welcome. I'm trying to redesign the look and information of the PTA's website.

a.

Hi,

I really help someone could help me accomplish what I need in order to finish a project for a friend I started, I am still a newb at CSS and HTML, so if you could explain to me in simple terms this would be ideal.

I want to place a button located here in the menu of the website. The image will link to a booking page, I would also like a hover image too if possible.

Maybe even have just text with Bold formatting then have an arrow or icon next to it, either way would be fine.

If any body could help me this would be great.

This is what the index.html file looks like;
<body>
<div id="wrapper">
<div id="topwrapper"></div>
<div id="mainwrapper">
<!-- Header Start -->
<div id="header">
<div class="center">
<!-- Logo Start -->
<div id="logo">
<a href="./index.html"><img src="./images/logo.png" alt="logo" /></a>
</div>
<!-- Logo End -->

<div id="headerright">

<!-- Menu Navigation Start -->
<div id="mainmenu">
<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://" class="selected">Home</a>

<li><a href="./about.html">About</a>
<ul>
<li><a href="#">Our Company</a></li>
<li><a href="#">Vision and Mission</a></li>
<li><a href="#">Testomonials</a></li>
</ul>
</li>
<li><a href="#./.html">Services</a>
<li><a href="./.html">Vehicles</a>
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a> </li> </ul>
</li>
<li><a href="./.html">Testomonials</a>
<ul>
</ul>
<li><a href="./html">Contact</a></li>
</ul>
</div>
</div>
<!-- Menu Navigation End -->
</div>
</div>
</div>

Thanks so much in advance, I cant place an image to show you so if anyone understands this confusing posts and still wants to help, email me so I can send you an example.

Hey guys,

Can someone help me with the following code? I've attempted two fixes, one that alters caching with JavaScript, and another fix with apache, but the server admin is restricting access to the config file. Does anyone know a work around besides these two methods (even if it's semantically incorrect)?

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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
/*- Menu Tabs I--------------------------- */

    #tabsI {
      float:left;
      width:100%;
      /*background:#EFF4FA;*/
      font-size:93%;
      line-height:normal;
	  border-bottom:1px solid #DD740B;
      }
    #tabsI ul {
	  margin:0;
	  padding:10px 10px 0 50px;
	  list-style:none;
	  padding-bottom: 1px; 
      }
    #tabsI li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabsI a {
      float:left;
      background:url("http://exploding-boy.com/images/cssmenus/tableftI.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 5px;
      text-decoration:none;
      }
    #tabsI a span {
      float:left;
      display:block;
      background:url("http://exploding-boy.com/images/cssmenus/tabrightI.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#FFF;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsI a span {float:none;}
    /* End IE5-Mac hack */
    #tabsI a:hover span {
      color:#FFF;
      }
    #tabsI a:hover {
      background-position:0% -42px;
      }
    #tabsI a:hover span {
      background-position:100% -42px;
      }
</style>
</head>
<body>
<ul>
<div id="tabsI">
<ul>
    <li><a href="#" title="Link 1"><span>Link 1</span></a></li>
    <li><a href="#" title="Link 2"><span>Link 2</span></a></li>
    <li><a href="#" title="Link 3"><span>Link 3</span></a></li>
</ul>
</div>
</body>
</html>

WHAT IS THE TYPICAL CSS PROBLEM FOR THIS ISSUE?



w w w. jaywayproductions . c o m/portfolio/work_history.html


It suppose to look the way it looks in IE. It is a little off in Firefox. I have been try'n several things to solve this particular issue but cannot. It seems as if the bottom and top row stretches and makes the effect I was trying to accomplish look off in FF. You can understand what I'm sayin' when you view both. Does anyone know why it is doing this? Any help would be greatly appreciated!