CSS - Hover Images Loading Delay!

Hi,

I'm trying to set up my (very basic, horizontal, no dropdown) CSS menu so that when a user hovers over the menu link items, the formatting changes and they basically get an image on mouseover (nothing more than changing the text colour and adding a curve on the left hand side, so it just looks like a selected tab).

It kind of works but instead of the whole image showing it only shows in the area where the menu link text is, so instead of covering the height of the menu bar and a length I specify, it's just covering the actual word e.g "Home" in each case on the menu.

I can't seem to get it so that on rollover the whole image shows. I've tried setting it so that the links have a background image (just a plain block from the nav bar) but that doesn't work.

My CSS is:

/* this is the bar where the menu is located */
.menuholder {
width:1001px;
height:2.19em;
background-color:#0f2763;
}

/*holder for the menu */
div.navigation {
margin-left:30px;
padding-top:10px;

}
.navigation ul {
list-style-type: none;
position: relative;
float: left;
}

.navigation ul li {
display: block;
padding: 0px 20px 0px 10px;
display: inline;
height:2.19em;
}

.navigation ul li a {
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
font-size:14px;
font-weight:bold;
line-height:18px;
width:100px;
height:2.19em;
text-decoration:none;
}

.navigation ul li a:hover {
color:#0f2763;
background-image:url(/images/menutab.gif); width:100px; height:2.19em;
}

I've tried setting display:block; and float:left; on the .navigation ul li, but this makes the menu become vertical and throws the whole page out of sync.

I tried this altrnative code, to no avail:

.menuholder {
width:1001px;
height:2.19em;
background-color:#0f2763;
}

div.navigation {
margin-left:30px;
padding-top:10px;
height:2.19em;

}
.navigation ul {
list-style-type: none;
position: relative;
float: left;
}

.navigation ul li {
padding: 0px 20px 0px 10px;
display: block;
float:left;
height:2.19em;
}

.navigation ul li:hover {
color:#0f2763;
background-image:url(/images/menutab.gif); width:100px; height:2.19em;
background-repeat:no-repeat;
}

.navigation ul li a {
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
font-size:14px;
font-weight:bold;
line-height:18px;
width:100px;
height:2.19em;
text-decoration:none;
display: inline;
}

Any ideas or pointers gratefully received!

A few people seem to have had the problem of the a:hover not working right in ie when applied to images. Mine is just applied to a standard bit of text.

In my menu (CSS only, no javascript) the descriptions are "display:none" in the initial "a" state and then "display:block" in the a:hover state. Works in Firefox, but not ie.

Any ideas? My page is at www.prioritypie.f2s.com/KSA/about.htm

You can see the CSS by clicking on the first link on the left hand side of the page.

Thanks to anyone who can take away the pain and swearing of the last couple of hours.

why won't this work on internet explorer a:hover img { }.

This is exactly what i'm using, it works on firefox but doesn't work on IE. You can see it in action here.
Code:

a:hover img { border: 2px solid #fff; }

So the typical reason that I see people's images disappearing on hover has something to do with repositioning and substituting new images, etc.

My case is that my hover code changes the opacity, that's it, and only to about .4 at the very very most.

My solution works when slowly mousing over the image, however rapidly hovering/leaving the image causes the image do disappear for a period of time, as though the browser is re-requesting the image.

Maybe that's the case? I'm not an expert on CSS.

I can't seem to include a link due to some "akismetspam" phrase not being found?

I have a drop down menu located at http://www.fieldspianos.com/new/index.php

If you hover over the menu items they turn black and white when you are right on the text but not if you are in the area surrounding it which is what I also need to occur. You can view the source on the page for the html but I will include the css below.

This is the basic layout of the menu:
Code:

<ul>
<li>About Us</li>
     <ul>
         <li><a href="#">Locations</a></li>

etc..etc..etc..


Here is the css:
Code:

/*Begin Content of drop down menu*/
a {
	outline:none;
}

* html div#dropdownmenu ul {
	float: left;
}

* {
	margin: 0;
	padding: 0;
}

div#dropdownmenu {
	float: left;
	background-color: #C8C6C6;
		font-size:11px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

div#dropdownmenu ul li {
	list-style-type: none;
	float: left;
	background-color: #000000;
	position: relative;
}

div#dropdownmenu ul li:hover {
	list-style-type: none;
	background-color: #000000;
}


/*Hides drop downs when not overed over and reveals them when they are hovered over.*/
body div#dropdownmenu ul li ul {
	display: none;
}

body div#dropdownmenu ul li:hover ul {
	display: block;
}



div#dropdownmenu ul li ul {
	margin: 0;
	width: 13em;
	position: absolute;
	left: -1px;
}

div#dropdownmenu ul li ul li {
	width: 100%;
	background-color:#bdb35e;
	color: #660000;
	border-bottom: 1px solid #000;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	padding: 3px;
}

