The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Hyperlink pretending to be a button

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #35196

    I use this css to style a hyperlink to look like a button (to avoid IE’s annoying habit of putting the focus on the first button on a page when you move the focus to a control.

    border-top:1px solid #999999;
    border-left:1px solid #999999;
    border-bottom:1px solid #CCCCCC;
    border-right:1px solid #CCCCCC;
    padding:4px 16px 4px 16px;

    If I view this on my development machine, the pretend button looks fine – a rectangle with gray borders and a graduated fill graphic inside. If I publish the site to a server and then look at it – from the same machine using the same browser, the top and bottom borders disappear.

    Any ideas much appreciated – I can’t think what else I can change add to make it look the same when viewed on the server as it does on my development box.

    Sorry, have to pad this out to g


    A link?

    Is the pretend class on an <a> tag? I would probably display:block; and give it the set width and height.


    Thanks for your reply. Yes it is on a <a> tag. I’ll try display:block – hoping to avoid set width as each button’s width needs to vary according to the text and it’s a site which, by the time I finish, will have hundreds of pretend buttons.

    To whoever runs this site. Any chance of losing the CSS-Tricks graphic stuck to the left of the page on top of important things like the Post Comment button. It is very annoying.


    Mind taking a screenshot of what graphic you are referring to?

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.