Member Avatar for tillotama

hi please check the code which works fine in IE but not in Firefox...

urgent help required...

HTML

<!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"><!-- InstanceBegin template="/Templates/index.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable -->
</head>

<body>

<table width="760" border="0" cellpadding="0" cellspacing="0">
  <!--DWLayoutTable-->
  <tr>
    <td height="121" colspan="3" valign="top"><img src="image/banner.gif" alt="Banner" width="760" height="121" ></td>
	<div id="container">
	<!---------------------------------------------------------------MENU--------------------------------------------------------------->
		<div id="navigation">
			<ul>				
				<li><a href="file:///C|/Users/abhi/Documents/index.html">Home |</a></li>
				<li><a href="file:///C|/Users/abhi/Documents/Board.html">Board |</a></li>				
				<li><a href="file:///C|/Users/abhi/Documents/Membership.html">Membership |</a></li>				
				<li><a href="file:///C|/Users/abhi/Documents/Concerts.html">Concerts |</a></li>					
				<li><a href="file:///C|/Users/abhi/Documents/Conferences.html">Conferences |</a></li>				
				<li><a href="file:///C|/Users/abhi/Documents/Competitions.html">Competitions </a></li>							
			</ul>			
		</div>
	<!---------------------------------------------------------------MENU--------------------------------------------------------------->	
	</div>
  </tr>
  <tr>
    <td width="34" height="381" valign="top" bgcolor="white"><img src="image/leftpane.gif" alt="leftpane" width="34" height="381" ></td>
    <td width="693" valign="top" bgcolor="white"><!-- InstanceBeginEditable name="EditRegion1" -->
	
	
	<div>
	<p>
	<a href="http://www.google.com/" target="_blank">google</a>
	</p>
	</div>
	
	<!-- InstanceEndEditable --></td>
    <td width="33" valign="top" bgcolor="white"><img src="image/rightpane.gif" alt="rightpane" width="33" height="381" ></td>
  </tr>
  <tr>
    <td height="28" colspan="3" valign="top"><img src="image/footer.png" alt="footer" width="760" height="28" ></td>
  </tr>
  <div id="footer">
			Copyright &copy; <a href="http://uweb.txstate.edu/~ns13/">Nico Schuler</a> 2009
			&nbsp;&nbsp;|&nbsp;&nbsp;
			Designed by Nidhi Modak 
			&nbsp;&nbsp;|&nbsp;&nbsp;
	</div>
</table>

</body>
<!-- InstanceEnd --></html>

CSS

/* CSS Document */

* { 
	border : 0; 
	margin : 0; 
	padding : 0; 
} 

a { 
	color : #b3000a; 
	text-decoration : none; 
} 

a:hover { 
	color : #555; 
} 

body { 
	background : #343434 url('image/background_body.jpg') repeat-x 0 50%; 
	color : #666; 
	margin : 2% 5% 10% 15%; 
	font : 0.8em "trebuchet ms", helvetica, sans-serif; 
} 

#container { 
	height : 530px; 
	margin : 55px 0 15px 0; 
	position : absolute; 
	width : 760px; 
} 

#navigation { 
	height : 44px; 
	padding-top : 40px; 
	margin-left : 145px; 
	width : auto; 
} 

#navigation ul { 
	list-style : none; 
} 

#navigation ul li { 
	float : left; 
	height : 44px; 
	padding: 0 5px 0 5px;
	list-style : none; 
	width : auto; 
} 

#navigation ul li a { 
	color : #fff; 
	display : block; 
	height : 25px; 
	line-height : 25px; 
	padding : 5px 0 0 0; 
	text-align : center; 
	width : auto; 
} 

#navigation ul li a:hover { 
	color : #111; 
} 

#content { 
	float : left; 
	height : 320px; 
	overflow : auto; 
	padding : 0 42px; 
	width : 676px; 
} 

#content h1 { 
	color : #333; 
	font-size : 200%; 
} 

#content h2 { 
	color : #333; 
	font-size : 100%; 
} 

#footer { 
	position : absolute; 
	font-size : 10px; 
	color : #fff; 
	height : 20px; 
	padding : 35px; 
	text-align : right; 
	margin : 470px 0 0 35px; 
	width : 696px; 
} 

#footer a { 
	color : #fff; 
} 

p.center { 
	text-align : center; 
}

.. the webpage has been created by the template i made in Dreamweaver

  • 4 Contributors
  • 6 Replies
  • 217 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by essential
Member Avatar for Thirusha

Can u provide an image or more detail on what isnt working correctly, cause in IE the navigation is listed vertical while in firefox the navigation is listed horizontally.

What hover isnt working correctly?

Member Avatar for MidiMagic

The ONLY style selector that works with hover is

a:hover

It affects ALL a links on the page. You can't make it work on just one anchor tag.

Which way do you want the navigation to display. Note that if the horizontal navigation bar does not fit in the allocated space, it will change to vertical. Make sure you leave extra space for margins, borders, and padding outside each item.

Member Avatar for tillotama

Thank you for the quick response...

The one with the google link is not working. the thing is the links are not working inside the editable region of the Dreamweaver

please help!!!

Member Avatar for tillotama

I want the menu horizontal. Which is in another layout cell of the dreamweaver. i have arranged it thru absolute positioning.

its not the menu. its the editable region (google link) .. which is giving me probs.

I could not understand .. what do you mean by a:hover ???

is my CSS wrong. ???

thanx for quick response.. :)

Member Avatar for Thirusha

Your code looks correct, theoretically it should work, but i see now that u cannot click on the google link, will try and figure out why that is happening.

The container id in your css is causing the problem. I am no genius in css, but i think what is happening is that the container id has a height of 530px, which then covers the area where the google link is, so your text appears under that "layer" thus it is not rendered correctly.

I removed the height attribute from container, so the container id looks like this:

#container {
margin : 55px 0 15px 0;
position : absolute;
width : 760px;
}

And the link shall now work in firefox.

Member Avatar for essential

Hi,

this might be irrelevant to the issue, but this ensure that your desired effect will work under all conditions.

Simply include this script inside the header section of your (x)HTML document.

All codes is as follows:

<script type="text/javascript">
// <![CDATA[
onload = function() {
var ie = (( !!document.all && !!!document.getElementById ) ? 1 : 0 ); // Check whether it is an IE based browser or not.
var onHover = "#555555"; // Specify the color of the link when hovered.

var offHover = "#B3000A"; // Color of the link under normal state.

var tag = "a" || "A";
var xNode = (( ie ) ? document.all.tags( tag ) : document.getElementsByTagName( tag )); // Filtering all A/a Tags on the page.
   for ( var x = 0; x < xNode.length; x++ ) { // Installing hover events
      xNode[ x ].onmouseover = ( function() {
         this.style.color = onHover;
         this.onmouseout = ( function() {
            this.style.color = offHover;
         } );
      } );
   }
}

// ]]>
</script>

hope it helps...
essential

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.