Table data has border and a link image and some other anchor text below it.
The problem is it has space between link, the solution I get from this here simply use vertical-align which remove the gap between anchor (which works) but in my case it create a gap between border-top td border and anchor image instead. Using clear both doesnt work too. Any idea?
<td style="font-size:14px;border:1px solid #848484;font-weight: bold;">
<a target="_BLANK" href=""><img style="border:none;" src="clothing.jpg" alt="Female Clothing"/></a>
<a target="_blank" href=""> » Sub Men</a>
</td>
Perhaps you need to set:
<table cellspacing="0" cellpadding="0">
...
</table>
I found out that I have to use both vertical align and display block in order to fix it.
Related
ANSWERED!
I have some css overriding my tables but I don't know how to find it. I simply need images in my table to be at the top of the table. I use the code:
<td valign="top"><img src="../../../images/site/orangeBanner.png" alt="" width="259" height="62" class="imagePic"/></td>
But it does not work and produces this image of the orange bar in the middle. It should be at the top at the same height as "INSPIRE".
Here is the link to my full code: FULL CODE
Can anyone see why my valign="top" is not working? Is there anything to override the css?
Your td originally has vertical-align: middle specified inside the CSS. You can override it by using style="vertical-align: top;" inline inside the <td> tag containing your image. This should work perfectly:
<td valign="top" style="vertical-align: top;"><img src="../../../images/site/orangeBanner.png" alt="" width="259" height="62" class="imagePic"/></td>
This CSS rule is overriding it:
table, th, td {
vertical-align: middle;
}
Change it to top or add another class to that specific td tag.
Also you could add style tag to that td as follows:
style="vertical-align: top;"
I have been struggling to find a simple solution to the following problem using the CSS inline styles due to being on a free wordpress.com blog.
a table
inside each table cell there is an three parts
a hyperlink to enclose the two objects below
image - align vertical and horizontally centred in the table cell
text at the bottom of the table cell
<psedo markup>
<td>
<a href="#">
<img style="vertical-align:middle" src="" />
<p style="vertical-align:bottom">Text at the bottom</p>
</a>
but just cant seem to get a consistent result, am I better using <div style="display:block"> instead?
If you can use html5, use a figure:
<td>
<a href="http://gravatar.com">
<figure style="text-align: center;">
<img src="https://www.gravatar.com/avatar/5a25eba05dc8ac4384384c7a220958a6?s=32&d=identicon&r=PG&f=1"
alt="" width="32" height="32">
<figcaption>gravatar glyph</figcaption>
</figure>
</a>
</td>
The figure element was added precisely for situations like this, though the needed style here is a bit quirky.
HTML:
<table>
<tr>
<td style="text-align: center;">
<a>link</a>
<img style="display: block; margin: 0 auto;" src="http://placebacn.com/400/300">
<p>Bacon... Bacon... Bacon...</p>
</td>
</tr>
</table>
Even if you can't add a CSS file you may be able to add a <style> block before the HTML which would be better than inline styles:
<style>
td {
text-align: center;
}
td img {
display: block;
margin: 0 auto;
}
</style>
Fiddle: http://jsfiddle.net/xeTPx/2/
Please don't use tables for layout (i.e. non-tabular data - not sure if this is or not), there are other ways to have a similar layout without the bloated markup and accessibility problems. display: flex is often a good option as it now has support in a lot of today's browsers. Sometimes even using other markup with CSS display: table and display: table-cell is another option.
This might be a good read on vertical-align: http://css-tricks.com/what-is-vertical-align/
I would suggest to separate img and text from the same alignment-structure. I think you can manage to center the img but the text ruins this alignment. The trick that I use is position>relative to the parent and position>absolute to the child. Here you go:
<td>
<a href="#" style='**position:relative;**'>
<img style="vertical-align:middle" src="" />
<p style="**position:absolute; bottom:0;**">Text at the bottom</p>
</a>
</td>
By doing this p is not in the same alignment structure anymore.
I hope this solves your problem.
I am doing this on my own personal browser, viewing a pbulic website. as such, I can't change their html. I am using chrome, and stylebot to apply the CSS style. I need a CSS solution to the following:
<tr class="bg_small_yellow">
<td class="row1" valign="middle" align="center" width="20">
<img class="icon_folder" src="/eaforum/images/transp.gif" alt="">
</td>
<td class="row1" width="100%">
<span class="topictitle">
<a href="/eaforum/posts/list/9578017.page" id="topic_link_9578017" title="SimCity Traffic">
SimCity Traffic
</a>
</span>
</td>
How can I apply color: gray; to the <a> link if and only if the <img> is class .icon_folder ?
Here is a jsFiddle page to play with. I want a solution only in the CSS pane. http://jsfiddle.net/hZr9b/
I am looking for something like this, but that actually works:
(td > img.icon_folder) + td a:link { color: gray; }
If the markup cannot be changed, then it is not possible using only CSS because the image and anchor aren't siblings, and there is no parent selector in CSS2/3 to help navigate between these two elements.
If they were siblings, it could be as easy as this:
HTML:
<img class="icon_folder" src="/eaforum/images/transp.gif" alt="">
SimCity Traffic
CSS:
img[class="icon_folder"] + a {
color:grey;
}
But as you mentioned you cannot change the markup in this instance, unfortunately you'll have to use JavaScript.
I have an html where in one div is enclosing 2 anchor elements..
If I apply a style class to individual element with some background-color, the entire background is clickable.
If I apply a style class to the div, then both the anchor elements are displayed on the background, but the entire background is not clickable, only the individual anchor elements are clickable.
I dont want to use any JS or jQuery.
<div id="" class="AccordionTab" name="">
<table id="Nickname_table" class="CommonTableClass" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr id="Nickname_tr">
<td id="Nickname_td">
<a id="Nickname" href="#BalanceDisplay">It is my nick Names</a>
</td>
</tr>
</tbody>
</table>
<table id="AvailableTag_table" class="CommonTableClass" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr id="AvailableTag_tr">
<td id="AvailableTag_td">
<a id="AvailableTag" href="#BalanceDisplay" ">hi</a>
</td>
</tr>
</tbody>
</table>
</div>
Here AccordionTab is the style class having the back-ground color.
If I apply it <a id="AvailableTag" class="AccordionTab" href="#BalanceDisplay" ">hi</a>
for a single anchor element, entire background will be clickable
what do you mean by "clickable"?
I suspect that you're trying to program an accordion-style control with CSS alone. However, generally speaking, CSS doesnt allow you to modify behavior. That responsibility is left to the role of JavaScript.
In addition, CSS allows you to only target elements and their children, not their parents. For example, you cannot select Nickname_td from the context of Nickname. At least not in CSS3. (CSS4 might provide this, but it's a long way off).
If you're looking to modify behavior based on the state of the document, I'm afraid you'll probably have to resort to some sort of JavaScript.
I have a site that generates related video's to a topic. I have 4 thumbnails and I want to add a css play button on the thumbnails, which can be done with this code: ► | It will be like this: http://i47.tinypic.com/250qis9.png
Here is a demo: http://jsfiddle.net/vtPhZ/2/
The problem is that it won't recognize the a:before tags that I gave it to. What am I doing wrong?
The HTML snippet which generates the list:
<div id="youtubeThumbs">
<ul class="ytlist">
<li>
<table cellspacing="3" cellpadding="3" border="0">
<tbody>
<tr>
<td valign="top" rowspan="2">
<a class="clip" style="cursor: pointer;">
<span>
<img src="http://i.ytimg.com/vi/1q47bOtV3-Y/hqdefault.jpg">
<em></em>
</span>
</a>
</td>
<td valign="top">
</tr>
</tbody>
</table>
</li>
And the CSS I tried to use (without success):
.ytlist li > a:before {
content: "►";
}
How can I make it work?
I can't explain why but for some reason your change of methods for declaring a child element is causing the problem. Using my first two recommendations of using the unicode entity for the content and using the pseudo element rather than the pseudo class, the CSS should work. However, it did not initially work. When I removed > from the first line the CSS worked.
Here's a demo: http://jsfiddle.net/vtPhZ/4/
Your method was strange but the fact that it didn't work was even more strange...