http://solsticegraphics.eu/ This is my website. Just below the header there is a grid of divs that need a 1 px border. This is the CSS for the class of elements I need to have border on: .elem { float: left; width: 220px; height: 150px; border: 1px solid #f1f1f1; border-collapse: collapse !important; -webkit-box-shadow: inset 10px 10px 50px -13px rgba(0,0,0,0.17); -moz-box-shadow: inset 10px 10px 50px -13px rgba(0,0,0,0.17); box-shadow: inset 10px 10px 50px -13px rgba(0,0,0,0.17); } Code (markup): Divs inbetween other divs have a border of 2px and they are not collapsing. :/ How do I fix this?
Now I do. So would it be a good idea to remake the grid using tables in order to achieve border collapsing? Maybe there is another way of doing this without using tables?
Tables is most decidedly NOT the answer; that's not tabular data so you'd be pissing on accessibility, semantics, and logical document structure by using them for that. That said, you already have pissed on accessibility with that design; you've got a fixed width layout with zero plan for auto-adjustment, and a massive area of equal width equal height elements to boot. First thing that needs to go is the fixed width... Though your entire page is filled with issues, from the illegible condensed webfont, pixel metric font declarations, lack of elastic design, illegible colour contrasts far below WCAG AA minimums, etc, etc... and that's before we talk the train wreck of "how not to write HTML" and rubbish scripttardery that it has under the hood... resulting in a complete lack of graceful degradation... hence that page vomiting up 24k of html doing 8k's job... much less the ridiculous I'd be pitching that entire disaster in the trash before even thinking about something mundane like the 1px border. Sorry if that seems a bit harsh, but the truth always is. It's VERY much what I've come to expect when art is placed at the forefront of design instead of as a final cleanup to the process -- the result being useless to large swaths of users thanks to an utter and complete ignorance of accessibility, usability, or user experience.
I remember you, deathshadow You made me grin like you did the last time. Thanks for your reply. I am definitely not a great WEB/front end designer, and right at the moment I do not have much time to learn how to write html and css professionally. I will absolutely do that later, I promise. I love learning html and css, but sadly I couldn't learn everything at once. Anyhow, if there is a way of collapsing those damn borders and there is someone who will post the solution, I will much appreciate it. Thanks guys.
Put a wrapping div around them, border:solid #FFF; border-width:1px 0 0 1px; On each child element inside it, assuming they're floated add border:solid #FFF; border-width:0 1px 1px 0; Rather than trying to get them to collapse atop each-other, only set a border on the bottom-right of each element, and put a top-left on the parent.