CSS Rollover Positioning Text

Sorry I suck at css and most of the time I just try different properties to get my way. But this time I can't seem to get what I want.

I just started on this site

As you can see, I already designed the menu and what I'm stuck on is the menu rollovers. It's just a simple background hover image for the menu links but I can't seem to position the text without moving the background image too.

Please help, thanks.

How do I make this vertical drop down menu work with CSS? Do I need Javascript?

Hey everyone,

This is my first post on this forum and I'm hoping I can get some help out there...I don't have anyone to call Sad( !

What I want to do is have your basic vertical side navbar, like this:

                <ul id= "sidenav">
                    <li><a href="portfolio.html">Portfolio</a>
                        <ul> 
                            <li> <a href="client.html">Client Work</a> </li>
                            <li> <a href="personal.html">Personal</a> </li>
                        </ul>
                    </li>

Opera, Safari, Chrome, IE compatibility issue (cross browser issue).

I've created a quite simple website. It works great in IE8+ and in Firefox. But it's totally messed-up in other browsers (http://narocila.gratita.com/matija_mihic/). Please, give me a few tips on how I can correct that...

Thank you, Laughing out loud

Mysterious IE layout problem with my menu?!

Hi,

Can anyone give me some advice on a mysterious IE layout problem I've been having with a menu on a wordpress site I'm working on (http://onewildlife.org/) ?!

My menu buttons are all adding a couple of pixels margin height at each position (as in screengrab below), even though this layout works fine in Chrome and firefox.

Any help appreciated, I'm tearing my hair out!

Thanks.

One wild life_screen grab.jpg

The CSS for my menu is currently: 
 
/* = newmenu
-------------------------------------------------------*/
 
.new
{
 
	display: block;
	float: left;
	margin: 0 auto;
	width: 940px;
	background-image:url(images/backnav.jpg);
	background-repeat:no-repeat;
	position:absolute;
 
}
 
.new ul 
{
 
	list-style: none;
	float: left;
	padding: 0;
	position:relative;
	width: 940px;
	text-decoration:none;
 
 
}
 
 
.new a 
{
 
	text-decoration:none;
	display:block;
	float:left;
	font-family:"Helvetica Neue",Arial,Helvetica,"Nimbus Sans L",sans-serif;
	font-size:13px;
	color:#FFFFFF;
	padding: 0 10px;
	margin-top: 2px;
	line-height: 38px;
 
}
 
.new a:hover
{
	color:#000000;
	opacity: 0.99;
 
}
 
 
li#red a 
	{
	background-image:url(images/red.gif);
	opacity:0.75;
	filter:alpha(opacity=70);
	background-repeat:no-repeat;
	background-position:center;
}
 
 
li#pink	a
{
	background-image:url(images/pink.gif);
	opacity:0.75;
	filter:alpha(opacity=70);
	background-repeat:no-repeat;
	background-position:center;
 
 
}

and so on for each color button...

Having problems matching design...

Howdy all,

I am an artist/animator that has been coding his own site for years now, but I haven't really been keeping up with the new code the last couple years. I am trying to figure out CSS, but am having a hard time with how to match the design I created in photoshop.

Before this, I have just been using slices and dreamweaver to create my sites, and have had pretty good luck...

http://webspace.ringling.edu/~dsmith/ (my current site)

Syndicate content