CSS - Css Rollover In Ie6

I have this code which changes text into a image, but how do I have an image instead of text? I mean so everythings images and no text.

<style type="text/css">

#nav a:hover {
background: url("arrow_hover.png") no-repeat;
}


#nav a img {
width: 88px;
height: 67px;
position: absolute;
top: 200px;
left: 500px;
border: 1px solid black;
visibility: hidden;
}

#nav a:hover img {
visibility:visible;
}
</style>

<div id="nav">


<ul>


<li><a href="#">Link1<img src="camera.jpg" alt="" /></a>


<li><a href="#">Link2<<img src="home.png" alt="" /></a></li>


<li><a href="#">Link3<<img src="camera.jpg" alt="" /></a></li>


<li><a href="#">Link4<<img src="johnpotter.jpg" alt="" /></a></li>


</ul>
</div>

My website is warriorquest.co.nr and for some odd reason, the css rollovers are working in the latest IE, but not in the latest Firefox. THis is something i never expected, here is my css:
Code:
css

a { text-decoration: none; }
a:link { color:  #0000FF; }
a:active { color:  #C0C0C0; }
a:visited { color: #0000FF; }
a:hover
{
  color:  #0000FF;
  border: 1px solid #0000FF;
  padding: 5px;
  width: 190px;
  background-color: #ffffff;
}
body
{
 color: #ffffff;
 background-color: #2F4F4F;
}
div
{
  margin-top: 50px;
  margin-bottom: 50px;
}

Thx for your help =)

EDIT: it seams i had to completely reload the page, but now they dont display right. THey are supposed to look like in IE, any suggestions?

Hi,
Does anybody know how i can have an image that switches to another image on rollover and also has a link?

Thanks

I am having an issue when trying to implement a rollover situation similar to the way Bing does their main page. I had it working with just CSS before, but now that IE 8 is out, I'm seeing issues.

I have a region that on hover/mouseover a box appears. When the box is hover/mouseover, a word box appears. On mouseout of either and their child element's visibility is hidden.

I have tried moving this solution over to jquery, but am still seeing issues. The hover display works in IE 8 ONLY when you are on the border of the parent element.

Has anyone seen similar issues and/or found a solution?

Go to barani design and click on anemometer

go to krajeski net baranidesign anemometer html

OK, I've gotten this to work a hundred times before, but today I am stumped. Basically, I am trying to create an image rollover with CSS.
here is my CSS: Code:

a.footer_box3{
width:222px;
height:169px;
background-image:url('images/footer/footer_test/footer_box3_off.png') no-repeat;
border:none;
display:block;
}


a.footer_box3:hover{
width:222px;
height:169px;
background-image:url('images/footer/footer_test/footer_box3_on.png') no-repeat;
border:none;
display:block;
}

the above CSS is in the header of the document.
Here's the code for the rollover in the page: Code:

<td background="images/footer/footer_test/footer_box3_off.png" width="222" height="169">
			<a href="our_people.asp" class="footer_box3"></a>
		</td>
		

You can see the site here
Scroll down to the bottom of the page where there are 4 footer boxes. I am only trying to get the third box to swap images on hover.

can anyone see what I am doing wrong?

thanks

I am trying to implement the below code for my own page.
The issue for me is I don't know how to get the background image to overlay the link text.

Unlike in the example I don't want the text links on top of the image, I would like to be behind. Is this possible?

Live demo of example:
http://www.tutorio.com/media/css-tutorials/rollover-example.htm


Code:

<div class="rollover">

<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>
<a href="#">Tutorio</a>
</div>

Code:

.rollover a {
display:block;
width: 90px;
padding:10px 10px 10px 7px;
font: bold 13px sans-serif;;
color:#333;
background: url("rollover-image.gif") 0 0 no-repeat;
text-decoration: none;
}
.rollover a:hover { 
background-position: 0 -35px;
color: #049;
}
.rollover a:active {
background-position: 0 -70px;
color:#fff;
}

I've tried adding an image between the <a and </a> and tried to change that when hovered.

Code:

<a href="about.htm"><img src="images/testimage.png" alt="" class="testimage"/></a>

Code:

a.img.testimage:hover {
background-position: 0 -40px;

}

hey folks, I've got about 4 words in a row all with different styles on them!

I'm using the :hover function to put rollovers on the different words which works sweet.


problem is, can I when I rollover the first word make the rollovers on the other words highlight?


cheers


p.s if you dont know what I'm talking about i'll post up a simple example

need help on a background rollover, I have tried for hours now and have been unable to get this to work.

I have been working with CSS and have been unable to either change the background when rolling over nor making images visible when rolling over.

The site Iam working on is http://www.opticalflare.com and I want it so that when I roll over the birds in the tree that the background switches or the image appears of the man lifting his arm and pointing to text saying what the section is.

Best I could get was the opposite. I would get image change rolling over the background but it would go away ontop of the links.

Code:

body
{
background-color: #FFFFFF;
background-image: url(/images/bg1.jpg);
background-repeat: no-repeat;
background-position: right bottom;
margin: 0 0 0 0;
}

.cssnav {
background-repeat: no-repeat;
background-position: right bottom;
background-image: url(/images/bg2.jpg);
white-space: nowrap;
visibility:hidden;
display: block;
margin: 0;
padding: 0;
}

.cssnav a {
display: block;
color: #000000;
float: bottom-right;
text-decoration: none;
}

.cssnav img {border: 0; }
.cssnav a:hover img{visibility:visible}

</style>

<!-- The links in the birds and letter -->

<div id="cssnav" style="position:absolute; right:150; bottom:385;">
<a href="/#.html"><img src="/images/link.gif" border="0"></a>

hi, been trying to do this for a few hours now and pretty much struggling a bit. basically I have a <ul> and when I hover the mouse over one of the list links, I wantt a sub menu to appear which can also be clicked.

I have trawled around abit to see if I could get anything but have come up empty handed.

can someone point me in the right direction here.

thanks!!

I've finally finished a site, but I am having slight problems with the rollover menu. I was able to post it online, so check out this page, first in Firefox, then in IE.

http://uwopartners.org/students/schuhm65/Plexus/main.html

I believe the problem is that the conditional IE statements add a table within the main menu links. This is to get around using javascript, but when you hover over the main links, the background is changed and expanded to include the submenu. Can anyone figure out a work around for this, so the appearance is similar to Firefox?

Here is the css:
Code:

html {
	margin:0;
	padding:0;
}

body {
	margin: 0;
	padding: 5px;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 76%;
	background-color: #eee;
	color: #000;
}

.clear {
	margin:0;
	padding:0;
	clear:both;
	font-size:0;
	line-height:0;
}

/* Header container */

#header {
	margin: 0;
	padding: 0;
	border: 1px solid #000;
	color: #fff;
	text-align: center;
	background: url("images/classroom.gif") repeat-x;
}

img#logo {
	margin: 10px 0px 0px 0px;
	border: 4px solid #FFF;
}

