I have a table I have simplified for this question while preserving the problem.
It is a single row with three cells. The middle one contains an image and the first and last ones fill the remaining space and are textually supposed to be empty.
The height of the first and last cell adapts to that of the central (image) one as it is the highest, which does work -
but they become a tad bigger than they should visually creating a hole beneath the central cell.
HTML:
<article class="content" id="pc">
<table id="contentTable">
<tr>
<td class="pad" id="padL"></td>
<td id="cc">
<a href="#"><img src="http://38.media.tumblr.com/b9dc51057ece7352d07d40f4c59f0c65/tumblr_nb0xmfghdm1tin2h1o1_500.jpg" width="250"/>
</a>
</td>
<td class="pad" id="padR"></td>
</tr>
</table>
</article>
CSS:
#contentTable {
table-layout: fixed;
width: 700px;
}
#cc {
width: 500px;
}
.pad {
background-color: gray;
vertical-align: middle;
}
#padR {
border-top-right-radius: 2em;
border-bottom-right-radius: 2em;
}
#padL {
border-top-left-radius: 2em;
border-bottom-left-radius: 2em;
}
Here is a screen shot of the problem with the space highlighted in blue
And a CodePen if it helps.
Why does it occur and how can I remove it?
Since your image is inline, it obeys rules of baseline and has space at the bottom.
I had success by setting:
img {
display:block;
}
To get rid of other table spacing (not showing in your screen-shot), I suggest adding:
#contentTable {
border-collapse:collapse;
...
}
#contentTable tr td{
padding:0;
}
WORKING EXAMPLE
EDIT
Per your comment, here's an example using an embedded YouTube video (iframe). Iframes default to display:inline (replaced element), too.
iframe { display:block; }
WORKING EXAMPLE
Add a class to the cell containing the picture.
<td class="pad" id="cc">
Related
I am having issues at work today and I am trying to responsively spread these 3 text boxes across the screen, one to the left maybe with a little padding pushing away from the left, one in the centre, and one to the right and also with padding pushing away from the right.
I have used many solutions, the reason this doesn't work when it works on my screen every time is because it goes through IE HTML and then gets displayed on an email so it must go through a specific conversion.
I have a feeling that this could also be an older/outdated version of HTML as everything is purely HTML based.
<div class="awards" style="display: flex; float: float;">
<div>silver</div>
<div>gold</div>
<div>platinum</div>
</div>
Here is the text boxes, I will try what you guys come up with / recommend, thanks.
Even to this day, CSS Flexbox support is not universally supported across email clients and the most reliable method is a three column table with 33% width on the cells.
<style>
.table-awards {
width: 100%;
}
.table-awards td {
border: 1px solid black;
width: 33%;
}
.gold {background:silver;}
.silver {background:gold;}
.platinum {background:#eefeef;}
</style>
<table class="table-awards" style="width: 100%">
<tr>
<td class="gold" style="padding-left: 10px;">Silver</td>
<td class="silver" style="padding: 0 10px;">Gold</td>
<td class="platinum" style="padding-right: 10px;">Platinum</td>
</td>
</table>
If you were going to do it with flex it'd be something like:
<style>
.awards {
display: flex;
justify-content:space-evenly;
}
.awards > div {
border: 1px solid black;
flex: 1;
}
.gold {background:silver;}
.silver {background:gold;}
.platinum {background:#eefeef;}
</style>
<div class="awards">
<div class="gold" style="margin-left: 10px;">silver</div>
<div class="silver" style="margin: 0 10px;">gold</div>
<div class="platinum" style="margin-right: 10px;">platinum</div>
</div>
I put together this fiddle
What I have is 2 divs and then one of them has 2 more divs in it. What I am trying to do it properly position label and span within second div
<div id="someotherdiv">
</div>
<div class="reportuserinfo">
<div class="leftdivinfo">
<label>Teacher:</label><span>Teacher Name</span><br/>
<label>District:</label><span>District Name</span><br/>
<label>School:</label><span>School Name</span>
</div>
<div class="rightdivinfo">
<label>Class:</label><span>Class Name</span><br/>
<label>Content:</label><span id="currcontent">Content</span><br/>
<label>Unit:</label><span id="currunit"></span>
</div>
</div>
If you look in fiddle right now label is floating to the right and so is span but they look strange, what I am attempting to accomplish is something like this on both sides of second div:
Teacher: Teacher Name
District: District Name
School: School Name
The way they look right now is
Teacher: Teacher Name
District: District Name
School: School Name
Thanks for your help.
I just added width:30%; in your css class ".reportuserinfo label" and it fixed the issue (fiddle). You need to define width in order to fix the text alignment issue. You can adjust space margins as per your requirements.
Here is how your code looks like to me now :-
.reportuserinfo label {
float: left;;
margin-right: 30px;
font-weight: bold;
text-align: right;
width:30%;
}
You should define a min-width style in your css apart from width:40% to ensure that the text you are trying to write does not scroll if browser width is decreased
.leftdivinfo {
float:left;
min-width: 200px;
width:40%;
background: yellow;
padding-left: 30px;
padding-right: 30px;
}
Have you tried using tables? You could enclose this information in a table, then right-align the text in the left column:
table {
border: none;
}
td:first-child {
text-align: right;
}
td {
padding: 5px;
}
<table>
<tr>
<td>Class Teacher:</td>
<td>John Smith</td>
</tr>
<tr>
<td>District:</td>
<td>Smithsville</td>
</tr>
<tr>
<td>School:</td>
<td>Smith's High School</td>
</tr>
</table>
Try setting width to auto and adding display:inline-block.
.leftdivinfo {
float:left;
width: auto;
background: yellow;
padding-left: 10px;
padding-right: 10px;
display:inline-block
}
Tables might be a better way to make this.
EDIT:
I see you want the colons aligned, add min-width:70px; to the label class.
At my website guestspeaker.earth I have buttons down the right hand side that are clickable to jump to other pages. Each button is a table row, split into two columns, to help me organise and align the contents. The L/H column has an image with a link, the R/H column has a heading and a paragraph containing text, all surrounded by a link anchor. It works but it generates errors because of course you shouldn't have tags within a <a> tag. (There are also problems with using 'width' and 'align', I know.). I'm struggling to come up with an elegant alternative. I don't want to use Java. I'm open to alternatives that don't look exactly like what I've got, if it's not possible to mimic the current layout. Any help greatly appreciated, as I'm a beginner here.
<table class="rightpanel">
<tr class="rightpanellinkbox">
<td class="rightpanellinkbox" width="90"><a href="current-bookings.htm">
<img src="images/lecture-audience.jpg" alt="Current bookings" width="70" align="center"></a>
</td>
<td class="rightpanellinkbox"><a href="current-bookings.htm">
<h3>Current bookings</h3>
<p class="panel">Upcoming talks David is giving around the country</p></a>
</td>
</tr>
</table>
The CSS is:
table.rightpanel {
margin-left:auto;
margin-top: 10px;
text-align: center;
background-color:#000066;
margin-left: 10px;
margin-bottom:35px;
width: 85% }
td.rightpanellinkbox {
padding-top:2px;
border-bottom: 1px solid #0066CC }
tr.rightpanellinkbox { padding-top:2px; }
p.panel {
color: white;
margin-right: 10px;
margin-left: 10px;
text-align:left;
font-size: 75% }
For my school project i would like to achieve
if the user hovers his mouse pointer over a table the bgcolor of the cell should change
I tried
changing the display of anchor to block and changing the cellpadding and tweaking a few things here and there.
My Problem is
the cell-background changes on mouse over but it does not cover the ENTIRE cell (there are still gaps left on all the four sides where it shows differernt color)
i think there are many easy ways to fix this and i sort of combine them all and do something silly which makes it all go wrong.
Any simple fixes?
P.S : i know the table tags are deprecated but i struggle to make rows and columns any other way. I find the other ways very tough. The table tag would not be causing it now, or would it? Also it is just a basic framework so no links have an url nor are there any proper colors.
HTML:
<div id = "heading"> EARTH HOUR </div>
<table style=width:100% cellpadding=7>
<tr>
<td width=25% align=center bgcolor=blue>AIM</td>
<td width=25% align=center bgcolor=blue>ACHIEVEMENTS</td>
<td width=25% align=center bgcolor=blue>YOUR HELP</td>
<td width=25% align=center bgcolor=blue>FAQ'S</td>
</tr>
</table>
<center><img src="earth.jpg"
style="width:300px;height:280px;position:relative;top:25px;">
</center>
CSS:
#heading {
padding:8px;
text-align:center;
background-image:url("images.jpg"); color:#00FF00;
font-size:300%;
margin:-8px -8px 0px -8px;
font-weight:bold;
}
table, tr, td {
border-collapse:collapse;
border: 3px solid red;
color: white;
font-size:110%; font-weight:bold;
}
html, body { margin: 0; padding: 0; }
html { height: 100% }
body { min-height: 100% }
#text { font-size:150%; margin:7px; }
a { display:block;}
a:hover{ background-color:red; }
</style>
The reason is most likely that the hover is set on the link tag a and not on the td tag; therefore you still see a minor gap between the <a> and the surrounding <td>
See this example on codepen.io
I changed this:
table, tr, td {
...
padding: 0;
}
td:hover { background-color: red; }
/*
a:hover { background-color: red; } <-- removed
*/
You should really be using a <nav> and <ul> element instead of the table method. Check out w3 schools html layout.
Tables for layoutare difficult to work with in general and it seems you are experiencing that first hand!
My HTML:
<table style="width:100%;">
<tbody>
<tr style="cursor:pointer; border-bottom:1px solid #ACACAC; height:60px;">
<td style="text-align:right; vertical-align:middle; padding:10px 10px 10px 0px;">
<span style="color:#F87E20;">Copy</span>
<div style="display:inline; color:#ACACAC;"> | </div>
<span style="color:#F87E20;">Export</span>
<div style="display:inline; color:#ACACAC;"> | </div>
<span style="color:#F87E20;">Delete</span>
</td>
</tr>
</tbody>
</table>
The result:
This is all fine, and is working wonderfully. I want to make some QOL changes, though, and while looking into some of the changes I wanted to make, ran into something that is confusing me quite a bit.
The entire row is clickable, as well as the Copy, Export and Delete spans. This becomes a problem when I try to click on Export, but miss by 2 or 3 pixels, and instead navigate away from this area. I wanted to make the clickable area for the spans bigger, so I gave the a style property like so: padding:10px 0px 10px 0px;
The padding works as intended, enlarging the clickable area around the spans, making it easier to click on them. However, I was expecting the padding to also make the entire row taller, but instead it's as if the spans' padding is just flowing over the padding on the parent.
Here are some images to help explain the situation:
Parent:
And Child:
I don't understand why the child's padding is flowing outside it's container, and I don't want to go on in this direction without understanding what's going on. I was wondering if anyone could please help me understand what's happening here?
Your spans are inline elements. Top and bottom padding is ignored in case of inline elements.
By default, spans are inline, and divs are block. However, you can always override these with display: block; or display: inline;. Block elements (also inline-blocks) have full padding support.
See:
table {
width: 100%;
border-bottom: 1px solid #ACACAC;
}
tr {
cursor: pointer;
height: 60px;
}
td {
text-align: right;
vertical-align: middle;
padding: 10px 10px 10px 0px;
background-color: #e0c000;
}
span {
display: inline-block;
color: #F87E20;
background-color: #f0e000;
}
.padded {
padding: 10px 0 10px;
}
div {
display: inline;
color: #ACACAC;
}
<table>
<tbody>
<tr>
<td>
<span>Copy</span>
<div> | </div>
<span class="padded">Export</span>
<div> | </div>
<span>Delete</span>
</td>
</tr>
</tbody>
</table>
See also this article for more on this.