I'm trying to give even spacing all around images I have in a table, and it's not working too well.
Look at the page. I tried margin, padding, everything I could on lots of different types of properties, but no luck. Any help?
The table has been created in an unusual way by photoshop - resulting in dodgey markup.
There a differing amount of <td>'s in the first row compared to the others
There are several spacer images which have been created by photoshop; which are redundant
There should be no need for the use of rowspans in your <td>'s
To fix this issue I would suggest modifying your table so the structure looks like this:
<table cellpadding="5">
<tr>
<td><img src="images/index_01.png" width="463" height="200" alt=""></td>
<td ><img src="images/index_02.png" width="465" height="200" alt=""></td>
</tr>
....
Then keep adding blocks of table rows e.g.:
<tr>
<td>... </td>
<td>...</td>
</tr>
with your links and images replacing the '...'. then finally close the table:
</table>
Hope this helps.
The problem is your rowspan="2" on your second cell... remove that and the spacing evens out. You may also want the following CSS (tested with Firefox/firebug rewrites)
<style>
#Table_01,#Table_01 a {margin:0;padding:0;}
#Table_01 img {padding:1em;}
</style>
Try specifying value for cellpadding attribute for the table.
Your markup is all wrong. You have TDs using rowspan when its not needed and i see some spacer gifs. Fix the markup and you wont have any issues with using cellpadding
Related
Why does the CSS property overflow:scroll; not work in <td>, while overflow:hidden; works well?
<table border="1" style="table-layout:fixed; width:100px">
<tr>
<td style="overflow:scroll; width:50px;">10000000000000000000000000000000000</td>
<td>200</td>
<td>300</td>
</tr>
</table>
From the CSS specs1,2, I can't see why.
You have to wrap it in a div, that will work:
<table border="1" style="table-layout:fixed; width:500px">
<tr>
<td style="width:100px;"><div style="overflow:scroll; width:100%">10000000000000000000000000000000000</div></td>
<td>200</td>
<td>300</td>
</tr>
</table>
Firstly provide desired height to td and then Apply "float: left" property to respective "td" you want scrollbar to appear.
I got something from here!
Andrew Fedoniouk wrote:
This is actually my question:
"One technical reason is that the overflow property does not apply to
tables." - why? What is this reason?
I'm no expert, but I believe this is
just for backward compatibility with
legacy table behavior. You can check
the "automatic" table layout
algorithm in the spec. I'm pretty
sure that this layout algorithm is
incompatible with the overflow
property (or, more accurately, the
layout algorithm will never result in
the need for any value of overflow
except 'visible').
Yep, this is why I am asking. Seems like there are no formal reasons
why or should not be scrollable but seems like
UA vendors reached some silent agreement in this area. So is the
question.
The spec agrees with you with respect
to elements. Table cells are
supposed to respect overflow, although
Mozilla, at least, appears not to do
so. I can't answer your question in
this instance, although I would still
guess the answer is still tied to
legacy rendering.
The main thread is here.
<table border="1" style="table-layout:fixed; width:500px">
<tr>
<td style="width:100px;"><div style="overflow:scroll; width:100%">10000000000000000000000000000000000</div></td>
<td>200</td>
<td>300</td>
</tr>
</table>
I'm trying to put the colspan, valign and align in the following piece
<td style="background-color:#000333" colspan="4" valign="middle" align="center">
all inside the style="...", to have something like:
<td style="background-color:#000333;colspan:4;valign:'middle'; align:'center'>
Is there any way to do this?
You will be unable to achieve colpan results with CSS I stand corrected, you can in CSS3. But text-align:center will get and vertical-align:middle for vertical alignment.
With that said, please consider using proper CSS rather than stuffing things into the style tags, that will make your (and everybody else's) job much easier in the future. That is as simple as saying
<td class='myclass'>
and then inside your CSS file
td.myclass
{
text-align:center;
vertical-align:middle;
}
You cannot do that because there is no way in CSS to do the job of colspan (except in a special case where its value equals the total number of columns, and even then only using a proposed CSS extension that does not work consistently across modern browsers, not to mention old browsers).
Being a customer service staff with limited access to basic html, I've been assigned a task that beyond my skill about making a decent page of highlight items, after series of search around, I somehow get things working, well, in firefox, when I load up the the same content in Chrome & IE, I found different problem and to my best effort, I have no idea what cause the problem...
You might first wish to look at the firefox version as it display perfectly as I wanted it to:http://jsfiddle.net/kitchellw/TR6v5
(and I don't know why the first line doesn't apply the CSS...)
In IE, the round corner gone, which I won't worry too much... but
padding is gone...
the lower table looks like a mess
I found a way to tackle the image border, just border=0
In chrome,
while the upper section looks ok, the content in lower table seems 'shifted' to right by a few pixels and no longer stay center
Here is the exact code for the problem table at the lower section:
<table class=highlightitem>
<tr>
<td height="200" valign="top" >
<center>
<a href="http://www.digitalbuydirect.com/index.php?route=product/category&keyword=DSC-TX30" target="blank">
<img width=234 src="http://www.digitalbuydirect.com/edm/eDM20130516/TX30.png" /></a>
</center>
</td>
</tr>
<tr>
<td height="200" valign="top" >
<font class=product><B>some text</b></font><br><br>
<font class=content>some text</font><br>
<br>
<font class=pricehighlight><B>price</font><BR>
<font class=content><s>other price</s></font>
</td>
</tr>
<tr>
<td align="right" height="50" valign="bottom" >
<img src="http://www.digitalbuydirect.com/edm/achieve/shopnow_35.png" /> </td>
</tr>
</table>
and finally, I know my code is complex by using multi-table to control the vertical position, and CSS is my friend here, but i were unable to get the 'shop now' icon station at the lower right corner with clickable url attach with it, I found a CSS background image with a display block for the url might work, but the display block still request at least 1 character, which I cannot afford on my image. Any hint or direction would be appreciated.
First of all, you should really clean up your deprecated code.
So far the things I've seen that are deprecated or not supported anymore are as follows:
<center> - Use CSS text-align:center; reference
<font> - Use another element like <p> coupled with CSS text styling
<td align="right"> - Use CSS float:right; reference
<td valign="top"> - Use CSS vertical-align:top; reference
As for your IE padding problem, take a look at this question. I'm not sure if that's applicable though, since you didn't include your CSS in the question, so I don't know how you implemented the padding you already have.
As for centering, using margin:0 auto; will work for statically positioned elements. For absolutely or fixed position elements I do this: #elementID{width:800px[specify width]; left:-400px[negative half of the width]; margin-left:50%;}
I'm trying to build web app designed for mobiles. But I have some links which are extremely large. What i want to do is break these strings if the text doesn't fit, and use the entire string if it fits.
I tried using word-wrap:break-word:
.breakWord {
width: 100%
word-wrap: break-word;
}
My html is:
<table>
<tr>
<td rowspan="2" style="width:10%" >picture</td>
<td colspan="2" style="width:90%" class="breakWord">link</td>
</tr>
<tr>
<td style="width:80%">info1</td>
<td style="width:10%">info2</td>
</tr>
<tr>
</tr>
</table>
This code doesn't fit on the page - a horizontal scroll bar appears.
How can I make the text fit?
If you correct the errors in your source, it will work.
Remove the width:100% from the style block. It conflicts with the inline style in the td, and misses a semicolon
colpan should be colspan
Also, I believe that some browsers can get confused when encountering a colspanned td with a width style. You can safely remove the style="width:90%", since the two tds below set the width correctly already.
Edit:
So it doesn't work everywhere. According to the answers to this question, the problem is with the table: first, the width of the table is calculated, and then the 10% and 90% are taken as the calculated width instead of the available width on the screen.
So a possible solution is to give the table a specific width, and set its table-layout to fixed.
<table style="width:100%; table-layout:fixed">
I am currently re-styling a site but unforunately I am unable to edit any of the markup, which leads me to the following problem...
I have a table, similar to this:
<table>
<tr>
<td>Some content</td>
<td>Some content</td>
</tr>
<tr>
<td>Some content</td>
<td>Some content</td>
</tr>
<tr>
<td>Some content</td>
<td>Some content</td>
</tr>
</table>
and I want to display all the table cells on one line. In good browsers, I'm using:
table tr {
display: inline;
float: left;
}
to achieve this. However, this doesn't work in IE7. Is there any other CSS I can use to achieve the same effect? I have to stress that I have no access to the markup whatsoever and none of the table rows or cells have any way of accessing them directly so there's no way I can position absolutely.
You can't do that, I believe.
A tr is a table row and I'd expect the unexpected when trying to float one.
Besides, any element floated is instantly a block level element, so display: inline is redundant.
(The only exception when using it to prevent double margin bug in IE6 - but only if you have a margin set).
You could restructure the HTML with JavaScript, but I would not recommend you do that:)
I agree with #Pekka that this is illegal. The best course of action here would be to add small js to transform table into somethings else. If you have access to just css you can still do that for IEs by adding a behavior and for other browser if that work - just use your solution.
You can attempt inline-block but styling table elements with things such as float is a sin. You can attempt hiding the entire table and insert some load of loading icon while you extract the table info and display it with semantic markup.
Best course of action in this case is to ask for access. Just say you can't do the work without access to the markup. If they won't let you, just don't do the work.