#header h1 {
	margin: 5px 0px 5px 0px;
	font-size: 2.5em;
	font-weight: bold;
	letter-spacing: 0.125em;
}

#banner
{
	margin: 0;
	padding: 0;
	background: #235 url("images/banner.gif") no-repeat 50% 50%;
	border: 1px solid #000;
}
	
#banner img
{
	width: 0;
	margin-left: -200px;
	padding-left: 1px;
}

/*topNav Container */

#topNav {
	margin: 10px 0px;
	padding: 0;
/*	border: 1px solid #ff0;  */
}

#searchBox {
	margin: 0;
	padding: 0; 
	float: left;
	width: 150px;
	height: 125px;
	border: 1px solid #000;
	background: #FFF;
	text-align: center;
}

#nav {
	margin: 0px 0px 0px 153px;
	padding: 0px;
/*	border: 1px solid #0f0; */
}

#nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#nav li#nav-foundation, #nav li#nav-submission, #nav li#nav-recipients, #nav li#nav-volunteer {
	margin: 0px 0px 0px 8px;
	padding: 0;
	float: left;
	display: inline;
	width: 23%;
	height: 125px;
	border: 1px solid #000;
	background-repeat: no-repeat;
	background-position: 50% 100%;
}

#nav table {
	border-collapse: collapse;
}


#nav a.mainMenu {
	display: block;
	font-size: 18px;
	color: #FFF;
	background-color: #c7013f;
	text-decoration: none;
	text-align: center;
}

#nav ul ul {
	margin: 0 auto;
	padding: 0;
	display: none;
	width: 90%;
/*	border: 1px solid #0f0;  */
}

#nav ul ul li {
	margin: 4px 0px;
	padding: 0;
	border: 1px solid #fff;  
}

#nav table a {
	font-size: 15px;
	display: block;
	color: #fff;
	text-decoration: none;
	text-align: center;
	background-color: #c7013f;
}

