Solved

Borders, grid style

Posted on 2004-10-09
8
2,021 Views
Last Modified: 2011-10-03
Hi,

i am not quite sure how to go about doing this, basically i have this:

<html>
<head>
<style>
 #grid {
  width: 225px;
  height: 225px;
  border: 2px solid #000000;
  padding: 4px;
 }
 .cell {
  width: 75px;
  height: 75px;
 }
</style>
</head>

<body>

<table id="grid" cellspacing="1px">
 <tr>
  <td class="cell">&nbsp;</td>
  <td class="cell">&nbsp;</td>
  <td class="cell">&nbsp;</td>
 </tr>
 <tr>
  <td class="cell">&nbsp;</td>
  <td class="cell">&nbsp;</td>
  <td class="cell">&nbsp;</td>
 </tr>
 <tr>
  <td class="cell">&nbsp;</td>
  <td class="cell">&nbsp;</td>
  <td class="cell">&nbsp;</td>
 </tr>
</table>

</body>
</html>


At the moment the border appears just around the outside of the table however i want the exact opposite. I want the border to appear in the internal cells but not around the outside... sort of like this

 __|__|__
 __|__|__
    |    |  

Is there an easy way to do this?

I kind of like the idea of doing it with divisions (ie. <div>) but im not sure if thats practical here... or even possible?

An image will eventually go in each of these cells if that information is at all relevant

Thank you
0
Comment
Question by:HeadAcheMike
  • 4
  • 2
  • 2
8 Comments
 
LVL 3

Expert Comment

by:Kupi
ID: 12268380
Is this what you mean?

<html>
<head>
<style>

#grid {
  margin: 0px;
  padding: 0px;
  border: none;
  border-collapse: collapse;
  width: 225px;
  height: 225px;
}

.cell {
  margin: 0px;
  padding: 0px;
  border: 2px solid #000;
  width: 75px;
  height: 75px;
}

</style>
</head>
<body>

<table id="grid">
  <tr>
    <td class="cell" style="border-width: 0px 0px 2px 0px;">&nbsp;</td>
    <td class="cell" style="border-width: 0px 2px 2px 2px;">&nbsp;</td>
    <td class="cell" style="border-width: 0px 0px 2px 0px;">&nbsp;</td>
  </tr>
  <tr>
    <td class="cell" style="border-width: 0px 0px 2px 0px;">&nbsp;</td>
    <td class="cell" style="border-width: 0px 2px 2px 2px;">&nbsp;</td>
    <td class="cell" style="border-width: 0px 0px 2px 0px;">&nbsp;</td>
  </tr>
  <tr>
    <td class="cell" style="border-width: 0px 0px 0px 0px;">&nbsp;</td>
    <td class="cell" style="border-width: 0px 2px 0px 2px;">&nbsp;</td>
    <td class="cell" style="border-width: 0px 0px 0px 0px;">&nbsp;</td>
  </tr>
</table>

</body>
</html>
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 12269437
I would simplify that a bit...

1. Simply override the border of the table with white (or whatever your background is)
2. Use the cascade to set the td's instead of repeating "class" for all of them.
3. Remove the height and width of your table - let the cells define that so you don't run into problems...

<html>
<head>
<style>
#grid
{
      border: 1px solid #ffffff;
      padding: 4px;
      border-collapse:collapse;
}

#grid td
{
      width: 75px;
      height: 75px;
      border: 2px solid #000000;
}

</style>
</head>
<body>
<table id="grid" cellspacing="0">
 <tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
 </tr>
 <tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
 </tr>
 <tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
 </tr>
</table>

</body>
</html>

Sean
0
 
LVL 2

Author Comment

by:HeadAcheMike
ID: 12269504
Kupi, thanks that is exactly what i need in appearence but i was hoping for an easier way to do it because the rows/columns will be generated dynamically so having to specify varying border widths for each cell will cause me problems later on.

