CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
swollavg
swollavg

Reputation: 921

CSS- Internal style sheet works. External doesn't. Weird Behavior

I am new to Bootstrap and ran into a strange problem. I am trying to include a cool hover effect for a facebook png image.

Everything works fine when I put the CSS in the as an internal style rule. It won't work when I put it in an external style sheet.

All the paths are working because I have been successfully overriding the default bootstrap CSS rules.

With an external style sheet the image link is there but the image does not display. Kind of hard to explain. Not sure what to do?

http://jsbin.com/UFoRIYex/394/edit?html,css

Here is a link to the website where I got the html/css from. http://bradsknutson.com/blog/css3-ro...l-media-icons/ Like I said. Everything works internally. Just not externally....

Upvotes: 0

Views: 220

Answers (2)

swollavg
swollavg

Reputation: 921

Problem solved. I changed the path to ../img/facebook-hover.png and it worked.Thanks!

Upvotes: -1

Talk nerdy to me
Talk nerdy to me

Reputation: 1085

Try the bootstrap cdn (code copied direct from Bootstrap).

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Upvotes: 0

Related Questions