#nav ul ul li a {
	font-size: 15px;
	display: block;
	color: #fff;
	text-decoration: none;
	text-align: center;
	background-color: #c7013f;
}


#nav ul li:hover a.mainMenu , #nav ul a.mainMenu:hover {
	background-color: #235;
}

#nav ul li:hover ul, #nav ul a.mainMenu:hover ul{
	display: block;
}

#nav ul ul li:hover a, #nav ul ul a:hover {
	background-color: #235;
}

	/* nav Headings

	#foundation #nav-foundation a.mainMenu, #submission #nav-submission a.mainMenu,
	#volunteer #nav-volunteer a.mainMenu, #recipients #nav-recipients a.mainMenu {
		background: #235;
	}

	#charter #nav-foundation ul, #committee #nav-foundation ul, #schedule #nav-foundation ul {
		display: block;
	}
	#charter #nav-foundation ul #nav-charter a, #committee #nav-foundation ul #nav-committee a,
	#schedule #nav-foundation ul #nav-schedule a {
		background: #235;
	}
*/

/* Side Navigation */

	#sideNav {
		float: left;
		width: 151px; /* 1px adjustment for no border */
		margin-right: 10px;
	}

	/* sideNav Boxes */

	#sideNav .box {
		margin-bottom: 10px;
		padding: 5px 5px 5px 50px;
		border: 1px solid #000;
		height: 90px;  /* add 10 for padding */
		background: #235;
		color: #fff;
		background-repeat: no-repeat;
	}

	#sideNav a {
		font-size: 1em;
		color: #fff;
		text-decoration: none;
	}

	#sideNav #calendar {
		margin: 0px;
	}

	#sideNav img {
		border-style: none;
		width: 150px;
		height: 150px;
	}


	
	#sideNav a:hover {
		font-weight: bold;
	}


/* Main Content Container */

	#main {
		float: auto;
		padding: 10px;
		border: 1px solid #000; 
		background: #fff;
		margin-left: 165px;
	}


/* Page Footer */

	#footer {
		clear: both;
		background: #235;
		border: 1px solid #000;
	
		color: #aaa;
		text-align: center;
	
		margin: 10px 0px 0px 0px;
		padding: 20px;
	}

	#footer a {
		color: #fff;
		font: underline;
	}

	#footer a:hover {
		font-weight: bold;
		letter-spacing: .1em;
	}

And here is the html:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Welcome!</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />


	<link href="style.css" rel="stylesheet" media="screen" type="text/css" />

</head>
<body>
<!-- Header -->
	<div id="header">
		<span>&nbsp<img id="logo" src="images/plexusLogo.jpg" alt="Plexus"/>&reg</span>
		
		<h1>Helping Hands</h1>
		
		<div id="banner">
			<img src="images/banner.gif" width="200" height="30" 
				alt="Providing Resources - Supporting Communities - Affecting Lives">
		</div>
	</div>

<!-- Navigation Menu -->

<div id="topNav">

	<!-- Search Box -->

	<div id="searchBox">
		Welcome, <b>John Doe</b>!
		[<a href="#">Admin</a>] [<a href="#">Sign Out</a>]
	  	<form action="" name="search">
	    		<input type="text" size="14" name="searchQuery" />
			
	    		<input type="submit" value="Search" />
	  	</form>
	</div>	

	<div id="nav">
	<ul>

		<li id="nav-foundation" style="background-image: url(images/foundation.jpg)">
			<a class="mainMenu" href="#">Foundation
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
			<ul>
				<li id="nav-charter">
					<a href="#">Charter</a>
				</li>
				<li id="nav-committee">
					<a href="#">Committee</a>
				</li>
				<li id="nav-schedule"><a href="#">Schedule</a>
				</li>

				<div class="clear">&nbsp;</div>

			</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
		</li>

		<li id="nav-submission" style="background-image: url(images/submission.jpg)">
		<a class="mainMenu" href="#">Submission
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
			<ul>
				<li id="nav-guidelines">
					<a href="#">Guidelines for Giving</a>
				</li>
				<li id="nav-submit">
					<a href="#">How to Submit a Request</a>
				</li>

				<div class="clear">&nbsp;</div>

			</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
		</li>

		<li id="nav-recipients" style="background-image: url(images/recipients.jpg)">
		<a  class="mainMenu" href="#">Recipients
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
			<ul>
				<li>
					<a href="#">Sub One</a>
				</li>
				<li>
					<a href="#">Sub Two</a>
				</li>

				<div class="clear">&nbsp;</div>

			</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
		</li>

		<li id="nav-volunteer" style="background-image: url(images/volunteer.jpg)">
		<a class="mainMenu" href="#">Volunteer
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
			<ul>
				<li id="nav-program">
					<a href="#">Volunteer Program</a>
				</li>
				<li id="nav-tracking">
					<a href="#">Tracking Hours</a>
				</li>
				
				<div class="clear">&nbsp;</div>

			</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
		</li>

	<div class="clear">&nbsp;</div>

	</ul>
	<div class="clear">&nbsp;</div>
	</div><!-- nav -->
	<div class="clear">&nbsp;</div>
