Table not working with CSS and HTML

  • bryanlimy

    (@bryanlimy)


    11 years, 1 month ago

    Hi, I am trying to make a table that looks like this

    However, I am not sure why after I paste the CSS code into EditCSS, and the HTML code to the page I want it to be, the table is not displaying properly.
    It looks like the table is not calling the class at all.

    I tried both inline property like

    <table style="border-collapse: collapse; font-size: 12pt; text-align: left;">
    <tr>
        <th style="height: 2px; border=none"><div class="hurdles-icon"></div></th>
        <th style="height: 2px; border=none">60mH, 110mH, 400mH</th>
    </tr>
    <tr>
        <th style="height: 2px; border=none"><div class="location-icon"></div></th>
        <th style="height: 2px; border=none">London, Ontario</th>
    </tr>
</table>

    But its not working as well.
    I haven’t put the table up on my site yet, not until I get this fixed.
    Does anyone why is this happening?

    Thanks

    P.S. I am using SKT White theme if that matters.

Viewing 8 replies - 1 through 8 (of 8 total)
  • Michael

    (@alchymyth)

    11 years, 1 month ago

    this is invalid code:
    <th style="height: 2px; border=none">
    try:
    <th style="height: 2px; border: none; ">

    the invalid code might have stopped the CSS class to be applied (?);
    try and validate your site to see if you get any error massages or warnings;
    http://codex.ww.wp.xz.cn/Validating_a_Website

    Thread Starter bryanlimy

    (@bryanlimy)

    11 years, 1 month ago

    Oh sorry, that was a typo, I had that, and that didn’t work either.

    Michael

    (@alchymyth)

    11 years, 1 month ago

    I haven’t put the table up on my site yet, not until I get this fixed.

    any chance that you can add the table, and post a live link to the page with the table problem?

    what CSS formatting are you trying to apply?

    what were the results of the validation tests?

    Thread Starter bryanlimy

    (@bryanlimy)

    11 years, 1 month ago

    I just made a new page and post it here

    This is the CSS i have

    .athlete-info-table {
	border-collapse: separate;
	border-spacing: 3px 0;
	font-size: 12pt;
	text-align: left;
}

div.hurdles-icon {
	content: url(http://www.trackieprofile.com/wp-content/uploads/2015/04/hurdles-icon.png);
	width: 25px;
	height: 25px;
}

div.location-icon {
	content: url(http://www.trackieprofile.com/wp-content/uploads/2015/04/Location-icon.png);
	width: 25px;
	height: 25px;
}

    This is the HTML on the page

    <center>
<table class="athlete-info-table">
    <tr>
        <th><div class="hurdles-icon"></div></th>
        <th>60mH, 110mH, 400mH</th>
    </tr>
    <tr>
        <th><div class="location-icon"></div></th>
        <th>London, Ontario</th>
</tr>
</table>
</center>

    Michael

    (@alchymyth)

    11 years, 1 month ago

    are you sure you are using the content property correctly?

    where did you find this way of using content?

    http://www.w3schools.com/cssref/pr_gen_content.asp

    Thread Starter bryanlimy

    (@bryanlimy)

    11 years, 1 month ago

    I am only using content to show the icon, even after I remove the div block, the table is still not showing correctly.

    CrouchingBruin

    (@crouchingbruin)

    11 years, 1 month ago

    I went to your link and I got a Page not Found error. However, I copied & pasted your HTML & CSS into a post and it seems to work. See here.

    Thread Starter bryanlimy

    (@bryanlimy)

    11 years, 1 month ago

    Oh sorry yeah, I took it down.

    That’s weird…

    Thanks tho, I will keep trying

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Table not working with CSS and HTML’ is closed to new replies.