Can't display SVG charts in Internet Explorer 8 - servlets

I made a servlet that runs and renders a BIRT report, using ReportEngine API.
The only problem is that SVG images (charts) are not shown in Internet Explorer 8 or 7. While running the official BirtViewer webapp they are shown under IE8 too.
I peeked into BirtViewer resulting HTML and noticed this meta tag:
<!-- Mimics Internet Explorer 7, it just works on IE8. -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
So I tried adding it by hand in my own resulting HTML, but with no changes. I also tried adding it through the servlet (which is the regular way) writing:
response.setHeader("X-UA-Compatible", "IE=EmulateIE7");
immediately after the setContentType instruction, but it not even outputted the meta tag...
EDIT: here is resulting HTML from BirtViewer official webapp (I cleaned up the parts with no interest here):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>BIRT Report Viewer</title>
<base href="http://192.168.81.92:5080/BirtViewer/webcontent/birt">
<!-- Mimics Internet Explorer 7, it just works on IE8. -->
<meta content="IE=EmulateIE7" http-equiv="X-UA-Compatible">
<meta content="text/html; CHARSET=utf-8" http-equiv="Content-Type">
<!-- a lot of scripts -->
</head>
<body class="BirtViewer_Body" style="overflow: hidden; direction: ltr"
leftmargin="0px" scroll="no" onload="javascript:init( );">
<!-- Header section -->
<table id="layout" cellspacing="0" cellpadding="0"
style="width: 100%; height: 100%">
<tbody>
<tr valign="top">
<td id="reportdialog" style="width: 0%; vertical-align: top">
<div id="exceptionDialog" class="dialogBorder"
style="display: none; position: absolute; z-index: 220; top: 0px; left: 0px;">
<iframe id="exceptionDialogiframe" frameborder="0" scrolling="no"
src="birt/pages/common/blank.html"
style="z-index: -1; display: none; left: 0px; top: 0px; background-color: #ff0000; opacity: .0; filter: alpha(opacity = 0); position: absolute;"
name="exceptionDialogiframe">
<html>
<head></head>
<body></body>
</html>
</iframe>
<div id="exceptionDialogdialogTitleBar"
class="dialogTitleBar dTitleBar">
<div class="dTitleTextContainer">
<table style="width: 100%; height: 100%;">
<tbody>
<tr>
<td class="dialogTitleText dTitleText">Exception</td>
</tr>
</tbody>
</table>
</div>
<div class="dialogCloseBtnContainer dCloseBtnContainer">
<table style="width: 100%; height: 100%; border-collapse: collapse">
<tbody>
<tr>
<td><label class="birtviewer_hidden_label"
for="exceptionDialogdialogCloseBtn"> Close </label>
<div id="exceptionDialogdialogCloseBtn"
class="dialogCloseBtn dCloseBtn"></div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- overflow is set as workaround for Mozilla bug https://bugzilla.mozilla.org/show_bug.cgi?id=167801 -->
<div class="dialogBackground" style="overflow: auto;">
<div class="dBackground">
<div id="exceptionDialogdialogContentContainer"
class="dialogContentContainer">
<table class="birtviewer_dialog_body" cellspacing="2" cellpadding="2">
<tbody>
<tr>
<td class="birtviewer_exception_dialog">
<table cellspacing="2" cellpadding="2">
<tbody>
<tr>
<td valign="top"><img src="birt/images/Error.gif"></td>
<td>
<table class="birtviewer_exception_dialog_container"
cellspacing="2" cellpadding="4">
<tbody>
<tr>
<td>
<div id="faultStringContainer"
class="birtviewer_exception_dialog_message"
style="width: 520px; overflow: auto;"><b> <span
id="faultstring"></span> <b> </b> </b></div>
<b> <b> </b> </b></td>
</tr>
<tr>
<td>
<div id="showTraceLabel"
class="birtviewer_exception_dialog_label" tabindex="0">
Show Exception Stack Trace</div>
<div id="hideTraceLabel"
class="birtviewer_exception_dialog_label"
style="display: none" tabindex="0">Hide Exception
Stack Trace</div>
</td>
</tr>
<tr>
<td>
<div id="exceptionTraceContainer"
style="display: none; width: 520px;">
<table width="100%">
<tbody>
<tr>
<td>Stack Trace: <br>
</td>
</tr>
<tr>
<td>
<div class="birtviewer_exception_dialog_detail"
style="width: 510px;"><span id="faultdetail"></span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div class="dialogBtnBarContainer">
<div>
<div class="dBtnBarDividerTop"></div>
<div class="dBtnBarDividerBottom"></div>
</div>
<div class="dialogBtnBar">
<div id="exceptionDialogdialogCustomButtonContainer"
class="dialogBtnBarButtonContainer">
<div id="exceptionDialogokButton" class="dialogBtnBarButtonEnabled">
<div id="exceptionDialogokButtonLeft"
class="dialogBtnBarButtonLeftBackgroundEnabled"></div>
<div id="exceptionDialogokButtonRight"
class="dialogBtnBarButtonRightBackgroundEnabled"></div>
<input class="dialogBtnBarButtonText dialogBtnBarButtonEnabled"
type="button" title="OK" value="OK"></div>
<div class="dialogBtnBarDivider"></div>
<div id="exceptionDialogcancelButton">
<div class="dialogBtnBarButtonLeftBackgroundEnabled"></div>
<div class="dialogBtnBarButtonRightBackgroundEnabled"></div>
<input class="dialogBtnBarButtonText dialogBtnBarButtonEnabled"
type="button" title="Cancel" value="Cancel"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="parameterDialog" class="dialogBorder"
style="position: absolute; z-index: 201; top: 173px; left: 325.5px; width: 520px; display: none;">
<iframe id="parameterDialogiframe" frameborder="0" scrolling="no"
src="birt/pages/common/blank.html"
style="z-index: -1; display: none; left: 0px; top: 0px; background-color: rgb(255, 0, 0); opacity: 0; position: absolute; width: 522px; height: 429px;"
name="parameterDialogiframe">
<html>
<head></head>
<body></body>
</html>
</iframe>
<div id="parameterDialogdialogTitleBar"
class="dialogTitleBar dTitleBar">
<div class="dTitleTextContainer">
<table style="width: 100%; height: 100%;">
<tbody>
<tr>
<td class="dialogTitleText dTitleText">Parameter</td>
</tr>
</tbody>
</table>
</div>
<div class="dialogCloseBtnContainer dCloseBtnContainer">
<table style="width: 100%; height: 100%; border-collapse: collapse">
<tbody>
<tr>
<td><label class="birtviewer_hidden_label"
for="parameterDialogdialogCloseBtn"> Close </label>
<div id="parameterDialogdialogCloseBtn"
class="dialogCloseBtn dCloseBtn"></div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- overflow is set as workaround for Mozilla bug https://bugzilla.mozilla.org/show_bug.cgi?id=167801 -->
<div class="dialogBackground" style="overflow: auto;">
<div class="dBackground">
<div id="parameterDialogdialogContentContainer"
class="dialogContentContainer" style="width: 500px;">
<div class="birtviewer_parameter_dialog">
<table id="parameter_table" class="birtviewer_dialog_body"
cellspacing="2" cellpadding="2">
<tbody>
<tr valign="top">
<td>
<table style="font-size: 8pt">
<tbody>
<tr height="5px">
<td></td>
</tr>
<tr>
<td colspan="2">Parameters marked with <font color="red">*</font>
are required.</td>
</tr>
<tr>
<td nowrap=""><img title=""
alt="Numero di anni da confrontare"
src="birt/images/parameter.gif"></td>
<td nowrap=""><font title=""> <label
for="Years_selection">Numero di anni da confrontare:</label> </font>
<font color="red"> <label for="Years_selection">*</label>
</font></td>
</tr>
<tr>
<td nowrap=""></td>
<td nowrap="" width="100%"><input id="control_type"
type="HIDDEN" value="select"> <input id="data_type"
type="HIDDEN" value="6"> <input id="Years_value"
type="HIDDEN" name="Years"> <select
id="Years_selection"
class="birtviewer_parameter_dialog_Select"
aria-required="true" birtparametertype="combobox" title="2">
<option title="2" value="2">2</option>
<option title="3" value="3">3</option>
<option title="4" value="4">4</option>
</select> <input id="isRequired" type="HIDDEN" value="true"></td>
</tr>
<tr>
<td nowrap=""><img title="" alt="Codice dell'agente"
src="birt/images/parameter.gif"></td>
<td nowrap=""><font title=""> <label for="Agent">Codice
dell'agente:</label> </font> <font color="red"> <label for="Agent">*</label>
</font></td>
</tr>
<tr>
<td nowrap=""></td>
<td nowrap="" width="100%"><input id="control_type"
type="HIDDEN" value="text"> <input id="data_type"
type="HIDDEN" value="1"> <input id="Agent"
class="BirtViewer_parameter_dialog_Input" type="TEXT"
aria-required="true" value="" title="" name="Agent"> <input
id="Agent_value" type="HIDDEN" value=""> <input
id="Agent_displayText" type="HIDDEN" value=""> <input
id="isRequired" type="HIDDEN" value="true"></td>
</tr>
<tr height="5px">
<td></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<div id="birt_hint"
style="font-size: 12px; color: #000000; display: none; position: absolute; z-index: 300; background-color: #F7F7F7; layer-background-color: #0099FF; border: 1px #000000 solid; filter: Alpha(style = 0, opacity = 80, finishOpacity = 100);">
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="dialogBtnBarContainer">
<div>
<div class="dBtnBarDividerTop"></div>
<div class="dBtnBarDividerBottom"></div>
</div>
<div class="dialogBtnBar">
<div id="parameterDialogdialogCustomButtonContainer"
class="dialogBtnBarButtonContainer">
<div id="parameterDialogokButton" class="dialogBtnBarButtonEnabled">
<div id="parameterDialogokButtonLeft"
class="dialogBtnBarButtonLeftBackgroundEnabled"></div>
<div id="parameterDialogokButtonRight"
class="dialogBtnBarButtonRightBackgroundEnabled"></div>
<input class="dialogBtnBarButtonText dialogBtnBarButtonEnabled"
type="button" title="OK" value="OK"></div>
<div class="dialogBtnBarDivider"></div>
<div id="parameterDialogcancelButton">
<div class="dialogBtnBarButtonLeftBackgroundEnabled"></div>
<div class="dialogBtnBarButtonRightBackgroundEnabled"></div>
<input class="dialogBtnBarButtonText dialogBtnBarButtonEnabled"
type="button" title="Cancel" value="Cancel"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr valign="top">
<td id="documentView" style="direction: ltr;">
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td style="vertical-align: top;">
<div id="progressBar"
style="position: absolute; z-index: 310; top: 346px; left: 461.5px; display: none;">
<table class="birtviewer_progressbar" cellspacing="10px"
width="250px">
<tbody>
<tr>
<td align="center"><b> Processing, please wait ... </b></td>
</tr>
<tr>
<td align="center"><img alt="Progress Bar Image"
src="birt/images/Loading.gif"></td>
</tr>
<tr>
<td align="center">
<div id="cancelTaskButton" style="display: block;">
<table width="100%">
<tbody>
<tr>
<td align="center"><input
class="birtviewer_progressbar_button" type="BUTTON"
title="Cancel" value="Cancel"></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<input id="taskid" type="HIDDEN" value="">
</tbody>
</table>
</div>
<div id="display0"
style="display: none; width: 250px; position: relative; overflow: auto">
</div>
</td>
<td style="vertical-align: top;">
<div id="Document" class="birtviewer_document_fragment"
style="width: 1167px; height: 535px;">
<div>
<div class="style_0">
<table cellpadding="0"
style="empty-cells: show; width: 8in; overflow: hidden; table-layout: fixed;"
rule="none">
<colgroup>
<col>
</colgroup>
<tbody>
<tr>
<td></td>
</tr>
<tr>
<td valign="top">
<div id="AUTOGENBOOKMARK_1" class="style_4"
style="text-align: center;">Analisi per modello</div>
<table id="__bookmark_2" class="style_5"
style="border-collapse: collapse; empty-cells: show; width: 100%; overflow: hidden; table-layout: fixed;">
<colgroup>
<col style="width: 20%;">
<col style="width: 14%;">
<col style="width: 14%;">
<col style="width: 15%;">
<col style="width: 10%;">
</colgroup>
<tbody>
<tr class="style_6" align="center" valign="top">
<th class="style_7" style="overflow: hidden;">
<div id="AUTOGENBOOKMARK_2" style="text-align: left;">Modello</div>
</th>
<th class="style_7" style="overflow: hidden;">
<div>2010</div>
</th>
<th class="style_7" style="overflow: hidden;">
<div>2011</div>
</th>
<th class="style_7" style="overflow: hidden;" colspan="2">
<div>Diff. 2011-2010</div>
</th>
</tr>
<!-- various rows in the table..... -->
</tbody>
</table>
<div><embed id="__bookmark_3"
style="width: 558pt; height: 223.5pt; display: block;" alt=""
src="/BirtViewer/preview?__sessionId=20110523_145951_765&__imageid=custombf791612fc98d919920.svg"
type="image/svg+xml"
onresize="document.getElementById('__bookmark_3').reload()">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" height="298"
initialHeight="298.0" initialWidth="744.0"
onload="resizeSVG(evt)" onresize="resizeSVG(evt)" width="744">
<g id="outerG" style="fill:none;stroke:none"
transform="scale(1)">
</svg>
<!-- SVG image details..... -->
</embed></div>
</td>
</tr>
<tr>
<td>
<div>23/mag/2011 14.59</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<div id="Mask"
style="position: absolute; top: 0px; left: 0px; width: 1173px; height: 537px; z-index: 200; background-color: rgb(0, 68, 255); opacity: 0; display: none;"></div>
<div
style="position: absolute; top: 0px; left: 0px; width: 1173px; height: 537px; z-index: 200; background-color: rgb(255, 0, 0); opacity: 0; display: none; cursor: move;"></div>
<iframe scrolling="no" src="birt/pages/common/blank.html"
style="position: absolute; top: 0px; left: 0px; width: 100%; height: 775px; z-index: 300; background-color: rgb(219, 228, 238); opacity: 0; display: none;"
marginheight="0px" marginwidth="0px">
<html>
<head></head>
<body></body>
</html>
</iframe>
</body>
</html>
Any suggestion? Many thanks!

