Need help containing text within divs in Chrome

Question

What i have looks splendid in firefox, but for some reason all of the text won't seem to stay contained within their respective div's in Chrome. Chrome seems to be assigning random height values to the ul and h1 elements, but for the life of me I can't seem to figure out why. EDIT: Okay, I am going crazy with rage. I mean it even works in explorer............ What is Chrome's (read "my") issue!?!?!?!?!?!

I deleted the screen shot, since i've made some changes. I've simply just uploaded it to the site musingsofamachiavellian.com you should be able to see the issue in all its glory there.

THANK YOU SO MUCH, the fix was as easy as adding html { height:100%;}

This is quite literally the first code i've ever written from scratch, so be gentle :|

CSS:

body {
    background-color: #a5e2a8; /*A light green*/
    min-width: 960px; 
}
#Foundation {
width:960px;
height:100%;
background-color: #3b3b3b; /*Milk White*/
background-color: rgba(59,59,59,0.9);
/* background-color: #212121; /*A light black*/
}

#Header {
    height:80px;
    width:940px;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 0px;
    background-color: #FEFCFF; /*Milk White*/
    background-color: rgba(254,252,255,0.9);
}


#TitleText{
    height:80px;
    width:940px;
    font-family: Cambria math;
    font-size: 48px;
    padding: 16px;
    color: #F70D1A;
    vertical-align: top;
}

#ButtonBar{
    height:32px;
    width:940px;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    margin-bottom: 0px;
    padding: 0px;
    background-color: #FEFCFF; /*Milk White*/
    background-color: rgba(254,252,255,0.9);
}

#ButtonBarUL{
    height:32px;
    width:940px;
    margin:0px;
    padding: 6px;
}


.Button {
    text-align: center;
    font-family: Cambria math;
    font-size: 16px;
    padding-top: 0px;
    padding-left: 0px;
    color: #F70D1A;
    display: inline-block;
    list-style-type: none;
    vertical-align: top;
}

#SidebarContainer {
    height:100%;
    width:160px;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 0px;
    background-color: #FEFCFF; /*Milk White*/
    background-color: rgba(254,252,255,0.9);
    float:left;
}
.SideBarContent {
    width:140px;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 0px;
    background-color: #FEFCFF; /*Milk White*/
    background-color: rgba(254,252,255,0.9);
    float:left;
    text-align: center;
    font-family: Cambria math;
    font-size: 12px;
    color: #212121;
}

#MainContainer {

    height:100%;
    width:770px;
    margin-right:10px;
    margin-top:10px;
    margin-bottom:10px;
    margin-left:0px;
    padding: 0px;
    background-color: #FEFCFF; /*Milk White*/
    background-color: rgba(254,252,255,0.9);
    float:left;
}

.ArticleContainer {

    height:100%;
    width:750px;
    margin: 10px;
    padding: 0px;
    background-color: #FEFCFF; /*Milk White*/
    background-color: rgba(254,252,255,0.9);
    float:left;
}

.ArticleHead {

    height:100%;
    width:750px;
    margin: 10px;
    padding: 0px;
    background-color: #FEFCFF; /*Milk White*/
    background-color: rgba(254,252,255,0.9);
    float:left;
    border-bottom:1px solid;
    font-family: Cambria math;
    font-size: 14px;
    color: #F60D1B;
}

.ArticleContent {

    height:100%;
    width:750px;
    margin: 10px;
    padding: 0px;
    background-color: #FEFCFF; /*Milk White*/
    background-color: rgba(254,252,255,0.9);
    float:left;
    font-family: Cambria math;
    font-size: 12px;
    color: #212121;
}

#Footer {
    height:32px;
    width:940px;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 0px;
    background-color: #FEFCFF; /*Milk White*/
    background-color: rgba(254,252,255,0.9);
    float:left;
    font-family: Cambria math;
    font-size: 12px;
    color: #212121;
    clear: both;
    list-style-type: none;
    text-align: center;
}

ul, li {
    list-style-type: none;
}

site:

