Mysterious Bottom Border

HTML CSS Mysterious Bottom Border

It's from here :

media="all"
tr:first-child th:after, tr:first-child td:after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: -15px;
    right: 15px;
    border-bottom: 1px solid #1c1d1d;
}

in the theme.scss.css file

Mysterious bottom border

Add vertical-align: top to the image. This space is the space below the baseline.

Svg line strange effect on bottom-border

As I've commented: add svg{display:block;}
to the svg

svg{width:100%;display:block;}#subsling{background: #e4f1fe;padding:1em;}

<div id="father">        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" style="transform: rotate(360deg);background: #34495e;">          <path fill-opacity="1" d="M0,224L60,208C120,192,240,160,360,138.7C480,117,600,107,720,138.7C840,171,960,245,1080,245.3C1200,245,1320,171,1380,133.3L1440,96L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z" fill="#e4f1fe"></path></svg>   <div id="subsling">   <p>wertyui wertyuio ertyufghjklñ  ertyuiop eghjkl </p> </div></div>

Mystery 1px border in WebKit

Edit: it's your <div id="header">'s absolute height. Try making it one pixel shorter.

It's not a black outline, it's the gray background... the background image has a 1px transparent row on the bottom, and the gray background shows through.

input has mysterious bottom padding

The <input> has a minimum line-height based on font size. Setting both elements to a larger line-height value works, as does removing line-height altogether. But that still doesn't allow you to have smaller heights than the minimum. The fix for that is using the first-line pseudo-element and setting it to display: inline-block;.

Demo: http://jsfiddle.net/ThinkingStiff/B7cmQ/

CSS:

.normalised:first-line {
    display: inline-block;    
}

But this doesn't explain why the <input> is acting differently than the <div>. Even -webkit-appearance: none; didn't fix it. It would seem there is some invisible voodoo on inputs that treats its contents as inline. inline elements have minimun line-height based on font size, which is the behavior we're seeing here. That's why first-line fixes it. It seems to be styling the "child" element of the <input>.

Here's a demo that shows the minimum line-height on inline elements. The <div> element honors line-height: 7px;. The <span>, even though its computed value is showing 7px;, is not honoring it visually.

Demo: http://jsfiddle.net/ThinkingStiff/zhReb/

Output:

HTML:

<div id="container"> 
    <div id="div-large">div <br />large</div> 
</div> 
<div id="container"> 
    <div id="div-medium">div <br />med</div> 
</div> 
<div id="container"> 
    <div id="div-small">div <br />small</div> 
</div> 
<div id="container"> 
    <span id="span-large">span <br />large</span> 
</div> 
<div id="container"> 
    <span id="span-medium">span <br />med</span> 
</div> 
<div id="container"> 
    <span id="span-small">span <br />small</span> 
</div> 

CSS:

#container { 
    background-color: lightblue;   
    display: inline-block; 
    height: 200px; 
    vertical-align: top; 
}

#div-large { 
    line-height: 50px; 
} 

#div-medium { 
    line-height: 20px; 
} 

#div-small { 
    line-height: 7px; 
}

#span-large { 
    line-height: 50px; 
    vertical-align: top; 
} 

#span-medium {
    line-height: 20px; 
    vertical-align: top; 
} 

#span-small {
    line-height: 7px;
    vertical-align: top;
}

nested table border-bottom not displaying

tr borders are only obeyed in collapsed border mode. See inline style attribute on the inner table below.

.inner-table tr{
    text-overflow: ellipsis; 
    overflow: hidden; 
    white-space: nowrap;
    line-height: 2;
    border-bottom: 1px solid black;    
}

<table>
   <td>
       <table class="inner-table" style="border-collapse: collapse">
          <tr><td>row1</td></tr>
          <tr><td>row2</td></tr>
       </table>
   </td>
</table>

Div containing canvas have got a strange bottom margin of 5px

You can prevent it from happening by adding display: block to the css for the canvas element.

i.e:

canvas {
    background-color: khaki; /* demo purposes */
    display: block;
}

---

Related Topics