Solved

ASP.net rendering problems in Firefox and Safari - Any Ideas?

Posted on 2009-06-28
1
1,289 Views
Last Modified: 2013-11-07
I am having a rendering issue with the RounderCornersExtender - see screen shots.

In safari the bottom of the panel/div doesnt render the bottom (see image1).
In both Safari and Firefox (see image 2)

But strangely this renders fine in IE 6, 7 and 8?

I've got the AjaxControlToolkit.dll in the bin directory.
I am using a masterpage and have the script manager embedded on the masterpage.

I am using ASP.NET 2.0 as my Hosting server doesnt support 3.0 or 3.5 at the moment. But am using AJAX Control Toolkit (using older version i think - let me know if you if need the version.

I can't see what is causing this - anyone else had similar problems or have a solution please, also on some pages there is no gap at all very strange!

Here is the code I am using see below for the 2 pages in question and see masterpage and the Web.Config files at bottom:


------ First Page - which has the missing bottom for roundered corners ----- in safari but fine in IE7 and Firefox -------

 

<%@ page title="Welcome to website" language="VB" masterpagefile="~/MasterPage.master"

    autoeventwireup="false" codefile="Home.aspx.vb" inherits="Default2" %>

 

<%@ register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>

<asp:content id="Content1" contentplaceholderid="head" runat="Server">

    <style type="text/css">

        #latestNews

        {

            margin-left: 10px;

        }

        #abouttheaward

   

            margin-left: 10px;

        }

    </style>

</asp:content>

<asp:content id="Content4" runat="server" contentplaceholderid="ContentPlaceHolder1">

    <div id="mainContent">

        <asp:panel id="Panel1" runat="server" backcolor="#FF691C" width="250px"

            cssclass="fltlft" ScrollBars="Auto">

       

        <div id="latestNews">

            <h3>

                Latest news

            </h3>

            <p>Text <a href="News.aspx">more</a>

      

            </p>

            <p>

               Text<a href="News.aspx">more</a>

            </p>

            <p>

                

                The team are out and about visiting you during April and May.

                <a href="News.aspx">more</a>

            </p>

            <p>

              

               Smile</p>

            </div>

            </asp:panel>

        <asp:panel id="Panel2" runat="server" backcolor="#5FBE5E" width="250px"

            cssclass="fltlft" ScrollBars="Auto">

                  

                  <div id="abouttheaward">

                  

                      <h3>

                          About</h3>

                      <p>

                         More Text

                      </p>

                <p>

                    Info...

                    <a href="Aboutus.aspx">About Us</a> section.</p>

            

                      <p>

                          &nbsp;</p>

            

                      <p>

                          &nbsp;</p>

            

           </div>     

 

 

 

 

 

 

----- SECOND PAGE  -- that has problem in Safari and Firefox with the gap at the top?

 

<%@ Page Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="News.aspx.vb" Inherits="_Default" title="News - welcome to Website" %>

 

<asp:content ID="Content1" ContentPlaceHolderID="head" Runat="Server">

    <style type="text/css">

        #ChildReadingNewspaper

        {

            width: 213px;

        }

        #RightContainer

        {

            width: 240px;

        }

    </style>

</asp:content>

 

<asp:content ID="Content4" runat="server" contentplaceholderid="Title">

                          

                   <h1>News</h1>      

            

</asp:content>

 

 

<asp:content ID="Content5" runat="server" 

    contentplaceholderid="ContentPlaceHolder1">

    

    

    <div id="LeftContainer" 

                            

    style="float: left; margin-right: 0px; width: 530px;" 

        class="fltlft">

			 

			          <h3> Awards finalists                      </h3>

      <p>Text</p>

                      <h3>Ceremony </h3>

                      <p>More Text</p>

                      <h3>Visits from the team </h3>

                      <p>Text</p>

                      <h3> Smile Month<a href="http://www.test.org"> 

                      <img align="right" alt="National Smile Month" src="images/Smile_Month_2009_LOGO.gif" 

                              style="border-width: 0px; width: 150px; height: 49px" /></a></h3>

                      <p>Smile</p>

                      <ul>

                          <li>heart disease </li>

                          <li>strokes </li>

                          <li>&nbsp;diabetes </li>

                      </ul>

                      <p>&nbsp;</p>

                      <p>&nbsp;</p>			       

                  

  </div>

				  <div id="RightContainer"style="padding: 10px; float: left; margin-right: 0px; width: 236px;" 

        class="fltlft">

				      <img id="ChildReadingNewspaper" alt="" src="images/ChildReadingNewspaper.jpg" /><br />

				      &nbsp;

				      

                      <asp:panel runat="server" ID="foodforthought" BackColor="#FF691B" width="239px">

				     

                      <br />   

			          <h3>  Food for Thought latest issue now available.				          </h3>