The X-UA-Compatible meta tag that you've spotted is a red herring; it's not related to SVG. Neither IE8 or IE7 support SVG at all. Support for SVG was only added in IE9.
The meta tag you've seen tells IE8 (and IE9 for that matter) to fall back into IE7-compatibility mode. This is intended to be used by sites that were written for IE7, where updating the code to support IE8 or IE9 is too much work. I'd recommend avoiding using this meta tag if at all possible, because it's primary function is to switch off some of the functionality of your browser.
Back to SVG support.... While they don't support SVG, IE7 and IE8 do both support VML, which is also a vector graphics markup language, similar to SVG, but specific to IE.
Some Javascript libraries attempt to emulate SVG using VML, or to use VML as a fall-back instead of rendering SVG. My favourite is Raphael.
But Raphael is a library for drawing the graphics; since you already have the SVG, you may find a simple conversion library is more useful. Something like this, perhaps: http://code.google.com/p/svg2vml/ or this: http://code.google.com/p/svgweb/
The other approach would be to use Flash or other embedded object to render the SVG in IE.
My guess is that where you're seeing them successfully rendering SVG, they are using one of these libraries (or another similar one) to display the SVG graphics in IE7 and IE8.

You may consider using Ample SDK JavaScript library that can render SVG in IE6, 7 and 8.

