HTML and CSS RSS HTML and CSS RSS

Layers and rollover issues

Reply

•
•
Join Date: Apr 2008
Posts: 39
Reputation: Borderline is an unknown quantity at this point 
Solved Threads: 1
Borderline Borderline is offline Offline
Light Poster

Layers and rollover issues

 
0
  #1
Aug 22nd, 2008
Layers Issue

Site URL: http://www.further-flight.co.uk/20080820index.php

I am attempting to position the banner text over the top of the black space next to the racing image, but the z-index css is not having the right affect. Would someone be able to advise where I am going wrong with this, please?

CSS code so far:

HTML and CSS Syntax (Toggle Plain Text) 
  1. /*------  BASIC LAYOUT  ------*/
  2.  
  3. #secondary{
  4. 	margin: 0px 0px 0px 0px;
  5. 	width: 100%;
  6. 	height: 15px;
  7. 	font: 0.7em arial, verdana, sans-serif;
  8. 	background-color: #494949;
  9. 	padding: 5px 0px 5px 0px;
  10. 	text-indent: 20px;
  11. }
  12.  
  13. #logo{
  14. 	width: 100%;
  15. 	height: 80px;
  16. 	font-family: arial, verdana, sans-serif;
  17. 	font-size: 80%;
  18. 	background-color: #000000;
  19. 	z-index: 1;
  20. }
  21.  
  22. #header{
  23. 	text-align: right;
  24. 	z-index: 2;
  25. }
  26.  
  27. #footer{
  28.  
  29. 	background: url(/images/footer.png) repeat-x;
  30. 	text-align: center;
  31. 	padding: 10px 0;
  32. 	font: bold 0.8em arial, verdana, sans-serif;
  33. 	text-align: center;
  34. 	color: #FFFFFF;
  35. 	border: 1px solid #000000;
  36. }
  37.  
  38.  
  39.  
  40.  
  41.  
  42. /*------  ELEMENTS AND TAGS  ------*/
  43.  
  44. a:link {
  45. 	color: white;
  46. 	text-decoration:none;
  47. }
  48.  
  49. a:visited {
  50. 	color: silver;
  51. 	text-decoration:none;
  52. }
  53.  
  54. a:active {
  55. 	background-color: yellow;
  56. 	text-decoration:none;
  57. }
  58.  
  59. a:hover {
  60. 	color:silver;
  61. 	text-decoration:bold;
  62. }
  63.  
  64. body {
  65. 	background-image: url("/images/20080820_back1.png");
  66. 	background-repeat: repeat;
  67. }
  68.  
  69. h1	{
  70. 	color: #FFFFFF;
  71. 		font: 2em arial, verdana, sans-serif;
  72. }
  73.  
  74. h2	{
  75. 	color: #FFFFFF;
  76. 		font: 1.2em arial, verdana, sans-serif;
  77. }

Rollover Issue

The code I have for the secondary menu (top, grey area) works fine in IE but not FF. The links should be white, turning silver to hover and visited. Firefox is showing the links as silver, but doesn't change upon roll over. The roll overs in my main navigation system work OK. Any advice?

CSS code:

HTML and CSS Syntax (Toggle Plain Text) 
  1. /*------  ELEMENTS AND TAGS  ------*/
  2.  
  3. a:link {
  4. 	color: white;
  5. 	text-decoration:none;
  6. }
  7.  
  8. a:visited {
  9. 	color: silver;
  10. 	text-decoration:none;
  11. }
  12.  
  13. a:active {
  14. 	background-color: yellow;
  15. 	text-decoration:none;
  16. }
  17.  
  18. a:hover {
  19. 	color:silver;
  20. 	text-decoration:bold;
  21. }
  22.  
  23. body {
  24. 	background-image: url("/images/20080820_back1.png");
  25. 	background-repeat: repeat;
  26. }
  27.  
  28. h1	{
  29. 	color: #FFFFFF;
  30. 		font: 2em arial, verdana, sans-serif;
  31. }
  32.  
  33. h2	{
  34. 	color: #FFFFFF;
  35. 		font: 1.2em arial, verdana, sans-serif;
  36. }
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2008
Posts: 14
Reputation: mike_g is an unknown quantity at this point 
Solved Threads: 3
mike_g mike_g is offline Offline
Newbie Poster

