I'm trying to deploy a simple web application developped with VS2010 in ASP.NET
Everything's going fine on IIS locally on the development machine, but I encouter an issue once deployed on an Apache server : The menu does not render properly, it seems it does not take the CSS into account.
Does anyone already have such an issue ?
Thanks for your help !
[EDIT]
Appache version 2.2.22
Mono version 2.10.8.1
Site.Master :
<body>
<form runat="server">
<div class="page">
<div class="TopBlank"> </div>
<div class="header">
<div class="title">
<h1>
My ASP.NET Application
</h1>
</div>
<div class="clear hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
<asp:MenuItem Text="Google Maps">
<asp:MenuItem Text="HTML" Value="HTML" NavigateUrl="~/Map.htm"></asp:MenuItem>
<asp:MenuItem Text="ASPX" Value="ASPX" NavigateUrl="~/Map.aspx"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem NavigateUrl="~/Liens.aspx" Text="Liens utiles"/>
<asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/>
</Items>
</asp:Menu>
</div>
</div>
</form>
</body>
CSS :
.menu
{
padding: 4px 0px 4px 8px;
}
.menu ul
{
list-style: none;
margin: 0px;
padding: 0px;
width: auto;
}
.menu ul li a, .menu ul li a:visited
{
background-color: #465c71;
border: 1px #4e667d solid;
color: #dde4ec;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
}
.menu ul li a:hover
{
background-color: #bfcbd6;
color: #465c71;
text-decoration: none;
}
.menu ul li a:active
{
background-color: #465c71;
color: #cfdbe6;
text-decoration: none;
}
.menu ul ul
{
margin-left: 10%;
}
The problem I identified is that when runnning on IIS, an asp:menu is converted into a HTML div whereas with mono it is converted into a HTML table. It seems that when running on mono, the CSS class is not found as shown in the source :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><title>
</title><link rel="stylesheet" type="text/css" href="Styles/Site.css" />
<style type="text/css">
.ctl00_NavigationMenu_0 {background-color:White;}
.ctl00_NavigationMenu_1 {border-style:None;text-decoration:none;}
.ctl00_NavigationMenu_2 {}
</style></head>
<body>
<form name="aspnetForm" method="post" action="Arduino.aspx" id="aspnetForm">
[......]
<div class="clear hideSkiplink">
<a href="#ctl00_NavigationMenu_SkipLink">
<img alt="Skip Navigation Links" height="0" width="0" src="/WebSite/WebResource.axd?d=2OmH9jTSogXsrUt6aDvnYEihIak%3d_NWdhSxeypCYSJgIFnBFWuKjP9Rs%3d_f&t=634787585370000000" style="border-width:0px;" /></a>
<table cellpadding="0" cellspacing="0" border="0" id="ctl00_NavigationMenu" class="menu ctl00_NavigationMenu_2" IncludeStyleBlock="false">
<tr>
<td onmouseover="javascript:Menu_OverStaticLeafItem ('ctl00_NavigationMenu','0')" onmouseout="javascript:Menu_OutItem ('ctl00_NavigationMenu','0')">
<table id="ctl00_NavigationMenu_0i" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;">Home
</td>
</tr>
</table>
</td>
<td style="width:3px;"></td>
<td onmouseover="javascript:Menu_OverItem ('ctl00_NavigationMenu','1',null)" onmouseout="javascript:Menu_OutItem ('ctl00_NavigationMenu','1')">
<table id="ctl00_NavigationMenu_1i" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;">Google Maps
</td><td>
<img src="/WebSite/WebResource.axd?d=2OmH9jTSogXsrUt6aDvnYEihIak%3d_sxBDVaG6ao8vAH1kuYRka4pbdXI%3d_f&t=634787585370000000" border="0" alt="Expand Google Maps" />
</td>
</tr>
</table>
</td>
<td style="width:3px;"></td>
<td onmouseover="javascript:Menu_OverStaticLeafItem ('ctl00_NavigationMenu','2')" onmouseout="javascript:Menu_OutItem ('ctl00_NavigationMenu','2')">
<table id="ctl00_NavigationMenu_2i" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;">
Liens utiles
</td>
</tr>
</table>
</td>
<td style="width:3px;">
</td>
<td onmouseover="javascript:Menu_OverStaticLeafItem ('ctl00_NavigationMenu','3')" onmouseout="javascript:Menu_OutItem ('ctl00_NavigationMenu','3')">
<table id="ctl00_NavigationMenu_3i" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;">
About
</td>
</tr>
</table>
</td>
</tr>
</table>
<div class="" id="ctl00_NavigationMenu_1s" style="visibility:hidden;position:absolute;z-index:1;left:0px;top:0px;">
<div id="ctl00_NavigationMenu_1cu" onmouseover="Menu_OverScrollBtn ('ctl00_NavigationMenu','1','u')" onmouseout="Menu_OutScrollBtn ('ctl00_NavigationMenu','1','u')" style="display:block;text-align:center;">
<img src="/WebSite/WebResource.axd?d=2OmH9jTSogXsrUt6aDvnYEihIak%3d_BDOep8uzgXhnBosTOAXwCS8Rjzo%3d_f&t=634787585370000000" alt="Scroll up" />
</div>
<div id="ctl00_NavigationMenu_1cb">
<div id="ctl00_NavigationMenu_1cc">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td onmouseover="javascript:Menu_OverDynamicLeafItem ('ctl00_NavigationMenu','1_0','1')" onmouseout="javascript:Menu_OutItem ('ctl00_NavigationMenu','1_0','1')">
<table id="ctl00_NavigationMenu_1_0i" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="width:100%;white-space:nowrap;">
HTML
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td onmouseover="javascript:Menu_OverDynamicLeafItem ('ctl00_NavigationMenu','1_1','1')" onmouseout="javascript:Menu_OutItem ('ctl00_NavigationMenu','1_1','1')">
<table id="ctl00_NavigationMenu_1_1i" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="width:100%;white-space:nowrap;">
ASPX</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
<div id="ctl00_NavigationMenu_1cd" onmouseover="Menu_OverScrollBtn ('ctl00_NavigationMenu','1','d')" onmouseout="Menu_OutScrollBtn ('ctl00_NavigationMenu','1','d')" style="display:block;text-align:center;">
<img src="/WebSite/WebResource.axd?d=2OmH9jTSogXsrUt6aDvnYEihIak%3d_BiLWkNe4ZNGZnI7LWDxYAtinS8U%3d_f&t=634787585370000000" alt="Scroll down" />
</div>
</div>
<a id="ctl00_NavigationMenu_SkipLink"></a>
</div>
To be compared to the IIS version :
<div class="clear hideSkiplink">
<img alt="Liens Ignorer la navigation" src="/WebResource.axd?d=vNc13qxX3XhBCykqqeAM4K6DxyzXtiKPMSkmgOEeg_C2LMTfPWT8UVPq_FQ2dO_k8csGANppvDNQ8U1ILvqfCCUzXeU7VT9PTkQGnNHogQU1&t=634679288663570000" width="0" height="0" style="border-width:0px;" /><div class="menu" id="NavigationMenu">
<ul class="level1">
<li>
<a class="level1" href="Default.aspx">Home</a>
</li>
<li>
<a class="popout level1" href="#" onclick="__doPostBack('ctl00$NavigationMenu','Google Maps')">Google Maps</a>
<ul class="level2">
<li>
<a class="level2" href="Map.htm">HTML</a>
</li>
<li>
<a class="level2" href="Map.aspx">ASPX</a>
</li>
</ul>
</li>
<li>
<a class="level1" href="Liens.aspx">Liens utiles</a>
</li>
<li>
<a class="level1" href="About.aspx">About</a>
</li>
</ul>
</div>
<a id="NavigationMenu_SkipLink"></a>
</div>
Ok, after hours and hours to try to find the solution in the web.config, I finally found that the solution came from the version of mono-apache-server. I used the mono-apache-server2 instead of the 4.
I then installed the proper version, configured the virtual host and all is working fine now !
The anchor tag that ASP.NET puts in automatically adds the extra vertical space above the menu. An anchor tag gets put above the menu automatically and that screws up the rendering in Internet Explorer and Google Chrome. It works properly in Mozilla Firefox even with the anchor with the image.
To fix, add the SkipLinkText="" attribute to your ASP.NET menu control and that will fix the rendering issue.
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal" SkipLinkText="">
Related
I have an ASP.NET webpage.
If I run it via VS server, I get a first rendering (localhost screenshot).
When I upload the same code on the prod IIS server, and browse the same page on the same browser of the same computer with the same parameters,
I get a very different rendering (IIS prod screenshot).
What can be the cause of this?
For instance, the top left image is apparently rendered with a different size. This is not something I would have expected?????
Code of the page if it helps (I don't think so).
<div class="container-fluid" >
<div class="row" style="background-color:#002337;">
<div class="col-md-3" >
<table id="Tableau_01" width="801px" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="middle" bgcolor="#002337">
<img src="images/2016_page_html/Elements-pageHTML-Haut.png" alt="" width="220" height="200">
</td>
</tr>
<tr>
<td width="301" height="400" align="left" valign="top" bgcolor="#002337" style="margin-left: 50px;font-size: 0.80em; color: #FFF; font-family: News Gothic Medium, Helvetica, Verdana, Arial; line-height: 1.28em;">
<p style="margin-top: 20px; margin-bottom: 0px;margin-left: 50px;">
<asp:Image ID="i_imgLogoBleu" runat="server" Width="250px" />
</p>
<h3>
<p style="margin-left: 50px;">
<asp:Label ID="i_lblAdresse" runat="server" />
</p>
</h3>
</td>
</tr>
</table>
</div>
<div class="col-md-9 " style="background-color: #002337;height:600px;margin-top:50px" >
<form id="form1" class="form-horizontal" runat="server" >
<div class="" align="left" >
<div class="col-md-12" >
<telerik:RadScriptManager runat="server" ID="RadScriptManager1"></telerik:RadScriptManager>
<telerik:RadMediaPlayer ID="RadMediaPlayer1" runat="server" AutoPlay="True" Height="500px" Width="80%" Source="~/videos/video.mp4" BorderStyle="None" Skin="Silk" StartVolume="80" HDSource="~/videos/video.mp4">
</telerik:RadMediaPlayer>
</div>
</div>
</form>
</div>
</div>
<div class="row" style="background-color:#ffffff;" >
<div class="col-md-2"></div>
<div class="col-md-8">
<p style="padding-left: 15px; padding-top: 25px; font-family: Garamond, Georgia, Helvetica, Verdana; font-size: 2em; color: #002337;line-height: 1.2em; font-weight: bold;">
<asp:Label ID="i_lblContenu" runat="server" />
</p>
</div>
<div class="col-md-2">
<img src="images/2016_page_html/Elements-pageHTML-Bas.png" width="120" height="100" alt="logo_bas" name="logo_bas" id="logo_bas">
</div>
</div>
</div>
Thx in advance for sharing your knowledge.
A
Edit: the image difference does not look so obvious into the post. Do open both images into a new tab to really see the differences.
Main differences are:
size of the top left image
both image have a top blue frame and a bottom white frame. But on the localhost version, the white frame's height = the bottom image's height. On the prod version, the height is much bigger than this.
Clearly I must be missing something.
I am trying to get the content in the masthead to go from two to one column in mobile. It works fine everywhere except IE 7.5 mobile. Clearly display:block isn't doing what it should.
How do I get IE 7.5 to work responsively?
<!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"><!-- InstanceBegin template="/Templates/da-partnerbroadcast.dwt" codeOutsideHTMLIsLocked="false" --><head>
<!-- InstanceBeginEditable name="doctitle" -->
<title>Access Windows and Web Apps from a Chromebook</title>
<!-- InstanceEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- InstanceBeginEditable name="head" -->
<style type="text/css">
#import url(http://fonts.googleapis.com/css?family=Varela+Round);
#media screen and (min-device-width:320px) and (max-device-width:760px) {
table[id=wrapper] {
width:100% !important;
}
td[class=items] {
width:94% !important;
display:block;
clear:both;
padding-top:10px;
}
td[class=hide], br[class=hide] {
display:none;
}
table[id=masthead] {
font-size:16px !important;
}
img[class=resize] {
max-width:100% !important;
width:100%;
}
}
</style>
<!--[if gt IE 8]>
<style type="text/css">
table#wrapper {
background-color:green !important;
width:100% !important;
}
td[class=items] {
width:94% !important;
display:block;
clear:both;
padding-top:10px;
}
td[class=hide], br[class=hide] {
display:none;
}
table[id=masthead] {
font-size:16px !important;
}
img[class=resize] {
max-width:100% !important;
width:100%;
}
</style>
<![endif]-->
<!-- InstanceEndEditable -->
</head>
<body>
<!-- InstanceBeginEditable name="OUTER" -->
<table id="outerwrapper" width="98%" border="0" cellspacing="0" cellpadding="0" align="center" style="background-color:#e6e6e6;">
<!-- InstanceEndEditable -->
<tr>
<td>
<table id="wrapper" width="598" cellspacing="0" cellpadding="0" align="center">
<!--DA HEADER-->
<tr>
<td>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td class="items" align="center" valign="top" style="padding-right:10px;">
<img src="http://www3.districtadministration.com/mailing/logos/dalogo_new.png" alt="District Administration" width="250" height="54" hspace="0" vspace="0" border="0" /></td>
<td class="items" style="font-family:Helvetica, Arial, sans-serif; font-size:11px; -webkit-text-size-adjust:none; color:#999999;padding:10px;">
You are receiving this email as part of a free information service from <em>District Administration</em> Magazine.
</td>
</tr>
</table>
</td>
</tr>
<!--PARTNER CONTENT-->
<!-- InstanceBeginEditable name="Partner Content" -->
<tr>
<td style="border:1px solid #cccccc;background-color:#ffffff;">
<table id="partner" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="background-color:#56c9e8;">
<table id="masthead" cellpadding="0" cellspacing="0" width="100%" bgcolor="#56c9e8">
<tr>
<td class="items" style="text-align:center;padding-left:10px;">
<font face="'varela round', helvetica, arial, sans-serif">
<strong style="color:#ffffff;font-size:24px;line-height:30px;">Access Windows and Web Apps from a Chromebook</strong>
</font>
</td>
<td class="items" style="width:320px;text-align:center;">
<img class="resize" src="http://www3.districtadministration.com/mailing/partner/stoneware/2013/images/1008-mast.jpg" alt="" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="text-align:left;padding:30px;line-height:20px;">
<font face="'varela round', helvetica, arial, sans-serif" size="2" color="#666666">
Chromebooks are quickly gaining popularity in schools because of their web capabilities and cost effective price points. However, there are some issues associated with a Chromebook rollout. For example, if you have legacy Windows applications, you are forced to either abandon them or use different hardware to gain access to them. Additionally, Chromebooks do not support Java based web applications, limiting their effectiveness as an educational tool.
<br /><br />
There is also the issue of integrating Chromebooks into your existing infrastructure. How do you manage them easily with all the other machines you are managing?
<br /><br />
Stoneware products are a cost effective way to integrate Chromebooks into your existing IT environment. Our products webRDP and <a style="color:#00689c;" href="http://www.stone-ware.com/webnetwork" target="_blank">webNetwork</a> give you the ability to access legacy Windows applications, Java based web applications, as well as HTML5 web apps. <br /><br />
For a quick summary <a style="color:#00689c;" href="http://stone-ware.com/webnetwork/education-video" target="_new">watch our three-minute webNetwork video</a>. </font>
</td>
</tr>
<tr>
<td style="text-align:center;"><img src="http://www3.districtadministration.com/mailing/partner/stoneware/2013/images/btn_video.png" alt="[button] Watch the Video" width="200" height="45" border="0" />
<br /><br />
<img src="http://www3.districtadministration.com/mailing/partner/stoneware/2013/images/stoneware.png" alt="[logo] Stoneware" width="300" height="100" border="0" /></td>
</tr>
</table>
</td>
</tr>
<!-- InstanceEndEditable -->
<!--END PARTNER CONTENT-->
<!--DA FOOTER-->
<tr>
<td>
<table id="dafooter" width="100%" align="center">
<tr>
<td><table width="100%" align="center" cellpadding="0" cellspacing="0" style="margin-top:4px;">
<tr>
<td align="center" style="font-family:Helvetica, Arial, sans-serif;font-size:10px;color:#999999;padding-top:10px;text-align:left;">
This message was mailed to [EMAIL] as part of a free information service from <em>District Administration</em>. <a target="_blank" href='http://www.districtadministration.com' style="color:#999999;"><em>District Administration</em></a> is the award-winning magazine for district superintendents and other top K-12 education executives. To make sure you receive your <em>District Administration</em> emails, add partneremail#dapartner.net to your address book.
<br /><br />
To unsubscribe from these informational messages, please <a style="color:#999999;" href='[UNSUBURL]'>click here</a>. <a style="color:#999999;" href="http://districtadministration.com/managesubs/[CUID]">Manage Your Subscriptions</a>. <a target="_blank" href="http://www.districtadministration.com/page/privacy-policy" style="color:#999999;">View our Privacy Policy</a>.
<br /><br />
Published by: <a target="_blank" href='http://www.districtadministration.com/' style="color:#999999;"><em>District Administration</em></a>, 488 Main Ave., Norwalk, CT, 06851<br />
[COPYRIGHT]
</td>
</tr>
</table></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body><!-- InstanceEnd --></html>
If you apply a float to the table cells you're breaking. It should make it flow into one column.
td[class=items] {
width:94% !important;
display:block;
float:left;
clear:both;
padding-top:10px;
}
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.
So, I have a predicament. My tabs are pushing down the content below it. Here is some of the code:
<div id="navigation">
<div id="test" class="blue">
<p>Home</p>
<p class="subtext">View/update contact information</p>
</div>
<div id="lessons" class="blue">
<p>Projects</p>
<p class="subtext">Create/open projects, view existing reports</p>
</div>
<div id="test" class="blue">
<p>Help</p>
<p class="subtext">If something doesn't work, click here</p>
</div>
</div>
<div id="contain3">
<table id="maintable" align="center" width="940" cellspacing="0" cellpadding="0" class="lessontablemain">
<tr align="center" valign="top">
<td height="500" cellpadding="0" cellspacing="0">
<!--<div id="maincontent">-->
<table align="left" cellspacing="4" cellpadding="4" style=" margin-top:10px; background-color:transparent; border: 0;" width="100%" class="textfont_charms">
<tr>
<td cellspacing="0" cellpadding="0" align="center" valign="top">
<br>
<!--template up-->
<!--side bar table below -->
<? include_once("sidebar.php"); ?>
</td>
<td cellspacing="0" cellpadding="0" width="100%" valign="top" align="center">
<table id="maintable" style=" margin-top:10px; background-color:transparent; border: 0;" cellspacing="0" cellpadding="0" height="100%" valign="top" width="100%">
<tr>
<td valign="top" align="center" width="100%" cellspacing="0" cellpadding="0" height="100%">
<div align="center" id="content" style="vertical-align: top;"></div>
</td>
</tr>
</table>
<!--template down-->
</div>
</td>
</tr>
</table>
</tr>
<tr valign="bottom">
<td style="background-color: #E2E2E2;">
<?
include('template/footer_tmpl.php');
?>
</td>
</tr>
</table>
</div>
Here is my css:
#contain3{
width:940px;
margin-left:auto;
margin-right:auto;
text-align:left;
/*position: absolute;*/
top: 137;
z-index: -1;
}
#navigation{
width:940px;
margin-left: 8px;
text-align:left;
font-family:"Lucida Grande","Lucida Sans",sans-serif;
font-size:12px;
top: 109;
/*position: absolute;*/
z-index: 2;
}
To see what I'm talking about, my site is: http://www.charmscorp.com/inspect/projects.php - click on the tabs up above. Don't mind the slowness of the site, it's a server issue... so you have to wait a few seconds for the tabs to initialize.
Also, as you can see, I commented out position absolute. I thought that would be the answer, but instead, it just put the tab div on top of the content... Please help, this is giving me a headache!
Instead of making the divs with class "blue" higher - and thus revealing the drop down - why don't you show() the paragraphs with class "subtext" themselves instead?
Have them set to display: none by default, and use JavaScript to reveal them. You'll need to set them to position: absolute also, so they don't push any content down.
ok, I fixed this. I made the position: absolute, and then margin-top:27px, which pushed the content div down to where I wanted it to be. Another problem arose though, which is IE related. I'll start a new thread for that one though, as it's a new problem. Thanks!
Can someone please explain why IE7 insists on putting a space between the table and the ul in this example? It doesn't seem to happen in IE8 or FF.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<ul style="background-color: Blue;">
<li>
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color: Red">
<tr>
<td>
<img style="display: block" src="http://www.google.com/intl/en_ALL/images/logo.gif"
height="25" border="0" width="150" />
</td>
</tr>
</table>
<ul style="background-color: Green">
<li>One</li>
<li>Two</li>
</ul>
</li>
</ul>
</body>
</html>
You need to give hasLayout to the li containing the table and ul.
<ul style="background-color: Blue;">
<li style="zoom:1;">
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color: Red">
All browsers have different default styles. Some make more sense than others. Try using a CSS Reset to level the playing field, so to speak.
I've fought this problems with Internet explorer before, and this is the solution: remove the spaces between </td> and </tr> tags. This is how your html should be:
</td></tr></table>
The browser create a TextNode between </td> and </tr> and this is the additional space you see in your page.