Related

CSS DIV width based on text length with position absolute relative to a TABLE cell

Brief introduction:
with my attempts I have reached an acceptable result
to a specific table cell I set inline the (in the screenshots below it is the third last TH)
<th style="position:relative;">Column Name</th>
then inside the cell I have positioned my DIV
<th style="position:relative;"><div id="myDiv" style="position:relative;">Line 1 - medium length<br>Line2 - John</div></th>
EDIT: as requested I post the significant code
the DIV CSS
#provDiv{ /** the DIV CSS */
position: absolute;
top: 0;
right: 0;
width: auto;
background: greenyellow;
text-align: right;
}
the involved cell,
<th data-dbrow="device" scope="col"
style="position:relative; width: 10%">
<div id="provDiv">Line 1 - medium length<br>Line 2 - John</div>
</th>
What it happen is that (I'd say "obviously") the DIV long text will wrap, because the DIV will have as maximum width -> the table column's width, this using width: auto;
while if I set width: 300px the DIV width is really 300px
with fixed width, I have the DIV larger than the column width,
but then the div is ALWAYS large 300px, despite the content,
so if DIV innerText is just 5 chars like "hello", I have a laaaaarge DIV quite awful to see.
Well the question is:
how to have the DIV WIDTH that adapts to the text line length, without using a fixed width?
please note that I must use bootstrap 5
if it can help in this case, I'm available to use flexbox, but I haven't studied it yet
These are my tests
current result with auto and two text lines long text
worse result with fixed width and short text
1th wanted result
2nd wanted result
Check the classes = parent, myDiv. This is a mix of using table and flexbox layout
#customers {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#customers td, #customers th {
border: 1px solid #ddd;
height: 35px;
}
#customers tr:nth-child(even){background-color: #f2f2f2;}
#customers tr:hover {background-color: #ddd;}
#customers th {
text-align: left;
background-color: #04AA6D;
color: white;
}
/* Check the styles below*/
.parent {
display: flex;
align-items: center;
}
.myDiv {
background-color: red;
height: 100%;
width: fit-content;
padding: 0 10px;
margin-left: auto;
display: flex;
align-items: center;
}
<table id="customers">
<thead>
<tr>
<th class="parent">
Company
<div class="myDiv">Hello World</div>
</th>
<th>Contact</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
</tbody>
</table>
And you can hide large text and show dots instead if the width of myDiv is more than 300px:
.myDiv {
text-overflow: ellipsis;
overflow: hidden;
max-width: 300px;
white-space: nowrap;
}
EDIT: Solution for your code
Check:
#provDiv{
position: absolute;
top: 0;
right: 0;
width: fit-content;
padding: 0 5px;
background: greenyellow;
text-align: right;
/*ADDED*/
text-overflow: ellipsis;
overflow: hidden;
max-width: 300px;
white-space: nowrap;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="icon" type="image/png" href="/favicon-32x32.png">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<style>
#provDiv{
position: absolute;
top: 0;
right: 0;
width: fit-content;
padding: 0 5px;
background: greenyellow;
text-align: right;
text-overflow: ellipsis;
overflow: hidden;
max-width: 300px;
white-space: nowrap;
}
</style>
<title>Title</title>
</head>
<body>
<div class="container-fluid">
<div class="d-flex flex-wrap">
<div class="col-xl-6 col-sm-12">
<div class="d-flex justify-content-start">
<h1 class="p-1">Calls</h1>
<p id="provincie"></p>
</div>
</div>
<div class="col-xl-6 col-sm-12">
<div class="d-flex flex-wrap justify-content-end">
<div>
<button class="btn btn-primary m-3" id="AggiungiRiga" type="submit" value="Submit" >+ Riga</button>
</div>
<div>
<button class="btn btn-danger m-3" id="EliminaRiga" type="submit" value="Submit" >- Riga</button>
</div>
<div>
<button class="btn btn-success m-3" id="SalvaRiga" type="submit" value="Submit" >Salva</button>
</div>
</div>
</div>
</div>
<div class="table-responsive">
<table style="min-width:1000px;" class="table table-striped table-hover table-bordered text-center" id="tabella">
<thead>
<tr>
<th data-dbrow="riga" scope="col" style="width: 5%">#</th>
<th data-dbrow="id" scope="col" style="width: 5%">ID</th>
<th data-dbrow="nome" scope="col" style="width: 30%">Nome</th>
<th data-dbrow="tel" scope="col" style="width: 11%">Telefono</th>
<th data-dbrow="mail" scope="col" style="width: 29%">Email</th>
<th data-dbrow="device" scope="col" style="position:relative; width: 10%">
<select id="select1" class="form-select form-select-sm">
<option value="$" selected disabled>- Text 1 -</option>
<option value="val1">Text 2</option>
<option value="val2">Text 3</option>
<option value="val2">Text 4</option>
</select>
<div id="provDiv">Line 1 - medium length<br>Line 2 - John</div>
</th>
<th data-dbrow="iscli" scope="col" style="width: 5%">È Cli</th>
<th data-dbrow="prov" scope="col" class="cellaProv" style="width: 5%">Prov</th>
</tr>
</thead>
<tbody id="table1bd">
<tr>
<th>some text</th>
<td>some text</td>
<td contenteditable="true">some text</td>
<td contenteditable="true">some text</td>
<td contenteditable="true">some text</td>
<td>some text</td>
<td contenteditable="true">some text</td>
<td contenteditable="true">some text</td>
</tr>
<tr>
<th>some text</th>
<td>some text</td>
<td contenteditable="true">some text</td>
<td contenteditable="true">some text</td>
<td contenteditable="true">some text</td>
<td>some text</td>
<td contenteditable="true">some text</td>
<td contenteditable="true">some text</td>
</tr>
<tr>
<th>some text</th>
<td>some text</td>
<td contenteditable="true">some text</td>
<td contenteditable="true">some text</td>
<td contenteditable="true">some text</td>
<td>some text</td>
<td contenteditable="true">some text</td>
<td contenteditable="true">some text</td>
</tr>
</tbody>
</table>
</div>
</div>
<pre></pre>
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>

