SitePoint Sponsor

User Tag List

Results 1 to 23 of 23
  1. #1
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,526
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Antony, please include a link to the page that shows the problem and specify which cells are not behaving as desired.

    Thanks

  3. #3
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by certificates View Post
    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
    You can try the following but not sure if it is the best solution.

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

  5. #5
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,526
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by certificates View Post
    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
    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 )
    Code:
    .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.

  6. #6
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  7. #7
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,526
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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:
    Code:
    #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:
    Code:
    #table-23 tr {assign tr properties for #table-23 here (there may not be any)}
    #table-23 th,#table-23 td {assign th and td properties for #table-23 here}
    #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.

  8. #8
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    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:
    Code:
    #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:
    Code:
    #table-23 tr {assign tr properties for #table-23 here (there may not be any)}
    #table-23 th,#table-23 td {assign th and td properties for #table-23 here}
    #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.

  9. #9
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  10. #10
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,526
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by certificates View Post
    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.
    A backup made "before changes" would be nice.

    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.

    Quote Originally Posted by certificates View Post
    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
    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.

  11. #11
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    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 Developer Toolbar (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.

  12. #12
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,526
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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 ) 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_

    ed15-3x.gif

  13. #13
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  14. #14
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,526
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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 .

    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

  15. #15
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  16. #16
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,526
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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.

  17. #17
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,526
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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.

  18. #18
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  19. #19
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    You are very close to it!
    Maybe there was a typo in the .subscript class.

    This works in Firefox (not tested in other browsers):
    HTML Code:
    <td><span class="superscript">6</span>/<span class="subscript">12</span></td>
    Code CSS:
    .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.

  20. #20
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,526
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    OK, this is what I came up with for the fraction. Create new "super" and "sub" classes for the code.
    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>⁄<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

    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.

  21. #21
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    ... Create new "super" and "sub" classes for the code ...
    Edit: this is practically the same as Francky's
    Yes, a difference of 0.025em; with a 15px font-size it means a difference of 0,375px.

    But maybe attention for the other super/subscript elements in the page (the not fraction elements), if you use new classes.
    For instance: without changing the html the Saml (fist column, 7th row) will stay as it is:

    If you use the existing classes, the other super/subscript elements go hand in hand without changing the html over there:

  22. #22
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,526
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Francky View Post
    Yes, a difference of 0.025em; with a 15px font-size it means a difference of 0,375px.

    But maybe attention for the other super/subscript elements in the page (the not fraction elements), if you use new classes.
    For instance: without changing the html the Saml (fist column, 7th row) will stay as it is:

    If you use the existing classes, the other super/subscript elements go hand in hand without changing the html over there:
    Quite true, Francky. This site has quite a number of pages and I was being cautious since I did not know how the superscripts appear elsewhere and wanted to suggest adding a little margin/padding before it (thus, a separate class *might* be useful). Color me cautious.

  23. #23
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks both for your thoughts.

    I decided that I would create separate classes for the fractions, though to make it easier for me, I named them fractiontiop and fractionbottom rather than sup & sub

    As ronpat said, using those may conflict with other census pages on the site.

    The styling for 1841 is now completed and 1851 should not be so difficult I hope.

    As they say no doubt I shall return in due course but thanks both once again

    Antony


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •