CSS - Button-like Link For Outlook 2007

On my sitehttp://northshorewebdesign.net/testsite/ I have a horizontal menu with text and one image link. The menu is under the slideshow. There are 4 text links and an image link. I am trying to line up the text and image horizontally. Can anyone see what I am doing wrong? Here's the code:
Code:

.homepage-sub-menu {float: left; width: 960px; height: 70px;overflow: hidden; position: relative; margin: 10px 0px;}

.homepage-sub-menu ul{list-style-type: none; margin: 0; padding: 0; overflow:hidden;}

.homepage-sub-menu ul li {float: left; vertical-align:middle; width: 180px;}

.homepage-sub-menu ul li a:link,a:visited {display: block; width: 180px; font-family: Calibri,Arial, Helvetica, sans-serif; padding: 10px 4px; font-size: 20px;color: #ffffff; text-decoration:none; vertical-align:middle;display:table-cell;line-height: 70px;}

.homepage-sub-menu ul li a:hover,a:active{text-decoration: underline; vertical-align:middle;}

Thank you

Hi,

I have pictorial buttons that really are <a href's></a> with img buttons in between.
When viewed in IE i get a bluish/purple box around my buttons.

I want to eliminate the link marking around the images.

How do I do this?

Thanks for all and any suggestions.

Melroy

I have created some stationery using html / css but for some reason when I input it into outlook the styles do not work. Is this common and if so is there a way around it?

Thanks

i know that IE doesnt support the :hover being added to anything but links, is this the same with :active?
was just wondering whether i could have a style change when the user clicks on a form button

PROBLEM: I create a nice button using the sliding doors technique for rounded corners. But the button displays with 100% width unless I float it. My layout requires that the buttons be inline with the text, so floating won't work. Anyone know an alternative?

I wouldn't mind floating but I want the button to show inline with the text. When I use float:left, it removes it from the inline flow.

Basically, I want a very modular button that can be used in several different places on a page. In many cases, floating is fine because the mockup has it out of the inline text, but I want to use it there, too.

Here's the HTML:

<a class="button" href="#"><span>Update Profile</span></a>

Here's the css:

a.button:link, a.button:visited {
background:url(button_right.gif) no-repeat right top;
}
a.button span:hover, a.button span:active {
background:url(button_left_hover.gif) no-repeat right top;
}
a.button span {
background:url(button_left.gif) no-repeat left top;
color:#fff;
cursorointer;
display:block;
height:20px;
line-height:20px;
margin:0 2px 0 0;
padding:0 10px;
position:relative;
white-space:nowrap;
}

http://tinyurl.com/5llwfl

I'm having some problems with this page in particular. Try clicking on one of the Left or Right white image arrows below the main picture. This only occurs in Firefox 2.x. Once you click the link, the content area below "Starting from $278.497" should shift roughly 5 pixels down.

I thought it may be related to the dotted link outline that surrounds the image, but that was not the case. I applied styles to get rid of that and there was no changes.
I also thought it may be related to a position:relative; bug which this site has been notorious for. I tried making certain divs in that area position:relative to no avail. So to test further I tried an overall #content *{position:relative;} fix which could not fix the position shift, either.

I'm not sure what else it could be. And while I do have access to the build of this app, I have not been able to reproduce the issue by downloading all HTML, CSS, and image files locally.

Hello
Is there a way i can restore my <a href> link back to its original color, that is before the a:visited event, when I click on another link?
PS. no Javascript code needed, is their an alternative in css?

I have my links defined with a dashed border, but I don't want this on linked images and I'm trying to figure out if I can accomplish this with CSS only without additional markup in my HTML file.

Here is a sample file:

http://www. shawkey.com/test/imagebordertest.html

Any suggestions on how I can get the dashed border to not appear below the image and only appear below the text with just CSS?

Hello

is there a way to make it so hyperlinks are not decorated as the default blue? I have the following css which I've attempted to make it so the text '.com' is always white, but it defaults to the standard link color.

html:

<td class="nodecoration"><a class="nodecoration" href="http://www.somesite.com">.com</a></td>

css:

Code:

td.nodecoration {
	background-color: #003399; color: white; width: 120px; height: 30px; font-family: "Verdana", sans-serif; font-size: 25px; font-weight: bold; text-align:center;
}

A:link.nodecoration {text-decoration: none}
A:visited.nodecoration{text-decoration:none}
A:active.nodecoration{text-decoration:none}
a:hover.nodecoration{text-decoration:underline}

basically if i add a border around a button in FF i can click the button however the effect of "pressing" a button is lost.. IE mainatain this! is there a solution or will i have to live with it?

Hello everyone! I'm currently working with the <button> tag, simply because I want Safari users to be able to see button effects added onto submit buttons. It's pretty simple, except, I'm having problems centering text. Obviously, text-align: center; works for putting the text in the center of the button, but not the middle. I want to vertically align the text as well as horizontally. Anyone? Thanks in advance.

I have four social media buttons on my webpage that aren't being activated properly.

http://www. andreagriecodesign .com/test/about.html

When viewing the page on Firefox, they only become activated when the cursor is dead center of the button or below (to the bottom edge of the button).

Any suggestions why and how to fix? I don't have this problem with any other images on any other pages.

Thanks

Hello.

I have created a form with CSS and Divs. My problem is my "Submit your Testimonial" button background is all messed up and doesn't look like my "Reset Form" button in IE 6.0 SP2. It looks fine in Firefox.

Not sure how or where this gets changed. It seems to be adding a thicker border or something?

Here is the page:
http://www.nessphysiotherapy.com/testimonials.php

Suggestions?

Thanks

Matt

Hey all,
Wondering why my second button doesn't sow up (presumably, neither would the 3rd or 4th, though I haven't tried yet on those).

Code:

http://www.whywaitwebs.com/clients/icc/jobd.php

You can see the one button there, there should be a second as well... here is the relevant CSS:

Code:

#links {
	padding-top:120px;
	padding-left: 0;
	background-repeat: no-repeat;
	display: block;
	font-size: 0;
	line-height: 0;
	height: 31px;
	margin: 0;
	overflow: hidden;
	text-align: center;
	text-decoration: none;
	text-indent: -99999px;
	width: 740px;
}
a.link1{
	width:185px;
	height:31px;
	display:block;
	background: url(links.jpg);
	background-position: 0 0;
}
a.link1:hover{
	background-position: 0 31px;
}
a.link2{
	width:185px;
	height:31px;
	display:block;
	background: url(links.jpg);
	background-position: 0 0;
}
a.link2:hover{
	background-position: 185px 31px;
}

Thanks very much in advance!!