CSS - Ipad Phone Underline

I'm the processing of redesigning a website that uses hover effect on a button (like button images changes when you put your mouse over it and when you click it, it goes to a different page).

Now that works fine if you're on a a desktop/laptop computer. But on a tablet, the hover/onmouseover effect does not work. On a tablet, when clicking the button image, it changes briefly and then immediately goes to a new page.

What are methods and techniques where a website can detect if a visitor comes from a tablet or not? Then would it be possible to switch to a tablet CSS version? Or, are there tablet framework (i.e. Modernizer?) that can help with this process?

When hovering over a link, how can I make the underline thicker? Check out this site.

link

I have a page that has a bunch of thumbnails on it and using css to format those images, i've added a margin to both sides for spacing. The class is applied to the href and set to have the img as a descendant. When the page renders in FF, there is no problem. But when it renders in IE, i get the nice little hyperlink underline where the margin is between two thumbnails. Any help would be great.

HTML

<a href="hometour/defiancemo/P9010045.jpg" class="thumbs" target="_blank">
<img src="hometour/defiancemo/thumbs/P9010045.jpg" alt="" />
</a>

CSS
a.thumbs img {margin: 0px 5px 10px 5px;text-decoration: none;color: #019934}

Does anyone know if/how I can get a CSS script for link classes that would only change the colour of the underline like the one at the top of Altavista's translate page??
I have tried viewing the source but can't seem to put my finger on it.

Any help would be greatly appreciated.

Cheerz,
sheermonkey.

Hey guys!

I have the following code in my CSS that controls the links in my document.

The trouble is all my visited links appear as not underlined and all my unvisted links appear underlined? could someone help me to remove this? I can't get it to work

PHP Code:
#nav.a:link{
    color: #FFF;
    text-decoration: none;
    background: transparent;
    padding: 0px 0px 0px 5px;
}
#nav a:visited {
    color: #FFF;
    text-decoration: none;
    background: #9CC9E3;
    background: transparent;
    padding: 0px 0px 0px 5px;
    }    
    
#nav a:hover {
    color: #9CC9E3;
    text-decoration: none;
    background: #9CC9E3;
    background: transparent;
    padding: 0px 0px 0px 5px;
    } 





Thanks

Charlie

hi, i would like the underline of my top level links to be as wide as the naviagtion box, it is currently only streching to the end of the text itself

PHP Code:
<ul>
    <li><a href="?action=abouUs">about us</a>
        <ul>
            <li><a href="?action=press">press</a></li>
            <li><a href="?action=tellFriend">tell a friend</a></li>
            <li><a href="?action=feedback">feedback</a></li>
        </ul>
    </li>
    <li><a href="?action=new">fitting room</a></li>
    <li><a href="?action=offers">best sellers</a></li>
    <li><a href="?action=col">useful info</a>
        <ul>
            <li><a href="?action=pay">payment options</a></li>
            <li><a href="?action=delCharge">delivery charges</a></li>
            <li><a href="?action=retPol">returns policy</a></li>
        </ul>
    </li>
</ul> 





PHP Code:
/* LEFT NAV */
    
    #leftNav {
        color: #000;
        float: left;
        margin: 0;
        padding: 0;
        width: 128px;
    }
    
    #leftNav a {
        border-bottom: 1px solid #000;
        text-decoration: none;
        width: 120px;
    }
    
    #leftNav ul li ul a {
        border-bottom: none;
    }
    
    #leftNav ul {
        list-style: none;
        margin: 0;
        padding: 10px 0 0 10px;
        display: block;
        border: none;
    }
    
    #leftNav ul li {
        margin: 0;
        padding: 0 0 10px 0;
        width: 110px;
        font-size: 14px;
        font-weight: bold;
    }
    
    #leftNav ul li ul {
        margin: 0;
        padding: 5px 0 0 10px;
    }
    
    #leftNav ul li ul li {
        margin: 0;
        padding: 0;
        list-style: none;
        font-size: 12px;
        font-weight: 300;
        width: 95px;
    }
    
    /* END OF NAV */ 





thanks for your help

I've been playing with this for a while now, and I can't figure out what the heck I'm doing wrong.

Here's my site:

