Hi,

Im new to this forum. Hallo all, thank you for your time to read my post.

I am really lost, I have made this website, but the colour and postioning changes in different browsers.

Please help me sort this out.

T

kingsley-opticians.co.uk

There are only a certain number of web-safe colors (http://www.web-source.net/216_color_chart.htm). You may also want to validate your CSS http://jigsaw.w3.org/css-validator/

If you really want us to help sort this out you may try posting some code.

-Moatist

the need for "websafe colours" disappeared well over 10 years ago now when computer video cards & displays became able to handle more than 8 bit colour codes and browsers could render more than 256 colours.

Unfortunately, color isn't your only problem. You have a <meta> tag stuck ABOVE your DOCTYPE declaration and that should not be there and WILL cause all kinds of problems. Put it below the doctype where it belongs and see if your problem still exists.

I have the site on my work computer, so I will use your advice and try and sort it tomorrow.

Just to be clear, In firefox the nav bar shows as red, then in explorer the nav bar is gray. Why is that?

I will also move the meta tags.....grr

BTW do you know some quick and easy ways to boast my SEO rankings?

Many thanks

T

I will post the CSS tomorrow.

Just to be clear, In firefox the nav bar shows as red, then in explorer the nav bar is gray. Why is that?

The smart money (mine) is on using .png graphics with alpha transparency.

Yes, most likely it is. For a menu like that, there's also no reason to use images for your navigation.

Hi,

Ive fixed the positioning problem....YEY

But the Nav bar which was build with sprys is still in gray in internet explorer and red (as I want it) in Firefox.

I have tried playing around with the cSS code, but with no luck.

Please help

@charset "UTF-8";

/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/*******************************************************************************

 LAYOUT INFORMATION: describes box model, positioning, z-order

 *******************************************************************************/

/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
{
    margin: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: auto;
    height: 20px;
    font-family: Arial, Helvetica, sans-serif;
    color: #B00000;
    padding: 0;
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: [url]http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html[/url] */
ul.MenuBarActive
{
    z-index: 1000;
}
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: auto;
    float: left;
    z-index: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: #B00000;
}
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
{
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    z-index: 1020;
    cursor: default;
    width: 8.2em;
    position: absolute;
    left: -1000em;
    font-family: Arial, Helvetica, sans-serif;
    color: #B00000;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
    left: auto;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
    width: 8.2em;
    font-family: Arial, Helvetica, sans-serif;
    color: #B00000;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
    position: absolute;
    margin: -5% 0 0 95%;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
    left: auto;
    top: 0;
}

/*******************************************************************************

 DESIGN INFORMATION: describes color scheme, borders, fonts

 *******************************************************************************/

/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
{
    border: 1px solid #CCC;
    background:transparent;
    }

/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
    display: block;
    cursor: pointer;
    padding: 0.5em 0.75em;
    color: #B00000;
    text-decoration: none;
    background-colour: transparent;
    }
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
    font-family: Arial, Helvetica, sans-serif;
    color: #B00000;
    background-color: #FFFFFF;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
}

/*******************************************************************************

 SUBMENU INDICATION: styles if there is a submenu under a given menu item

 *******************************************************************************/

/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
    background-image: url(SpryMenuBarDown.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
}
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
    background-image: url(SpryMenuBarRight.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
    background-image: url(SpryMenuBarDownHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
}

/*******************************************************************************

 BROWSER HACKS: the hacks below should not be changed unless you are an expert

 *******************************************************************************/

/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
{
    position: absolute;
    z-index: 1010;
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
    ul.MenuBarHorizontal li.MenuBarItemIE
    {
        display: inline;
        f\loat: left;
        background: #666666;
    }
}

I dont know what alpha do-da is so....would like to edit the CSS to fix the problem.

IE6 doesn't support background: transparent, you have to specify a color.
Under .MenuBarItemIE, change background:transparent to background: #fff;

Originally Posted by chrishirst

the need for "websafe colours" disappeared well over 10 years ago now when computer video cards & displays became able to handle more than 8 bit colour codes and browsers could render more than 256 colours.

I was about to say

Thanks Lady in Red!

You rock.

That works a treat!!

well css is a easy way to use and implement color specification for each header type and table contents... divide your web in to tables and then apply color scheme..