Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Style Sheet breakage !

  1. #1
    Join Date
    Aug 2011
    Location
    Rep Of Ireland
    Posts
    126
    Thanks
    24
    Thanked 3 Times in 1 Post

    Arrow Style Sheet breakage !

    I have the following button <div> within a footer <div> :
    Code:
    <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:-

    Code:
    <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 ?

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,957
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

    It could be a number of things.

    1. The path here:

      Code:
      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.

    2. If you left the:

      Code:
      <style type="text/css">	   
      
      </style>
      tags in the external file, they might break it.

    3. 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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Aug 2011
    Location
    Rep Of Ireland
    Posts
    126
    Thanks
    24
    Thanked 3 Times in 1 Post

    Default

    Thanks, page link at:

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

    Button in bottom right hand corner of page.

  4. #4
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    346
    Thanks
    5
    Thanked 33 Times in 31 Posts

    Default

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

  5. #5
    Join Date
    Aug 2011
    Location
    Rep Of Ireland
    Posts
    126
    Thanks
    24
    Thanked 3 Times in 1 Post

    Default

    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!

  6. #6
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    346
    Thanks
    5
    Thanked 33 Times in 31 Posts

    Default

    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:
    Code:
    <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>

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,957
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by Webiter View Post
    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:

    Code:
    <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:

    Code:
    #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:

    Code:
           <link rel="stylesheet" href="css/button.css" type="text/css" media="screen" />
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Webiter (08-13-2011)

  9. #8
    Join Date
    Aug 2011
    Location
    Rep Of Ireland
    Posts
    126
    Thanks
    24
    Thanked 3 Times in 1 Post

    Default

    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

  10. #9
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    346
    Thanks
    5
    Thanked 33 Times in 31 Posts

    Default

    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

  11. #10
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,162
    Thanks
    263
    Thanked 690 Times in 678 Posts

    Default

    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.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •