Style Sheet breakage !

[Webiter]

I have the following button <div> within a footer <div> :


<div id="footerRight">
<div id="button"><a href="http://www.domain.net ></a></div>
</div>


The styling in the head of the document is as follows:-


<style type="text/css">
#button {list-style:none;}
#button a{background-image:url(images/button.jpg);width:230px;height:19px;display:block;color:transparent;}
#button a:hover{background-position:left bottom;}
</style>

When I move this styling to a external style sheet it then refuses to work!

What is causing the break ?:o

[jscheuer1]

It could be a number of things.


The path here:


background-image:url(images/button.jpg)

is now relative to the stylesheet, not to the page. If the stylesheet is in another folder, the image won't show up.


If you left the:


<style type="text/css">

</style>

tags in the external file, they might break it.


If your link tag to the external stylesheet is wrong in some way, that could break it.


There might be other problems. If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

[Webiter]

Thanks, page link at:

http://www.bcf.webitry.net/about.html

Button in bottom right hand corner of page.

[Deadweight]

Are you wanting the button to be in a different place?

[Webiter]

The position is fine. I just want to move the css from the head of the document to an external style sheet. Currently when I move it to the external style sheet it disappears!

[Deadweight]

Ok i have 2 questions for you:
1) Are you viewing your website in mostly all the browsers? In chrome the button that reads "Design and Built at the www.webitry.net" is off the bottom a little.
2) Are you wanting to place this code in a external style sheet:

<style type="text/css">

#button {list-style:none;} /*free-web-buttons.com*/

#button a{background-image:url(images/button.jpg);width:230px;height:19px;display:block;color:transparent;}

#button a:hover{background-position:left bottom;}

</style>

[jscheuer1]

Thanks, page link at:

http://www.bcf.webitry.net/about.html

Button in bottom right hand corner of page.

OK, what you have on the page that works is:


<style type="text/css">
#button {list-style:none;} /*free-web-buttons.com*/
#button a{background-image:url(images/button.jpg);width:230px;height:19px;display:block;color:transparent;}
#button a:hover{background-position:left bottom;}
</style>

That means that you can save:


#button {list-style:none;} /*free-web-buttons.com*/
#button a{background-image:url(http://www.bcf.webitry.net/images/button.jpg);width:230px;height:19px;display:block;color:transparent;}
#button a:hover{background-position:left bottom;}

to a file, call it button.css and put it in the css folder.

On the page call it with:


<link rel="stylesheet" href="css/button.css" type="text/css" media="screen" />

[Webiter]

Responding to your questions:

1) I do need to test in all browser's as you suggest! Is there an online tool that facilitates with such testing? Thanks for advising on your finding.

2) Now resolved.

The Webiter

[Deadweight]

Uhh you can download the browsers for free and just check them that way. In other browsers that button is, lets just say, not in the same spot =P

[djr33]

You can use browsershots.org for a limited number of screenshots from many browsers. It's very useful if you don't need to test many versions of the same page.

[Webiter]

Thanks for the tip.