<p>

						     <a href="#">Click here</a> to to open.					   </p>

						  <p>

								    

						      Go to the Information page for archive issues of Food for Thought					      </p>

				          

                          <img id="GetAdobeReaderImage" align="middle" alt="Get Adobe Reader" 

                              src="images/get_adobe_reader.gif" style="width: 88px; height: 31px" />

 

				    </asp:panel>

				    

				      

			    </div>

 

 

 

</asp:content>

 

 

            

            </asp:panel>

        <img id="MainContentImage" alt="Girl Smiling" src="images/Picture8.jpg" />

        <cc1:roundedcornersextender id="RoundedCornersExtender1" runat="server" bordercolor="ActiveBorder"

            radius="30" targetcontrolid="Panel1">

        </cc1:roundedcornersextender>

        <cc1:roundedcornersextender id="RoundedCornersExtender2" runat="server" bordercolor="ActiveBorder"

            radius="30" targetcontrolid="Panel2">

        </cc1:roundedcornersextender>

        <br />

        <br />

    </div>

</asp:content>

<asp:content id="Content5" runat="server" contentplaceholderid="Title">

 

</asp:content>

 

 

--- Here is the masterpage code ---

 

 

<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>

 

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>

 

<!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 runat="server">

    

    <title>Website</title>

    <asp:ContentPlaceHolder id="head" runat="server">

    </asp:ContentPlaceHolder>

 

     

     

    <link href="stylesheet/twoColFixLtHdr.css" rel="stylesheet" type="text/css" />

 

     </head>

     

     <body/>

    

   

   <form id="form1" runat="server">

    

     	<div id="container">

        <div id="header">

          

        <img alt="Logo" src="images/Logo.jpg" 

                style="width: 173px; margin-top: 8px"/>&nbsp; 

        <img alt="Tomato " src="images/tomato.jpeg"/><img alt="Skipping rope" src="images/srope.jpeg" /><img alt="Green Apple" src="images/apple.jpeg" /><img alt="Crackers" src="images/crackers.jpeg" /><img 

                alt="Strawberries" src="images/strawberries.jpeg" 

                style="width: 130px; height: 80px"/><img alt="Toothbrush" src="images/toothbrush.jpeg"/>

            <br />

        <br />

    

        <asp:ScriptManager id="ScriptManager1" runat="server">

        </asp:ScriptManager>

            </div>

            

            <div id="CentralContent" style="color: #FFFFFF">

            

             <div id="sidebar1">

				<ul id="navlist">

				<li>

				<a href="Home.aspx">Home</a>					

				</li>

                <li>

						<a href="News.aspx">News</a>

				 </li>

				 <li>

						<a href="Aboutus.aspx">About Us</a>

					</li>

					<li>

						<a href="Information.aspx">Information</a>

					</li>

					<li>

						<a href="funwithfood.aspx" class="style2">Fun with Food</a>

					</li>

					<li>

						<a href="events.aspx">Events</a>

					</li>

					<li>

						<a href="contactus.aspx">Contact Us</a>

					</li>

					<li>

						<a href="links.aspx">Links</a>

					</li>

					<li>

						<a href="search.aspx">Search</a>

					</li>

				</ul><!-- end #sidebar1 -->

			</div>

            <div id="WelcomeTextTitle" style="background-color: #FFFFFF">

            <asp:ContentPlaceHolder id="Title" runat="server">

                          

                   <h1>Title</h1>       

            </asp:ContentPlaceHolder>

         </div>

        

       

			

			<div id="mainContent" style="width: 780px; background-color: #FFFFFF;">

        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

        

       

        </asp:ContentPlaceHolder>

        

         <div id="footer">

					<p><b> Copyright 2009</b>&nbsp;</p>

					<p><a href="home.aspx">Home</a> - <a href="news.aspx">News</a> - <a href="aboutus.aspx">About Us</a> - <a href="information.aspx">Information</a> - <a href="funwithfood.aspx">Fun with Food</a> - <a href="events.aspx">Events</a> - <a href="contactus.html">Contact Us</a> - <a href="links.html">Links</a> - <a href="search.html">Search</a><!-- end #footer -->

			        </p>

              

         </div>

         </div>

         </div>       

         </div>

    </form>