Re: Layers and rollover issues

 
1
  #2
Aug 22nd, 2008
Apparently when using z-index you are meant to specify an absolute position, but it also works with a relative position. Maybe try:
HTML and CSS Syntax (Toggle Plain Text) 
  1. #logo{
  2.         position: absolute;
  3. 	width: 100%;
  4. 	height: 80px;
  5. 	font-family: arial, verdana, sans-serif;
  6. 	font-size: 80%;
  7. 	background-color: #000000;
  8. 	z-index: 1;
  9. }
  10.  
  11. #header{
  12.         position: absolute;
  13. 	text-align: right;
  14. 	z-index: 2;
  15. }
The display will probably be mangled, but your z-indexing should at least work. If you need to reposition your divs to make it look right specify offsets using top and left. If if absolute [positioning wont work have a go at using relative positioning.

Cheers.
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2008
Posts: 39
Reputation: Borderline is an unknown quantity at this point 
Solved Threads: 1
Borderline Borderline is offline Offline
Light Poster

Re: Layers and rollover issues

 
0
  #3
Aug 22nd, 2008
Many thanks, a step closer, as you can see from my previous link. The issue remaining with the layers is that I have a positioning difference: the text is central in Firefox, but too high (overlapping the grey/black bands) in IE.

Is there an effective way of dealing with this?
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2007
Posts: 3,203
Reputation: MidiMagic has a spectacular aura about MidiMagic has a spectacular aura about 
Solved Threads: 164
MidiMagic's Avatar
MidiMagic MidiMagic is offline Offline
Nearly a Senior Poster

Re: Layers and rollover issues

 
0
  #4
Aug 24th, 2008
There are several problems with layers, and problems in your styles:

- With layers, the mouse position operations should work on just the top layer. Even though the top layer might be transparent, mouse detection and control devices located under the top layer can't get focus or see the mouse. What you want is the equivalent of clicking on one Windows window and expecting to work a button on a window under it.

Z-index is not well implemented yet.

There are problems with your styles. e.g.:
HTML and CSS Syntax (Toggle Plain Text) 
  1. #secondary{
  2. 	margin: 0px 0px 0px 0px;
  3. 	width: 100%;
  4. 	height: 15px;
  5. 	font: 0.7em arial, verdana, sans-serif;
  6. 	background-color: #494949;
  7. 	padding: 5px 0px 5px 0px;
  8. 	text-indent: 20px;
  9. }


You have 0px in your styles. 0 must NOT have a unit of measure. Firefox cancels the whole style if it encounters a 0 with a unit of measure, such as 0px, 0pt, 0em, 0%. Remove the units of measure on 0 values. Like this:

HTML and CSS Syntax (Toggle Plain Text) 
  1. #secondary{
  2. 	margin: 0;
  3. 	width: 100%;
  4. 	height: 15px;
  5. 	font: 0.7em arial, verdana, sans-serif;
  6. 	background-color: #494949;
  7. 	padding: 5px 0 5px 0;
  8. 	text-indent: 20px;
  9. }

You have size styles (height, width) and nonzero surrounding styles in the same style or tag. This causes the noncompliant IE to behave very differently from the other browsers that follow the standards.

It is better to use a relative size, such as points, ems, or percent, rather than the absolute pixels. Then the page doesn't change so much with a change in screen resolution.
Last edited by MidiMagic; Aug 24th, 2008 at 9:19 pm.
Daylight-saving time uses more gasoline
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the HTML and CSS Forum
Thread Tools Search this Thread



appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity css design development displayimageinsteadofflash dreamweaver emailmarketing epilepsy explorer firefox flash form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization pnginie6 positioning problem scroll seo shopping studio swf swf. textcolor timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC