This question already has answers here:
CSS Margin Collapsing
(2 answers)
Closed 8 years ago.
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; ...
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; ...
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.
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/
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
A simple solution might be to just set the border color to the same value as the content's background.
JSFiddle
background-color:#CAE2F0;
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.
Related
I'm having problems with table borders not always rendering correctly when the following conditions are met:
The table is contained within a div with overflow-y:scroll
Borders are collapsed on the table
elements are styled position:relative
As near as I can tell, this is occurring only on Chrome (Version 54.0.2840.98 on Mac OS 10.11.6). I've tested on Safari and Firefox with no issues.
I've managed a minimal case in JSFiddle (https://jsfiddle.net/5a0a4sL1/24/). The code looks like this:
.scroll {
background-color:white;
overflow-y: scroll;
width: 300px;
height: 200px;
}
.wrapper {
height: auto;
width: 280px;
padding: 10px;
margin: 0px;
}
table {
width:90%;
margin:0px 5%;
border-collapse:collapse;
}
td {
position:relative;
border:1px solid black;
}
<div class="scroll">
<div class="wrapper">
<table>
<tbody>
<tr><td style="height:39px;"></td></tr>
<tr><td style="height:75px;"></td></tr>
<tr><td style="height:111px;"></td></tr>
<tr><td style="height:39px;"></td></tr>
</tbody>
</table>
</div>
</div>
The page looks like this when there's an issue:
Here the borders for the bottom row-and-a-bit of the table are failing to render, though table contents would show if there were any. The presence and severity of the issue depend on the size of the Chrome window, which make me think this is a bug in the browser.
My question is this: Is there anything in the code that looks like I'm obviously abusing the browser? Any tweaks that might accomplish the same task (the position:relative is required for the placement of resizing handles) without making Chrome angry? Or is this just a clear browser bug?
Edit: I believe this isn't the "table borders disappear with position:relative" issue discussed here, for example. Borders for table cells are often partially rendered, and the issue disappears if (for example) scrolling in the y direction is removed.
I replicated the problem. The rendering is different in each browser. It could be a browser bug.
A simple workaround to get it to work perfectly in all browsers would be to add <div> inside each td and style them with position: relative. And if you want the div to take same height as the td, then also give them height: 100%.
Here's a demo.
Off-Topic Note (kind of relavant to the cause of the problem):
When you give padding 10px to an element with width 300px, the actual width becomes 320px. And if you give it border 1px, the actual width will be 322px (border left 1px and border right 1px). To get an actual 300px with padding 10px and border 1px, give the element this attribute: box-sizing: border-box;. Same concept applies for "height".
For example, when you gave an element height 39px and border 1px, the actual height is 41px (1px top border + 1px bottom border). If you add box-sizing: border-box to the td, then the height would be 39px.
I have a table in the middle of my website: www.care.dti.dk
The first <tr> of the table which is wrapped around the div: #pricingTable has a height of 5px.
On localhost it works fine, but when i put it online, the browser automatically resizes the height to 15px, which makes the background image repeat.
I've tried setting background-repeat: no-repeat; but this doesnt place the image in the buttom, where i would like it to be.
What is causing this problem, and how do i fix it?
use this CSS :
#pricingTable table tr:first-child td {
font-size:0;
height:5px;
}
and remove html element height="5px" in your td
and now you write <td height="5px"> this is not correct if you write height in td
than <td height="5"> this
Remove inside the <td>
or
Add another CSS attr: line-height: 5px
On this page (http://www.comehike.com/hikes/hiking_group.php?hiking_group_id=2), I'm trying to get on the right side, to have the button for "join group" to
Have the same botder width as the div above it
Leave at least a little white space before the ad that comes right below it
I am trying to do something like this:
<div style="width: 285px; float: right; border: 1px solid; padding: 5px;">
But adding the padding just made the div wider, and didn't make any space to the bottom.
Any idea what I can do? Thanks!
Do margin-bottom instead of padding-bottom
I have used two div tags in my blog to wrap programming codes. The first one is used to set outline box with fixed width with the following CSS class:
.outlinebox {
width: 435px;
border-width: 1px; /* sets border width on all sides */
border-style: solid;
border-color: #666666;
padding: 5px
}
The second div is used as inner box to set nowrap for codes with the class:
.nowrappercodesinner {
width: auto;
padding: 5px;
overflow: auto;
white-space:nowrap;
}
I use those div tags for my codes in my blog. They work fine until I tried to add third div as inner area with a specific background colour. For example:
<div class="outlinebox">
<div class="nowrappercodesinner">
<div class style=""background-color:#cccccc;">
...
</div>
</div>
The problem is that the background colour does not extend to the right when I move the horizontal scroll bar to the right. I am not sure if there is any way that the inner background colour will fill no matter where the scroll bar is moved.
Here I have one example in my recent blog: Zip Files with PowerShell Script. You can see the problem in the third code block.
overflow: auto;
in the innermost div might help. At least it had the desired effect when I added the property in Firebug. I find it strange, still, because I thought auto is supposed to be the default setting.
EDIT: Default value for overflow seems to be visible.
Perhaps I'm missing something, but why do you need the third div? Couldn't you just put the background color on the second div? I tried this on your blog in webkit's inspector and it displayed just fine.
<div class="outlinebox">
<div class="nowrappercodesinner" style="background-color:#cccccc;"></div>
</div>
I have a div which has style properties as "border-top, left, right, bottom" set.
But I do not want the border top to complete the box (which would be a rectangle). I want a small (About 2-3px) opening at the top right (on the length side of the box).
How can this be done?
I think there is a property in CSS called "border-top-width" but there is no "border-top-length".
Can it be done using CSS? Any other approaches are also welcome.
Thanks...
I don't think that's possible...The only way I can think of is to hack it with creating another element inside it (1px wide, 3px high), float it right, and then do margin-right: -1px...
<div style="border:1px solid black; background-color: white;">
<div id="borderHack"></div>
Your content here
</div>
And style the "hack" element like so:
#borderHack {
float: right;
margin-right: 1px;
background-color: white; /*This would have to be the same as the background*/
height: 3px;
width: 1px;
}
You will have to set border-top to none and then put another DIV into that container DIV. Then set the inner DIV's border-top and set it's width to be smaller than the container's.
I don't believe you can do this with CSS alone.
You could add an inner div that has the background color of the color you want at the opening. You would then position and size the inner element so that it appears to be a gap.
You can do that using what's explained in this link http://www.css3.info/preview/border-image/
Basically what you would do is draw a box without the top corners and assign it as border-image
Edit: But this is only available in CSS3 and not implemented by many browsers so for now the other answers give a practical solution.
You might as well try this (relative+absolute positioning) almost the same with float:
<div style="width:400px;height:300px;border-top:1px solid black; border-right:1px solid black;border-bottom:1px solid black;position:relative;">
some content here
<div style="width:2px;height:3px;position:absolute;right:0;background:gray;"></div>
</div>