Div Gets 0 Height Instead Of The % Of Its Parent

In the code below, div with red background gets 0 height when the image is there but with image node removed, it gets the correct height of 60px from the parent. Why is it and how can it be corrected?
Here is also the jsfiddle link: https://jsfiddle.net/zuymamq7/
html,body{
width:100%;
height:100%;
}
<table style="width:100%;height:100%;">
<tr style="height:60px;">
<td>
<div style="width:100%; height:100%; background-color:blue;">
<img src="http://www.bensound.com/bensound-img/betterdays.jpg" style="width:60px; height:60px;"></img>
<div style="display:inline-block;width: 10%; height:100%; background-color:red;">
</div>
</div>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
Biggest thing that I noticed as I began to edit this:
You added a close image tag (</img>). Those don't exist. The correct syntax is either <img src="something.jpg"> or more technically <img src="something.jpg" /> Threw off some things a lot (especially in the editor)
I'm thinking this is what you want, or at least, I hope.
html,
body {
width: 100%;
height: 100%;
}
<table style="width:100%;height:100%;">
<tr>
<td style="height:60px">
<div style="width:100%; height:100%; background-color:blue;">
<img src="http://www.bensound.com/bensound-img/betterdays.jpg" style="width:60px; height:60px;" />
<div style="display:inline-block;width: 10%; height:100%; background-color:red;">
</div>
</div>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
Other Way
If you can change up the HTML a bit, then this should work too.
html,
body {
height: 100%;
width: 100%;
}
table {
border-collapse: collapse;
}
<table style="width:100%;height:100%;">
<tr style="background-color:blue">
<td style="height:60px;width:60px;">
<img src="http://www.bensound.com/bensound-img/betterdays.jpg" style="width:60px; height:60px;" />
</td>
<td style="background-color:red; width:10%">
Text
</td>
<td> </td>
</tr>
<tr>
<td>
</td>
</tr>
</table>

