CODEWITHSUNDEEP
htmltwitter-bootstrapwidthdoctype
JonB
JonB

Reputation: 127

Bootstrap doctype causing widths to be ignored

I am encountering a very odd problem with Twitter Bootstrap. I'm using a customised version of Bootstrap downloaded via the 'Customize' page in the Bootstrap website. I'm using a customised version, because I need to use 24 columns instead of 12 in order to give me the variety of column widths I need.

These are the custom values I entered into the Customization form on the Bootstrap website:

@gridColumns 24px
@gridColumnWidth 30px
@gridGutterWidth 10px

I left all the options checked, except for the Responsive checkboxes. The site I'm building will be fixed width only, so I switched off all five of the Responsive options.

After I downloaded the files, I created a very basic HTML page to test the grid system.

This is the HTML code:

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>

<body>

<header>
<div class="container">
    <div class="row">
        <div class="span9" style="background: #F00;">SPAN 9 COLUMN</div>
        <div class="span15" style="background: #0F0;">SPAN 15 COLUMN</div>
    </div>
</div>
</header>

<script src="http://code.jquery.com/jquery.js"></script> 
<script src="assets/js/bootstrap.min.js"></script>
</body>
</html>

The problem is that the browser appears to ignore the CSS widths set on the .row and .spanXX styles that are set in the bootstrap.min.css file. I have checked the CSS file, and the widths are definitely included:

Lines 42-90 of bootstrap.min.css

.container,.navbar-static-top .container,.navbar-fixed-top .container,.navbar-fixed-bottom .container{width:974;}
.span24{width:974;}
.span23{width:933;}
.span22{width:892;}
.span21{width:851;}
.span20{width:810;}
.span19{width:769;}
.span18{width:728;}
.span17{width:687;}
.span16{width:646;}
.span15{width:605;}
.span14{width:564;}
.span13{width:523;}
.span12{width:482;}
.span11{width:441;}
.span10{width:400;}
.span9{width:359;}
.span8{width:318;}
.span7{width:277;}
.span6{width:236;}
.span5{width:195;}
.span4{width:154;}
.span3{width:113;}
.span2{width:72;}
.span1{width:31;}
.offset24{margin-left:994;}
.offset23{margin-left:953;}
.offset22{margin-left:912;}
.offset21{margin-left:871;}
.offset20{margin-left:830;}
.offset19{margin-left:789;}
.offset18{margin-left:748;}
.offset17{margin-left:707;}
.offset16{margin-left:666;}
.offset15{margin-left:625;}
.offset14{margin-left:584;}
.offset13{margin-left:543;}
.offset12{margin-left:502;}
.offset11{margin-left:461;}
.offset10{margin-left:420;}
.offset9{margin-left:379;}
.offset8{margin-left:338;}
.offset7{margin-left:297;}
.offset6{margin-left:256;}
.offset5{margin-left:215;}
.offset4{margin-left:174;}
.offset3{margin-left:133;}
.offset2{margin-left:92;}
.offset1{margin-left:51;}

Through much trial and error, I discovered that if I completely remove the Doctype line from the top of the HTML file, the page displays correctly! This behaviour is consistent on Firefox (19.02) and IE 10.

When I inspect the rowXX and span DIV tags in Firebug, the CSS is indicated as empty when the DOCTYPE line is included in the HTML - see the attached screengrabs below.

Screengrab from Firefox with Doctype removed from the HTML: http://tinypic.com/r/24gp1er/6

Screengrab from Firefox with Doctype included in the HTML: http://tinypic.com/r/13ye05g/6

Thanks in advance for any suggestions to help resolve this problem.

Upvotes: 0

Views: 1437

Answers (1)

David Taiaroa
David Taiaroa

Reputation: 25485

There may be a problem with your CSS file. Firstly @gridColumns 24px should be @gridColumns 24 (ie, specify the number of columns, not a width.

Check the result and the page source of http://fiddle.jshell.net/panchroma/pegjC/show/ or the jsFiddle

You can grab my versions of the custom 24col css from https://dl.dropbox.com/u/2665617/bootstrap-24grid/css/bootstrap.css and https://dl.dropbox.com/u/2665617/bootstrap-24grid/css/bootstrap.min.css

Hope this helps!

Upvotes: 1

Related Questions