I have made a navbar at the top of my website which contains multiple buttons. One of the buttons right now I added a dropdown menu. It simply uses a unordered list with list items in with a little CSS coding to make it have some colour and actually be hidden until hovered. This works, I have tried it on IE and FF. Both work fine. Now Google Chrome when I try it there, there are some issues.
On hover the items appear which they should. But when I try and click on them they disappear. I've also been on another site and have had this issue though I did not code it in that case. I'm assuming this is a Chrome issue, but I also assume that there is something I can do to fix this on my site.
My question is how do I fix this issue on Chrome (Looking at the code not the browser though)?
Note: If I do a hard refresh (CTRL+SHIFT+R) I am able to hover over the things fine. Once I click on a link or perform a normal refresh again though the issue comes back. Obviously I don't want to have to do a hard refresh to click an item in the dropdown nor would users of the site want to.
Edit: Here is a link to where you can look at the problem on my websites testing area:
Testing Area
Edit2: Since I'm getting no responses I will include the code.
index.php:
<?php session_start(); ?>
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Home</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<link rel="stylesheet" type="text/css" href="style.css" />
<link href="navbar.css" rel="stylesheet" type="text/css" />
</head>
<body>
<?php include_once("analyticstracking.php") ?>
<?php include("header.php"); ?>
<p class="content" >Welcome to my homepage! This page will feature a wide range of things from video tutorials to help forums. </p>
<p class="content" ><em>Remember the site is currently being devopled still! Check out the "Contact Us" button on the left if you have any bugs to report.</em></p>
<?php include("footer.php"); ?>
</body>
</html>
style.css:
b{
color:#000000;
}
a{
text-decoration:none;
color:#666;
}
img{
display:block;
margin:auto;
}
p.welcome {
text-align:center;
font-family: “verdana”;
font-size:1.875em;
color:white;
font-weight:900;
}
p.content {
font-family: “verdana”;
font-size:1em;
color:white;
}
div.main{
width:75%;
margin:auto;
background:black;
}
div.row1{
width:100%;
}
div.row2{
width:100%;
}
div.row2col1{
float:left;
margin:0;
padding:1em;
color:white;
}
div.row2col2{
margin-left:10%;
margin-right:10%;
background-color:brown;
padding:1em;
border:15px solid #212121;
}
body{
background-color:#393635;
color:white;
}
p.footer{
text-align:right;
}
.clearFloat{
clear:both;
margin:0;
padding:0;
}
header.php:
<div class="main">
<div class="row1"> <img src="logo.png" alt="Logo"/>
</div>
<div class="navMenu">
<ul>
<li>Home</li>
<li>Videos
<ul>
<li>Latest Videos</li>
<li>Tutorials</li>
<li>Gaming</li>
<li>Coding</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul>
<br class="clearFloat" />
</div>
<div class="row2col2">
footer.php
</div>
Copyright Fog Productions 2012
</div>
From what I can tell, a small gap between the anchor and the sub-list is causing it to disappear is causing the list to vanish when you stop briefly hovering over the anchor.
I was able to test this by reducing the positioning of the sub-list by 2px (below) so that it was touching the anchor - therefore not leaving the anchor before hovering over the sub-list.
.navmenu li ul {
top: 30px; /* instead of 32 */
}
I have tested your demo site in the Chrome Browser and the menu functioned correctly. I tried several times and could not reproduce the "disappearing menu" issue you mention above (I was able to click on all the menu links)
Is your Chrome up to date? You can view this by clicking on the Wrench icon > About Google Chrome. The most up to date version (at this point) is 18.0xxx
If you are still having issues try disabling all add-ons, clearing your cache and testing it again. To disable add-ons go here: Wrench icon > Settings > Extension tab
Related
I have 2 web pages, gantt and securityTV. Gantt is complicated, but here's security tv:
<!DOCTYPE html>
<html>
<head>
<link href="http://ctadweb/B5Tours/Content/site.css" rel="stylesheet">
<meta http-equiv="refresh" content="300" />
</head>
<body>
<div style="width:100%; height:100%; display:table;">
<div style="display:table-cell; vertical-align:middle; text-align:center;">
<h1 style="color:green; font-size:60px;">RAYTHEON ACCESS</h1>
</div>
</div>
<footer class="site-footer" style="margin-top:-132px;">
<div>
<img src="http://ctadweb/B5Tours/Content/FooterPicture.jpg"/>
<div id="site-footer-image-background" style="margin-top:-4px;"></div>
</div>
</footer>
</body>
</html>
and the relevant part of site.css:
* {
margin: 0;
}
html, body {
height: 100%;
}
.site-footer, .page-wrap:after {
height: 128px;
}
.site-footer div{
width:100%;
text-align:center;
height:128px;
}
#site-footer-image-background{
width:100%;
z-index:-1;
background-color:#365f93;
height:67px;
top:-67px;
position:relative;
}
Now here's the weirdness. When I save that web page and open it with internet explorer, it runs fine. When I run my C# project which creates that web page, so we're looking at localhost:/securityTV, it runs fine. But when I publish the project and try to run off ctadweb, it doesn't cooperate. The Raytheon access text isn't vertically centered, it's aligned to the top of the screen.
additionally, in my gantt page, I rotate some headers sideways, but just like with vertical-align: middle; it only works when I'm testing it, when I open a saved version of the page, or when I use firefox. I tried opening internet explorer's options and disabling some addons, but all I have under "currently loaded addons" are 5 which are disabled, something called "research" which is not available, and "Java(tm) Plug-In 2 SSV Helper". I tried disabling them both, but I got the same problem. I've tried 2 computers pointing to ctadweb, both get the same (wrong) display.
body{
margin:0;
padding:0;
background-color:white;
font-family:sans-serif;
font-size:14px;
}
#wrapper{
margin-top:10px;
margin-bottom:50px;
margin-left:auto;
margin-right:auto;
width:550px;
}
<!DOCTYPE html>
<html>
<head>
<title>advanced website one</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="advanced1.css">
</head>
<body>
<div id="wrapper">
<header id="header">
<img id="logo" src="images/logo.png" alt="logo image"/>
<ul id="menu">
<li>Home</li>
<li>Portfolio</li>
<li>Gallery</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
</header>
<content>
<h2>About Blue Micro</h2>
<p>Blue Micro is meant for a site that doesn't necessarily need a huge amount of content. I've found that trying to put a small amount of text onto a large template ends up in a site that looks slightly off. So this template is for those that need a quick and simple site</p>
<h2>Titles are H1 Tags</h2>
<p>Try to include your keywords in the titles since they are what seach engines pick up, it's also a good idea to try to include those same keywords in the title as well (only one of two of your best ones).</p>
<h2>Background Image</h2>
<p>I debated using a fancy background for this template, but ultimately just decided to keep it blank. I did however create all the images with Alpha transparency, which means that regardless of what background you choose, it will always look good. So keep it white, or experiment with it if you please.</p>
<h2>XHTML 1.1</h2>
<p>This template validates as XHTML 1.1 - this is to ensure it'll work for many years to come, and it makes it really easy for you to modify.
Try to include your keywords in the titles since they are what seach engines pick up, it's also a good idea to try to include those same keywords in the title as well (only one of two of your best ones).</p>
</content>
<footer>
free xhtml template by web page designer
<!-- begin snippet: js hide: false console: true babel: false -->
</footer>
</div>
</body>
</html>
I want to do this "see border" border in css, its not that hard but i'm newbie at web development. This border is linear gradient and has radius and i think internal radius
here is the logo image logo image
border
.border {
float: left;
background-image: url(gradient_rectangle_back.png);
background-repeat: repeat-x;
background-color: #4586F1;
width: 547px;
margin-left: 14px;
clear: both;
margin: 0 auto 0 auto;
}
You also need to download this graphic
http://www.quackit.com/html/templates/download/bryantsmith/bluemicro/gradient_rectangle_back.png
My website is this www.bangkokvisitors.com I'm new to css and HTML. I used a child theme and edited the style.css. But the output doesn't look like the way I want.
I added these to css
.menu{
height: 42px;
}
.menu li{
position:relative;
float:left;
left:33%;
margin-top:0px;
}
this seems work for me. But the margin doesn't change after i save the code and reload the webpage. Help me with this please
You have to add your header tag after body tag. You also need to change some class in it.
<header multilinks-noscroll="true" id="header" class="blog-header">
<div multilinks-noscroll="true" class="blog-title container"><a multilinks-noscroll="true" href="http://bangkokvisitors.com/" title="bangkokvisitors.com" rel="home">bangkokvisitors.com</a></div>
<div multilinks-noscroll="true" class="blog-description container">To shop, to hangout and to explore the city of Angels | <a multilinks-noscroll="true" href="http://bangkokvisitors.com/feed/" title="Subscribe to the RSS Feed of this site" id="rss">RSS</a></div>
<nav multilinks-noscroll="true" id="blog-menu" class="menu">
<!--YOUR MENU CODE GOES HERE-->
</nav>
</header>
I'm just having a go at creating a website for a friend, but I've not actually done any development for a few months, and so I'm a bit rusty at the moment.
I've started putting a basic page together, to use as a template for all of the pages of the website, but I'm having a bit of trouble getting the horizontal navigation bar to display on the page beneath the logo, and I was just wondering if anyone could explain to me why it's not showing?
The HTML that I have for this is: (code updated 25/09/2013 # 17:40)
<!DOCTYPE HTML>
<html>
<head>
<title>Cosy Hearts- Home</title>
<style type = "text/css">
#navbar ul{
list-style-type: none;
}
#navbar ul li{
list-style-type: none;
display: inline-block;
}
ul{
list-style-type:none;
margin:0;
padding:0;
}
</style>
</head>
<body>
<img src = "images\masterPageTop.jpg" width = "700" height = "800" alt = "Cosy Hearts Banner" />
<ul>
<li>Home | </li>
<li>Products | </li>
<li>About Us | </li>
<li>Contact Us | </li>
<li>Terms and Conditions</li>
</ul>
</body>
</html>
Currently, when viewing the page in the browser, the logo image is displayed at the top of the page as intended, but then the navigation bar, which I've tried to created using a div and horizontal list is not displayed at all...
I was just wondering if anyone could explain to me why this is, and what I need to do to get it to display?
Cheers!
Edit 25/09/2013
I've edited the code to show changes made as suggested, also here's the screenshot of the page when viewed in Chrome (it displays exactly the same in Firefox):
As you can see, the image is displayed (although not longer central, having removed the 'center' tags as suggested- will sort this out later with CSS. But, the navigation bar is not displayed on the page at all, and I can't tell why this is... does anyone know what I should do?
Your HTML is a little bit botched... you may want to review the purposes of tags like <head> and <body>. The following HTML will give you the desired effect.
See this working demo.
<!DOCTYPE html>
<html>
<head>
<title>Cosy Hearts- Home</title>
<style type = "text/css">
#navbar ul {
list-style-type: none;
}
#navbar ul li {
list-style-type: none;
display:inline-block;
}
</style>
</head>
<body>
<center>
<img src="images\masterPageTop.jpg" width="700" height="800" alt="Cosy Hearts Banner" />
</center>
<div id="navbar">
<ul>
<li>Home | </li>
<li>Products | </li>
<li>About Us | </li>
<li>Contact Us | </li>
<li>Terms and Conditions</li>
</ul>
</div>
</body>
</html>
I've tried to indent things in such a way that you can easily remember what the layout of an HTML document looks like. As your page gets more complex, you might consider putting your CSS in a separate file -- say, stylesheet.css -- and including it by adding the following to the <head> section:
<link rel="stylesheet" href="stylesheet.css" type="text/css">
Best of luck!
When I run my (very basic) page in Chrome, it shows the title and list in the correct size, colour and position. Also the background image fits to the screen. But when I run my page in FF or IE, there is no background image and the title and list haven't got my CSS position, colour or size.
I have copied my code below. My question is: how can I make my title and list show up on my web page in all/most browsers in the correct size, colour and position to what I have set it to in my CSS? Also for the background image to be shown as well. I hope this isn't too general. Please help!
This is my HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="txt/css" href="C:///****/*****/Desktop/FifaStream1.0/indexstyle.css"/>
<title> Fifa Stream </title>
</head>
<body>
<h1 id="Title1"> <font color="grey"> Fifa </font color> <font color="red">Stream </font color></h1>
<nav class="IndexList">
<li> Home <br> <br> </li>
<li> Youtube <br> <br> </li>
<li> About Us <br> <br> </li>
<nav>
</body>
</html>
And this is my CSS:
body {
font-family: "proxima-nova",sans-serif;
background:url(fifa13messi.png);
-moz-background:url(fifa13messi.png);
background-size:100%;
-moz-background-size:100%; /* Old Firefox */
background-repeat:no-repeat;
}
#Title1 {
position:relative;
left:5%;
top:5%;
font-size: 3em;
}
.IndexList {
list-style: none;
position:relative;
left:5%;
top:40%;
font-size:2em;
font-weight: 600;
letter-spacing: -1px;
}
a {
color:white;
text-decoration: none;
}
It would a great help if anyone could explain where or why I'm going wrong.
Because <li> elements can't be children of the <nav> element - they can only be children of the <ul> or <ol> elements...
The type attribute should be text/css, not txt/css. IE and Firefox are (correctly) rejecting it for the mismatch.
First thing I want to say is try to do smart work, use some html eiditor, like dreamweaver or some other that provide hints forcodig.
Now point by point here are list of problems in you coding
Type attribute for link css should be text/css. Not. Txt/css
Try to close tags just after creating it. This will always make shure all tags are closed. Bcz your nav tagi not closed,but created two nav tags without closing them.
Li tag should be wrapped with 'o' or 'ul'
Thanks.
Your <nav> tag needs a </nav> closing tag, not a second <nav>.