CODEWITHSUNDEEP
htmlcssfirefoxhtml-table
user300091
user300091

Reputation: 13

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

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>

Upvotes: 1

Views: 14243

Answers (8)

T.J. Crowder
T.J. Crowder

Reputation: 1074335

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.

Upvotes: 1

Mario Menger
Mario Menger

Reputation: 5902

You have two problems here: you start the first span outside the body while spans can only be inside the body. Also you can't end/start spans between table and tr tags.

You should use tbody tags to separate the sections of the table:

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

<BODY>

    <table>

        <tbody class="class1">

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

        </tbody>
        <tbody class="class2">

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

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


    </BODY>
</HTML>

Upvotes: 0

Nick Craver
Nick Craver

Reputation: 630419

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>

Upvotes: 3

Chibu
Chibu

Reputation: 1353

That's just not valid HTML. you can't just have random tags open and close... try something more like this:

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

<BODY>

<table><tr><td>
<span class="class1">
---Insert Hyperlink---<br>
</span>
</td></tr>


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


</BODY>
</HTML>

Upvotes: 0

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195992

Your nesting of tags is a mess..

you cannot have 

<tag1>
 <tag2>
</tag1>
 </tag2>

it has to be

<tag1>
 <tag2>
 </tag2>
</tag1>

and you are also using span between tr which is not allowed

Upvotes: 0

Cinaird
Cinaird

Reputation: 785

Cant you put the class directly on the tr-tag like this:

<table><tr class="class1" ><td>
---Insert Hyperlink---<br>
</td></tr>

be aware that your code is nestled, so try keep the classes direct on tags

Upvotes: 0

Ron Harlev
Ron Harlev

Reputation: 16673

I don't think there should be a problem having a SPAN inside a table assuming it is inside a cell
Make sure the table itself is formatted correctly with proper rows and cells. IE might be rendering the table even if it is broken

Upvotes: 0

PatrikAkerstrand
PatrikAkerstrand

Reputation: 45721

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.

Upvotes: 7

Related Questions