div#dropdownmenu ul li ul li:first-child {
	border-top: 1px solid #000;
}

div#dropdownmenu ul li ul li:hover {
	color: #FFFFFF;
	background-color: #000000;
}

div#dropdownmenu ul li ul li a {
	color: #660000;
	text-decoration:none;
	outline: none;
}

div#dropdownmenu ul li ul li a:hover {
	color: #FFFFFF;
	background-color: #000000;
	text-decoration:none;
	outline: none;
}

div#dropdownmenu ul li:hover ul, div#dropdownmenu ul li ul:hover {
	display: block;
}

Any help is greatly appreciated, this seems like it would be a simple fix but I can't figure it out. Maybe I am overlooking some small detail. Thanks!

Hi, my css works perfectly well in FF but not in IE, the problem is that when i view any pages in my site on IE the css seems partially loaded as all features are not present.

This problem goes away when i simply refresh the page it seems to work fine.

Is there anyone else who has experienced this problem, and has a fix or way round this?. I can show my css if need be also.

Cheers.

Just wondering if there is such code that when you click something it replaces a certain item to a different item? Or is it Javascript?

Any websites that feature this?

I'm looking to put a translucent dark layer above all content with a 'Loading' text mid page for certain Ajax actions, but I'm not quite sure the best way to approach this.

One option was to change the body style, but that doesn't quite work how I want.

Any suggestions?

Edit:
Mods, if this is better suited in JS please move it

This problem only occurs with Mac Safari.

The stylesheet linked to my html doc loads only "some" of my styles. Some styles within the stylesheet are fine, while others are skipped completely (they don't even display when I view the stylesheet by itself in the browser)! So, it's not that the styles are displaying incorrectly. The styles have been removed from the stylesheet entirely!URL

See for yourself. Load stylesheet into MSIE and then into Safari (I'm using 1.2.1), then compare the two.

The html page is he html page

Any ideas?

On my website I've a few CSS files that I call. Occasionally a page will load and some text won't properly format... It will be too big. I'll refresh and it will go back to the size it's supposed to be. It's not all the text, just here or there.

I've tried this on multiple computers and multiple browsers and it still happens only once in a while.

Anyone know what is going on? Is there any way to diagnose this? It SEEMS as if part of the file isn't loading, but that doesn't sound right.

I know, this sounds like an AJAX question, but I don't think thats the solution. I have created a layout:
http://www.cabinincanada.com/script/

The problem is, that I want to be able to click on the About us button, and have it load into the content box where the posts are. I could just create a second page, copying the HTML and making the changes, but isn't this defeating the purpose of CSS? I would then have to go through and update all my links on both pages if I made changes. How do I load content into a box from an external web-page?

Hello,

I need some help. I have a personals website where I am going to start allowing users to personalize their profile page with css. My plan is to store their personal css scripts in a database and when their profile is viewed to dynamically load the css styles per individual. My question is, how do I implement this? How would I load style scripts from the database onto their page?

One question that may negate my above question is...is this the best way to implement this type of feature (profile personalization)? I beleive css is powerful and probably the best way to go but I am open to anyone elses ideas for css implementation.

Thank you very much for your time and help.

I have a page that will not load external CSS. Tested in Firefox and Opera. If I remove the doctype then the CSS loads and affects the page. This is the HTML:
Code:

<!DOCTYPE HTML PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<title>Insert Notes</title>
<meta http-equiv='content-type' content='text/html; charset=utf-8' />
<meta http-equiv='cache-control' content='no-cache' />
<meta http-equiv='pragma' content='no-cache' />
<meta http-equiv='expires' content='0' />

<link rel='stylesheet' type='text/css' href='/test.css' />

</head><body>

<h1>Beer</h1>

<p>test</p>

</body></html>

And this is the CSS:
Code:

body{ background-color: gray;} 
p { color: blue; } 
h1{ color: white; }

Hello I have a serious problem with the speed of my website.

Try: URL

and wait........ for about 2 or 3 minutes!!!

I am using the command include() four times on this site, it includes templates from the same site.

I also use CSS in a separate file using LINK REL="" blah blah ...

And now it goes sooo slow.


Could someone tell me what could be the cause of this, or ask me what you need more to judge this problem.
I thought myself it could be the border element in CSS because an other site works fine with this.

Any help would be greatly appreciated!

Platform: Windows
Browser: IE6
Technology: PHP, HTML & CSS

I'm using PHP for my HTML newsletter. For layout formatting, i'm using CSS.

Problem:
When i test my newsletter page in browser (IE6) it works fine, but when I email that same page to my hotmail a/c, CSS doesn't load.

I'm using following headers:
$headers .= "X-Mailer: PHP\n"; //mailer
$headers .= "X-Priority: 3\n"; //1 UrgentMessage, 3 Normal
$headers .= "MIME-Version: 1.0\n";
$headers .= "Content-type: text/html; charset=iso-8859-1\n";


I'm unable to find the problem.