Double scrollbar when displaying PDF in Telerik RadWindow

I have a page that displays a pdf report in a RadWindow via javascript, but for some reason it has two sets of vertical scrollbars: one created by Internet Explorer and one in the PDF itself.
I am displaying other PDF reports in the exact same fashion, the only difference between this one that I can see is that the report is loaded from a different domain(just different port in the development environment, still the same physical server either way).
This does not happen on Chrome, only on IE. And I can't even seem to get either of the scrollbars removed even using the DOM editor in IE's development tools.
I've tried giving the radwindow a CSS class which set overflow to hidden and display inline, the report page itself also has html and body with those settings.
Here is the javascript code I use to open the radwindow:
function showRadWindowSupply(url, title) {
var oWnd = $find("<%=_rwInvoice.ClientID%>");
oWnd.setUrl(url);
oWnd.set_title(title);
oWnd.show();
sizeRadWindowSupply(oWnd, 70, 80);
return false;
}
function sizeRadWindowSupply(oWnd, width, height) {
var browserWidth = $telerik.$(window).width();
var browserHeight = $telerik.$(window).height();
oWnd.setSize(Math.ceil(browserWidth * width / 100), Math.ceil(browserHeight * height / 100));
oWnd.center();
}
Here is the RadWindow markup used on the aspx page:
<telerik:RadWindowManager id="_rwm1" runat="server">
<Windows>
<telerik:RadWindow ID="_rwInvoice" runat="server" Behaviors="Close,Maximize" CssClass="holdsSplitter" AutoSize="false" VisibleStatusbar="false" Modal="true" ></telerik:RadWindow>
</Windows>
</telerik:RadWindowManager>
And here is the HTML that is generated for the RadWindow:
<div class="RadWindow RadWindow_Telerik rwNormalWindow rwTransparentWindow holdsSplitter" id="RadWindowWrapper_ctl00_ContentPlaceHolder1__rwInvoice" style="left: 204px; top: 58px; width: 957px; height: 472px; visibility: visible; position: absolute; z-index: 3001; -ms-touch-action: none; transform: none; backface-visibility: visible;" unselectable="on">
<table class="rwTable" style="height: 433px;" cellspacing="0" cellpadding="0">
<tbody>
<tr class="rwTitleRow">
<td class="rwCorner rwTopLeft"> </td>
<td class="rwTitlebar">
<div class="rwTopResize">
<!-- / -->
</div>
<table align="left" class="rwTitlebarControls" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="width: 16px;"><a class="rwIcon"></a></td>
<td><em style="width: 847px;" unselectable="on">Supply Orders Invoice</em></td>
<td nowrap="" style="white-space: nowrap;">
<ul class="rwControlButtons" style="width: 62px;">
<li><a title="Maximize" class="rwMaximizeButton" href="javascript:void(0);"><span>Maximize</span></a></li>
<li><a title="Close" class="rwCloseButton" href="javascript:void(0);"><span>Close</span></a></li>
</ul>
</td>
</tr>
</tbody>
</table>
</td>
<td class="rwCorner rwTopRight"> </td>
</tr>
<tr class="rwContentRow">
<td class="rwCorner rwBodyLeft"> </td>
<td class="rwWindowContent rwExternalContent" valign="top">
<iframe name="_rwInvoice" src="http://devsvr:87/Reports/StaticReports/OrderHistoryDetail.aspx?ID=1748" frameborder="0" style="border: 0px currentColor; width: 100%; height: 100%;"></iframe>
</td>
<td class="rwCorner rwBodyRight"> </td>
</tr>
<tr class="rwStatusbarRow" style="display: none;">
<td class="rwCorner rwBodyLeft"> </td>
<td class="rwStatusbar">
<table align="left" style="width: 100%;" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="width: 100%;">
<input tabindex="-1" class="rwLoading" id="ctl00_ContentPlaceHolder1__rwInvoice_status" readonly="" unselectable="on"><label style="display: none;" for="ctl00_ContentPlaceHolder1__rwInvoice_status">status label</label></td>
</tr>
</tbody>
</table>
</td>
<td class="rwCorner rwBodyRight"> </td>
</tr>
<tr class="rwFooterRow">
<td class="rwCorner rwFooterLeft"> </td>
<td class="rwFooterCenter"> </td>
<td class="rwCorner rwFooterRight"> </td>
</tr>
</tbody>
</table>
</div>
Any suggestions are greatly appreciated.

