Firefox and IE - Firefox handling of <span> inside tables (html and css)

html css firefox html-table

13,707

Solution 1

You can't have a span there is the short answer, only a <tr>

<body> should contain your elements, nothing but <html> should contain <body>

What you are probably after is this:

<html>
<head>
  <title>Title Page</title>
  <style type="text/css">@import url("/css/main.css");</style>
</head>
<body>
  <span class="class1">
    <table>
      <tr>
        <td>---Insert Hyperlink---<br></td>
      </tr>
    </table>
  </span>
  <span class="class2">
    <table>
      <tr>
        <td>---Insert Hyperlink---<br></td>
      </tr>
    </table>
  </span>
</body>
</html>

Another thing to keep in mind, there's no reason for those spans (table can have a class) or those tables (if you're only using a single cell, use a <div> or something), a simple <div> would probably do everything you want:

<div class="class2">
   ---Insert Hyperlink---
</div>

Solution 2

I'm sorry to say, but your HTML is a mess. The reason that IE will display the span is probably a remnant of the browser wars, when Netscape and Microsoft constantly battled each other of who could make sense of the worst HTML. The only tags allowed inside the <table>-tag are <legend>, <colgroup>, <tbody>, <tfoot>, <thead> and <tr>. If you want your <span> to be visible, place it in <td> inside <tr>

Something like:

<HTML>
<HEAD>
<title>Title Page</title>
<style type="text/css">@import url("/css/main.css");</style>
</HEAD>

<BODY>

<table>
  <tr>
    <td>
     ---Insert Hyperlink---<br>
    </td>
  </tr>

  <tr>
    <td>
      <span class="class2"></span>
       ---Insert Hyperlink---<br>
    </td>
  </tr>
</table>
</BODY>
</HTML>

Also, decide if you are going to use lower or upper case characters in your tags. It makes it easier to follow your code.

Solution 3

You can't have span directly contained by table. Basically, text in tables must be contained within cells (td or th), which in turn must be contained by rows (tr), which in turn should be contained by tbody, thead, or tfoot elements, which then can be contained by table. As of HTML5, tbody can formally be implied (whereas previously that was just something browsers did, despite a previous spec requiring something between table and tr).

The HTML validation service is useful for dealing with these sorts of things.

13,707

Author by

user300091

Updated on November 19, 2022

Comments

user300091 over 1 year

I am having difficulties getting a span tag to work properly inside a table. It appears as if the entire span tag is being ignored that is defined anywhere in between table tags in Firefox, but in IE this shows up correctly.

Maybe I am missing something, but I have created a small example CSS and html file that displays differently in Firefox and IE. Hopefully someone can tell me why it is behaving this way or how I can rearrange the html to resolve the issue in Firefox.

---main.css---

.class1 A:link {color:#960033; text-decoration: none}
.class1 A:visited {color:#960033; text-decoration: none}
.class1 A:hover {color:#0000FF; font-weight: bold; text-decoration: none}
.class1 A:active {color:#0000FF; font-weight: bold; text-decoration: none}

.class2 A:link {color:#960033; text-decoration: none}
.class2 A:visited {color:#960033; text-decoration: none}
.class2 A:hover {color:#0000FF; text-decoration: none}
.class2 A:active {color:#0000FF; text-decoration: none}

---test.htm---

<HTML>
<HEAD>
<title>Title Page</title>
<style type="text/css">@import url("/css/main.css");</style>
</HEAD>

<span class="class1">
<BODY>

<table><tr><td>
---Insert Hyperlink---<br>
</td></tr>

</span><span class="class2">

<tr><td>
---Insert Hyperlink---<br>

</td></tr></table>

</span>
</BODY>
</HTML>

Quentin about 14 years

validator.w3.org
Robusto about 14 years

Gawd, such a mess ... it would be hard to write markup this bad. I especially recoil at the <span> that starts before the <body> (!) and ends before the </body>!

Matt Blaine about 14 years

What Nick said. Technically, IE should ignore it there too. Wrap it in a <tr><td></td></tr>, you can always us the td's colspan attribute if you have to.