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;"
Related
I have a table where one of the cells is like this:
<td>
<div class="table-wrapper">
<table class="inner-table">
<!--content-->
</table>
<div>
</td>
The div is there so I can put a border around the table, with a gap of 10px. As it displays, though, the div is the entire width of the enclosing td. What I would like is for it to be just the width of the table it wraps (plus margin, to be specified). I can't figure out the CSS to do this, simple though it no doubt is, although I've got it working with Javascript - but I would prefer to do it using CSS, if possible. I had hoped setting width:auto for the div would work, but it makes no difference,
One way is to use inline-block
<style>
.table-wrapper {
border : 1px solid black;
padding : 10px;
display : inline-block;
}
</style>
<table width="400px">
<tr>
<td>
OUTER
</td>
<td>
<div class="table-wrapper">
<table class="inner-table">
<tr><td>INNER</td></tr>
</table>
<div>
</td>
</tr>
</table>
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.
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.
.features img{...}
I understand .features is custom CSS class and div is HTML element. But I don't understand what kind of relationship this syntax will build between them?
This syntax doesn't build any relationship between the .features class and a div.
The style that you provided is styling any child <img> tag contained within a .features class.
Both of these would be valid and apply the given style to the image:
<div class="features">
<img src="myImg.png" />
</div>
and
<table class="features">
<tr>
<td><img src="myImg.png" /></td>
</tr>
</table>
If you wanted to specify that your class was only applicable to divs, you would need to change the declaration to:
div.features img { }