CODEWITHSUNDEEP
htmlcssinternet-explorerfirefoxgoogle-chrome
James Mclaren
James Mclaren

Reputation: 684

Css not displaying correctly in Internet Explorer

Essentially, I intend to create a progress bar from top of the screen to the bottom. Split into three parts, top is one colour, the middle is another colour and the bottom is finally another colour.

Unfortunately, this code only works in FF and Chrome but displays incorrectly in IE (all versions). It currently only displays the top colour in IE.

Code:

html, body 
{ 
  height: 100%; 
  margin: 10px;overflow: hidden;
} 

#head
{
  height: 80px;
  background-color:black;
}

#content
{
  min-height: 100%; 
  height: 100%; 
  margin: 0 auto; /*Allow for footer height*/
  vertical-align:bottom;
}

#prgsBar
{
  margin: 0 auto -80px; /*Allow for footer height*/
  background-color:gray;
} 

#footer, #push
{
   height: 100px; /*Push must be same height as Footer */
}

HTML:

 <div id='content' style='background-color:red'>    
  <div id='head'>        
   <h5>Hello</h5>   
  </div>    
   <div id='prgsBar' style='height: 29%;'/></div>

Upvotes: 0

Views: 755

Answers (1)

bobek
bobek

Reputation: 8020

Your #prgsBar is a self closing tag and shouldn't be.

Change <div id='prgsBar' style='height: 29%;'/></div> to <div id='prgsBar' style='height: 29%;'></div>

Upvotes: 3

Related Questions