3 replies [Last post]
reisve
reisve's picture
Offline
newbie
Luanda,Angola
Last seen: 4 years 37 weeks ago
Luanda,Angola
Timezone: GMT+1
Joined: 2014-12-25
Posts: 3
Points: 4

Hi, I'm new in the fórum

Just discovered the flexbox and found na exemple that is perfect for a site I'm building. The problema is that the layout works fine in Chrome, but is a disaster in IE 10. This is the layout code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
 
  body {
   font: 14px Helvetica;
   color: #ff0000;
   background: #ffffff;
  }
 
  #main {
/*   min-height: 800px; */
   margin: 0px;
   padding: 0px;
   display: -webkit-flex;
   display:         flex;
   -webkit-flex-flow: row;
           flex-flow: row;
   }
 
  #main .maincontent {
   margin: 4px;
   padding: 5px;
   border: 1px solid #cccccc;
   min-height: 50px;
   border-radius: 3pt;
   background: #ffffff;
   -webkit-flex: 3 1 50%;
           flex: 3 1 50%;
           width: 50%;
   -webkit-order: 2;
           order: 2;
   }
 
  #main .leftside {
   margin: 4px;
   padding: 5px;
   min-height: 50px;
   border: 1px solid #cccccc;
   border-radius: 3pt;
   background: #ffffff;
   -webkit-flex: 1 6 25%;
           flex: 1 6 25%;
           width: 25%;
   -webkit-order: 1;
           order: 1;
}
 
  #main .rightside {
   margin: 4px;
   padding: 5px;
   min-height: 50px;
   border: 1px solid #cccccc;
   border-radius: 3pt;
   background: #ffffff;
   -webkit-flex: 1 6 25%;
           flex: 1 6 25%;
           width: 25%;
   -webkit-order: 3;
           order: 3;
 }
 
  .header{
   display: block;
   margin: 4px;
   padding: 5px;
   min-height: 100px;
   border: 1px solid #cccccc;
   border-radius: 3pt;
   background: #ffffff;
   }
 
  .topnav {
   display: block;
   margin: 4px;
   padding: 5px;
   min-height: 50px;
   border: 1px solid #cccccc;
   border-radius: 3pt;
   background: #ffffff;
   }
 
  .footer {
   display: block;
   margin: 4px;
   padding: 5px;
   min-height: 50px;
   border: 1px solid #cccccc;
   border-radius: 3pt;
   background: #ffffff;
   }
 
  /* Too narrow to support three columns */
  @media all and (max-width: 640px) {
 
   #main, #page {
    -webkit-flex-flow: column;
            flex-flow: column;
            flex-direction: column;
   }
 
   #main > article, #main > nav, #main > aside {
    /* Return them to document order */
    -webkit-order: 0;
            order: 0;
   }
 
   #main > nav, #main > aside, header, footer {
    min-height: 50px;
    max-height: 50px;
   }
  }
 
 </style>
  </head>
  <body>
 <div class = "header">Header</div>
 <div class = "topnav">Top Navigation</div>
 <div id = "main">
    <div class = "maincontent">Main Content</div>
    <div class = "leftside">Left Side Content</div>
    <div class = "rightside">Right Side Content</div>
 </div>
 <div class = "footer">Footer</div>
  </body>
</html>

Can someone help me with that problem?

Thank You

reisve
reisve's picture
Offline
newbie
Luanda,Angola
Last seen: 4 years 37 weeks ago
Luanda,Angola
Timezone: GMT+1
Joined: 2014-12-25
Posts: 3
Points: 4

Code was Wrong, but still not working

The Code was wrong, but still not working. Here it is corrected code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
 
  body {
   font: 14px Helvetica;
   color: #ff0000;
   background: #ffffff;
  }
 
  #main {
/*   min-height: 800px; */
   margin: 0px;
   padding: 0px;
   display: -webkit-flex;
   display:         flex;
   -webkit-flex-flow: row;
           flex-flow: row;
   }
 
  #main .maincontent {
   margin: 4px;
   padding: 5px;
   border: 1px solid #cccccc;
   min-height: 50px;
   border-radius: 3pt;
   background: #ffffff;
   -webkit-flex: 3 1 50%;
           flex: 3 1 50%;
           width: 50%;
   -webkit-order: 2;
           order: 2;
   }
 
  #main .leftside {
   margin: 4px;
   padding: 5px;
   min-height: 50px;
   border: 1px solid #cccccc;
   border-radius: 3pt;
   background: #ffffff;
   -webkit-flex: 1 6 25%;
           flex: 1 6 25%;
           width: 25%;
   -webkit-order: 1;
           order: 1;
}
 
  #main .rightside {
   margin: 4px;
   padding: 5px;
   min-height: 50px;
   border: 1px solid #cccccc;
   border-radius: 3pt;
   background: #ffffff;
   -webkit-flex: 1 6 25%;
           flex: 1 6 25%;
           width: 25%;
   -webkit-order: 3;
           order: 3;
 }
 
  .header{
   display: block;
   margin: 4px;
   padding: 5px;
   min-height: 100px;
   border: 1px solid #cccccc;
   border-radius: 3pt;
   background: #ffffff;
   }
 
  .topnav {
   display: block;
   margin: 4px;
   padding: 5px;
   min-height: 50px;
   border: 1px solid #cccccc;
   border-radius: 3pt;
   background: #ffffff;
   }
 
  .footer {
   display: block;
   margin: 4px;
   padding: 5px;
   min-height: 50px;
   border: 1px solid #cccccc;
   border-radius: 3pt;
   background: #ffffff;
   }
 
  /* Too narrow to support three columns */
  @media all and (max-width: 640px) {
 
   #main {
    -webkit-flex-flow: column;
            flex-flow: column;
            flex-direction: column;
   }
 
   #main .maincontent, .leftside, #main .rightside {
    /* Return them to document order */
    -webkit-order: 0;
            order: 0;
   }
 
   #main .leftside, .rightside, .header, .footer {
    min-height: 50px;
    max-height: 50px;
   }
  }
 
 </style>
  </head>
  <body>
 <div class = "header">Header</div>
 <div class = "topnav">Top Navigation</div>
 <div id = "main">
    <div class = "leftside">Left Side Content</div>
    <div class = "maincontent">Main Content</div>
    <div class = "rightside">Right Side Content</div>
 </div>
 <div class = "footer">Footer</div>
  </body>
</html>

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 hours 53 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9742
Points: 3821

Which IE?

IE <v.11 supports an incompatible, draft version of flex-box. V.11 supports the adopted specification.

Does that info help?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

reisve
reisve's picture
Offline
newbie
Luanda,Angola
Last seen: 4 years 37 weeks ago
Luanda,Angola
Timezone: GMT+1
Joined: 2014-12-25
Posts: 3
Points: 4

Thank You What shall I do to

Thank You

What shall I do to CSS and HTML, to have it working?