Why does the rest of the content get the footer's background? Chrome says everything on the page is part of the footer div... wtf am i doing wrong?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type"
content="text/html; charset=UTF-8" />
<style type="text/css">
html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif;text-align:center}
p{margin:0 10px 10px}
a{display:block;color: #981793;padding:10px}
div#header h1{height:80px;line-height:80px;margin:0;
padding-left:10px;background: #EEE;color: #79B30B}
div#container{text-align:left}
div#content p{line-height:1.4}
div#navigation{background:#B9CAFF}
div#extra{background:#FF8539}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}
div#container{width:700px;margin:0 auto}
div#content{float:right;width:500px}
div#navigation{float:left;width:200px}
div#extra{clear:both;width:100%}
</style>
<title>Kockums</title>
</head>
<body>
<div id="container">
<div id="header">
<table>
<tr>
<td>INTRANÄT</td>
<td>INTERNET</td>
<td>RITNINGSARKIV</td>
</tr>
</table>
</div>
<div id="wrapper">
<div id="navigation">
<div class="menu">
<a href="?page=add_drawing "title="Lägg till en ny ritning"
class="menu">Lägg till ritning</a>
</div>
</div>
<div id="content">
<div class="text">
<form id="signin" name="signin" action="index.php" method="post">
<fieldset class="signin">
<legend>Logga in</legend>
<table width="250">
<tr>
<td width="120"><label for="username">Användarnamn:</label></td>
<td width="130" align="right"><input type="text" name="username" id="username"
size="15" /></td>
</tr>
<tr>
<td colspan="2" align="right"><input type="submit" value="Logga in" /></td>
</tr>
</table>
</fieldset>
</form>
</div>
</div>
</div>
<div id="footer">
<table width="100%">
<tr>
<td class="text">Footer goes here</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Try replacing the footer style with:
div#footer{
background: #333;
color: #FFF;
float: left;
width: 100%;
}
and add the style:
div#wrapper{
float:left;
}
Why?
As for the why, I'm not completely sure what the underlying w3c standard is but I know how to work with it :)
When you inspect your wrapper (Inspect Element in chrome) you can see that it has no height. The Footer then sits right underneath your header and inline's the content of both your wrapper and footer with the footer div as the background. By floating your elements and giving them a width they now become block's in themselves and will float. Since there is not enough room to float horizontally they'll be placed underneath eachother.
You had a DIV tag mismatch I believe. The other answer may visually fix the problem, but the bad HTML will still remain. DIV based layouts blow up when you forget to close a tag. I used HTML Tidy to fix it:
<div id="container">
<div id="header">
<table>
<tr>
<td>
INTRANÄT
</td>
<td>
INTERNET
</td>
<td>
RITNINGSARKIV
</td>
</tr>
</table>
</div>
<div id="wrapper">
<div id="navigation">
<div class="menu">
Lägg till ritning
</div>
</div>
<div id="content">
<div class="text">
<form id="signin" name="signin" action="index.php" method="post">
<fieldset class="signin">
<legend>Logga in</legend>
<table width="250">
<tr>
<td width="120">
<label for="username">Användarnamn:</label>
</td>
<td width="130" align="right">
<input type="text" name="username" id="username" size="15" />
</td>
</tr>
<tr>
<td colspan="2" align="right">
<input type="submit" value="Logga in" />
</td>
</tr>
</table>
</fieldset>
</form>
</div>
</div>
</div>
<div id="footer">
<table width="100%">
<tr>
<td class="text">
Footer goes here
</td>
</tr>
</table>
</div>
</div>
Related
I'm using handlebars for email templating. I need space in between two of my divs (within my div with class="orderInfo"), so I wanted to use justify-content:space-between, however, no space is being shown within the that area of the email. When I use developer tools to test css changes in this template, it shows justify-content:space-between working properly. I have tried playing around with it to see if one of my other css styling components was affecting it, but can't seem to get it to work. Does anyone know why I can't get justify-content:space-between to work within my handlebars template? Thank you!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example App</title>
<style>
.summary {
display: flex;
padding-bottom:2rem;
}
.orderInfo {
display:flex;
justify-content: space-between;
}
.orderItemLine {
box-shadow: 0px 4px 7px -8px rgba(0,0,0,0.7);
}
.orderItems {
padding-bottom:2rem;
}
.orderItem {
margin-top:2px;
}
.item_info {
padding-right: 1rem;
}
.item_img {
display:flex;
padding-right: 1rem;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th><h3>Shipping Address</h3></th>
<th><h3>Billing Address</h3></th>
</tr>
</thead>
<tbody>
<td><p>
{{data.shippingAddress.fullName}} <br />
{{data.shippingAddress.address1}} <br />
{{#if data.shippingAddress.address2}}
{{data.shippingAddress.address2}} <br />
{{/if}}
{{data.shippingAddress.city}}, {{data.shippingAddress.state}}, {{data.shippingAddress.postalCode}}<br />
{{data.shippingAddress.country}}
</p></td>
<td> <p>
{{data.billingAddress.fullName}} <br />
{{data.billingAddress.address1}} <br />
{{#if data.billingAddress.address2}}
{{data.billingAddress.address2}} <br />
{{/if}}
{{data.billingAddress.city}}, {{data.billingAddress.state}}, {{data.billingAddress.postalCode}}<br />
{{data.billingAddress.country}}
</p></td>
</tr>
</tbody>
</table>
<div class="orderInfo">
<div class="orderItems">
{{#each data.orderItems}}
<div class="orderItemLine">
<div class="orderItem">
<div class="item_img">
<img src="{{image}}">
</div>
<div class="item_info">
<h3>{{name}}</h3>
<p>{{qty}}</p>
<p>{{price}}</p>
</div>
</div>
</div>
{{/each}}
</div>
<div class="summary">
<table>
<tbody>
<tr><th style="text-align:left;"><h3>Order Summary</h3></th></tr>
<tr>
<th style="text-align:left; "><strong>Subtotal</strong></th>
<td style="text-align:right;">${{data.itemsPrice}}</td>
</tr>
<tr>
<th style="text-align:left; font-weight:normal;">Shipping & Handling</th>
<td style="text-align:right;">${{data.shippingPrice}}</td>
</tr>
<tr>
<th style="text-align:left; font-weight:normal;">Taxes</th>
<td style="text-align:right;">${{data.taxPrice}}</td>
</tr>
<tr>
<th style="text-align:left;"><h4>Total</h4></th>
<td style="text-align:right;">${{data.totalPrice}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
I have a 3x3 html table. In the second row the first and third column contain div's that are rotated to show content vertically. Other cells show content normally. These vertical divs overflow from TD height. I want to expand TD height dynamically based on Div height(width vertically).
Here is the code from fiddle
UPDATED
HTML
<table>
<tr>
<td>
<div>
?
</div>
</td>
<td>
<div>
<input placeholder="some text">
<button>X</button>
</div>
</td>
<td>
<div>
?
</div>
</td>
</tr>
<tr>
<td class="expand">
<div class="vertical">
<input placeholder="some text">
<button>X</button>
</div>
</td>
<td>
<div>
<input placeholder="some text">
<button>X</button>
</div>
</td>
<td class="expand">
<div class="hw vertical">
<input placeholder="some text">
<button>X</button>
</div>
</td>
</tr>
<tr>
<td>
<div>
?
</div>
</td>
<td>
<div>
<input placeholder="some text">
<button>X</button>
</div>
</td>
<td>
<div>
?
</div>
</td>
</tr>
</table>
CSS
table td {
border: 2px solid lightgray;
}
.hw {
width: 208px !important;
height: 20px;
}
.expand {
white-space: pre;
}
.vertical {
/* writing-mode: vertical-rl; */
transform: rotate(90deg);
}
Thanks in advance.
Use white-space: pre; in td.
edits
check this updated snippet. I used 'writing-mode: tb-rl' to make text vertical.
Check Can I Use for broswer support
table td {
border: 2px solid lightgray;
white-space:nowrap
}
.vertical {
writing-mode: tb-rl;
}
<table>
<tr>
<td>
<div>
?
</div>
</td>
<td>
<div>
lorem ipsum
</div>
</td>
<td>
<div>
?
</div>
</td>
</tr>
<tr>
<td>
<div class="vertical" >
vertical text
</div>
</td>
<td>
<div>
lorem ipsum
</div>
</td>
<td>
<div class="vertical">
vertical text
</div>
</td>
</tr>
<tr>
<td>
<div>
?
</div>
</td>
<td>
<div>
lorem ipsum
</div>
</td>
<td>
<div>
?
</div>
</td>
</tr>
</table>
You can achieve this with jQuery:
var height = $('.vertical').width();
$('.vertical').css({'height':height+'px'});
It takes the width of what the TD would have been if horizontal and applies it to the height instead.
Jsfiddle here
I'm trying to make a table that has rows that could expand and collapse on the press of a button, like in Windows Explorer, pressing the "plus" next to the folder will open the files in the directory.
Here's what I wrote:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../asset/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="../asset/css/trax.css" type="text/css" />
</head>
<body>
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Test Results</h3>
</div>
<div class="table-responsive">
<table class="table table-condensed table-hover">
<thead>
<tr>
<th class="col-md-7 text-left">Name</th>
<th class="col-md-1 text-right">Success</th>
<th class="col-md-1 text-right">Total</th>
<th class="col-md-1 text-right">Fail</th>
<th class="col-md-2 text-center">Trend</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-left">
<button type="button" class="btn btn-default btn- xs" data-toggle="collapse" data-target=".module,.first">
+
</button>
Foo
</td>
<td class="text-right up"><span class="glyphicon glyphicon-arrow-up"></span>80%</td>
<td class="text-right">5</td>
<td class="text-right">1</td>
<td class="text-center"><span class="inlinesparkline" values="1,2,8,4,5,7,10"></span></td>
</tr>
<tr class="collapse out module first">
<td class="text-left col-md-7">Hi</td>
<td class="text-right up col-md-1"><span class="glyphicon glyphicon-arrow-up"></span>95%</td>
<td class="text-right col-md-1">5</td>
<td class="text-right col-md-1">1</td>
<td class="text-center col-md-2"><span class="inlinesparkline" values="1,2,3,4,5"></span></td>
</tr>
<tr>
<td class="text-left">Bar</td>
<td class="text-right down"><span class="glyphicon glyphicon-arrow-down"></span>60%</td>
<td class="text-right">5</td>
<td class="text-right">2</td>
<td class="text-center"><span class="inlinesparkline" values="10,5,7,12,6,4,2"></span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script src="../asset/js/jquery-2.1.1.min.js" type="text/javascript"> </script>
<script src="../asset/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../asset/js/jquery.sparkline.js" type="text/javascript"> </script>
<script src="../asset/js/app.js" type="text/javascript"></script>
</body>
</html>
So, I managed to get the button to show a new row but it isn't arranged properly: the table cells don't arrange according to the table header cells like in other rows.
But when the button is pressed, during the transition, it arranges itself right before adjusting back to the wrong spacing.
Adding col-md-(number) to the cells as classes doesn't fix it.
Please tell me how to fix it / where I am going wrong.
That is a funny one. I found a similar question with an answer that appears to work. I created a jsFiddle that shows it working. Basically it involves adding your own CSS class that overrides the bootstrap CSS and forces it to display as a table row.
table .collapse.in {
display: table-row !important;
}
I can't say I particularly like the solution, especially the use of !important, but it works. There is anohter solution in the question I linked you to which involved adding a <div> to the <tr> with a class of collapsible but I disliked the sound of that even more.
I want the text inside my table to word-wrap. The constraint is that I can't change the HTML since it's generated by the server.
I created a JSFiddle
In case it's not working:
<div style="width: 25%">
<table class="af_selectManyCheckbox" id="pt1:r1:1:smc1" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td class="af_selectManyCheckbox_label" valign="top"/>
<td valign="top" class="AFContentCell" nowrap="">
<div class="af_selectManyCheckbox_content">
<div>
<span class="af_selectManyCheckbox_content-input">
<input class="af_selectManyCheckbox_native-input" type="checkbox" value="0"/>
</span>
<label class="af_selectManyCheckbox_item-text">It allows a component to partially refresh another component whose partialSubmit property is set to true.</label>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
Here you go.
WORKING DEMO
The CSS Code:
.col-md-3 label {
white-space: normal;
}
Hope this helps.
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.