Cross Browser Incompatibility?

I have checked my web page is Chrome Firefox, Opera and it works fine.

When I come to IE 9 though, there are six cells in a table that do not work,

I have read about conditional statements and IE but it seems far to complex for my limited knowledge.

Is there a fix, or do I have to put up with it.

A second minor point is that column two is twice as wide as column 3. Is that simply because there are two lines of text, and is it possible to adjust this without affecting the other vertical cells

Thanks

Antony

Antony, please include a link to the page that shows the problem and specify which cells are not behaving as desired.

Thanks

Yes, I guess that would have been a good idea !

This is the link http://www.c5d.co.uk/ed15.php

The ones that don’t act as intended are all near the very top of the table and contain the words

  1. Uninbited or Building, 2) Inhabited 3) Male 4) Female 5) Whether born in the same county 6) Whether bornn S I or F P

Thanks for checking

Antony

You can try the following but not sure if it is the best solution.

additional code:


.vertical p.rotate2{
width:120px;
line-height:1.1;
margin:0 -30px
}
p.censustable{padding:0 5px}

I believe you can fix the width of column 2 by adding a <br> tag after the word “Uninhabited” (worked for me). The unbroken line of text is pushing the cell to expand.

Deleting or setting the following margin to zero seems to help equalize the columns a little more. (try before you buy :slight_smile: )


.vertical p.rotate3 {
   margin:0;    /* changed from -10px */
}

The cells that you named appear to be too short. I believe that IE (I’m using 10) does not follow the same rules of table behavior (rowspan) as the other three browsers, although it may be more than that. I have not tried anything to mend it, yet.

Thanks, the adjustment to the margin works fine, and the additional br also helped.

It does seem to be a poblem with the way IE renders rowspan as the cell headed where born is supposed to be just one cell tall. ( I use IE 9)

Maybe adding no border options to a couple of cells >>

Thanks for the first bit anyway

Antony

Antony,

This isn’t exactly good news and it isn’t immediately related to the current issue, but it is nevertheless important so it is worth mentioning.

There is a consistent flaw in your CSS which was mentioned several months ago. The <th> and <td> elements are not correctly addressed.

This is an example:


#table-23 tr,th,td {...}
#table-3 tr,th,td {...}
.table-2 td,th,td {...}
.table-5 td,th,td {...}
.table-6 td,th,td {...}
#table-4 tr,th,td {...}
#table-7 tr,th,td {...}

The way the above code is written, the th and td styles are not being applied uniquely to each table (as you might think they are). Instead, they are being applied to ALL <th> and <td> selectors on any page that uses this stylesheet. Furthermore, because they are cascading, it is only the last appearance of each property that is being applied.

Also, because the <tr> element does not use the same properties as the <th> and <td> elements, the <tr> element should be addressed separately, like this:


#table-23 tr {[i]assign tr properties for #table-23 here (there may not be any)[/i]}
#table-23 th,#table-23 td {[i]assign th and td properties for #table-23 here[/i]}
#table-3 tr {...}
#table-3 th,#table-3 td {...}
.table-2 tr {...}
.table-2 th,.table-2 td {...}
.table-5 tr {...}
.table-5 th,.table-5 td {...}
.table-6 tr {...}
.table-6 th,.table-6 td {...}
#table-4 tr {...}
#table-4 th,#table-4 td {...}
#table-7 tr {...}
#table-7 th,#table-7 td {...}

I suspect that all of your stylesheets contain this flaw.

Correcting this will not fix the current problems that you have reported, but it will assure that your styles are being properly applied where you want them.

Thanks for your comments.

My immediate problem has now been solved with the aid of a couple of in-table styles. There is just one “loose” cell which I cannot get rid of. It’s the blank cell under “place”. I can’t hide the borders with colour, or no borders or anything.

Moving on to your other comment,

I am uncertain how you suggest that I amend the style sheet. (There is only one on the vast majority of my pages).

I know it isn’t just copy & paste.

Are the dots you have typed to be read as ditto marks ? If so, fine, I shall do that.

The difficulty may be determining which properties relate to the tr and which to the td & th

thanks

Antony

A backup made “before changes” would be nice. :slight_smile:

During my experimenting last night, I was able to get rid of that stray cell. However, I must see what you have done with your code since then before suggesting anything. Later today, probably.

Yes, the dots should be read as ditto marks.

There are usually no CSS styles applied to table rows, so you can omit styling the “tr” selector in CSS unless you identify a specific need for it.

The difficulty that you will experience is that some cells will render differently because those elements are being targeted correctly and the CSS styles are being applied as intended for the first time, whereas they have not been in the past. You will have to examine each relevant page in your site as you repair the CSS. Tedious at this stage, but very necessary.

More later.

Maybe it’s a good idea to check the html-validator and the css-validator every now & then:

I guess the combination of these two (and the different error handling of the browsers) can reduce the IE rendering deviations.

For the position of the table-cells you can also have a look with the [U]Developer Toolbar[/U] (menu: Outline > Outline tables > Outline table cells).

