0

I try to replace site menu created on flash with simple menu with image and links. I do it with CSS. Background image inserts with CSS value: background: url(/image.png), and menu is just list of <a> tags (with CSS style to display it white and without underline and so on). It works fine on google chrome and IE and looks like this:

correct menu

Here is header.php code (this is menu block and it's inserted on page with php include_once):

<div id="menu_container">
<div id="menu_top_level">
    <a href="ru/about">О компании</a> 
    <a href="ru/news">Новости</a>
    <a href="ru/headhunter">Вакансии</a>  
    <a href="ru/contacts">Контакты</a>
</div>
<div id="menu_medium_level">
    <a href="ru/tariffs">Тарифы</a>
    <a href="ru/fleet">Автопарк</a>
    <a href="ru/corporate">Корпоративным клиентам</a>
    <a href="ru/techs">Технологии</a>   
</div>
</div>

Here CSS code:

#header_main {color:white;  width:100%; height:76px; background: #000 url(/common/images/menuimage2.png) no-repeat center top;}
#menu_container {width: 1000px; text-align: left; }
#menu_container a {color:white;}
#menu_top_level {font-size: 14px; line-height: 17px;padding-left: 50px; float:left; clear:both;margin-top: 15px;}
#menu_top_level a {text-decoration: none; float:left; margin-right:20px;}
#menu_medium_level {font-weight:bold; font-size: 16px; line-height: 17px;padding-left: 50px; float:left; clear:both;margin-top: 10px;}
#menu_medium_level a {float:left; margin-right:20px;}

CSS connects wiht link in <head> tag:

<link rel="stylesheet" type="text/css" href="/common/css/style.css" />

Menu block inserts on page with PHP code:

<div align="center">
    <div id="header_main">
        <?php include_once($_SERVER["DOCUMENT_ROOT"]."/common/tmp/header.php"); ?>
    </div>

The problem is that some browsers (firefox, safari on mac) first time display menu incorrect, like this:

incorrect menu

(CSS style for <a> tag and background image did not work). All other parts of page displays with correct style from CSS file.

when user updates page it displays then correctly always.

Also, I can't get this error on firefox on my others machines and when I clear cache.

The question is, how to change code to be sure that it always will work correctly on any browser?

Virendra
  • 2,560
  • 3
  • 23
  • 37
Artyom Chernetsov
  • 1,394
  • 4
  • 17
  • 34
  • 2
    It sounds like this is just a cache issue. The browser was remembering the old version of your CSS file, but got the newest version when the cache was cleared or the browser refreshed... The best way to ensure that the latest file is served every time (as far as I understand) is to change the CSS file's name, and change the link on your page. – sdleihssirhc Jan 28 '12 at 21:15
  • It's fine in FF 9.0.1 (Ubuntu). – melhosseiny Jan 28 '12 at 21:16
  • 1
    It is probably a cache issue. Just clear your cache. Also, load your CSS file as early as possible (near the top of the page). – Virendra Jan 28 '12 at 21:17
  • you were right, changing css file name solve problem, thanks – Artyom Chernetsov Jan 30 '12 at 11:30

1 Answers1

0

give the a tag a display of block

display: block;

to get it to work on moz you could allways use this(try not to though). it all the stuff that happens inside these curly brackets will only render in mozilla.

@-moz-document url-prefix() {

}
mildog8
  • 2,030
  • 2
  • 22
  • 36