</body>

</html>

 

<?xml version="1.0"?>

<configuration>

	<configSections>

		<sectionGroup name="system.web.extensions" type="System.Web.Configuration.SystemWebExtensionsSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">

			<sectionGroup name="scripting" type="System.Web.Configuration.ScriptingSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">

				<section name="scriptResourceHandler" type="System.Web.Configuration.ScriptingScriptResourceHandlerSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication"/>

				<sectionGroup name="webServices" type="System.Web.Configuration.ScriptingWebServicesSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">

					<section name="jsonSerialization" type="System.Web.Configuration.ScriptingJsonSerializationSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="Everywhere"/>

					<section name="profileService" type="System.Web.Configuration.ScriptingProfileServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication"/>

					<section name="authenticationService" type="System.Web.Configuration.ScriptingAuthenticationServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication"/>

				</sectionGroup>

			</sectionGroup>

		</sectionGroup>

	</configSections>

	<system.web>

		<pages>

			<controls>

				<add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

				<add namespace="AjaxControlToolkit" assembly="AjaxControlToolkit" tagPrefix="ajaxToolkit"/>

			</controls>

		</pages>

		<!--

          Set compilation debug="true" to insert debugging

          symbols into the compiled page. Because this

          affects performance, set this value to true only

          during development.

    -->

		<compilation debug="true">

			<assemblies>

				<add assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

			</assemblies>

		</compilation>

		<httpHandlers>

			<remove verb="*" path="*.asmx"/>

			<add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

			<add verb="*" path="*_AppService.axd" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

			<add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/>

		</httpHandlers>

		<httpModules>

			<add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

		</httpModules>

	</system.web>

	<system.web.extensions>

		<scripting>

			<webServices>

				<!-- Uncomment this line to customize maxJsonLength and add a custom converter -->

				<!--

      <jsonSerialization maxJsonLength="500">

        <converters>

          <add name="ConvertMe" type="Acme.SubAcme.ConvertMeTypeConverter"/>

        </converters>

      </jsonSerialization>

      -->

				<!-- Uncomment this line to enable the authentication service. Include requireSSL="true" if appropriate. -->

				<!--

        <authenticationService enabled="true" requireSSL = "true|false"/>

      -->

				<!-- Uncomment these lines to enable the profile service. To allow profile properties to be retrieved

           and modified in ASP.NET AJAX applications, you need to add each property name to the readAccessProperties and

           writeAccessProperties attributes. -->

				<!--

      <profileService enabled="true"

                      readAccessProperties="propertyname1,propertyname2"

                      writeAccessProperties="propertyname1,propertyname2" />

      -->

			</webServices>

			<!--

      <scriptResourceHandler enableCompression="true" enableCaching="true" />

      -->

		</scripting>

	</system.web.extensions>

	<system.webServer>

		<validation validateIntegratedModeConfiguration="false"/>

		<modules>

			<add name="ScriptModule" preCondition="integratedMode" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

		</modules>

		<handlers>

			<remove name="WebServiceHandlerFactory-Integrated"/>

			<add name="ScriptHandlerFactory" verb="*" path="*.asmx" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

			<add name="ScriptHandlerFactoryAppServices" verb="*" path="*_AppService.axd" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

			<add name="ScriptResource" preCondition="integratedMode" verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

		</handlers>

	</system.webServer>

</configuration>

Open in new window

screenshot1safarionly.png
screenshot2safari-firefox.png
0
Comment
Question by:adypips
1 Comment
 

Accepted Solution

by:
adypips earned 0 total points
ID: 24768355
test
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Pass through dll 2 38
Paging GridView 7 34
How can I use this extension method? 8 36
String manipulation 15 49
Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Sending a Secure fax is easy with eFax Corporate (http://www.enterprise.efax.com). First, Just open a new email message.  In the To field, type your recipient's fax number @efaxsend.com. You can even send a secure international fax — just include t…
Illustrator's Shape Builder tool will let you combine shapes visually and interactively. This video shows the Mac version, but the tool works the same way in Windows. To follow along with this video, you can draw your own shapes or download the file…

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now