<!DOCTYPE html>
<head>
<link rel='stylesheet' type='text/css' href='core.css' />
<script type='text/javascript' src='script.js'></script>
<title>Musings</title>
</head>
<body>
<div id='Foundation'>
    <header id='Header'>
        <h1 id='TitleText'>Musings of a Machiavellian</h1>
    </header>
    <div id='ButtonBar'>
        <ul id='ButtonBarUL'>
            <li class='Button'>About |</li>
            <li class='Button'>Past |</li>
            <li class='Button'>Future |</li>
            <li class='Button'>FAQ |</li>
        </ul>
    </div>
    <section id='SidebarContainer'>
        <div class='SideBarContent'>
        <p>Chronicles</p>
        </div>
    </section>
    <section id='MainContainer'>
        <div class='ArticleContainer'>
            <div class='ArticleHead'>
                <h1>Hey! Thanks for stopping by. We're currently under construction...</h1>
            </div>
            <article class='ArticleContent'>
                <p>This will be blog 2.0 - A webspace for own personal experimentation, and to chronicle (err.... blog) some musings.</p>
                <p>They'll range in topic from politics, to science, to strategy, to economics. Stay tuned, or simply send me a message.</p>
                <p>I'm by no means a web-development expert. If you see something that should be improved, I more than welcome your suggestions. Feel free to shoot me an e-mail!</p>
            </article>
        </div>
                <div class='ArticleContainer'>
            <div class='ArticleHead'>
                <h1>I hate chrome...</h1>
            </div>
            <article class='ArticleContent'>
                <p>If you're viewing this page in Chrome, chances are it looks jumbled. The reason, no clue... but the search for an answer is quickly turning intot he bane of of my existance.</p>
                <p>Frustration level.... over 9000! I mean, it even works in internet exploder...</p>
            </article>
        </div>
    </section>
    <footer id='Footer'>
        <ul id='ContactInfo'>
            <li>info'at'Musings...</li>
        </ul>   
    </footer>
</div>
</body>
</html>

Chrome has excellent developer tools. You can use it to check out the box-models, computed properties, etc. on your live page to help debug. https://developers.google.com/chrome-developer-tools/ — kunalbhat, Aug 22 '13 at 02:19
Not sure if this will fix it, but you should add ` ` at the top of your file. — bfavaretto, Aug 22 '13 at 03:08
Hmm !DOCTYPE breaks the left column... I thought I read somewhere it was depreciated in HTML 5. — FLAV10, Aug 22 '13 at 03:15
It's not deprecated, it's actually mandatory. See http://stackoverflow.com/questions/12870294/doctype-html-versus-html-rendering-problems-firefox-and-chrome — bfavaretto, Aug 22 '13 at 03:22
Try reloading without cache Ctrl+R. I looks great on chrome for me — derek_duncan, Aug 22 '13 at 16:56
It looks okay in Chrome for me after you added the doctype, see http://jsbin.com/ocIcEJU/1. — bfavaretto, Aug 22 '13 at 17:28

score 0 · Answer 1 · edited Aug 23 '13 at 14:31

0

I believe this is because the div Foundation needs to match its css. Foundation and foundation. One is capitalized and one is not.

edited Aug 23 '13 at 14:31

Nathan Hughes

94,330
19
181
276

answered Aug 22 '13 at 02:12

jeppy7

134
1
11

Sorry were you able to fix the problem yet? – jeppy7 Aug 22 '13 at 07:40
No :( I've done everything everyone said, but the problem still persists! – FLAV10 Aug 22 '13 at 08:59

score 0 · Answer 2 · answered Aug 22 '13 at 17:04

0

I see two things: 1. The Cambria math font is causing problems. 2. You should add this css: html { height: 100% }

answered Aug 22 '13 at 17:04

fred02138

3,323
1
14
17

IT WAS THAT EASY!!! Thank you so much!!! Why did height: 100% fix it? care to explain the cause? Am i doing something backwards that caused this nuance in Chrome? I added Helvetica (shiver*) as a backup font. After at least 12 hours of looking for possible browser incompatibilities, it was as easy as this. I'm so relieved and so dumbfounded at the same time! – FLAV10 Aug 22 '13 at 17:54
Wow, thank you for the explanation! That really helped. A quick follow up question if you have time. So clearly Chromes issue is the Cambria math font, but i really like the way it looks in firefox/explorer. Is there a way to set the font specifically for those using chrome? maybe some sort of js that does an if browser check true? set font else rock some cambria math? – FLAV10 Aug 22 '13 at 18:25

score 0 · Accepted Answer · answered Aug 22 '13 at 17:17

0

I did alot of tuning up. Take a look here http://codepen.io/anon/pen/Ezham

Noticeable I used %'s instead of pixels and added correct positioning.

answered Aug 22 '13 at 17:17

derek_duncan

1,377
1
13
22

Thanks for taking the time to help! – FLAV10 Aug 22 '13 at 17:56

Need help containing text within divs in Chrome

3 Answers3