</div><!-- topNav -->
<!-- Side Navigation -->

<div id="sideNav">

	<div class="box" style="background-image: url(images/CompanyEvents.gif)">
		<a href="#">Check out the events at Plexus!</a></div>
	<div class="box" style="background-image: url(images/CommunityEvents.gif)">
		<a href="#">Check out the community events sponsored by Plexus!</a></div>
	<div class="box" style="background-image: url(images/EventPhotos.gif)">
		<a href="#">Check out the photos from previous events!</a></div>
	<div class="box" style="background-image: url(images/AddEvent.gif)">
		<a href="#">Check out the photos from previous events!</a></div>
	<div id="calendar">
		<a href="#"><img src="images/calendar.jpg"/></a>
	</div>

</div>

<!-- Main Content -->

<div id="main">

	The Foundation's goal is to provide support that can have a meaningful impact in markets and communities that are strategically alligned with Plexus Corp.'s mission as the Product Realization Company. To accomplish this goal, the PCCF's charitable giving is allocated into three primary categories:
					<br /><br />
					<ul style="padding-left: 32px;">
						<li><b>1. Technology:</b> Supporting innovation and technology-related education</li>
						<li><b>2. Healthca </b> Enhancing the quality of medical care</li>
						<li><b>3. Community:</b> Making the communities we live in a better place</li>
					</ul>
					<br />Maecenas ut quam rutrum lacus tempus fringilla. Maecenas aliquam tempus libero. Mauris porttitor. Etiam at risus a est sodales cursus. Cras ut ipsum. Vivamus at turpis ac lorem posuere rutrum. Vestibulum nisi nulla, rhoncus a, rhoncus sit amet, placerat ac, justo. Nam consequat mauris ut orci. Etiam eleifend. Ut sem mauris, imperdiet vitae, consectetuer a, ullamcorper non, nibh. Curabitur sapien. Fusce ultricies, ligula eget scelerisque tempus, nisi nisl convallis dui, ut scelerisque magna est sit amet leo. Suspendisse facilisis tortor faucibus elit. Sed diam. Duis imperdiet blandit mauris. Etiam cursus erat vel ligula.
					<br /><br />Sed vel urna. Quisque mattis orci sit amet dolor. Sed commodo felis at diam. Aenean ut nisl a mauris varius hendrerit. Vivamus feugiat risus in lacus. Ut eleifend velit. In blandit. Mauris bibendum, nunc at ullamcorper egestas, eros nibh faucibus diam, tincidunt placerat purus justo vel sapien. Curabitur feugiat scelerisque odio. Nullam nec augue ut libero faucibus ornare. Suspendisse tortor mauris, luctus sit amet, tempor vel, facilisis ac, lacus. Phasellus ultrices, massa eget consequat dapibus, dui felis interdum sapien, sed fringilla magna neque eu est. Vestibulum luctus vehicula eros.
					<br /><br />Phasellus massa metus, blandit eget, porttitor at, faucibus ac, lorem. Integer id augue vitae magna ullamcorper varius. Nam id turpis. Integer venenatis tincidunt est. In hac habitasse platea dictumst. Proin id turpis fermentum neque sodales ullamcorper. Quisque ante. Morbi sit amet quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc nulla erat, sollicitudin in, imperdiet vitae, elementum eu, sapien. Nulla nonummy nisi eget quam. Suspendisse potenti.
					<br /><br />Morbi quis enim ac libero pulvinar scelerisque. Morbi eleifend, nulla eget egestas tincidunt, augue libero rutrum neque, non pharetra orci risus vel diam. Nunc eget lorem. Integer vitae erat. Donec non diam. Nulla a risus sit amet orci consectetuer tincidunt. Morbi sapien. Ut scelerisque, ipsum quis egestas blandit, magna nisl laoreet ligula, at ornare lorem augue nec purus. Praesent scelerisque, lectus sed venenatis lacinia, ipsum nulla accumsan nibh, id dapibus lectus libero ultricies ipsum. Etiam aliquet vehicula nisi. Praesent consectetuer, odio eget posuere blandit, dui sapien pharetra enim, id iaculis elit est sed libero. Praesent in eros non augue commodo nonummy.
					<br /><br />Nulla placerat feugiat neque. Vivamus commodo condimentum neque. Aenean at enim et justo malesuada molestie. Cras lacinia tincidunt magna. Vivamus convallis, tellus nec convallis blandit, diam nisi facilisis justo, ut consectetuer lectus neque et sapien. Quisque mattis dolor vel mi. Aliquam risus odio, euismod at, sodales non, auctor a, leo. Pellentesque imperdiet odio quis velit. Quisque pharetra, quam vel volutpat molestie, mi mauris auctor neque, eget tempus massa nibh vel enim. Donec vitae arcu at pede feugiat suscipit. Quisque sollicitudin. Cras ac enim a lorem nonummy consectetuer. Donec tortor nulla, porttitor mattis, molestie eu, pharetra elementum, libero. Integer nonummy viverra quam. Sed posuere urna non elit. Morbi et sem quis neque tempor tincidunt.
					<br /><br />Nam velit. Nam eget lectus sit amet nibh aliquam pulvinar. Pellentesque quam. Integer mauris est, dapibus eu, laoreet at, vehicula nec, tellus. Nam urna diam, nonummy ac, dictum ut, accumsan id, orci. Ut iaculis. Praesent sapien quam, vehicula vitae, imperdiet vitae, dictum at, lorem. Morbi nisl purus, interdum nec, sollicitudin at, eleifend vel, sem. Phasellus lacinia. Duis ut ligula. Morbi ut felis ac quam feugiat eleifend. Vestibulum nibh mauris, interdum ac, vehicula a, porttitor accumsan, ligula. Aenean vehicula tortor vel turpis. In hac habitasse platea dictumst. Suspendisse id sem. Sed fermentum, nisi at vestibulum cursus, sem nibh aliquet arcu, non vehicula turpis felis et dui. Pellentesque ligula augue, hendrerit quis, rhoncus vitae, hendrerit fringilla, nibh.

