[SOLVED] HTML - CSS

killingthemonkey · 10-31-2016, 10:27 AM

OK, next simple HTML - CSS question.

I'm trying to make a simple checkerboard pattern using div, and CSS for positioning for color.

Here's the code:

Code:

<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="utf-8">
    <title>div test</title>
    <style>
        body {
            font-size: 0;
        }
        
        .box {
            width: 50px;
            height: 50px;
            display: inline-block;
            padding: 0;
            margin: 0;
            border: collapse;
            float: left;
            font-size: 12;
            column-width: 0;
            z-index: -1;
        }
        
        .blackSquare {
            background: black;
        }
        
        .whiteSquare {
            background: red;
        }
    </style>
</head>

<body>
    <div class="box blackSquare column1"></div>
    <div class="box whiteSquare column2"></div>
    <div class="box blackSquare column3"></div>
    <div class="box whiteSquare column4"></div>
    <div class="box blackSquare column5"></div>
    <div class="box whiteSquare column6"></div>
    <div class="box blackSquare column7"></div>
    <div class="box whiteSquare column8"></div>
</body>

</html>

See the attachment for what I get. (Whitespace between divs.)

You can see in my style that I've used all I can find for removing whitespace.

Please tell me what I am missing.

Thanks,
Doug

grail · 10-31-2016, 10:43 AM

Works just fine under Chromium ... I would therefore guess it is a Safari issue

szboardstretcher · 10-31-2016, 10:56 AM

Yeah. Looks good.

https://jsfiddle.net/t3undmwm/

killingthemonkey · 10-31-2016, 11:29 AM

Weird. Because I am looking at it in Chrome. It is, however, Chrome for OS X.

Quote:

Originally Posted by grail

Works just fine under Chromium ... I would therefore guess it is a Safari issue

killingthemonkey · 10-31-2016, 11:47 AM

OK. Really weird.

I just installed Chromium. Getting the exact same result.

grail · 10-31-2016, 12:19 PM

Ok ... silly question, how are you opening the file?

killingthemonkey · 10-31-2016, 12:52 PM

Open Chrome/Safari/Chromium.
Press COMMAND-O.
Navigate to the file.
Click the file.
Click button that says, "Open."

Quote:

Originally Posted by grail

Ok ... silly question, how are you opening the file?

killingthemonkey · 10-31-2016, 03:10 PM

Note: I'm getting the same thing on my Centos box in Firefox.

Edit: And in Chrome and IE on my Windows 7 VDI at work.

Yet, it works in jsfiddle.

keefaz · 10-31-2016, 05:44 PM

Did you try a minimal css properties set for .box? I mean

Code:

.box {
    width: 50px;
    height: 50px;
    padding: 0;
    margin: 0;
    float: left;
}

Not sure if border-collapse applies in a div, no need of column-width, nor z-index, (font-size?)

killingthemonkey · 10-31-2016, 07:21 PM

Truthfully, keefaz, that's where I started.

As I tried more and more solutions I found online, stuff accreted. Going back to that, leaves me in the same place.

Quote:

Originally Posted by keefaz

Did you try a minimal css properties set for .box? I mean

Code:

.box {
    width: 50px;
    height: 50px;
    padding: 0;
    margin: 0;
    float: left;
}

Not sure if border-collapse applies in a div, no need of column-width, nor z-index, (font-size?)

keefaz · 10-31-2016, 07:34 PM

Maybe it sounds silly but did you try removing newline chars between div's?
Like

Code:

<div class="box blackSquare column1"></div><div class="box whiteSquare column2"></div><div class="box blackSquare column3"></div>...

killingthemonkey · 10-31-2016, 09:20 PM

Just tried it. No luck.

Quote:

Originally Posted by keefaz

Maybe it sounds silly but did you try removing newline chars between div's?
Like

Code:

<div class="box blackSquare column1"></div><div class="box whiteSquare column2"></div><div class="box blackSquare column3"></div>...

killingthemonkey · 10-31-2016, 10:00 PM

OK. I started over. I got one row to work without an issue.
The second row, however, wants to position itself at the right side of the first.

Code:

<!--<!DOCTYPE html>-->
<html lang="en-US">

<head>
    <meta charset="utf-8">
    <title>div test</title>
    <style>
        body {
            background-color: #AAAAAA;
        }
        
        .box {
            width: 50px;
            height: 50px;
            padding: 0;
            margin: 0;
            float: left;
        }
        
        .blackSquare {
            background: black;
        }
        
        .whiteSquare {
            background: white;
        }
        
        .row2 {
        	position: relative;
        	top: 50px;
        }
    </style>
</head>

<body>
    <div class="box blackSquare"></div><div class="box whiteSquare"></div><div class="box blackSquare"></div><div class="box whiteSquare"></div><div class="box blackSquare"></div><div class="box whiteSquare"></div><div class="box blackSquare"></div><div class="box whiteSquare"></div>
    <div class="box blackSquare row2"></div><div class="box whiteSquare row2"></div><div class="box blackSquare row2"></div><div class="box whiteSquare row2"></div><div class="box blackSquare row2"></div><div class="box whiteSquare row2"></div><div class="box blackSquare row2"></div> <div class="box whiteSquare row2"></div>
</body>

</html>

See new attachment.

astrogeek · 10-31-2016, 11:35 PM

Quote:

Originally Posted by killingthemonkey

OK. I started over. I got one row to work without an issue.
The second row, however, wants to position itself at the right side of the first.

I think that your row2 style needs a little more thought. As shown, it simply offsets the top position but continues at the current horizontal position - just as your results show.

Also, if you are building a checkerboard you would need to then have a row3, row4, etc. style to follow that same model.

Try the code below and see what you get.

I have reordered the second row of divs for a checkerboard effect and replaced your row2 style with newrow which is only applied to the first box of trailing rows.

Code:

<!--<!DOCTYPE html>-->
<html lang="en-US">

<head>
    <meta charset="utf-8">
    <title>div test</title>
    <style>
        body {
            background-color: #AAAAAA;
        }

        .box {
            width: 50px;
            height: 50px;
            padding: 0;
            margin: 0;
            float: left;
        }

        .blackSquare {
            background: black;
        }

        .whiteSquare {
            background: white;
        }

        .newrow {
                clear: both;
        }
    </style>
</head>

<body>
    <div class="box blackSquare"></div><div class="box whiteSquare"></div><div class="box blackSquare"></div><div class="box whiteSquare"></div><div class="box blackSquare"></div><div class="box whiteSquare"></div><div class="box blackSquare"></div><div class="box whiteSquare"></div>
    <div class="box whiteSquare newrow"></div><div class="box blackSquare "></div><div class="box whiteSquare "></div><div class="box blackSquare "></div><div class="box whiteSquare "></div><div class="box blackSquare "></div> <div class="box whiteSquare "></div><div class="box blackSquare "></div>
</body>

</html>

grail · 10-31-2016, 11:53 PM

Ultimately the question has changed seeing as you solved your original problem, however, you have not advised what it was you changed that made the difference? Remember, others will find
your question and would like to know what changed without having to go through the code and miss the subtlety, especially when you have now changed the code to perform an additional task (like more rows)