I've been trying to adjust a <td> from my website in a place, but I just can't adjust its size, making the website create a rollbar in the bottom leading to the right side because the <td> is exceeding the page's size.
The part in question is the "right-column" that is in charge of the tip, the horoscope and the download banner below.
I'm new with web programming and I'm having a lot of trouble configuring this website, since it's an existing old background from an extinct website, so it's very hard to update it to new techs. It's already been a miracle I made some things that were in Flash being "converted" to Javascript/CSS.
<table id="main_bloc" border="0">
<tbody>
<tr>
<td style="border-bottom: 1px solid white; --darkreader-inline-border-bottom:#303436;" colspan="2" id="header_bloc" onmouseleave="showNavbarSection(-1);" data-darkreader-inline-border-bottom="">
<div id="logo" onmouseenter="showNavbarSection(-1);"><img src="medias/images/winxie.gif" onmouseover="this.src='medias/images/winxie2.gif';" onmouseout="this.src='medias/images/winxie.gif';" style="width: 106%;height: 153px;top: 0px;left: 3px;position: relative;"></div>
<table id="language_selector" onmouseenter="showNavbarSection(-1);">
<tbody>
<tr>
<td><img src="medias/images/lang_top.gif" id="language_selector_border" style="margin-bottom: -1px;"></td>
</tr>
<tr>
<td><img src="medias/images/menu_lang_button_img_en_arrow.gif" onclick="showLanguages();" id="language_selector_item"></td>
</tr>
<tr name="other_language" style="display:none">
<td><img src="medias/images/menu_lang_button_img_it.gif" id="language_selector_item"></td>
</tr>
<tr name="other_language" style="display:none">
<td><img src="medias/images/menu_lang_button_img_fr.gif" id="language_selector_item"></td>
</tr>
<tr name="other_language" style="display:none">
<td><img src="medias/images/menu_lang_button_img_es.gif" id="language_selector_item"></td>
</tr>
<tr name="other_language" style="display:none">
<td><img src="medias/images/menu_lang_button_img_de.gif" id="language_selector_item"></td>
</tr>
<tr name="other_language" style="display:none">
<td><img src="medias/images/menu_lang_button_img_pt.gif" id="language_selector_item"></td>
</tr>
<tr name="other_language" style="display:none">
<td><img src="medias/images/menu_lang_button_img_ru.gif" id="language_selector_item"></td>
</tr>
<tr name="other_language" style="display:none">
<td><img src="medias/images/menu_lang_button_img_tr.gif" id="language_selector_item"></td>
</tr>
<tr>
<td><img src="medias/images/lang_bottom.gif" id="language_selector_border" style="margin-top:-2px;"></td>
</tr>
</tbody>
</table>
<table id="navbar">
<tbody>
<tr>
<td onmouseover="showNavbarSection(0);"><span id="navbar_section"><strong>News</strong></span></td>
<td> <span id="navbar_star">★</span> </td>
<td onmouseover="showNavbarSection(1);"><span id="navbar_section"><strong>Story</strong></span></td>
<td> <span id="navbar_star">★</span> </td>
<td onmouseover="showNavbarSection(2);"><span id="navbar_section"><strong>Games</strong></span></td>
<td> <span id="navbar_star">★</span> </td>
<td><span id="navbar_section"><strong><a id="navbar_section" href="#Parents"></a>Parents</strong></span></td>
<td> <span id="navbar_star">★</span> </td>
<td onmouseover="showNavbarSection(3);"><span id="navbar_section"><strong>Fun Zone</strong></span></td>
<td> <span id="navbar_star">★</span> </td>
<td onmouseover="showNavbarSection(4);"><span id="navbar_section"><strong>Community</strong></span></td>
</tr>
</tbody>
</table>
<table class="navbar_subsections" style="display:none" id="navbar_subsection_0" onmouseover="showNavbarSection(0);" onmouseleave="showNavbarSection(-1);">
<tbody>
<tr>
<td> </td>
<td>Announcements |</td>
<td> Events |</td>
<td> Articles </td>
<td> </td>
</tr>
</tbody>
</table>
<table class="navbar_subsections" style="display:none" id="navbar_subsection_1" onmouseover="showNavbarSection(1);" onmouseleave="showNavbarSection(-1);">
<tbody>
<tr>
<td> </td>
<td>Summary |</td>
<td> Characters |</td>
<td> World Locations </td>
<td> </td>
</tr>
</tbody>
</table>
<table class="navbar_subsections" style="display:none" id="navbar_subsection_2" onmouseover="showNavbarSection(2);" onmouseleave="showNavbarSection(-1);">
<tbody>
<tr>
<td> </td>
<td>Winx Adventure |</td>
<td> Mini-Games |</td>
<td> Web Avatar </td>
<td> </td>
</tr>
</tbody>
</table>
<table class="navbar_subsections" style="display:none" id="navbar_subsection_3" onmouseover="showNavbarSection(3);" onmouseleave="showNavbarSection(-1);">
<tbody>
<tr>
<td> </td>
<td>Music |</td>
<td>Videos |</td>
<td> Wallpapers |</td>
<td> Magazines </td>
<td> </td>
</tr>
</tbody>
</table>
<table class="navbar_subsections" style="display: none;" id="navbar_subsection_4" onmouseover="showNavbarSection(4);" onmouseleave="showNavbarSection(-1);">
<tbody>
<tr>
<td> </td>
<td>Forums |</td>
<td> FAQ |</td>
<td> Bug Report |</td>
<td> Contact us </td>
<td> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr id="submenu">
<td colspan="2">
<iframe style="width: 100%; position: relative; left:15" src="././pages/Iframes/HotLinks.php" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" data-ruffle-polyfilled=""></iframe>
</td>
</tr>
<tr id="container">
<td id="container_left_column">
<div style="position: relative; margin-top: 11px; margin-left: 15px;">
<iframe id="ranking_iframe" scrolling="no" frameborder="0" src="pages/Iframes/Access_guests.php" data-ruffle-polyfilled=""></iframe>
</div>
</td>
<td id="container_middle_column" style="vertical-align: top;">
<img onclick="javascript:Previous();" class="previous" style="position: relative; top: 274px; left: 541px; cursor: pointer;" src="././medias/images/arrow_left.png" onmouseover="this.src='././medias/images/arrow_left_hover.png';" onmouseout="this.src='././medias/images/arrow_left.png';"><img onclick="javascript:Next();" class="next" style="position: relative; top: 274px; left: 625px; cursor: pointer;" src="././medias/images/arrow_right.png" onmouseover="this.src='././medias/images/arrow_right_hover.png';" onmouseout="this.src='././medias/images/arrow_right.png';"><table id="content_videobox" cellspacing="1" cellpadding="1" border="0">
<tbody>
<tr style="">
<td id="content_videobox_firstcolumn" rowspan="3">
<div id="content_videobox_iframe" frameborder="0" allowfullscreen="" volume="0"><div class="ckin__player default ckin__overlay"><video class="file" preload="metadata" poster="././medias/images/Video_Thumbs/happy2021thumb.png" src="././medias/videos/Happy_2021.mp4" data-overlay="1"></video><button class="default__button--big toggle" title="Toggle Play"><i class="ckin-play"></i></button><div class="default__controls ckin__controls"><button class="default__button toggle" title="Toggle Video"><i class="ckin-play"></i></button><div class="progress"><div class="progress__filled"></div></div><button class="default__button volume" title="Volume"><i class="ckin-volume-medium"></i></button><button class="default__button fullscreen" title="Full Screen"><i class="ckin-expand"></i></button></div></div></div>
</td>
<td id="content_videobox_secondcolumn">
<h2>
<span class="video-title" id="content_videobox_videotitle" style="text-shadow: 1px 0px 0px #560027;">Happy New Year!</span>
</h2>
<p style="position:relative; top: 150px;">
<span class="video-description" id="content_videobox_videotext" style="text-shadow: 1px 0px 0px #560027;">2021 arrived. Your favorite Winx fairies and specialists are hoping it will be better than the last one. The witches? Not sure.</span>
</p>
</td>
</tr>
<tr style="">
<td id="content_videobox_firstcolumn2">
</td>
</tr>
<tr style="">
<td id="content_videobox_secondcolumn2" style="text-align: center">
<span class="video-number" style="color: white; font-family: Arial; font-size: 20px; text-shadow: rgb(86, 0, 39) 1px 0px 0px; --darkreader-inline-color:#e8e6e3;" data-darkreader-inline-color=""> 1/4 </span>
</td>
</tr>
</tbody>
</table>
<div id="content_mininews_frame">
<iframe id="content_mininews_iframe" frameborder="0" src="pages/Mininews/NewsContentV2.php" data-ruffle-polyfilled="">Browser not compatible.</iframe>
</div>
</td>
</tr>
<tr>
<td id="container_right_column" style="vertical-align: top;">
<div id="content_horoscope_iframe" style="position: relative;/* margin-left: 808px; */">
<iframe id="content_horoscope_iframe" frameborder="0" src="pages/Tips.php" data-ruffle-polyfilled="">Browser not compatible.</iframe>
</div>
<iframe style="position: relative;width: 705px;height: 219px;margin-left: -466px;margin-top: -91px;" frameborder="0" src="pages/Iframes/Download.php" data-ruffle-polyfilled="">Browser not compatible!</iframe>
</td>
</tr>
<tr id="footer">
<td id="footer_content" colspan="2">
<hr style="margin-top: auto; position: relative;">
<div style="margin-top: auto; position: relative;">
<img id="footer_rainbow_img" src="http://onlinewinxclub.com/center-web/medias/images/rainbow_logo_small.jpg">
<p id="footer_text">Winx Club™ a series created and produced by Iginio Straffi and Rainbow S.r.l<br>
© 2011-2021 Winx Club Online - Unofficial WinxClub.com inspirated by the old official website
</p>
</div>
</td>
</tr>
<script src="js/ckin.js"></script>
<script src="js/cssrefresh.js"></script>
Related
I'm trying to design a form looking like that:
I tried with a table embedding another two tables, one with 5 rows and the other with 6 rows, and tried to arrange it with CSS, but somehow it doesn't seem to work out. I'm looking for a solution to correct my design or for completely another (with div's?). Here my code:
<td style="display: table-cell; text-align: right; height: 80%;">
<table style="display: table-cell; text-align: right; height: 80%;">
<tr>
<td width="180" align="right">
<tech:label key="tolerancesurecarts.input.label.palier1"
labelfor="inputPalier1" />
</td>
<td width="180" >
<tech:text property="inputPalier1"
mode="EEEE" maxlength="8" size="9"/>
</td>
</tr>
<tr>
<td width="180" align="right">
<tech:label key="tolerancesurecarts.input.label.palier2"
labelfor="inputPalier2" />
</td>
<td width="180" >
<tech:text property="inputPalier2"
mode="EEEE" maxlength="8" size="9"/>
</td>
</tr>
<tr>
<td width="180" align="right">
<tech:label key="tolerancesurecarts.input.label.palier3"
labelfor="inputPalier3" />
</td>
<td width="180" >
<tech:text property="inputPalier3"
mode="EEEE" maxlength="8" size="9"/>
</td>
</tr>
<tr>
<td width="180" align="right">
<tech:label key="tolerancesurecarts.input.label.palier4"
labelfor="inputPalier4" />
</td>
<td width="180" >
<tech:text property="inputPalier4"
mode="EEEE" maxlength="8" size="9"/>
</td>
</tr>
<tr>
<td width="180" align="right">
<tech:label key="tolerancesurecarts.input.label.palier5"
labelfor="inputPalier5" />
</td>
<td width="180" >
<tech:text property="inputPalier5"
mode="EEEE" maxlength="8" size="9"/>
</td>
</tr>
</table>
</td>
<td style="text-align: left;">
<table style="text-align: left;">
<tr>
<td><div style="background-color: #CDFFAA; height: 100%;"> </div></td>
</tr>
<tr>
<td><div style="background-color: #FFFF99; height: 100%;"> </div></td>
</tr>
<tr>
<td><div style="background-color: #FFDC77; height: 100%;"> </div></td>
</tr>
<tr>
<td><div style="background-color: #FFBA44; height: 100%;"> </div></td>
</tr>
<tr>
<td><div style="background-color: #F07300; height: 100%;"> </div></td>
</tr>
<tr>
<td><div style="background-color: #A00000; height: 100%;"> </div></td>
</tr>
</table>
</td>
I tried some different variations, using various display css attributes on my first table, height css attributes on the cells, and so on, to no avail. Any idea?
I hope this is what you are looking for https://jsfiddle.net/sua15zok/3/ . Please specify if any corrections in css required. I will do it and update the required UI.
Following is the code of table :
<table cellpadding="0" cellspacing="" width="100%" border="0">
<tbody>
<tr class="pack_list_divider">
<td width="30%" rowspan="2">
<img id="coursimg" src="test_listings_files/default_package_image.png" alt="Section wise test" border="0">
</td>
<td width="25%">
<p class="pckgvalidity">
Validity : 1 Year
</p>
</td>
<td width="35%">
<p class="pckgvalidity">Number of Tests : 0
</p>
</td>
<td width="20%" valign="middle">
<!--<p id="test_list_loader" height="20" align="center" style="display:none;"></p> -->
Test Details
</td>
</tr>
<tr>
<td colspan="2" width="50%" valign="top">
<p class="descp">
sectionm wise tests
</p>
</td>
<td width="20%">
<p class="pckgrs"> <span class="rs fl" style="color:#333333; font:25px bold; margin:0px 0px 10px 10px;"> Free </span>
<span>
<a class="user-not-loggedin more addcart fl" href="http://localhost/entrance_prime/Entrance_Prime/entprm/web/my_cart.php?pack_id=21e86b3ebf6a8af2a9fcf136c4f8e88a&pack_type=test&op=aa" id="21e86b3ebf6a8af2a9fcf136c4f8e88a" value="21e86b3ebf6a8af2a9fcf136c4f8e88a" style="background:url(../images_new/add_account.png) 0 0 no-repeat;"> </a>
</span>
</p>
</td>
</tr>
</tbody>
</table>
I want a horizontal line in between the rows. I've tried so many tricks but none of them did the magic for me. How can this issue be resolved?
I use this trick:
<table>
<tr style="border-bottom:1px solid black">
<td colspan="100%"></td>
</tr>
<tr> ... </tr>
</table>
Use a Table Header and add the underline in there
table { border-collapse:collapse; }
table thead th { border-bottom: 1px solid #000; }
<table>
<thead>
<tr>
<th>Valididty></th>
<th>No Of Tests</th>
</tr>
</thead>
<tbody>
<tr>
<td>Test</td>
<td>Test</td>
</tr>
</tbody>
</table>
With CSS you can style the header row. Make each cell have a bottom border.
have a look here: http://jsfiddle.net/ZmBmh/
HTML
<table>
<tr class="firstLine">
<td>hey</td><td>hello</td><td>yuhuu</td>
</tr>
<tr>
<td>hey</td><td>hello</td><td>yuhuu</td>
</tr>
<tr>
<td colspan="3"><hr/></td>
</tr>
<tr>
<td>hey</td><td>hello</td><td>yuhuu</td>
</tr>
</table>
CSS
table{
border-collapse: collapse;
}
.firstLine td{
border-bottom: 2px solid black;
}
Something like this:
<table border="1" cellpadding="0" cellspacing="" width="100%">
<tbody>
<tr class="pack_list_divider">
<tr> </tr>
<td width="25%">
<p class="pckgvalidity">
Validity : 1 Year
</p>
</td>
<td width="35%">
<p class="pckgvalidity">Number of Tests : 0
</p>
</td>
<td width="20%" valign="middle">
<!--<p id="test_list_loader" height="20" align="center" style="display:none;"></p> -->
Test Details
</td>
</tr>
<tr>
<td colspan="2" width="50%" valign="top">
<p class="descp">
sectionm wise tests
</p>
</td>
<td width="20%">
<p class="pckgrs"> <span class="rs fl" style="color:#333333; font:25px bold; margin:0px 0px 10px 10px;"> Free </span>
<span>
<a class="user-not-loggedin more addcart fl" href="http://localhost/entrance_prime/Entrance_Prime/entprm/web/my_cart.php?pack_id=21e86b3ebf6a8af2a9fcf136c4f8e88a&pack_type=test&op=aa" id="21e86b3ebf6a8af2a9fcf136c4f8e88a" value="21e86b3ebf6a8af2a9fcf136c4f8e88a" style="background:url(../images_new/add_account.png) 0 0 no-repeat;"> </a>
</span>
</p>
</td>
</tr>
</tbody>
</table>
Tell me if that is what you're looking for.
I looked for a similar question but no solutions.
I have a webpage with a table and a Youtube movie at the middle: http://www.zofim.org.il/magazin_item.asp?item_id=531438084004
it looks good in Chrome, but in Internet explorer the movie is too low and not in the right place.
Here is the code:
<table background="http://www.zofim.org.il/pics/magazin/Page-1 (1).jpg" width="650" height="700" border="0" align="center" cellpadding="1" cellspacing="1">
<tbody>
<tr>
<td>
<table border="0" width="600">
<tbody>
<tr>
<td colspan="4"><span style="font-size: 8; "> </span>
<p><span style="font-size: 8; "> </span></p>
<p><span style="font-size: 8; "> </span></p>
<p><span style="font-size: 8; "> </span></p>
<p><br />
</p>
<p><span style="font-size: 8; "> </span></p>
<p><span style="font-size: 8; "> </span></p>
<p><span style="font-size: 8; "><br />
<br />
<br type="_moz" />
</span></p>
<p> </p>
</td>
</tr>
<tr>
<td height="440" width="23%" rowspan="2">
<table border="0" width="100%" height="430">
<tbody>
<tr>
<td height="131"> </td>
</tr>
<tr>
<td height="63"> <img border="0" src="http://www.zofim.org.il/pics/magazin/1(158).gif" width="134" height="76" alt="" /></td>
</tr>
<tr>
<td> </td>
</tr>
</tbody>
</table>
</td>
<td height="142" width="12%">
<p style="margin-top: 0; margin-bottom: 0"> </p>
<p> </p>
<p> </p>
</td>
<td height="142" width="35%">
<p style="margin-top: 10px; margin-bottom: 0px; text-align: center; "><iframe width="250" height="150" src="http://www.youtube.com/embed/wnBGKeXF8X0?rel=0&controls=0&autoplay=1" frameborder="0" allowfullscreen="" name="I1" scrolling="no" marginheight="2"></iframe></p>
</td>
<td height="142" width="31%">
<p> </p>
<p> </p>
</td>
</tr>
<tr>
<td height="285" colspan="3">
<table border="0" width="100%" height="292">
<tbody>
<tr>
<td width="135">
<table border="0" width="100%" height="280">
<tbody>
<tr>
<td height="78"> <img border="0" src="http://www.zofim.org.il/pics/magazin/1(158).gif" width="134" height="99" alt="" /></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</tbody>
</table>
</td>
<td>
<table border="0" width="104%" height="278">
<tbody>
<tr>
<td height="78"> <img border="0" src="http://www.zofim.org.il/pics/magazin/1(158).gif" width="175" height="99" alt="" /></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</tbody>
</table>
</td>
<td width="153">
<table border="0" width="100%" height="281">
<tbody>
<tr>
<td height="78"> <img border="0" src="http://www.zofim.org.il/pics/magazin/1(158).gif" width="152" height="99" alt="" /></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
thanks!
Dor.
By the looks of the markup you provided you are using tables to layout your website. This is considered bad practice. You should consider changing to using best practices (divs etc) and using CSS to style your layout instead of using inline-styles. When you have done this you can use prefixr.com to create cross-browser friendly CSS.
I have a markup:
<table cellpadding="0" cellspacing="0" class="table_report_line">
<tbody>
<tr>
<td>
<div class="dvlefttable">
</div>
</td>
<td class="dvtoptable" colspan="4" width="100%">
Test
</td>
<td>
<div class="dvrighttable">
</div>
</td>
</tr>
<tr>
<canvas id="chartId" width="400" height="400" style="margin: 30px;">
</canvas>
</tr>
<tr>
<td>
</td>
<td colspan="4">
<br style="line-height: 15px;" />
</td>
<td>
</td>
</tr>
<tr>
<td colspan="6" class="bg_bottom_table">
</td>
</tr>
</tbody>
</table>
but when Firefox renders the page I see that it put canvas outside the table
<canvas id="chartId" style="margin: 30px;" height="400" width="400"> </canvas>
<table cellspacing="0" cellpadding="0" class="table_report_line">
<tbody>
<tr>
<td class="">
<div class="dvlefttable">
</div>
</td>
<td width="100%" colspan="4" class="dvtoptable">
Test
</td>
<td class="">
<div class="dvrighttable">
</div>
</td>
</tr>
<tr>
</tr>
<tr style="background: none repeat scroll 0% 0% transparent;">
<td class="td_border_left">
</td>
<td colspan="4" class="td_padding_left">
<br style="line-height: 15px;">
</td>
<td class="td_border_right">
</td>
</tr>
<tr>
<td class="bg_bottom_table" colspan="6">
</td>
</tr>
</tbody>
</table>
Why does it happen and how it possible to fix that?
You have to put the CANVAS inside of a TD element.
Change:
<tr>
<canvas id="chartId" width="400" height="400" style="margin: 30px;"></canvas>
</tr>
to:
<tr>
<td><canvas id="chartId" width="400" height="400" style="margin: 30px;"></canvas></td>
</tr>
General rule of thumb in cases like this is to use the HTML validator to see what you did wrong.
how can i get the images and the content to the right to top align?
i tried valign="top" as you can see.
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr valign="top">
<td valign="top"><img alt="" style="border: 0px solid;" src="/Portals/0/affiliates/NFL.png" /></td>
<td valign="top"> </td>
<td valign="top" style="padding-left: 10px;"><strong><span class="cnt5_heading" style="color: #c00000;">NFL</span><br />
</strong><span class="body_copy" valign="top">The official website for the National Football League. Learn more >></span></td>
</tr>
<tr valign="top">
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr valign="top">
<td valign="top"><img alt="" src="/Portals/0/affiliates/NFL_players_association.png" /></td>
<td> </td>
<td valign="top" style="padding-left: 10px;"><strong><span class="cnt5_heading" style="color: #c00000;">NFL Players Association</span><br />
</strong><span class="body_copy" valign="top">"We, The National Football League Players Association ... Pay homage to our predecessors for their courage, sacrifice, and vision; ... Pledge to preserve and enhance the democratic involvement of our members; ... Confirm our willingness to do whatever is necessary for the betterment of our membership - To preserve our gains and achieve those goals not yet attained." Learn more >></span></td>
</tr>
<tr valign="top">
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr valign="top">
<td valign="top"><img alt="" src="/Portals/0/affiliates/NFL_play_benfits.png" /></td>
<td><strong> </strong></td>
<td valign="top" style="padding-left: 10px;"><strong><span class="cnt5_heading" style="color: #c00000;">NFL Player Benefits</span></strong><br />
<span class="body_copy">A Complete guide to the benefits available for NFL players. Learn more >></span></td>
</tr>
<tr valign="top">
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr valign="top">
<td valign="top"><img alt="" src="/Portals/0/affiliates/NFL_hall_fame.png" /></td>
<td> </td>
<td valign="top" style="padding-left: 10px;"><strong><span class="cnt5_heading" style="color: #c00000;">Pro football Hall of Fame</span></strong><br />
<span class="body_copy">The Mission of the Pro Football Hall of Fame is: To honor, preserve, educate and promote. Learn more >></span><br />
</td>
</tr>
</tbody>
</table>
Some CSS :
table td, table td * {
vertical-align: top;
}
<TABLE COLS="3" border="0" cellspacing="0" cellpadding="0">
<TR style="vertical-align:top">
<TD>
<!-- The log text-box -->
<div style="height:800px; width:240px; border:1px solid #ccc; font:16px/26px Georgia, Garamond, Serif; overflow:auto;">
Log:
</div>
</TD>
<TD>
<!-- The 2nd column -->
</TD>
<TD>
<!-- The 3rd column -->
</TD>
</TR>
</TABLE>