?
Solved

Problem with <DIV> css in Safari

Posted on 2009-04-24
1
Medium Priority
?
605 Views
Last Modified: 2012-05-06
I have created a small test website to show the problem I am having. In IE everything looks ok, but when I open in Safari the <div>'s are not correct. In Safari, the top level divs of row1, row2 and row3 are stacked up at the top and the inner divs of R1.1, R1.2, R2.f, R3.1 and R3.2 expand in there own area.
The inner divs of R1.1, R1.2 etc have no effect on the size of the outer divs of row1, row2 etc
Here is my code, code-behind and css.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestSafari.aspx.cs" Inherits="Default4" %>
 
<!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></title>
    <script type="text/javascript">
    
      function pageLoad() {
      }
    
    </script>
    <link href="vStyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <div id="row1" class="ReservationRow">
            <div id="R1.1" class="ReservationCol1">
                This is area R1.1
            </div>
            <div id="R1.2" class="ReservationCol2">
                This is area R1.2
            </div>
        </div>
        <div id="row2" class="ReservationRow">
            <div id="R2.f" class="ReservationColFull">
                This is area R2.full
            </div>
        </div>
        <div id="row3" class="ReservationRow">
            <div id="r3.1" class="ReservationCol1">
                This is area 3.1
            </div>
            <div id="r3.2" class="ReservationCol2">
            </div>
        </div>     
    </div>
    </form>
</body>
</html>
 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
 
public partial class Default4 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (Request.ServerVariables["http_user_agent"].IndexOf("Safari", StringComparison.CurrentCultureIgnoreCase) != -1)
            Page.ClientTarget = "uplevel";
    }
}
 
body {
}
.ReservationRow
{
    width:80%;
    margin-left:auto;
    margin-right:auto;
    border-style:double;
    border-color:Black;
    border-width:thick;
}
.ReservationCol1
{
    float:left;
    width:49%;
    border-style:solid;
    border-color:Red;
    border-width:medium;
}
.ReservationCol2
{
    float:right;
    width:49%;
    border-style:solid;
    border-color:Blue;
    border-width:medium;
}
.ReservationColFull
{
    margin-left:auto;
    margin-right:auto;
    width:98%;
    border-style:solid;
    border-color:Fuchsia;
    border-width:medium;
}

Open in new window

0
Comment
Question by:ubo-jfeeney
1 Comment
 

Accepted Solution

by:
ubo-jfeeney earned 0 total points
ID: 24228897
I found it:
I needed to add overflow:auto to the css of the ReservationRow class
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I have developed many web applications with asp & asp.net and to add and use a dropdownlist was always a very simple task, but with the new asp.net, setting the value is a bit tricky and its not similar to the old traditional method. So in this a…
IntroductionWhile developing web applications, a single page might contain many regions and each region might contain many number of controls with the capability to perform  postback. Many times you might need to perform some action on an ASP.NET po…
Are you ready to place your question in front of subject-matter experts for more timely responses? With the release of Priority Question, Premium Members, Team Accounts and Qualified Experts can now identify the emergent level of their issue, signal…
Is your OST file inaccessible, Need to transfer OST file from one computer to another? Want to convert OST file to PST? If the answer to any of the above question is yes, then look no further. With the help of Stellar OST to PST Converter, you can e…
Suggested Courses
Course of the Month15 days, 3 hours left to enroll

839 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