CSS missing from website

Question

So I'm using bootstrap and HTMl boilerplate to start up a site. I'm having an issue over writing the brand class from bootstrap. In main.css I added a .navbar .brand class and I'm attempting to change float to top. When I load my web page in the browser my .navbar .brand in main.css is blank (according to firebug). I can edit bootstraps float value to top while using firebug, but I can't seem to override using my own style sheet.

    <link rel="stylesheet" href="css/bootstrap-responsive.min.css">
    <link rel="stylesheet" href="css/main.css">        
    .
    .
    .
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                <a class="brand" href="">Alex</a>

in bootstrap.css

.navbar .brand {
  display: block;
  float: left;
  padding: 17px 20px 17px;
  margin-left: -20px;
  font-size: 20px;
  font-weight: 200;
  color: #ffffff;
  text-shadow: 0 1px 0 #013435;
}

in main.css

.navbar .brand {
  float: top;
}

and then in firebug when I look at the element

.navbar .brand {        main.css (line 27)
}

score 1 · Accepted Answer · edited Apr 07 '13 at 10:22

1

The problem is float:top is not a valid rule. So the browser recognises the selector but not the rule you have applied.

These are the possible values for float:

float: left
float: right
float: none
float: inherit

Useful article: https://developer.mozilla.org/en-US/docs/CSS/float

edited Apr 07 '13 at 10:22

pzin

4,200
2
28
49

answered Apr 07 '13 at 09:28

tw16

29,215
7
63
64

Bah, that's annoying. I tried the value in firebug first and it seemed to move my text vertically. Thanks for the answer. – AlexLordThorsen Apr 07 '13 at 09:31
In Firebug you might have unset the float. Try using `float: none;`. – Andrey Mikhaylov - lolmaus Apr 08 '13 at 09:37

score 1 · Answer 2 · edited May 23 '17 at 12:21

1

float can't be top. Floats are only used to align items horizontally.

Maybe the position:relative + position:absolute technique will do for you: Position absolute but relative to parent

edited May 23 '17 at 12:21

Community

1
1

answered Apr 07 '13 at 09:30

Andrey Mikhaylov - lolmaus

23,107
6
84
133

CSS missing from website

2 Answers2