0

I have this div container in a table cell:

<table style="width: 100%; background:transparent" border="0" cellspacing="0" cellpadding="0">

  <tbody><tr>
    <td>

        <!-- This div is making troubles -->   
        <div style="margin: 0; border: 1px solid blue; background-color:#CAE2F0; align:right; font-size: 150%; font-weight: bold; text-align:center;margin-right:5px;padding:  0;">
          <p>Themensuche</p>
        </div>

    </td>
    ...
    ...
  </tr></tbody>
</table>

There is nothing special, no experiments, no floating, everything static.

As long as the div has a normal border, everything looks fine:

<div style="margin: 0; border: 1px solid blue; ...

Div with borders Box model with borders

Here is the problem. As soon as I set the border to 0, the border and much of the div's inner space is cut off:

<div style="margin: 0; border: 0; ...

Div without borders Box model without borders

I've checked with Chrome and Mozilla edge. What is causing the browser to cut off inner space? It goes against my complete understanding of the box model. How do you recommend I'd start debugging this?

Thanks for your attention.

peter_the_oak
  • 3,529
  • 3
  • 23
  • 37
  • could you post a jsfiddle of it? – ArtisticPhoenix Jul 08 '14 at 13:04
  • 2
    __Adjoining margins__ strike again … http://www.w3.org/TR/CSS21/box.html#collapsing-margins – CBroe Jul 08 '14 at 13:05
  • Can you provide a JSFiddle? And why do you want it a div inside your table? Its allowed in HTML5, but it aint pretty! – GreyRoofPigeon Jul 08 '14 at 13:05
  • There's the reason why front end developers hate `table`s. Adding anything other than table elements will raise demons from hell. Can you observe whether the height of td and div matches? –  Jul 08 '14 at 13:11
  • @nightgaunt: This has little to do with tables … (and maybe those who “hate” them simply don’t _understand_ very much about them?) – CBroe Jul 08 '14 at 13:16
  • @CBroe Quite agree with you. My experience with table taught me to run away the moment I see them. Especially a div inside a td. Is there a good reference that can teach me more about tables and their extensive applications? –  Jul 08 '14 at 13:19
  • Thank you all people. I'm starting to understand and I can continue now. - This is a wordpress template snippet, I don't have influence here of the usage of div in table etc. I also can't change inline styling. I personally avoid such things like you do. - Today I've learnt new aspects about the box behavior, so thanks again. These boxes don't have the same height: [http://jsfiddle.net/P946E/](http://jsfiddle.net/P946E/) - so it is. – peter_the_oak Jul 08 '14 at 15:23

4 Answers4

1

Problemm is that p have default top and bottom margin's in our case it's 25px, parent's border cancel this top and bottom margin collapse. To correct your problem remove margin from your paragraph and add equivalent padding-top to parent's div and padding-bottomyou can see my solution here

AlexDom
  • 701
  • 4
  • 14
  • Thank you for the fiddle, good Idea, I should have created one myself. It just helped me observing the effect I don't understand, but I'm a step further. It seems I don't know enough about the box model, so I'll attempt to study about "adjoining margins" mentioned above and more. - Have a look at this: [http://jsfiddle.net/P946E/](http://jsfiddle.net/P946E/) In my understanding, both boxes should have the same height (+-2 px) – peter_the_oak Jul 08 '14 at 15:04
  • it took some time but you can look here http://jsfiddle.net/P946E/1/ my biggest advice for you is to avoid inline css when you can, i comment most of code – AlexDom Jul 08 '14 at 15:18
  • For the moment I'll go with `overflow:hidden`. But thank you for your effort. – peter_the_oak Jul 08 '14 at 15:26
1

A simple solution might be to just set the border color to the same value as the content's background.

JSFiddle

background-color:#CAE2F0;
matt
  • 121
  • 4
  • This is creative thinking, thx. Unfortunately in this case I cannot do so. The div touches another div beneath and I just need to deactivate the bottom border to avoid a double thick border. If I give the bottom border another color, a gap will appear where the vertical border touches the div beneath. (But of course right now, a thick white stripe appears...) I'll find another approach. – peter_the_oak Jul 08 '14 at 14:51
1

The <p> tag has default margin of 24px from top and bottom. When you add a border to the parent div, it cover that margin top and bottom. When you remove the border of a div, it wont cover that default margin of <p> tag.

If you want to remained your height of the div as it is then just add overflow: hidden; to your div

Check this demo http://jsfiddle.net/amoljawale/e2rah/

amol
  • 1,535
  • 9
  • 10
  • As I understand, this is about the height of the div, which remains the same (+- 1 px) with or without border. Therefore I expect the full height of the div to be in background blue color with or without border. The height of p really should not matter here. – peter_the_oak Jul 08 '14 at 14:32
  • did you see my solution jsfiddle @peter_the_oak ? – AlexDom Jul 08 '14 at 14:53
  • @peter_the_oak: I have update my answer, can you please check. – amol Jul 08 '14 at 15:13
  • @amol: I'm starting to see it, thank you. This must belong to the chapter of "adjoining margins" as mentioned above. For the moment, the hint `overflow:hidden` is the best solution. – peter_the_oak Jul 08 '14 at 15:24
0

Instead of using , try to design div as a table.

For your reference http://snook.ca/archives/html_and_css/getting_your_di .

Using div inside table may give unexpected response.

Vipin CP
  • 3,642
  • 3
  • 33
  • 55