I have table with this markup:
<tr id="main_nav">
<td style="width: 100%" colspan="2">
<a>Link1</a>
<a>Link2</a>
<a>Link3</a>
</td>
</tr>
I need to set padding to these links, but I can't make it to work...
CSS:
#main_nav a {
color: #fff;
font-weight: bold;
padding-left: 1em;
}
What I've tried: wrap link into p tag, span tag, add css display block, display table, add style with padding to link.
Can not wrap each link in <td> tag!
Edit: Tried margin instead of padding, no luck.
I successfully get around this issue by setting a large border to the same colour as the background.
border: 10px solid #fff;
Put <a>Link1</a> within a div, then set the div padding.
If it still doesn't work, try to change the width of the divs, like here: http://jsfiddle.net/XWLv6/1/
Quickest way to consistently "pad" something in email is to just throw a couple of in there. Seems like bad practice I know...
Otherwise put them into their own table with an empty col as the padding for consistent results.
add display:block; to the #main_nav a
You must put your CSS inline for all elements in an HTML email. Example:
<a style="color:#fff;font-weight:bold;padding-left:1em;">Link1</a>
if it's just matter of appearance this is what I did.
border-right-width: 177px;
border-left-width: 177px;
border-top-width: 10px;
border-bottom-width: 10px;
Related
I have two divs declared as,
<div id="icdAid" align="center" ></div>
<div id="errorMsg" align="center" ></div>
How can I add space between them?
You can add this to your CSS
#icdAid
{
margin-bottom:10px;
}
This will add a space of 10px to the bottom of icdAid div.
JSFIDDLE DEMO
In html - use <br/> to add new line.
In css - #icAid{ margin-bottom: 20px; }.
Also align attribute is deprecated, use css for that div{ text-align: center; }
Your should use the CSS solution
#icdAid {
margin-bottom: 15px;
}
This is used if you want the results replicated to wherever you use the icdAid id. But if you want a fix on a single page use <br/> tags in-between the close and open tags of you <div>'s.
With the CSS solution you have more control over the spacing as <br/> tags are a set width.
I have the following html
<table>
<tr>
<td>
<div class="container">
<img src="http://.../baking-potato.jpg" />
</div>
</td>
</tr>
</table>
The td cell is not wrapping "perfectly" the div+img content: as you can see from this fiddle, there's a margin in the bottom of the cell, highlighted by the black background.
How can I get rid of that unwanted margin? I tried the following css properties
table{
border-spacing: 0 px;
border-collapse: collapse;
}
but nothing changed..
Thank you in advance
Add the following CSS
.container img { display:block; }
JSFiddle Updated
Reason:
This happens because an <img> is an inline element, and therefore leaves space for text characters like p and y for example, because it is inheriting the line-height
Not sure why this occours here. I have tried several things. The following CSS seems to work for me:
.container img {
margin-bottom: -5px;
}
However it's a hack and therefor not a really good practise in my opinion. But sometimes you just don't get around using hacks...
Not really related to this case, but for someone having issue with <pre> wrapperd in <td>, you may need to set margin: 0 to remove the space. This is the case I met with when using codeblock in hugo.
I'm pretty sure someone is just messing with me, but they asked me to do this.
Put a span tag inside a table, with nothing inside the span tag. And somehow make the span tag 16px wide.
No padding, margin or  . I dont think its even possible.
Is it possible? Heres my HTML/CSS.
.test{
height: 31px;
width: 16px;
background-color: red;
}
<td>16px wide</td>
<td><span class="test"></span></td>
<td>16px wide</td>
Simply set:
.test{
display: inline-block;
width: 16px;
}
Notice the top colored table on the sidebar that says LIFESTYLE.
The text just won't vertical-align to the middle and that table just won't get any shorter.
It's basically a custom html module in Joomla with Gantry and K2 that I put some PHP into (Using Sourcerer) so it chooses it's table bg color based on an array of colors. Simple right?
There's got to be some margin, padding, something somewhere and I can't find it. Any ideas?
To be absolutely honest I don't know why this is happening but this seems to fix the issue...
Replace the following:
<div class="titlebars">
<font color="#FFFFFF">LIFESTYLE</font>
</div>
with:
<span class="titlebars">
<font color="#FFFFFF">LIFESTYLE</font>
</span>
EDIT
The problem is the <br> tag after the <div>:
<td style="vertical-align: middle; width: 100%; line-height: normal; margin: 0px 0px 0px; padding: 0px; cellpadding=0 cellspacing=0">
<div class="titlebars">
<font color="#FFFFFF">LIFESTYLE</font>
</div>
<br> <----- THIS IS THE PROBLEM
</td>
Remove it and the cell behaves as you want it to.
Just declare your .titlebars div as display:inline-block, add some padding to fill that header a bit and you should be all set:
CSS
.titlebars {
display: inline-block;
font-size: 30px;
font-weight: 800;
margin: 0;
padding: 5px 0;
}
Also, <font> tags? I believe they've been deprecated, so you can use a p tag instead and style that.
I have a page with a header, followed by a (menu/tool) bar underneath, which is supposed to carry two elements: a text to the left (big font) and a login link (smaller text). The right hand link is supposed the be centered vertically.
The following resource seemed to be exactly what I need:
http://www.css4you.de/Texteigenschaften/vertical-align.html
and
http://www.css4you.de/example/vertical-align.html
Here's my HTML:
<div style="border: 1px solid purple;">
<h1 style="border: 1px solid red; display: inline;">Textext</h1>
<span id="logindisplay" style="border: 1px solid lime; float: right; vertical-align: middle;">Log In</span>
</div>
The CSS ID selector for logindisplay doesn't exist. h1 is just
h1
{
font-size: 18pt;
}
I basically did everything as in the resource above, but it doesn't work - neither on IE9 nor on FF. Here's what I get:
Does anybody know what I'm doing wrong?
Note: Workarounds/hacks aren't desired. (One would be to set padding-top: on the span...)
Try this
#logindisplay { line-height: 18pt; }
...and get rid of your vertical-align property.
vertical-align doesn't work in the way you thinkit does, it seems. Take a look at http://css-tricks.com/what-is-vertical-align/ for a good explanation of what it does.
Using float:right negates the vertical-align as you found. Mark's suggestion doesn't work with position:relative on the div? In which case, line-height seems like the easiest way.
make your outer div be display: table-cell, or give it a line-height of appropriate size.
vertical-align is one of the stupidest bits of CSS, and rarely works as you'd expect without having to hack up containing elements: http://phrogz.net/css/vertical-align/index.html
A different approach would be putting position relative on the parent div and then absolute position the span like this:
#logindisplay {
position: absolute;
right: 0;
top: 50%;
margin-top: -9px;
}
Example