Programming This forum is for all programming questions.
The question does not have to be directly related to Linux and any language is fair game.
Notices
Welcome to
LinuxQuestions.org , a friendly and active Linux Community.
You are currently viewing LQ as a guest. By joining our community you will have the ability to post topics, receive our newsletter, use the advanced search, subscribe to threads and access many other special features. Registration is quick, simple and absolutely free.
Join our community today!
Note that registered members see fewer ads, and ContentLink is completely disabled once you log in.
Are you new to LinuxQuestions.org? Visit the following links:
Site Howto |
Site FAQ |
Sitemap |
Register Now
If you have any problems with the registration process or your account login, please
contact us . If you need to reset your password,
click here .
Having a problem logging in? Please visit this page to clear all LQ-related cookies.
Get a
virtual cloud desktop with the Linux distro that you want in less than five minutes with Shells! With over 10 pre-installed distros to choose from, the worry-free installation life is here! Whether you are a digital nomad or just looking for flexibility, Shells can put your Linux machine on the device that you want to use.
Exclusive for LQ members, get up to 45% off per month.
Click here for more info.
10-31-2016, 10:27 AM
#1
Member
Registered: Mar 2011
Location: Winston-Salem, NC
Distribution: Fedora, CentOS, Linux Mint
Posts: 259
Rep:
HTML - CSS - Removing Whitespace
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
10-31-2016, 10:43 AM
#2
LQ Guru
Registered: Sep 2009
Location: Perth
Distribution: Manjaro
Posts: 10,008
Works just fine under Chromium ... I would therefore guess it is a Safari issue
10-31-2016, 10:56 AM
#3
Senior Member
Registered: Aug 2006
Location: Detroit, MI
Distribution: GNU/Linux systemd
Posts: 4,278
10-31-2016, 11:29 AM
#4
Member
Registered: Mar 2011
Location: Winston-Salem, NC
Distribution: Fedora, CentOS, Linux Mint
Posts: 259
Original Poster
Rep:
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
10-31-2016, 11:47 AM
#5
Member
Registered: Mar 2011
Location: Winston-Salem, NC
Distribution: Fedora, CentOS, Linux Mint
Posts: 259
Original Poster
Rep:
OK. Really weird.
I just installed Chromium. Getting the exact same result.
10-31-2016, 12:19 PM
#6
LQ Guru
Registered: Sep 2009
Location: Perth
Distribution: Manjaro
Posts: 10,008
Ok ... silly question, how are you opening the file?
10-31-2016, 12:52 PM
#7
Member
Registered: Mar 2011
Location: Winston-Salem, NC
Distribution: Fedora, CentOS, Linux Mint
Posts: 259
Original Poster
Rep:
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?
10-31-2016, 03:10 PM
#8
Member
Registered: Mar 2011
Location: Winston-Salem, NC
Distribution: Fedora, CentOS, Linux Mint
Posts: 259
Original Poster
Rep:
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.
Last edited by killingthemonkey; 10-31-2016 at 05:36 PM .
10-31-2016, 05:44 PM
#9
LQ Guru
Registered: Mar 2004
Distribution: Slackware
Posts: 6,552
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?)
10-31-2016, 07:21 PM
#10
Member
Registered: Mar 2011
Location: Winston-Salem, NC
Distribution: Fedora, CentOS, Linux Mint
Posts: 259
Original Poster
Rep:
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?)
10-31-2016, 07:34 PM
#11
LQ Guru
Registered: Mar 2004
Distribution: Slackware
Posts: 6,552
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>...
Last edited by keefaz; 10-31-2016 at 07:37 PM .
10-31-2016, 09:20 PM
#12
Member
Registered: Mar 2011
Location: Winston-Salem, NC
Distribution: Fedora, CentOS, Linux Mint
Posts: 259
Original Poster
Rep:
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>...
10-31-2016, 10:00 PM
#13
Member
Registered: Mar 2011
Location: Winston-Salem, NC
Distribution: Fedora, CentOS, Linux Mint
Posts: 259
Original Poster
Rep:
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.
10-31-2016, 11:35 PM
#14
Moderator
Registered: Oct 2008
Distribution: Slackware [64]-X.{0|1|2|37|-current} ::12<=X<=15, FreeBSD_12{.0|.1}
Posts: 6,269
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>
10-31-2016, 11:53 PM
#15
LQ Guru
Registered: Sep 2009
Location: Perth
Distribution: Manjaro
Posts: 10,008
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)
1 members found this post helpful.
All times are GMT -5. The time now is 06:53 AM .
LinuxQuestions.org is looking for people interested in writing
Editorials, Articles, Reviews, and more. If you'd like to contribute
content, let us know .
Latest Threads
LQ News