I have a table with a layout that I made. The layout looks well in Google Chrome and Firefox but not in Internet Explorer.
This is how it's looks in Chrome:
This is how it's looks in IE:
This is the table's HTML code:
<table border="1">
<tr>
<td style="width: 46%" colspan="2"></td>
<td style="width: 23%; padding-top: 0.5%" rowspan="2"></td>
<td style="width: 23%; padding-top: 0.5%" rowspan="2"></td>
</tr>
<tr>
<td style="width: 23%" rowspan="2"></td>
<td style="width: 23%" rowspan="2"></td>
</tr>
<tr>
<td style="width: 46%" colspan="2"></td>
</tr>
</table>
How can I resolve these layout differences?
You could try many things to fix this issue...
Try adding the following "hacks" to your html page:
<!--[if IE]>
<link href="/style/ie.css" type="text/css" rel="Stylesheet" />
<![endif]-->
<!--[if !IE]>
<link href="/style/core.css" type="text/css" rel="Stylesheet" />
<![endif]-->
This will force IE to use the rules you specify in ie.css so you can give it the rules you want there. This will also hide the other parts that are used in Google Chrome and Firefox from IE.
Instead of percentages, try using fixed pixel values like
<td style="width: 20px; padding-top: 20px;" rowspan="2">
You can use the following site to validate your CSS to see if it meets
the W3C standards:
http://jigsaw.w3.org/css-validator/
It'll go though your CSS, check compatibility, and spit back errors if
they exist. It'll show you where in your file you have mistakes so you
can go fix them. I don't know about any tools that will fix your CSS
for you... I wouldn't use it though because I wouldn't learn anything
that way.
You can use the following site to validate your HTML and other markup
languages you use:
http://validator.w3.org/
Using these tools will help you make cross-browser compatible
websites... if something is not compatible, you can use these tools
for debugging and fixing your work.
As Rob had pointed out below, IE is outdated and most versions lack HTML5 compatibility, so you will have to come up with solutions if you're going to be making cross-browser compatible sites.
I think it because IE will try and fill the remaining space it sees
instead of using rowspan
try using height="33%" or height="66%"
or try both
Define height for each row like this:
<table border="1" style="width:100%; height: 100%">
<tr style="height: 33%">
<td style="width: 46%" colspan="2"></td>
<td style="width: 23%; padding-top: 0.5%" rowspan="2"></td>
<td style="width: 23%; padding-top: 0.5%" rowspan="2"></td>
</tr>
<tr style="height: 33%">
<td style="width: 23%" rowspan="2"></td>
<td style="width: 23%" rowspan="2"></td>
</tr>
<tr style="height: 33%">
<td style="width: 46%" colspan="2"></td>
</tr>
</table>
Tested on IE8 and IE 11
Related
I am trying to create a HTML table where hovering over a cell adds additional information. The problem is that the site I am working on does not allow <script> or <style> tags for security reasons (?) so I am extremely limited in that regard.
<table style="height: 100px; width: 50%; text-align: center;" bgcolor="blue">
<tbody>
<tr>
<td style="width: 50%;" colspan="1">First</td>
<td style="width: 50%;" colspan="1">Second</td>
</tr>
<tr>
<td style="width: 50%;" colspan="1">Third</td>
<td style="width: 50%;" colspan="1">Fourth</td>
</tr>
</tbody>
</table>
I've seen tons of other threads when googling this issue, some people said to insert onmouseover and onmouseoutbut that's been disabled on the site too.
Ideally I wish I could do something like:
<td style="width: 50%; p:hover:after{content: 'Hidden Info'};" colspan="1">
<p>First</p>
</td>
But evidently that isn't allowed. So is there a way to insert text when the cell is hovered over without using Javascript or <style> tag? And if not what should I do to get the desired effect?
I'm having trouble with a table's behaviour in Firefox. I want a table consisting of two columns in the ratio 3:1. The first column includes 3 images in a second table which should resize to fit into the column.
In Chrome the images resize to fit into the first column, which is correctly set to 75%. They do this whether I specify a max-width or do not give them any size attributes. However, in Firefox, the images do not resize and instead the cell expands to be greater than 75%, meaning that the contents of the second column becomes squashed.
The structure of the code looks like this:
<table border="0" cellpadding="10" cellspacing="10" style="width: 100%;">
<tbody>
<tr>
<td style="vertical-align:top;width:75%;">
<table cellpadding="2" cellspacing="0">
<tbody>
<tr>
<td>
<img src="image1.jpg" style="max-width:625px;" />
</td>
<td rowspan="2">
<img src="image2.jpg" style="max-width:240px;" />
</td>
</tr>
<tr>
<td>
<img src="image3.jpg" style="max-width:625px;" />
</td>
</tr>
</tbody>
</table>
</td>
<td>
Second column
</td>
</tr>
</tbody>
</table>
How can I adapt this code so that it works correctly in Firefox as well as in Chrome? I've read other related questions, but haven't been able to find a solution I can get to work.
P.S. Please no comments on how I shouldn't be using CSS like this. I have my reasons for not using a proper stylesheet while I'm playing around.
Unless I'm missing the boat, why don't you simply assign a relative width to the image? A value of 100% will ensure the image resizes in tandem with its parent table cell:
<table border="0" cellpadding="10" cellspacing="10" style="width: 100%;">
<tbody>
<tr>
<td style="vertical-align:top;width:75%;">
<img src="https://www.google.ca/images/srpr/logo11w.png" style="width:100%;" />
</td>
<td>
Second column
</td>
</tr>
</tbody>
</table>
ref: http://jsfiddle.net/j26Fm/
The trick here I would say is table-layout: fixed;. It does require some additional rules but table-layout is what brings it all together.
Check out: http://codepen.io/pstenstrm/pen/kLKxz
This is worked for me, in IE, FF and Chrome.
<table style="table-layout: fixed; width: 100%; border: 0; cellspacing: 0; cellpadding: 0;">
and
<tr valign="middle">
<td style="width: 25%;"></td>
<td style="width: 25%;"></td>
<td style="width: 25%;"></td>
<td style="width: 25%;"></td>
</tr>
This is the code that I trying
CSS
<style>
.myposition {
position:absolute;bottom:0; margin-bottom:0px; margin-top:30px;
}
</style>
Code
<td width="300" valign="top" style="position:relative;">
<div style="top:0">
<table width="310" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top">content</td>
</tr>
<tr>
<td align="center" valign="top">content</td>
</tr>
</table>
</div>
<div class="myposition">
<table>
<tr>
<td align="center" valign="bottom">content</td>
</tr>
<tr>
<td valign="top" align="center">content</td>
</tr>
</table>
</div>
</td>
This code is working perfectly in IE as I want but not going well in all other browsers, the div with absolute positioning is overlapping the div above it.
What I am trying to make is this, please check
http://www.spoiledagent.com/ads/Help.jpg
You can check it at http://www.spoiledagent.com/members/about_hanu.php
I have given access to this link
Gecko doesn't support table cells being absolute containing blocks. That's on the one hand a bug in Gecko and on the other a lack in the spec (which explicitly says that the behavior of specifying position: relative on a table cell is not defined).
I have this code:
<tr>
<td width="40%" align="left" class="form_cell">
<span class="sub_header">Update or Delete</span><br />
Please select whether you would like us to update this contacts details, or delete them from the system.
</td>
<td width="60%" align="left" class="form_cell">
[class=form__parser func=updateDetails__updel(150.$update_or_delete$.true)]
</td>
</tr>
<tr>
<td width="100%" align="left" colspan="2" id="ammend_contact_details" style="display: none;">
<table border="0" cellspacing="0" cellpadding="0" width="100%" align="left">
<tr>
<td width="40%" align="left" class="form_cell">
<span class="sub_header">New Title</span><br />
Please enter the contacts new title, IE Mr, Mrs, Dr, Miss, Ms
</td>
<td width="60%" align="left" class="form_cell">
<input type="text" name="update_contact_title" class="input" size="48" maxlength="6" value="$update_contact_title$" />
</td>
</tr>
</table>
</td>
</tr>
The code which start with [class=form__parser...] creates a drop down list. If you click one of the options, the cell below it (ID ammend_contact_details) is displayed, otherwise its hidden.
The website address for this page is: http://www.westlandstc.com/index.php?plid=6#eyJwbGlkIjoiNTkiLCJjbGlkIjoiNDQ2Iiwic2NsaWQiOiJudWxsIiwiZHluYW0iOiJudWxsIiwiYXBwSWQiOiJudWxsIn0= and the element in question is at the very bottom of the page.
The problem is, the colspanattribute works fine in internet explorer (surprise surprise), however, in Chrome, all the content which is supposed to be spread over the 2 parent columns, only goes into the 1st column.
I have narrowed the bug down further, if I remove the style="display: none" attribute it works fine. Everytime I try to change either the display style or visibility style, Chrome places everything back into the first column.
In addition, I tried setting the background colour of the cell which spans 2 columns to red. In internet explorer, again this works as expected. In chrome, no background-color is displayed.
Any ideas how to fix this?
What are you setting the 'display' property to in order to show it? iirc you would need to use 'display:table-cell' (or similar - can't remember the exact value) in order for chrome to treat it as a table cell
style.display=''
works for me with chrome.
'display:table-cell'
does not
Rather than adding the CSS property display:inline to the <td>, which for some reason IE is happy with and Chrome is not, I would update your JavaScript to just remove the display:none style and let the browser's default display:table-cell take affect.
In the <select name="update_or_delete"> onchange method simply have:
if(this.value=='Update') {
document.getElementById('ammend_contact_details').style.display='';
} else {
document.getElementById('ammend_contact_details').style.display='none';
}
Chrome doesn't seem to respect colspan unless it has at least 1 row exactly matching number of columns in the table. I tried to make a grid with 2 items in 1st row and 3 items in 2nd row. For Firefox that's all you need:
td {
display: table-cell;
padding: 10px;
text-align: center;
background: #eee;
}
<table style="width: 100%">
<tr>
<td colspan="3" style="width: 50%">box 1.1</td>
<td colspan="3" style="width: 50%">box 1.2</td>
</tr>
<tr>
<td colspan="2" style="width: 33.33%">box 2.1</td>
<td colspan="2" style="width: 33.33%">box 2.2</td>
<td colspan="2" style="width: 33.33%">box 2.3</td>
</tr>
</table>
But it doesn't work on Chrome and Edge, even though all <td>s have default styling: display: table-cell. To fix it you need to add empty row with exact match for column count so it finally looks like this:
td {
display: table-cell;
padding: 10px;
text-align: center;
background: #eee;
}
<table style="width: 100%">
<tr>
<td colspan="3" style="width: 50%">box 1.1</td>
<td colspan="3" style="width: 50%">box 1.2</td>
</tr>
<tr>
<td colspan="2" style="width: 33.33%">box 2.1</td>
<td colspan="2" style="width: 33.33%">box 2.2</td>
<td colspan="2" style="width: 33.33%">box 2.3</td>
</tr>
<tr style="visibility: hidden">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
I need to display an HTML with various cells merged across rows.
Here's a test that illustrates the requirement and issue:-
<html>
<head></head>
<body>
<table cellspacing="0" cellpadding="0" border="1">
<tbody>
<tr>
<td rowspan="2" style="height: 40px">
<div style="width: 100px;">RS=2</div>
</td>
<td rowspan="1" style="height: 20px">
<div style="width: 100px;">RS=1</div>
</td>
<td rowspan="3" style="height: 60px">
<div style="width: 100px;">RS=3</div>
</td>
</tr>
<tr>
<td rowspan="4" style="height: 80px">
<div style="width: 100px;">RS=4</div>
</td>
</tr>
<tr>
<td rowspan="2" style="height: 40px">
<div style="width: 100px;">RS=2</div>
</td>
</tr>
<tr>
<td rowspan="2" style="height: 40px">
<div style="width: 100px;">RS=2</div>
</td>
</tr>
<tr>
<td rowspan="1" style="height: 20px">
<div style="width: 100px;">RS=1</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
When displayed in Chrome it is OK, but in FF3.6 and IE8 it is not (look at the two "RS=2" in column one, they have the same rowspan and height but are visibly different). Row heights are incredibly important to me as I display another table next to this with single rows of fixed height that needs to align with this table).
Can anybody please advise how this can be corrected in Firefox and IE?
Here's a fix that works in Firefox but not Internet Explorer. Remove the height attribute from the cells, then either add
style="height:20px;"
to all rows OR
add this style tag inside the head:
<style>
tr{height:20px;}
</style>
This works in Firefox and Chrome is unaffected, but IE still makes a mess.
Firefox and IE both have a history of bugs when rendering tables.
discussion of table cell height rendering bug in Firefox
Some newest "intelligent" browser dectect eventual "not closed tag" errors and show it as your tree is well done, but it is not always like this.
Check all opened tags are closed, there must be a non-closed one.
If you use Dreamweaver you can colapse/expand tags by the menu on the left. ->...<- or <-...->
Without a proper doctype, you are in quirks mode and IE, in particular, will never attempt to perform like all the other far more modern browsers. Not that is does a good job of it in any case.