</div>


<div id="footer">
<a href="#">Feedback</a>
	| <a href="#">Contact</a>
	| <a href="#">Site Map</a>
	| <a href="#">Privacy</a>
	| <a href="#">Legal</a>
	<br /><br />
	Donec aliquet tincidunt velit. Aliquam erat volutpat.<br />
	Mauris ante. Suspendisse a leo ut leo tristique porta.<br />
	Aliquam iaculis sem tristique massa fringilla faucibus.
</div>
</body>
</html>

HI there,

I am trying to create a div which will change colour upon rollover, but it is not working.

This is my CSS:

Code:

.left { float:left;
width:30%;
padding: 4px;
display: block;
background-color:#dc8; }

.left a:hover {
background-color: #CCCCCC;
display: block;}

and this is my HTML

Code:

<div class="left">Content</div>

Any ideas what I have wrong?

currently at my site i have rollover images on my menu which are gif files and have parallel gif files that are "lit up" which show when the user puts their mouse over the gif

which looks very pretty and i like it, unfourtnatly it uses javascript.
this creates a couple issues, one is that the user needs javascript for this too work, the other is i think it's casuing my page to load slow.

someone said something about doing rollover images with CSS. im willing to try it but i don't understand or have a clue how to do this. also is using CSS any better? (speed wise most importantly)

Hello guys

Please see the attached .zip, it contains a .swf file which shows what I am trying to accomplish in css, and a html file with the progress i've made.

I would like there to be no images involved.

I have been trying for a good few days now. I can almost get it to work in IE (Except the 1px gap between button and end-block), but in other browsers its just not working.

Any help is greatly appreciated,

Cheers,
Rob

i have a problem with my rollovers. they work fine in ff and safari, and shockingly do not work in ie6. i've been at it for a couple of days now, and can't seem to make headway on it.

i'm also new to this forum, so im hoping i do this right:

html:

<div id="banner"><img src="assets/banner.png" alt="xxx" width="450" height="145" border="0" />
<ol>
<li><a href="index.html" id="home">home</a></li>
<li><a href="about.html" id="about">Aboutx</a></li>
<li><a href="portfolio.html" id="portfolio">xPortfolio</a></li>
<li><a href="services.html" id="services">Servicesx</a></li>
<li><a href="news.html" id="news">Latest News</a></li>
<li><a href="contact.html" id="contact">Contact </a></li>
</ol>
</div>

css:

@charset "utf-8";
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
}
body {
background-color: #000000;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-repeat: repeat-y;
}
div {
background-position: center;
}

