1

I have been spending the morning recreating the windows 8 tiles and somehow I got it to work using only CCS2. So far it works in the newer versions of Chrome, IE, ad Firefox but it works on browser zoom levels 100% and 25%.

I really don't want to start over again so is there anyway I can fix this?

HTML

<div id="tile-wrap">
  <div class="wide x3-long red fR"></div>
  <div class="x2-wide long orange fR"></div>
  <div class="wide long yellow fR"></div>
  <div class="wide long green fR"></div>
  <div class="wide long blue fR"></div>
  <div class="x3-wide long purple fR"></div>
  <div class="x5-wide long gray fR"></div>
  <div class="x4-wide x2-long black fR"></div>
  <div class="wide x2-long white fR"></div>
  <div class="x6-wide long yellow fR"></div>
</div>

CSS

.fL {
    float:left;
}

.fR {
    float:right;
}

.fCL {
    clear:left;
}

.fCR {
    clear:right;
}

.fC {
    clear:both;
}

.iB {
    display:inline-block;
}

div {
/* prevent content from spilling out of tiles */  
    overflow:hidden;
    word-wrap:break-word;
}

/*** sizes ***/

.wide { width:150px; }

.x-wide { width:250px; }

.x2-wide { width:327px; }

.x3-wide { width:504px; }

.x4-wide { width:680px; }

.x5-wide { width:680px; }

.x6-wide { width: 855px; }

.long { height:150px; }

.x-long { height:250px; }

.x2-long { height:327px; }

.x3-long { height:502px; }

.x4-long { height:650px; }

.x5-long { height:650px; }

.wide, .x-wide, .x2-wide, .x3-wide, .x4-wide, .x5-wide, .x6-wide {
    margin-left:10px;
    margin-right:10px;
}

.long, .x-long, .x2-long, .x3-long, .x4-long, .x5-long {
    margin-top:10px;
    margin-bottom:10px;
}

/*** color ***/

.red {
    background-color:#AE1F23;
    border:3px solid #AE1F23;
}

.orange {
    background-color:#CD4900;
    border:3px solid #CD4900;
}

.yellow {
    background-color:#FFC40D;
    border:3px solid #FFC40D;
}

.green {
    background-color:#01A31C;
    border:3px solid #01A31C;
}

.blue {
    background-color:#0072BC;
    border:3px solid #0072BC;
}

.purple {
    background-color:#4F1ACB;
    border:3px solid #4F1ACB;
}

.gray {
    background-color:#555;
    border:3px solid #555;
}

.black {
    background-color:#000000;
    border:3px solid #000000;
}

.white {
    background-color:#FFFFFF;
    border:3px solid #FFFFFF;
}

.red:hover, .red:focus, 
.orange:hover, .orange:focus,
.yellow:hover, .yellow:focus,
.green:hover, .green:focus,
.blue:hover, .blue:focus,
.purple:hover, .purple:focus,
.gray:hover, .gray:focus,
.black:hover, .black:focus {
    border:3px solid #FFFFFF;
}

.white:hover, .white:focus {
    border:3px solid #555;
}
user1465298
  • 106
  • 1
  • 7

2 Answers2

0

