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>
Related
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>
The problem :
HTML
<div class="visible-sm visible-xs " id="aatablet" style="padding-left: 0px; padding-bottom:10px; padding-top:10px; text-align: center;">
<table border="1">
<tr>
<td colspan="4" class="item_title">
<div style="padding-top:5px;">
Available at:
</div>
</td>
</tr>
<tr>
<td >
<img src="img/amazon-lrg.gif" alt="amazon" />
</td>
<td>
<img src="img/ebay-lrg.gif" alt="ebay" />
</td>
<td >
<img src="img/tomatomill-lrg.gif" alt="tomatomill" />
</td>
<td ><img src="img/BBG-lrg.gif" alt="BBG" />
</td>
</tr>
<tr>
<td >
</td>
<td>
<img src="img/sears-lrg.gif" alt="sears" />
</td>
<td >
<img src="img/healthcraft-home-logo.gif" alt="Healthcraft" title="Healthcraft" />
</td>
<td >
<img src="img/paradisecozycabins.jpg" alt="paradisecozycabins" title="paradisecozycabins" />
</td>
</tr>
</table>
</div>
CSS
#aatablet > table {
margin:0 auto;
}
Framework:bootstrap 3.4.
I want to make td of tomato logo width 100px not 178px like Helt Craft and td of Paradise(last td) 50px not 150px like BIGGAME.
Can someone help me ?I'm not good at making custom tables.Is it possible to do it whit only CSS?
Ty all.
You can give inline:block for td and give separate widths. Target each td using :nth-of-type
td{
display: inline-block;
}
tr:first-child td:nth-of-type(3){
width: 100px;
}
tr:last-child td:nth-of-type(4){
width: 50px;
}
How to make the child divs to display all in one line inside outer div and not fall to second line?
The outer div width should be fixed so the scrollbar should be visible so we can scroll to see all inner divs.
http://jsfiddle.net/pkbkY/
<style type="text/css">
.child
{
width: 100px;
float: left;
}
</style>
<div style="width: 500px; overflow: scroll;">
<div class="child">
<table>
<tr>
<td>
a
</td>
</tr>
</table>
</div>
<div class="child">
<table>
<tr>
<td>
a
</td>
</tr>
</table>
</div>
<div class="child">
<table>
<tr>
<td>
a
</td>
</tr>
</table>
</div>
<div class="child">
<table>
<tr>
<td>
a
</td>
</tr>
</table>
</div>
<div class="child">
<table>
<tr>
<td>
a
</td>
</tr>
</table>
</div>
<div class="child">
<table>
<tr>
<td>
a
</td>
</tr>
</table>
</div>
</div>
Here you go: http://jsfiddle.net/thirtydot/pkbkY/1/
#scroll_container {
width: 500px;
overflow: scroll;
white-space: nowrap;
}
.child {
width: 100px;
display: inline-block;
border: 1px solid red;
}
If you need the gaps to be gone, the easiest solution is to remove the whitespace between the child elements: http://jsfiddle.net/thirtydot/pkbkY/2/
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>
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.