CODEWITHSUNDEEP
htmlcssgoogle-chrome
Altimus Prime
Altimus Prime

Reputation: 2337

The css menu bar on my page only works if I choose inspect element in Chrome

There are two other questions out there at css in chrome only works after inspect element and Weird issue with Chrome inspect element, but neither answer correctly why chrome renders the page differently when inspecting the element, nor brings me closer to discovering my error.

I'm not really a designer, and so I have some faulty css on my page at http://www.mdifl.com after trying tutorial at http://demo.tutorialzine.com/2011/05/css3-animated-navigation-menu/

I've looked it over several times, and can't see straight enough anymore to find the problem with the menu bar and the weird chrome behavior has me reminded of the twilight zone. Any help would be appreciated. My full page and source code is available at http://www.mdifl.com

The specific problem is that the links on my menu bar don't act like links unless I'm in inspect element mode in google chrome. The html is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <meta name="DESCRIPTION" CONTENT="MultiDimensional Imaging provides diagnostic sonography and ultrsaound service for OB/GYN's throughout Miami-Dade and Broward counties. We serve doctors and their patients with profession, ARDMS sonographers and state of the art ultrasound equipment.">
    <title>Ob/Gyn Ultrasound Services</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="header">
        <h1>MultiDimensional Imaging<br>
        <span class="catchphrase">Give better ultrasound service, make thousands more.</span></h1>
    </div>

    <div class="content">
        <img class="floatingimage" src="img/volusoni.png">
            <ul class="menu">
            <li class="menuItem"><a href="#test">Test 1</a></li>
            <li class="menuItem"><a href="#test">Test 2</a></li>
            <li class="menuItem"><a href="#test">Test 3</a></li>
            <li class="menuItem"><a href="www.google.com">Test 4</a></li>
            </ul>
        <div class="photocontainer">
        </div>
    </div>

    <div class="footer">
    </div>
</body>

The css is:

 html{ height:100%;}

 body {background-color:#000;
height:90%;
width:95%;
display:block;
 }

 h1{
font-family:"Courier New", Courier, monospace;
font-size:40px;
top:50%;
 }

 .catchphrase{
font-style:italic;
font-family:"Times New Roman", Times, serif;
font-size:23px;
 }

 .floatingimage{
position:relative;
left:-250px;
top:-150px
}

 .menuContainer
 {
position:relative;
top:-400px;
left:100px;
 }

 .menu{
/* Affects the UL element */
overflow: hidden;
display: inline-block;

border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;

box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
-moz-box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
-webkit-box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
 }

 .menu li{
/* Specifying a fallback color and we define CSS3 gradients for the major browsers:      */

background-color: #f0f0f0;
background-image: -webkit-gradient(linear,left top, left bottom,from(#fefefe), color-stop(0.5,#f0f0f0), color-stop(0.51, #e6e6e6));
background-image: -moz-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
background-image: -o-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
background-image: -ms-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
background-image: linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);

border-right: 1px solid rgba(9, 9, 9, 0.125);

/* Adding a 1px inset highlight for a more polished efect: */

box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
-moz-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
-webkit-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;

position:relative;

float: left;
list-style: none;
 }

 .menu li:after{

/* This creates a pseudo element inslide each LI */ 

content:'.';
text-indent:-9999px;
overflow:hidden;
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
z-index:1;
opacity:0;

/* Gradients! */
background-image:-webkit-gradient(linear, left top, right top, from(rgba(168,168,168,0.5)),color-stop(0.5,rgba(168,168,168,0)), to(rgba(168,168,168,0.5)));
background-image:-moz-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
background-image:-o-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
background-image:-ms-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
background-image:linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));

/* Creating borders with box-shadow. Useful, as they don't affect the size of the element. */
box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
-moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
-webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;

/* This will create a smooth transition for the opacity property */
-moz-transition:0.25s all;
-webkit-transition:0.25s all;
-o-transition:0.25s all;
transition:0.25s all;
 }

 /* Treating the first LI and li:after elements separately */

 .menu li:first-child{
border-radius: 4px 0 0 4px;
 }

 .menu li:first-child:after,
 .menu li.selected:first-child:after{
box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
-moz-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
-webkit-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
border-radius:4px 0 0 4px;
 }

 .menu li:last-child{
border-radius: 0 4px 4px 0;
}

/* Treating the last LI and li:after elements separately */
.menu li:last-child:after,
.menu li.selected:last-child:after{
box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
-moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
-webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
border-radius:0 4px 4px 0;
}

 .menu li:hover:after,
 .menu li.selected:after,
 .menu li:target:after{
/* This property triggers the CSS3 transition */
opacity:1;
 }

 .menu:hover li.selected:after,
 .menu:hover li:target:after{
/* Hides the targeted li when we are hovering on the UL */
opacity:0;
 }

 .menu li.selected:hover:after,
 .menu li:target:hover:after{
opacity:1 !important;
 }

 /* Styling the anchor elements */

 .menu li a{
color: #5d5d5d;
display: inline-block;
font: 20px/1 Lobster,Arial,sans-serif;
padding: 12px 35px 14px;
position: relative;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
z-index:2;
text-decoration:none !important;
white-space:nowrap;
 }

 .menu a.homeIcon{
background:url('../img/home.png') no-repeat center center;
display: block;
overflow: hidden;
padding-left: 12px;
padding-right: 12px;
text-indent: -9999px;
width: 16px;
 }

 .header{
background-image:url("img/metaltexture.jpg");
text-align:center;
margin-top:100px;
width:600px;
height:150px;
padding:7px;
padding-right:25px;
margin-left:auto;
margin-right:auto;
-moz-border-radius: 20px; 
border-radius: 20px;
-moz-box-shadow:    4px 5px 5px 0px #999;
-webkit-box-shadow: 4px 5px 5px 0px #999;
box-shadow:         4px 5px 5px 0px #999;
 }

 .content{
width:800px;
height:800px;
position:relative;
top:-75px;
margin-left:auto;
margin-right:auto;
background-color:#FFF;
-moz-border-radius: 20px; 
border-radius: 20px;
z-index:-1;
 }

Upvotes: 0

Views: 3749

Answers (3)

Mr Beach
Mr Beach

Reputation: 148

I'm really sorry I don't know why chrome is acting up, but the good news, you have put your nav bar in a div for that you design with the content class. That isn't working for your nav bar. Just take your nav bar out of that div, and give it a unique container and it will work fine. 

        <div class="nav">
            <ul class="menu">
            <li class="menuItem"><a href="#test">Test 1</a></li>
            <li class="menuItem"><a href="#test">Test 2</a></li>
            <li class="menuItem"><a href="#test">Test 3</a></li>
            <li class="menuItem"><a href="http://www.google.com">Test 4</a></li>
            </ul>
        </div>

Here is your working fiddle with all it's code.

Upvotes: 2

maikelsabido
maikelsabido

Reputation: 1327

Try clearing your cache and reload the page. You can also try it on other browsers. If it works on other browsers, the problem is on Chrome and not on your code.

Upvotes: 1

Anusha Honey
Anusha Honey

Reputation: 937

You have to include "http://" in your link. 

             <li class="menuItem"><a href="http://www.google.com">Test 4</a></li>

The other tabs don't work because you have 

 href = "#test"
Change it to some sample link. Here is the updated FIDDLE

Upvotes: 0

Related Questions