Tip aside: a somewhat lighter page background-color (f.i. #A5B4C3) can make a better readability and accessibility.

Antony,

Open this link in your browser and copy the folder to your PC. It contains a revised version of ed15.php and censusstyle.css.

Open ed15 in your browser and see if it is suitable. (It should look like the screenshot below :slight_smile: ) IE9 will look a little different, but acceptable IMO.

The new CSS for ed15 is at the bottom of the stylesheet. I did not attempt to repair any of the other coding concerns on the stylesheet nor the HTML although I did put an explanation about addressing the table selectors near the top of the stylesheet. You can delete it, of course.

When you open ed15, you will find the cells at the top of the page colored shades of light gray (like the screenshot.) The CSS that is coloring those cells is the last three lines in the stylesheet. I left the colors so you can see how and why all but 3 rows were deleted. Only 3 are necessary. You can delete the CSS lines and the background color in those cells will again be transparent.

The code will withstand significant text-only zooming. Tested in IE10, Opera, Chrome, and FF. IE8 does not rotate the text.

https://www.dropbox.com/sh/fzlrs125fmbhc4z/zX8WHoUpV_

Thank for your efforts. It all works a treat and I am sure that you must have spent ages doing this.

There were two problems with the download and that was both the CSS and the HTML came through in one big line. !

When putting in into a standard layout, I noticed that this bit on my original page

<!-- BEGIN c5dmenu.php INCLUDE –>
<?php include $_SERVER[“DOCUMENT_ROOT”] . “/c5dincludes/c5dmenu.php”; ?>
<!-- END c5dmenu.php INCLUDE –>

was replaced with all the coding from c5dincludes/c5dmenu.php

Are you suggesting that I don’t use that any more ? Or were you working from what you downloaded initially. ?

I took the liberty of adjusting the HTML to include the call for the PHP file, and removing what was contained in that call, and it still shows fine in the four browsers I have tested. IE 9 is definitely not a problem !

I haven’t had th eopportunity to lay out the cSS properly yet so that I can read your comment within that and work is now calling !

I’l have to do that this evening.

Thanks again for all the time and effort

Antony

I was working with the code that I downloaded from the link in post #3. The php include is replaced with the HTML that it calls. By all means, replace the menu HTML with your php include :slight_smile: .

Yes, that was my project for today. Glad that it works for you.

Was the code not formatted? If so, that’s weird. If you can open a WinZIP file, I can ZIP the two files and you can unpack them.

I have a PC so lines end with CRLF (carriage return / line feed). Mac and Linux are different in case you use one of those computers.

Let me know what you need or what you find.

Thanks

Thanks, it all came down as one big long line of letters, numbers etc.

However I have re ordered it properly, ( I think) and it all works fine.

Once again thanks for your efforts.

I do have a minor query.

I am trying to type 1/12 as a fraction in one table cell. It’s in this page www.c5d.co.uk/workhouse.php and you will see that I have adapted this table. into a slightly different format. (www.c5d.co.uk/1841ed1.php through to 1841ed9 php all work fine as does ed15.php with the original design.)

The CSS I am using is;

.superscript {font-weight:bold;font-style:italic; position: relative; bottom: 0.2em; font-size: 0.6em; display:inline;}

.subscript {font-size:10px; font-weight:bold; font-style:italic; display:inline;}

I thought that this <td><p><span class=“superscript”>1</span>⁄<span class=“subscript”>12</span></p></td>

or this <td><p class=“superscript”>1⁄<span class=“subscript”>12</span></p></td>

would have done the trick, but it appears that the subscript element is not being recongised.

I have checked with the FF browser and it tells me that the font size for the subscript is 15px and inherited from table.
Yet the superscript element does not inherit anything from table

Can you suggest why and what I should do to rectify that please ?

Thanks

Antony

Antony, have you applied the changes to this page? http://www.c5d.co.uk/ed15.php

If YES, it looks bad. If NO, then would you please give me a link to the working page?

Can you unpack a WinZIP or 7Zip file?

It looks like it would have been easier had I just posted the changes into the forum. Now I need to see exactly what your code says.

I’ll look at the two new pages after we get ed15 working.

Antony,

The problem was on my end. The files were not saved with the normal CRLF. They were LF only.

I have placed new files in the dropbox. Please download the new files and give them a try. I have included the screen shot so you can see how they should look when opened. You should be able to drag- and-drop or “copy-and-paste” the “ed15” folder onto you desktop and the files will come with it.

Let me know.

Thanks.

I’m sorry to give you a shock:- I hadn’t uploaded it ! It will look much better now when you refresh the browser.

The problem page is http://www.c5d.co.uk/workhouse.php .

The table headings you have designed still work great, even though they are slightly adjusted to take into account the different tabular format

It’s just the fraction I can’t get to work and I can’t see why

Thanks

You are very close to it! :slight_smile:
Maybe there was a typo in the .subscript class.

This works in Firefox (not tested in other browsers):

<td><span class="superscript">6</span>/<span class="subscript">12</span></td>
.superscript {
    bottom: 0.2em;
    display: inline;
    font-size: 0.85em;
    font-style: italic;
    font-weight: bold;
    position: relative;
    margin: 0 1px;
}
.subscript {
    font-size: 0.85em;
}

Then (without text-zooming) the superscript and the subscript have a computed font-size of 12.75px, and the slash / in the middle has a computed font-size of 15px (the normal font-size in the cells). The cell-height stays the same.
The margin L/R of 1px for the superscript does it better for the italic font-style.

OK, this is what I came up with for the fraction. Create new “super” and “sub” classes for the code.


.vertical .super {
    position:relative;
    bottom:0.2em;
    font-size:0.875em;
    margin:0 1px;
}
.vertical .sub {
    font-size:0.875em;
    margin:0 1px;
}

<td><span class="super">1</span>&#8260;<span class="sub">12</span></td>

(the forum changed the HTML character code into a graphic slash. Keep your character code &#8260-; (w/o the dash).)

Edit: this is practically the same as Francky’s :slight_smile:

The revised code that I put in the dropbox fixed a couple of errors in the HTML and CSS. It would be worthwhile to give it a look.