One thing you could try (though I've not been able to test it extensively yet) is to add 

* {
       -webkit-box-sizing: border-box;
       -moz-box-sizing:    border-box;
       box-sizing:         border-box;
    }

to your stylesheet in order to change it to the IE box model (meaning the width includes the padding and border, instead of them being added to the width after the fact).

I tried it on yours (in Firebug) and then updated the width and height values of the boxes to add 6 (3 border on each side) and it at least works in Firefox on zooming.

Again I haven't been able to test it on other browsers, but it is a fairly easy change that you could test and see if it'll do.

For more info on the box model change, I'd recommend reading up on it here. You could also just add it to those elements, if you don't want to deal with it on every element on the page as well.

EDIT (because it didn't work)

It looks like another question hit on this same subject and seems to have found the solution. Check it out here. I had hoped there would be another way around it, but it looks like in the end you'll need to tweak the set pixel widths/heights to either be numbers that can be zoomed in and out without breaking pixels, or you'll need to switch to more fluid measurements, like percentages.

Community
  • 1
  • 1
gotohales
  • 3,665
  • 1
  • 20
  • 34
  • I added your code and add 6 to all the sizes and indeed it does work in Firefox but it still screws up in Chrome and IE. Any idea why? Oh, and thanks for solving 1/3 of the solution. This is really frustrating because I want to do this on my own instead of using someone else's template or jQuery plugin. – user1465298 Nov 26 '12 at 17:23
  • @user1465298 Well shoot. Alright I edited the answer to provide what should work then. Sorry about that. Naturally it only worked on the one browser I could test it on =/ – gotohales Nov 26 '12 at 18:40
0

Ok, so I figured it out. I was using float right on every tile but when I switched to alternating between float left and float right it works on every zoom level on all 3 major browsers and with the right math I can make some pretty complicated layouts. Getting it to work with IE was a such a bitch though. The sizes were completely different so I had to create an extra CSS sheet to override the widths and heights.

The best part of this is that it's all CSS2! I tried messing with the flex-box of CSS3 but it was overly complicated and didn't work at all in IE.

If anyone wants to use my CSS here it is:

* {

    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

.fL {
    float:left;
}

.fR {
    float:right;
}

.fCL {
    clear:left;
}

.fCR {
    clear:right;
}

.fC {
    clear:both;
}

.iB {
    display:inline-block;
}

div {
/* prevent content from spilling out of tiles */  
    overflow:hidden;
    word-wrap:break-word;
}

/*** size selectors ***/
.wide { width:156px; }

.x-wide { width:300px; }

.x2-wide { width:332px; }

.x3-wide { width:475px; }

.x4-wide { width:684px; }

.x5-wide { width:827px; }

.x6-wide { width: 1003px; }

.long { height:156px; }

.x-long { height:300px; }

.x2-long { height:332px; }

.x3-long { height:475px; }

.x4-long { height:684px; }

.x5-long { height:827px; }

.x6-long { height: 1003px; }

.wide, .x-wide, .x2-wide, .x3-wide, .x4-wide, .x5-wide, .x6-wide {
    margin-left:10px;
    margin-right:10px;
}

.long, .x-long, .x2-long, .x3-long, .x4-long, .x5-long, .x6-long {
    margin-top:10px;
    margin-bottom:10px;
}


/*** colors ***/

.red {
    background-color:#AE1F23;
    border:3px solid #AE1F23;
}

.orange {
    background-color:#CD4900;
    border:3px solid #CD4900;
}

.yellow {
    background-color:#FFC40D;
    border:3px solid #FFC40D;
}

.green {
    background-color:#01A31C;
    border:3px solid #01A31C;
}

.blue {
    background-color:#0072BC;
    border:3px solid #0072BC;
}

.purple {
    background-color:#4F1ACB;
    border:3px solid #4F1ACB;
}

.gray {
    background-color:#555;
    border:3px solid #555;
}

.black {
    background-color:#000000;
    border:3px solid #000000;
}

.white {
    background-color:#FFFFFF;
    border:3px solid #FFFFFF;
}

.red:hover, .red:focus, 
.orange:hover, .orange:focus,
.yellow:hover, .yellow:focus,
.green:hover, .green:focus,
.blue:hover, .blue:focus,
.purple:hover, .purple:focus,
.gray:hover, .gray:focus,
.black:hover, .black:focus {
    border:3px solid #FFFFFF;
}

.white:hover, .white:focus {
    border:3px solid #555;
}

Then the IE overriden CSS:

.wide { width:156px; }

.x-wide { width:300px; }

.x2-wide { width:308px; }

.x3-wide { width:452px; }

.x4-wide { width:634px; }

.x5-wide { width:816px; }

.x6-wide { width: 1003px; }

.long { height:156px; }

.x-long { height:300px; }

.x2-long { height:336px; }

.x3-long { height:517px; }

.x4-long { height:701px; }

.x5-long { height:883px; }

.x6-long { height: 1036px; }

This is the HTML: (make sure #tile-wrap has a set width and is centered because this html is actually nested within a masterpage with other css)

Also, make sure to add in the extra IE sheet.

  <link href="css/tiles.css" rel="stylesheet" type="text/css" />
  <!--[if IE]>
    <link rel="stylesheet" type="text/css" href="css/tiles-IE.css" />
  <![endif]-->


    <div id="tile-wrap">
      <div class="wide x2-long red fL"></div>
      <div class="wide x2-long orange fR"></div>
      <div class="x3-wide long yellow fL"></div>
      <div class="wide long green fR"></div>
      <div class="x-wide long blue fL"></div>
      <div class="x2-wide long purple fR"></div>
      <div class="wide long gray fL"></div>
      <div class="x2-wide long black fR"></div>
      <div class="x3-wide long white fL"></div>
      <div class="x6-wide long yellow fR"></div>
    </div>

Here is what the current HTML + CSS yields:

As you can see, any combination that adds up to 6 works as long as there are at least 3 spaces because I didn't account for the padding.

I know there are better ways to do this but I just figured I'd post it anyway. Thanks for the help mook.

user1465298
  • 106
  • 1
  • 7