#container {
width: 100%;
background-color: #0000000;
}
#containertopout {
width: 100%;
background-image: url(topbg.png);
background-repeat: repeat-x;
height: 300px;
}
#containertopin {
width: 900px;
margin-right: auto;
margin-left: auto;
}
#banner {
height: 245px;
width: 450px;
float: left;

}
#flash {
width: 450px;
float: left;
padding: 0px;
top: auto;
height: 228px;
margin-top: -0.7em;
margin-right: auto;
margin-bottom: -20px;
margin-left: auto;
}
#flashcontent {
margin: 0px;
padding: 0px;
height: 228px;
width: 450px;
}
#footer {
display: inline;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
width: 850px;
}


#containermiddle {
width: 850px;
margin-right: auto;
margin-left: auto;
background-repeat: repeat-y;
background-color: #000000;
float: none;
padding: 0px;
}
#body {
background-repeat: repeat-y;
background-color: #000000;
}
#containerbottomout {
width: 100%;
background-image: url(botbg.png);
background-repeat: repeat-x;
height: 120px;
clear: both;
overflow: auto;
}
#containerbottomin {
width: 850px;
margin-right: auto;
margin-left: auto;
clear: both;
float: none;
}


.col1 {
border-right-width: 2px;
border-right-style: ridge;
border-top-color: #071E3C;
border-right-color: #071E3C;
border-bottom-color: #071E3C;
border-left-color: #071E3C;
}
#navlinks li {
display: inline;
list-style-type: none;
margin-left: 0.25em;
padding-left: 0.5em;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #18457B;
}
#navlinks .first {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
margin-left: -0.75em;
}
#navlinks a {
font-size: 10px;
}


p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 1.5;
color: #4480d5;
}
#navlinks p {
margin-top: -1.5em;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#navigation {
padding-top: 1em;
text-align: center;
}


.style1 {
font-size: 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FF9B21;
}
.style2 {font-size: 16px}

.style3 {
color: #4480d5;
font-size: 12px;
line-height: 20px;
}
.style4 {
color: #FF9B21;
font-size: 12px;
line-height: 20px;
}

a:link {
color: #4480D5;
font-size: 12px;
line-height: 20px;
text-decoration: none;
}
a:hover {
color: #FFC51B;
text-decoration: underline;
}
a:active {
color: #4480d5;
}
a:visited {
color: #FF9B21;
text-decoration: none;
}

#banner li{
float:left;
margin-top: -0.6em;
list-style-type: none;
}

#banner a{
text-decoration: none;
display: block;
float: left;
text-indent: -5000px;
}

#banner #home {
background-image: url(navbut/home.png);
background-repeat: no-repeat;
background-position: 0 0;
width: 75px;
height: 95px;
margin-left: -3.35em;
}

#banner #home:hover {
background-position: 0 -95px;
}

#banner #about {
background-image: url(navbut/aboutus.png);
background-repeat: no-repeat;
background-position: 0 0;
width: 75px;
height: 95px;
}

#banner #about:hover {
background-position: 0 -95px;
}

#banner #portfolio {
background-image: url(navbut/portfolio.png);
background-repeat: no-repeat;
background-position: 0 0;
width: 75px;
height: 95px;
}

#banner #portfolio:hover {
background-position: 0 -95px;
}

#banner #services {
background-image: url(navbut/services.png);
background-repeat: no-repeat;
background-position: 0 0;
width: 75px;
height: 95px;
}

#banner #services:hover {
background-position: 0 -95px;
}

#banner #news {
background-image: url(navbut/news.png);
background-repeat: no-repeat;
background-position: 0 0;
width: 75px;
height: 95px;
}

#banner #news:hover {
background-position: 0 -95px;
}

#banner #contact {
background-image: url(navbut/contact.png);
background-repeat: no-repeat;
background-position: 0 0;
width: 75px;
height: 95px;
}

#banner #contact:hover {
background-position: 0 -95px;
}

free happy thoughts from me for whoever can help me out!