Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How to style text link to look identical to buttons 1

Status
Not open for further replies.
gus121

gus121

Technical User
May 9, 2002
298
GB
Hi i have the following code which is styleing a series of buttons. However i wish to change one of these to a text link so that search engines can more easily spider there way through i still however need it to look identical to the other buttons. Can anyone advise as to the best method or point me in the right direction to where i can find articles on this subject? thanks

I have attached the isolated code with both the button and a text link.
<--!style sheet-->
<style type="text/css">
<!--
* {
font-family : Verdana, Arial, Helvetica, Sans-Serif;
font-size : x-small;
}
div.topnavbar .submitShort {
background-color: #077244;
border-color : #E3F8E3 #31536C #31536C #C1E4BF;
cursor: pointer;
cursor: hand;
border-style : solid;
border-width : 1px;
color : #FFF;
padding : 1px;
font-weight : bold;
}
-->
</style>

<!-- main body-->
<body>
<div class="topnavbar">
<input class="submitShort" type="submit" Value="View All Products">
<br /> <br />
<div class="topnavbar"><a href="textbutton" class="submitShort">View All Products</a></div>

-Gus
 
Sort by date Sort by votes
Here's some food for thought.


These are the same default buttons rendered differently in different OSes and browsers. Which one would you like to immitate. You need to know that if you choose one, the buttons won't look right in the others. As a comment to your code. Get rid of cursor: hand; since you have already defined that with a cross-browser attribute cursor: pointer;
 
Upvote 0 Downvote
Hi Vragbond,

Thanks for your post certainly very enlightening. I did not relise just how different the rendering of the button object is in different browsers and in the way it interpertes style information.


While i would personaly like to render the text link to look like the firefox browsers rendering intereperation of the button. I will however have to go for IE6.0 as the majority of visitors visiting the site are still using this browser (and my boss uses it as well ;-) ) So if anyone can help me with that would be most appreciated.


On the use of "cursor: hand" i understood the IE5.0 - 4.0 do not support the "cursor: pointer" CSS syntax. Is this incorrect?

thanks

-Gus
 
Upvote 0 Downvote

While i would personaly like to render the text link to look like the firefox browsers rendering intereperation of the button. I will however have to go for IE6.0
Click to expand...

Well then you have the problem of operating system. A button in IE6 under Win XP would be totally different to a button in IE6 under Win 2000.

You really need to choose a definitive style before you can start styling elements.

That aside, are you really interested in supporting IE4? Use cursor:pointer always - forget older browsers.

Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

 
Upvote 0 Downvote
Hi Dan,

opps.. yes must go for XP over 2000. My stats show most people are using this OS and numbers will only grow.

thanks




-Gus
 
Upvote 0 Downvote

Then you have a problem. The rounded look of XP style buttons cannot be emulated easily in CSS (yet). Not many browsers support the corner-rounding properties, so really the only way would be to use images.

Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

 
Upvote 0 Downvote
Like you have already realized, IE6 XP default buttons change as soon as you start applying styling to them. Based on your code, this is the best I can do in IE6 on XP to get the two things look identical:
Code: 
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

<style type="text/css">
<!--
* {
    font-family : Verdana, Arial, Helvetica, Sans-Serif;
    font-size : x-small;
}
div.topnavbar .submitShort {
    background-color: #077244;
    border-color : #E3F8E3 #31536C #31536C #C1E4BF;
    cursor: pointer;
    border-style : solid;
    border-width : 1px;
    color : #FFF;
    padding : 1px;
    font-weight : bold;
}

div.topnavbar a.submitShort {
    text-decoration: none;
    text-align: center;
    padding: 2px 2.4em;
    line-height: 2em;
}
-->
</style>
<!-- main body-->
<body>
<div class="topnavbar">
<input class="submitShort" type="submit" Value="View All Products">
<br /> <br />
<div class="topnavbar"><a href="textbutton" class="submitShort">View All Products</a></div>
Bear in mind though that with different sizes, paddings would need adjusting.
 
Upvote 0 Downvote
Hi Vragabond,

Superb Job. A dead ringer. here is a star!

much thanks

-Gus
 
Upvote 0 Downvote
When done horizontally how do you get rid of the white space between them?
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

bdwilcox
  • Locked
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
756
bdwilcox
bdwilcox
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
1K
Chris Miller
Chris Miller
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
814
pmonett
pmonett
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim

Part and Inventory Search

Sponsor

Back
Top