Table Issues using Firefox vs complete rebuild?

HTML & CSS
1

hey there,

I first made a webpage for a friend some years ago, and after short readings, I decided to go for it by PS+slicing, because it was the easiest way to do for me back then.

That went quite ok, but when I was asked to update it this year, I was experiencing some troubles.
after overcoming most of them, there is one last issue regarding the table layout being destroyed
by different browsers. e.g. in firefox 38.0.1 the dotted line on this specific subpage is shifted
(http://rossboth.at/katharina/neu/reportage09a.html) - this is not the case when using Chrome.

This seems to be caused by the insert of a hyperlink at the image/table field above:

<td colspan="7" rowspan="2" width="540" height="14">
       <a target="_blank" href="http://lyaalves.blogspot.co.at/">
        <img src="Bilder/reportage/reportage09a_12.gif" width="540" height="14" alt="">
</td>

When I looked for possible solutions, I stumbled upon many threads, recommending a rebuild
using other types of design - and it seemed, that i missed one (or more) trains since my initial first design.

However:
Could anybody provide a simple suggestion/solution for this issue - or do you agree in recommending making a rebuild?

And if so, do you have any good advices of how to catch up on modern webdesign (my ā€˜knowledgeā€™ ends with html - so even css is new for meā€¦) and how would you start with a new one?

cheers,
bengt

2

To be completely honest, this should be completely rebuilt. I can tell this hasnā€™t been updated in quite a few years.

1 Like
3

Agreed with @RyanReese to start from scratch as I can see lots if issues with it,

but for a quick fix, add a height of 20px (style=ā€œheight: 20px;ā€) to the tr tag that contains the the image link (Bilder/reportage/reportage09a_12.gif )

Oh and for a free course why not use this sites courses on Learnable :

4

Until you do the complete rebuild that is needed, add a display:block to that particular <a>, and maybe a vertical-align:top to that <img>.

1 Like
5

There is no reason to still have a site that uses tables for layout. Rebuild it. It wonā€™t be that hard. One of the main challenges of CSS sites was box model issues. Usage for such browsers is essentially negligible these days.

BTW, I think your table issue is caused by the fact that you didnā€™t close your ANCHOR tag.

6

Iā€™d have thought the fact that some mobile browsers always display borders on tables would have done away with such usage long ago.

7

I believe this comes from a time when mobile was not a consideration. Definitely time for a complete re-code, I think we can all agree on that.

Iā€™ve not been doing this as long as some of you guys, but I canā€™t imagine designing a website without css.

<!DOCTYPE html>
<html>

That would be a good start IMO. Thatā€™s not trying to be funny, html5 is what you need to bring it up to date. And a RWD without any tables, unless you have tables as content of course.

8

That makes no sense. It is a mobile browser running on a mobile that always displays table borders - that is a consideration for mobiles since it means less space can be left between cells while ensuring that the tabular data is still readable - plus it only applies when the page is viewed on a mobile device running a mobile browser that does that.

9

I think the ā€œthisā€ in question,

[quote=ā€œSamA74, post:7, topic:193381ā€]
I believe this comes from a time when mobile was not a consideration.
[/quote]refers to the OPā€™s site, which was built at a time when mobile was not a consideration.

1 Like
10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.