PDA

View Full Version : Problems with CSS Nav bar view in FireFox and Opera!?


IronMonkey
04-20-2006, 05:10 PM
Hello,

I'm creating my Portfolio website. I'm using CSS for my nav bar.

My problem is that when viewed in Firefox and Opera it's a little screwy!

It's perfect in IE! Centered and correctly aligned with the nav bar.

In Firefox it's not centered or align with the nav bar line?

In Opera it's justified to the left.

Here's the code:
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
background-image: url();
}
.hovermenu{
.text-align:center
}
.hovermenu ul{
font: bold 14px arial;
padding-left: 0;
margin-left: 0;
height: 20px;
}

.hovermenu ul li{
list-style: none;
display: inline;
}

.hovermenu ul li a{
padding: 2px 0.5em;
text-decoration: none;


color: black;
background-color: #c2bebe;
border: 0px solid #c2bebe;
}

.hovermenu ul li a:hover{
background-color: #FFE271;
border-style: outset;
}

html>body .hovermenu ul li a:active{ /* Apply mousedown effect only to NON IE browsers */
border-style: inset;
-->
</style>

</head>
<table width="100%" height="0" border="0" cellpadding="0" cellspacing="0">

<tr>
<td background="images/header_bg.gif" width="100%" height="86">images/header_logo_2.gif</td>
<td></td>
</tr>
<tr>
<td height="40" colspan="2" background="images/nav_bar.gif"><div class="hovermenu">
<ul>
Profile (http://www.1.com)
Design (http://www.2.com)
Sketches (http://www.3.com)
3D (http://www.4.com)
Illustrations (http://www.5.com)
Web Design (http://www.6.com)

Any help is greatly aprreciated!

THX and Pe@ce

domedia
04-20-2006, 07:24 PM
Can you post the whole page including headers?

IronMonkey
04-20-2006, 08:33 PM
I uploaded it to a free server.

http://www.freewebs.com/ironm0nkey/index1.htm


THX

IronMonkey
04-22-2006, 06:20 PM
Anyone? :?:

domedia
04-22-2006, 07:52 PM
one of your css rules has an error:
.hovermenu{
.text-align:center
} This should be
.hovermenu{
text-align:center
}

A good way of catching errors like this is to validate your CSS:
http://jigsaw.w3.org/css-validator/

Or even better get the web developer extension for Firefox, it has many, many features for web developers :)

Page looks pretty neat, good luck with it!

IronMonkey
04-23-2006, 09:19 PM
COOL! It worked, except for FIREFPOX. :roll:


THX for the help and tips!