Sean, once again thats great, exactly what i need but just one small issue which i hope you have an answer for...

It displays as needed in IE but in Firefox i still see a black border around the table, any ideas?

Thank you
0
Is Your AD Toolbox Looking More Like a Toybox?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

 
LVL 3

Expert Comment

by:Kupi
ID: 12270307
The black border is still visible in Opera too...
0
 
LVL 3

Expert Comment

by:Kupi
ID: 12270511
This seems to be a bit more crossbrowser:

<html>

<head>

<title></title>

<style>

body {
  margin: 0px;
  padding: 8px;
  background-color: #FFF;
}

#gridbox {
  overflow: hidden;
}

#grid {
  position: relative;
  top: -2px;
  left: -2px;
  margin: 0px;
  padding: 0px;
  border: 2px solid #FFF; /* border-color = background color */
  border-collapse: collapse;
  width: 225px;
  height: 225px;
}

.cell {
  margin: 0px;
  padding: 0px;
  border: 2px solid #000;
  border-width: 2px 0px 0px 2px;
  width: 75px;
  height: 75px;
}

</style>

</head>

<body>

<div id="gridbox">
  <table id="grid">
    <tr>
      <td class="cell">&nbsp;</td>
      <td class="cell">&nbsp;</td>
      <td class="cell">&nbsp;</td>
    </tr>
    <tr>
      <td class="cell">&nbsp;</td>
      <td class="cell">&nbsp;</td>
      <td class="cell">&nbsp;</td>
    </tr>
    <tr>
      <td class="cell">&nbsp;</td>
      <td class="cell">&nbsp;</td>
      <td class="cell">&nbsp;</td>
    </tr>
  </table>
</div>

</body>

</html>
0
 
LVL 3

Expert Comment

by:Kupi
ID: 12270522
<html>

<head>

<title></title>

<style>

body {
  margin: 0px;
  padding: 8px;
  background-color: #FFF;
}

#gridbox {
  overflow: hidden;
}

#grid {
  position: relative;
  top: -2px;
  left: -2px;
  margin: 0px;
  padding: 0px;
  border: 2px solid #FFF; /* border-color = background color */
  border-collapse: collapse;
}

#grid td {
  margin: 0px;
  padding: 0px;
  border: 2px solid #000;
  border-width: 2px 0px 0px 2px;
  width: 75px;
  height: 75px;
}

</style>

</head>

<body>

<div id="gridbox">
  <table id="grid">
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
</div>

</body>

</html>
0
 
LVL 31

Accepted Solution

by:
seanpowell earned 100 total points
ID: 12270830
Kupi,

I know where you're going with that but it is really is overkill, we don't need to get that complicated :-)
The thing with CSS is that we always want simplicity over anything else, because we need to build in flexibility. Anytime we try to force CSS into pixel-perfect rendering, I guarantee there will be problems down the road...

HeadacheMike,

I did a lousy job of posting that example, as I had left the default styles in. The CSS table model has something called border conflict resolution. It's one of the more complicated parts of the model, but in essense says that anything bigger or stronger will take precedence.

In the example I posted, simply change this:

border: 1px solid #ffffff;
to this:
border: 3px solid #ffffff;

and now the external border will disappear :-)
Doesn't matter what the values are, just make sure the outer value is bigger than the inner one.

Sean
0
 
LVL 2

Author Comment

by:HeadAcheMike
ID: 12271758
Thank you once again Sean, much appreciated.


Kupi thanks for your input too but Seans approach is certainly more simplistic and convienient.
0

Featured Post

Efficient way to get backups off site to Azure

This user guide provides instructions on how to deploy and configure both a StoneFly Scale Out NAS Enterprise Cloud Drive virtual machine and Veeam Cloud Connect in the Microsoft Azure Cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
css icomoons will not display on page 14 31
CSS Logo Problem. 2 21
Border and image sizing 5 20
specific navigation button disappears on mobile devices 1 16
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

803 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question