So. I am creating a small site to test my capabilities.
In my site i have a page that in Firefox looks like this:
The additional files and additional actions buttons are inside a table. and each button is inside a <td> which are set to appear one under another with CSS using display:block; on the <td> element.
The problem is that when i open the page in IE9 or lower the td's are shown inline like this:
Because of this the responsiveness of the page is broken and resizing the viewport will move the page content below the left menu...
Here is the HTML of the tables:
<table class="buttons">
<tbody>
<tr>
<th colspan="2">Additional files:</th>
</tr>
<tr>
<td>
<a id="cv" href="">Curriculum Vitae</a>
</td>
<td>
<a id="cover" href="">Cover Letter</a>
</td>
</tr>
</tbody>
</table>
<table class="buttons">
<tbody>
<tr>
<th colspan="3">Additional actions:</th>
</tr>
<tr>
<td>
<a class="approve" href="">Denie</a>
<span style="display: none;">31</span>
</td>
<td>
Reply
</td>
<td>
Delete
</td>
</tr>
</tbody>
</table>
And this is the CSS:
.buttons {
float: left;
margin: 20px auto 0;
width: 50%;
}
.buttons td {
display: block;
width: 100%;
}
Can anyone suggest me a solution?
Thank you in advance!
You need to set table-layout: fixed; to your table and if still not working add a div inside td and manage the css which might work.
The real answer here is that you shouldn't be using <table> tags for this. What you have there is not a table, and so <table> is not semantically correct.
It's even worse because you're then overriding the default table layout by using display:block, which moves us even further away from wanting to use a <table>.
By using tables like this, and forcing the browser to restructure it with CSS, you're making it quite confusing for the browser. Particularly with the colspan attributes and then three columns of buttons, when you actually want them all in one column. Its easy to see why you'd get inconsistent behaviour with this, especially with older browsers.
So the solution here is to swap your <table> layout for a set of <div> elements. This will be semantically correct, and it will be easier to get it styled consistently. And you'll need less markup as well.
If you really want to carry on using tables for this layout, then you need to re-style all the elements -- display:block on the tr elements doesn't affect the display property of the table, tbody and tr elements, and these would also need to changed. But really, I would avoid that. Just use divs; it'll make things much cleaner.
Related
I'm trying to write some HTML/CSS to display a certain row with some of the elements left-aligned and some of them in the center. This was my HTML code:
<tr class="mainInfo" id="header">
<td> Item </td>
<td> Color </td>
<td> Size </td>
<div class="mid">
<td> Subtotal </td>
<td> Tax </td>
<td> Total </td>
</div>
</tr>
And this is my CSS code:
.mid {
text-align: center;
}
.mainInfo {
font: bold 13px Tahoma;
}
#header {
background-color: #68891;
color: white;
}
But the last three elements are not moving to the center, and I really don't understand why not. I tried putting class="mid" in the <td> tags and that worked, but doesn't that defeat the purpose of DRY?
Fiddle Demo
You cannot put a div instead of td element.
You should validate your HTML code with w3 validator.
If you'll do so you'll see you get this error message:
document type does not allow element "DIV" here; missing one of "TH", "TD" start-tag
Maybe you can do it this way:
<table>
<tr class="mainInfo" id="header">
<td> Item </td>
<td> Color </td>
<td> Size </td>
<td class="center">Subtotal</td>
<td class="center">Tax</td>
<td class="center">Total</td>
</tr>
</table>
JSFiddle example
No, you should not put divs inside tr's or tables.
And you should not use tr's or td's without table-element.
<table>
<tr>
<td>hello world</td>
<!-- This is bare minimum to use tables properly -->
</tr>
</table>
You can insert whatever(not tr or td, but could start new table) you want inside TD-elements though.
It's possible to use other elements to replace these standard ones with css display-property set to table-row etc., but you should stick to conventional tags.
Use colspan/rowspan to span over multiple table columns or rows.
CSS classes are designed to be used as often you need/want to. Only IDs should appear once per page.
Of course you should always keep the DRY concept in mind but in your case it's totally fine. It wouldn't if you would set your .mid class to every <td> because in that case you could just set the properties directly to the <td> element.
middle is not a valid value for text-align, so I'm going to assume, in your CSS, that's meant to be vertical-align. If so, it's because vertical-align will only apply to table cells, not divs - that would explain why it is only being successfully applied to your tds.
Additionally, you shouldn't really put a div inside a table (and shouldn't put a td inside of that) but that's not related to your problem.
Assign one class for left alignment and other for center like so...
.left {
text-align:left;
}
.center {
text-align:center;
}
Asign class to TD elements
<tr class="mainInfo" id="header">
<td class='left'> Item </td>
<td class='center'> Color </td>
</tr>
The items in my table are not center. I'm still a beginner and know that it is bad practice to use tables these days but I feel I should start from the beginning. I have 2 items that I would like to center in the middle of the screen in the same row. Currently, the images are to the left.
<table>
<tr align="center">
<td>
<a href="http://sourceforge.net/">
<img src="Resource/download.png">
</a>
</td>
<td>
<a href="http://sourceforge.net/">
<img src="Resource/info.png">
</a>
</td>
</tr>
</table>
Just going to post this as a seperate answer, because of how horrible the convention to use attributes for styling is. Don't ever use attributes for styling. See the MDN attributes list. See all those thumbs down next to the attribute name? They mean: 'Don't use this attribute'. It does still work, but it's just horrible. Like using deprecated tags like center, using deprecated attributes is just really bad habit. The MDN article mentions how to achieve the same thing as what you'd do with the attribute, but without the deprecated HTML.
In this situation, use:
<table style="width:100%;border:1px solid black;">
and:
<tr style="text-align:center;">
The final fiddle would be this.
Jatin gave you a solution, but he didn't explain it. Your align attribute is set properly and it's working, but the table is only as wide as its contents. The text is centered within the table as you intended, but the table itself isn't centered. Since the table is left-justified by default, it looks like it's not centered.
Especially as a beginner, you should try to do things the right way. It'll be much easier for you later if you adopt good practices early. A table is the wrong thing for what you're trying to do.
An important habit to get into is to put only your content, like text and pictures, into the HTML and put all the code that controls how it looks into CSS. Although the align property is valid (in HTML 4), it means you're putting something that controls the appearance into the HTML. The same goes for the border and width properties.
This is how you should control the appearance of a table:
HTML
<table>
<tr>
<td>
<img src="Resource/download.png">
</td>
<td>
<img src="Resource/info.png">
</td>
</tr>
</table>
CSS
table {
border: 1px solid gray;
}
td {
border: 1px solid gray;
text-align: center;
}
A better way might be like this:
HTML
Google
Yahoo
CSS
a {
display: block;
width: 50%;
float: left;
text-align: center;
}
If you wanted to center more than just a couple of links, you may want to put it into a block or a paragraph.
I put something up on CodePen that shows a few examples of how to accomplish this: http://codepen.io/Ghodmode/pen/iaEvh
Working Fiddle
Small Change:
<table width="100%" border="1">
Is it good solution to put table inside a tag ? Why link doesn't work when it wraps table ?
<a href="/place">
<table>
<tr>
<td>
<span class="place-icon" />
</td>
<td>
My place name
</td>
</tr>
</table>
</a>
I need to implement the next html
No, you don't, and shouldn't. Really. It's invalid, non-semantic, and (perhaps most importantly) won't work reliably because of those reasons.
If all you want is an image and some text (which is linked), use something like:
My Place Name
.button {
display: inline-block;
background-image: url();
background-position: 2px 2px;
padding-left: 16px; /* size of image */
}
Here's a working example: http://jsfiddle.net/RvTp3/
Per comments, here is another example showing an image aligned to the vertical middle when the text wraps: http://jsfiddle.net/RvTp3/1/
it seems to me, that you just want to have a link with icon and text, both linking to /place and that you use <table> just for the layout, right? Why not get rid off the table and do the layout using css?
It's not. You shouldn't.
if you want to enable click on table. then you can just do it by attaching click event to table.
<table onclick="window.location='yoururl'">
<tr>
<td>
<span class="place-icon" />
</td>
<td>
My place name
</td>
</tr>
</table>
I could use some assistance with a rendering issue from the IE7 experts out there; my layout works beautifully on all browsers except IE7, and I can't quite figure out the magic style to get it working.
JSFiddle example of the issue is here: http://jsfiddle.net/rB29C/2/
If you view it in IE7, the link (wineglass image) is pushed down to a second line below the checkbox. My goal is to have them in the same line. If you view the fiddle in IE8+ or any other browser, it is working as expected.
I think it has something to do with the width of the floated element, but I can't figure out the magic style combination to fix this. I do have conditional stylesheets in my app so I can do an IE7 specific style, though I prefer to avoid markup based changes if possible.
I'd love to understand what's going on, too--so I can hopefully learn to avoid this in the future :)
IE7 seems to push items in the cell to the bottom when the width of the cell is too small. I increased the width of td.type to 14% and it seemed to work in the fiddle, but if your table needs to shrink and grow this might not be the best solution(if the table is squished the wine glass will again drop to the bottom). Otherwise you may consider using a set pixel width instead of a %
I've figured it out and the solution is not in CSS but rather in the HTML. Simply move the wine glass picture between different cells like so:
<table>
<tbody>
<tr>
<td class="type">
<input class="checkbox" type='checkbox' />
</td>
<a class="link" href="#"></a>
<td class="name">Name
</td>
<td class="dates">Dates
</td>
<td class="score">Score
</td>
</tr>
</tbody>
</table>
The issue with this is that it only works in the IE7 environment and not in others. Maybe you could condition it with php depending on what browser the page is in.
<?php
$isIE7 = (get_broswer('broswer') == 'IE' && get_browser('version') < 8 )
?>
<table>
<tbody>
<tr>
<td class="type">
<input class="checkbox" type='checkbox' />
<?php if ($isIE7) echo('</td>
<a class="link" href="#"></a>');
else echo('
<a class="link" href="#"></a>
</td> ');?>
<td class="name">Name
</td>
<td class="dates">Dates
</td>
<td class="score">Score
</td>
</tr>
</tbody>
</table>
I'm not sure if you want to avoid php or not, but if you do there is also a JavaScript version I can crank out for you.
I was able to figure out a solution for my problem; I've updated the JSFiddle with the new styles:
http://jsfiddle.net/rB29C/13/
To summarize, I set the following additional style from my original fiddle, and IE now seems to layout and size things properly (including the containing td):
input.checkbox {
display: inline;
float: left;
}
a.link {
display: inline;
float: left;
clear: right;
margin: 0;
}
Hopefully this is helpful to someone else who is struggling with IE7's oddities!
I wonder why IE doesn't seem to recognize the width I specify?
Basically I have this code:
<table>
<tr>
<td valign="top" align="right" class="left_frame"></td>
</tr>
</table>
CSS:
.left_frame {
background: url(images/side.gif) repeat-y;
width: 17px;
}
Even if I add width="17" inside the <td></td> tags, the width still doesn't change. This is quite frustrating because the problem seems to be very simple.
I'd say it's because there's no content in your <td>
Try adding a in there so the cell has some content, and see how that goes.
Alternatively, placing a height on the cell may work as well, depending on your requirements.
Basically the cell is a flat line at the moment, and needs something to tell it how tall it is, in order to draw the background in.
Example: http://jsfiddle.net/MvBf5/