http://kick.hopto.org

Basically, I want the links inside the .storytitle class to NOT underline when they are hovered over (as the class name suggests, I'm talking about the story titles).

I thought this would work, but it seems to have no effect:

Code:

.storytitle a, .storytitle a:hover, .storytitle a:active
{
	text-decoration: none;
	border-bottom: 0;
}

Any help would be greatly appreciated.

http://www.cad-design-engineering.com/New/index.php

Problem is most noticeable in IE, of course, because it also puts a space under the header image.

I need to get rid of that line, and the space. Have validated both XHTML and CSS.

Thank you.

Hi, Is it possible to make 3 different sites depending on the client browser medium? I have a flash site, that needs to be presented non-flash for the iphone, and another non-Flash site for the ipad.

Is there a way CSS can detect these 3 different browser mediums?

If so, then how?

thanks
-

Hello I'm trying to figure this out. I want different color on the text-decoration overline and underline then the text. I know it's possible but how?
It works if i change it into border but that's not the case. Here's a picture to give you the idea.
Please help

Thanks in advance

Since i can't link url here's the link for the picture
i41.tinypic.com/29bvd1.png

As soon as I apply the floating to my footer spans the dashed border on the links stops working. Can anyone tell me why please?


PHP Code:
<div id="footer"><img src="../images/spacer.gif" alt="Whitespace Image" width="100%" height="4" align="top" />
<span class="spanLeft footerText">
Copyright 2005 <a href="http://www.xxxxxxxxx.co.uk" target="_blank" class="gray">xxxxxxxxxxx</a>.
</span>
<span class="footerText spanRight">
<a href="#" target="_blank" class="gray">xxxxxxxxxx</a> xxxxxxxxxxxxxx
</span>
</div> 





PHP Code:
.footerText {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-weight: bold;
text-decoration: none;
color: gray;
}
.spanRight {
float: right;
margin-right: 5px;
}
.spanLeft {
float: left;
margin-left: 5px;
}
A.gray {
text-decoration: none;
color: gray;
}
A.gray:Hover {
border-bottom: 1px dashed;
color: #009966;
} 

I wonder how to create a link without an underline in HTML? Maybe you have also met such problems.

Anyone helps? Thanks in advance.

Hi, I am trying to make a link's text black with a blue underline. Is this possible?

Here is my code, which produces black text with a black underline: Code:

.link{ text-align:left; 
color:#000000; 
font-size:14.5pt; 
font-family:times new roman,serif; 
font-weight:normal; 
text-decoration:underline color:#09328a; }

What is the best practice for giving an <a> a different color than the underline? Background image? <a><span></span></a>? Something else?

Not sure if I'm missing something or if there's a hack for FF (and possibly other browsers), but on hover, text-decoration:underline doesn't seem to work in FF.

Here's the HTML:
Code:

<div class="prod_container">			
<div class="leftprods">
<div style="text-align:center; margin:auto;"><a href="#"><img src="images/prod_ta.gif" style="border:0;" alt="Time and Attendance" /><div class="prod_text">Time and Attendance</div></a></div><div>&nbsp;</div>
<div style="text-align:center; margin:auto;"><a href="#"><img src="images/prod_devkit.gif" style="border:0" alt="Development Kits" /><div class="prod_text">Development Kits</div></a></div>
</div>

<div class="rightprods">
<div style="text-align:center; margin:auto;"><a href="#"><img src="images/prod_access.gif" style="border:0" alt="Access Control" /><div class="prod_text">Access Control</div></a></div><div>&nbsp;</div>
<div style="text-align:center; margin:auto;"><a href="#"><img src="images/prod_finger.gif" style="border:0" alt="Fingerprint Readers" /><div class="prod_text">Fingerprint Readers</div></a></div>
</div>
</div>

Here's the CSS:
Code:

.leftprods { text-align:left; float:left; }
.leftprods a{ text-decoration:none; color:green; }

.rightprods { text-align:left; float:right; }
.rightprods a{ text-decoration:none; color:green; }

.prod_text { font-size:16px; color:green; font-weight:bold; padding-bottom:5px; }

.prod_container a:hover { text-decoration:underline; }

Thanks.