Non-Standard Free Width Height HTML Table

I'm trying to get an HTML markup that represents the following table layout:
I tried this but it's not working:
<table border="1">
<tr>
<td style="height: 800px">
1
</td>
<td style="width: 300px; height: 400px">
2
</td>
</tr>
<tr>
<td style="height: 200px">
<p>3</p>
</td>
<td style="height: 600px">
4
</td>
</tr>
</table>
This looks pretty close to the image you provided. It's a little tricky because it actually requires 3 rows, but once you get your head wrapped around rowspan, then it makes sense.
<table border="1">
<tr style="height: 200px;">
<td style="width: 400px;" rowspan="2">
1
</td>
<td style="width: 200px;">
2
</td>
</tr>
<tr style="height: 200px;">
<td rowspan="2">
4
</td>
</tr>
<tr style="height: 50px;">
<td>
<p>3</p>
</td>
</tr>
</table>
You just need to add another row and add rowspans:
<table border="1">
<tr>
<td style="width: 300px; height: 400px" rowspan="2">
1
</td>
<td style="width: 300px; height: 200px">
2
</td>
</tr>
<tr>
<td style="height: 200px" rowspan="2">
4
</td>
</tr>
<tr>
<td style="height: 100px">
3
</td>
</tr>
</table>
See jsfiddle: http://jsfiddle.net/mt009cha/
EDIT
Do you have to use tables? This seems more like a layout and divs might be more appropriate.
Html:
<div class="container">
<div class="left">
<div style="height: 498px">1</div>
<div style="height: 98px">3</div>
</div>
<div class="right">
<div style="height: 298px">2</div>
<div style="height: 298px">4</div>
</div>
</div>
CSS:
div {
border: 1px solid black;
}
.container {
width: 600px;
height: 600px;
}
.left {
width: 398px;
height: 100%;
float: left;
}
.right {
width: 198px;
height: 100%;
float: right;
}
See jsfiddle: http://jsfiddle.net/zynt5j7e/
FIDDL
If you must use tables:
<table class="tbl">
<tr>
<td>
<table>
<tr>
<td style="height: 800px">
<p>top left</p>
</td>
</tr>
<tr>
<td style="height: 200px">
<p>bottom left</p>
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td style="height: 400px">
<p>top left</p>
</td>
</tr>
<tr>
<td style="height: 600px">
<p>bottom left</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
Some CSS:
.tbl, .tbl table { border-collapse: collapse; width:100%; }
.tbl td, .tbl table td{ border:1px solid black; padding:0; margin: 0; }

How to place a div on right side of cascading tables - CSS

I have 3 tables, cascading one after the other. I have a div, that I want to place on right side of these tables. The height of div may vary according to text inside. Currently the div is displayed below tables, like the image below;
<table class="class1" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
<tr>
<td class="cell1">Cell1</td>
<td class="cell2">Cell2</td>
</tr>
<tr>
<td class="cell1">Cell3</td>
<td class="cell2">Cell4</td>
</tr>
</table>
<table class="class2" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
<tr>
<td class="cell1">Cell5</td>
<td class="cell2">Cell6</td>
</tr>
<tr>
<td class="cell1">Cell7</td>
<td class="cell2">Cell8</td>
</tr>
</table>
<table class="class3" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
<tr>
<td class="cell1">Cell9</td>
<td class="cell2">Cell10</td>
</tr>
<tr>
<td class="cell1">Cell11</td>
<td class="cell2">Cell12</td>
</tr>
</table>
<div class="mydiv">mydiv</div>
But I want to place the div next to tables, so that it can extend downwards.
Here is the working fiddle http://jsfiddle.net/ZHVuf/1/
You should add a container around you table like this :
Html
<div id="container">
<!-- Your table -->
</div>
And make him float left, like your div #myDiv
Css
#container {
float:left;
}
see updated fiddle.
On this second updated fiddle, I added a wrapper with a clearfix !
insertusernamehere commented that you could use overflow:hidden instead of the clearfix, see here for a new working way to do this with less code.
Apply float:left; to all the table and add clear:both; to second and third table.
now you already has float:left; for div just add position:relative;top:0; and see.
OR
create two divs and add tables in one with left floating and you already have second div.
<div class="tableContainerDiv" style="float:left;">
<table><tr><td></td></tr></table>
<table><tr><td></td></tr></table>
<table><tr><td></td></tr></table>
</div>
<div class="yourDiv" style="float:left;"></div>
html
<div class="cl">
<div style="float: left">
your tables
</div>
<div class="mydiv" style="float: left">mydiv</div>
</div>
css
.cl:after{ content: " "; display: block; height: 0px; clear: both; visibility: hidden;}
.cl {display: inline-block;}
/* Hides from IE-mac \\*/
* html .cl {height: 1%;}
.cl {display: block;}
/* End hide from IE-mac */
move tables inside another div , float to left;
HTML
<div class="table-wrap">
<table class="class1" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
<tr>
<td class="cell1">Cell1</td>
<td class="cell2">Cell2</td>
</tr>
<tr>
<td class="cell1">Cell3</td>
<td class="cell2">Cell4</td>
</tr>
</table>
<table class="class2" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
<tr>
<td class="cell1">Cell5</td>
<td class="cell2">Cell6</td>
</tr>
<tr>
<td class="cell1">Cell7</td>
<td class="cell2">Cell8</td>
</tr>
</table>
<table class="class3" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
<tr>
<td class="cell1">Cell9</td>
<td class="cell2">Cell10</td>
</tr>
<tr>
<td class="cell1">Cell11</td>
<td class="cell2">Cell12</td>
</tr>
</table>
</div>
<div class="mydiv">mydiv</div>
CSS
.class1{
width: 100px;
height: 100px;
background: orange;
}
.class2{
width: 100px;
height: 100px;
background: green;
}
.class3{
width: 100px;
height: 100px;
background: gray;
}
.mydiv{
width: 200px;
background: blue;
float: left
}
.table-wrap{float:left;}
<table>
<tr><td>
<table class="class1" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
<tr>
<td class="cell1">Cell1</td>
<td class="cell2">Cell2</td>
</tr>
<tr>
<td class="cell1">Cell3</td>
<td class="cell2">Cell4</td>
</tr>
</table>enter code here
<table class="class2" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
<tr>
<td class="cell1">Cell5</td>
<td class="cell2">Cell6</td>
</tr>
<tr>
<td class="cell1">Cell7</td>
<td class="cell2">Cell8</td>
</tr>
</table>
<table class="class3" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
<tr>
<td class="cell1">Cell9</td>
<td class="cell2">Cell10</td>
</tr>
<tr>
<td class="cell1">Cell11</td>
<td class="cell2">Cell12</td>
</tr>
</table>
</td>
<td>
<div class="mydiv">mydiv</div>
</td>
</tr>
</table>

Resources