?
Solved

CSS problem in IE: margin added even though none specified

Posted on 2011-05-10
38
Medium Priority
?
310 Views
Last Modified: 2012-05-11
I'm trying to do the simplest thing, after deciding to learn how to deal with a flow layout... and after days on it... i just can't get it working! It's unbelievable! Maybe I'm just not getting it, or am not paying attention to something...

I have a three column layout with header and footer. All I'm trying to do, is put some text in the left column and a list below it (which in this case contains dropdownlists and textboxes). Got nowhere trying to do it in a flowlayout as it's impossible to organise spacing and padding etc. So, decided to put them both into divs and still unbelievably just cannot get them to display as I want. they just go whereever they want...

So, this is where I am now... I've attached the css below. At the moment, what I see is leftcol displayed fine. In leftcol the first thing that is displayed is divManualTasksHeader (containing the paragraph text). The first thing I notice is that even though i set divManualTasksHeader to width:100% I can see that it only seems to fill about 90% of leftcol?

The second thing I notice is that a margin (about 20% of leftcol) is added to the left side of divManualTasksOptions (this doesn't appear in firefox). In truth, it looks ok because I would actually have added a border anyway, but of course, it's no good if it mysteriously adds one in IE even though I have not explicitely specified one, and of course it's not there in firefox...

I've tried everything i can think of, adding in clear:both to the divs, display inline... all the things that I've read solve IE bugs. steeeeep learning curve with this stuff... any ideas?
/* Layout columns */
#leftcol {display:inline; float:left; width:30%; height:500px; border: 1px solid;}

/* leftcol */
#divManualTasksHeader {width:100%; height:5em;} //div which will hold the paragraph text
#para1 {padding-left:6em; padding-top:3em; Font-Size:0.75em;} //paragraph text
#divManualTasksOptions {float:left;} //div which will hold the ul list
#divManualTasksOptions ul{list-style: none; padding: 1em; border: 0.5em groove;} //ul list

Open in new window

0
Comment
Question by:AidenA
  • 17
  • 12
  • 7
  • +1
38 Comments
 
LVL 9

Expert Comment

by:iGottZ
ID: 35729666
have you tryed adding a doctype?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

something like this on top of the html
0
 
LVL 13

Expert Comment

by:jonahzona
ID: 35729685
Is it possible to get the full markup including HTML? :)
0
 

Author Comment

by:AidenA
ID: 35729726
well it's quite a few lines at this stage, but still small enough I suppose...

CSS is at the bottom...
<%@ Page Language="VB" EnableEventValidation="false" AutoEventWireup="false" CodeFile="User.aspx.vb" Inherits="User" Debug="true"%>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI" TagPrefix="asp" %>
<%@ Reference Page="Login_a.aspx" %>

<!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 id="Head1" runat="server">
    <title>Manual Tasks</title>
    
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
    
    <script type="text/javascript" src="JScript.js">

    </script>
    
    <script type="text/vbscript"> 
        'VBScript Only works in Internet Explorer
        'document.write("Hello World")
    </script>
    
    <style type="text/css">
    </style>

</head>
<body class="manualTasks">
    <form id="form1" runat="server">
        
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <asp:SqlDataSource ID="SqlBillingAnalyst" runat="server" ConnectionString="<%$ ConnectionStrings:ManualTasksConnectionString %>" ProviderName="<%$ ConnectionStrings:ManualTasksConnectionString.ProviderName %>" SelectCommand="SELECT DISTINCT [UserName] FROM [User_Information] WHERE ([UserName] IS NOT NULL)"></asp:SqlDataSource>
        <asp:SqlDataSource ID="SqlBillingTeam" runat="server" ConnectionString="<%$ ConnectionStrings:ManualTasksConnectionString %>" ProviderName="<%$ ConnectionStrings:ManualTasksConnectionString.ProviderName %>" SelectCommand="SELECT DISTINCT [Team] FROM [User_Information] WHERE ([Team] IS NOT NULL)"></asp:SqlDataSource>
        
        <cc1:TextBoxWatermarkExtender   ID="TextBoxWatermarkExtender1" 
                                        runat="server" 
                                        WatermarkText=" Customer Name" 
                                        TargetControlID="txtCustomerName">
        </cc1:TextBoxWatermarkExtender>
        <cc1:TextBoxWatermarkExtender   ID="TextBoxWatermarkExtender2" 
                                        runat="server" 
                                        WatermarkText=" Customer IC01" 
                                        TargetControlID="txtCustomerIC01">
        </cc1:TextBoxWatermarkExtender>
        <cc1:TextBoxWatermarkExtender   ID="TextBoxWatermarkExtender3" 
                                        runat="server" 
                                        WatermarkText=" Customer BAN" 
                                        TargetControlID="txtCustomerBAN">
        </cc1:TextBoxWatermarkExtender>
        <cc1:TextBoxWatermarkExtender   ID="TextBoxWatermarkExtender4" 
                                        runat="server" 
                                        WatermarkText=" Type Description" 
                                        TargetControlID="txtTypeDesc">
        </cc1:TextBoxWatermarkExtender>
        
        <div id="header">
            <asp:Menu   DisappearAfter="250" Orientation="Horizontal" DynamicHorizontalOffset="2" DynamicVerticalOffset="50" StaticSubMenuIndent="10px" StaticDisplayLevels="2" MaximumDynamicDisplayLevels="1" ID="Menu2" runat="server" style="z-index: 101; left: 216px; position: absolute; top: 5px" BackColor="White" Font-Names="Verdana" Font-Size="0.8em" ForeColor="#7C6F57" Width="552px">
                         <DynamicHoverStyle BackColor="#7C6F57" Font-Bold="True" ForeColor="White" />
                         <DynamicMenuItemStyle BackColor="Orange" Font-Italic="True" HorizontalPadding="5px" VerticalPadding="2px" />
                        <Items>
                            <asp:MenuItem NavigateUrl="~/UserInformation.aspx" Text="User Information" Value="User Information" ToolTip="Display User Information">
                            </asp:MenuItem>
                            <asp:MenuItem Text="Record Status" Value="Query Status" ToolTip="Show current status of each query">
                            </asp:MenuItem>
                            <asp:MenuItem Text="Excel Reports" Value="Excel Reports" ToolTip="Extract records into Excel">
                            </asp:MenuItem>
                            <asp:MenuItem Text="Source Data" Value="Source Data" ToolTip="Display source data from which these queries are run">
                            </asp:MenuItem>
                        </Items>
                        <StaticHoverStyle BackColor="#7C6F57" ForeColor="White" />
                        <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
                        <DynamicMenuStyle BackColor="#F7F6F3" />
                        <StaticSelectedStyle BackColor="#5D7B9D" />
                        <DynamicSelectedStyle BackColor="#5D7B9D" />
            </asp:Menu>
            
            <asp:Button ID="btnSignOut" runat="server" BackColor="White" BorderColor="White"
                    Font-Underline="True" ForeColor="Blue" Style="z-index: 100; left: 755px; position: absolute;
                    top: 8px; text-align: right;" Text="Sign Out" BorderStyle="None" Font-Size="X-Small" Width="232px" />
        </div>

        <div id="leftcol">
            <div id="divManualTasksHeader">
                <p id="para1">Manual Tasks: <br /> Select task options below</p>
            </div>
            <div id="divManualTasksOptions">
                <ul id="ulManualTasksOptions">
                    <li><asp:DropDownList ID="ddlBillingAnalyst"  CssClass="ddlStandard" runat="server" AppendDataBoundItems="True" DataSourceID="SqlBillingAnalyst" DataTextField="UserName" DataValueField="UserName">
                            <asp:ListItem>Billing Analyst</asp:ListItem>
                        </asp:DropDownList></li>
                    <li><asp:DropDownList ID="ddlBillingTeam" runat="server" CssClass="ddlStandard" AppendDataBoundItems="True" DataSourceID="SqlBillingTeam" DataTextField="Team" DataValueField="Team">
                            <asp:ListItem>Billing Team</asp:ListItem>
                        </asp:DropDownList></li>
                    <li><asp:TextBox ID="txtCustomerName" runat="server"></asp:TextBox></li>
                    <li><asp:TextBox ID="txtCustomerIC01" runat="server"></asp:TextBox></li>
                    <li><asp:TextBox ID="txtCustomerBAN" runat="server"></asp:TextBox></li>
                    <li><asp:DropDownList ID="ddlBillingStream" runat="server" CssClass="ddlStandard">
                            <asp:ListItem>Billing Stream</asp:ListItem>
                        </asp:DropDownList></li>
                    <li><asp:DropDownList ID="TaskTypeL1" runat="server" CssClass="ddlStandard">
                            <asp:ListItem>Task Type</asp:ListItem>
                        </asp:DropDownList></li>
                    <li><asp:DropDownList ID="TaskTypeL2" runat="server" CssClass="ddlStandard">
                            <asp:ListItem>Task Sub-Type</asp:ListItem>
                        </asp:DropDownList></li>
                    <li><asp:TextBox ID="txtTypeDesc" runat="server"></asp:TextBox></li>
                    <li><asp:DropDownList ID="ddlTarget" runat="server" CssClass="ddlStandard">
                            <asp:ListItem>Target</asp:ListItem>
                        </asp:DropDownList></li>
                    <li><asp:DropDownList ID="ddlPeriod" runat="server" CssClass="ddlStandard">
                            <asp:ListItem>Period</asp:ListItem>
                        </asp:DropDownList></li>
                    <li><asp:DropDownList ID="Criticality" runat="server" CssClass="ddlStandard">
                            <asp:ListItem>Criticality</asp:ListItem>
                        </asp:DropDownList></li>
                </ul>
            </div>
        </div>
        
        <div id="content">
                <div id="divContentSpacer">
                </div>
                <ul id="ulPeriod">
                    <li><asp:RadioButton ID="radOnceOff" runat="server" GroupName="radPeriod" Text="Once-off" AutoPostBack="True"/></li>
                    <li><asp:RadioButton ID="radDaily" runat="server"  GroupName="radPeriod" Text="Daily" AutoPostBack="True"/></li>
                    <li><asp:RadioButton ID="radWeekly" runat="server"  GroupName="radPeriod" Text="Weekly" AutoPostBack="True" /></li>
                    <li><asp:RadioButton ID="radMonthly" runat="server" GroupName="radPeriod" Text="Montly" AutoPostBack="True"/></li>
                    <li><asp:RadioButton ID="radQuarterly" runat="server" GroupName="radPeriod" Text="Quarterly" AutoPostBack="True"/></li>
                    <li><asp:RadioButton ID="radBiMonthly" runat="server" GroupName="radPeriod" Text="Bi-Monthly"  AutoPostBack="True"/></li>
                    <li><asp:RadioButton ID="radYearly" runat="server" GroupName="radPeriod" Text="Yearly" AutoPostBack="True"/></li>
                </ul>
                <asp:UpdatePanel ID="updDay" runat="server">
                    <ContentTemplate>
                        <asp:Label ID="lblBiMonthly" runat="server" Text="Please select the day (if every second week) or pick the dates required:" Visible="False" ></asp:Label>
                        <asp:Panel ID="pnlDay" runat="server" Visible="False">
                            <table style="left: 160px; width: 150px;" border="1">
                                <tr>
                                    <td style="width: 210px"><asp:RadioButton ID="radMonday" runat="server" GroupName="radDay" Text="Monday" /></td>
                                </tr>
                                <tr>
                                    <td style="width: 210px"><asp:RadioButton ID="radTuesday" runat="server"  GroupName="radDay" Text="Tuesday" /></td>
                                </tr>
                                <tr>
                                    <td style="width: 210px"><asp:RadioButton ID="radWednesday" runat="server" GroupName="radDay" Text="Wednesday" /></td>
                                </tr>
                                <tr>
                                    <td style="width: 210px"><asp:RadioButton ID="radThursday" runat="server" GroupName="radDay" Text="Thursday" /></td>
                                </tr>
                                <tr>
                                    <td style="width: 210px"><asp:RadioButton ID="radFriday" runat="server" GroupName="radDay" Text="Friday" /></td>
                                </tr>
                            </table>
                        </asp:Panel>
                        <br /><br />
                        <asp:Panel ID="pnlBiMonthlyCalendar" runat="server" Visible="False">
                            <cc1:CalendarExtender  ID="CalendarExtender3" runat="server"  TargetControlID="txtDate1" Format="dd/MM/yyyy" PopupButtonID="imgDate1" CssClass="ajax__calendar">
                            </cc1:CalendarExtender>
                            <cc1:CalendarExtender ID="CalendarExtender4" runat="server" TargetControlID="txtDate2" Format="dd/MM/yyyy"  PopupButtonID="imgDate2" CssClass="ajax__calendar">
                            </cc1:CalendarExtender>
                            <table style="z-index: 116; left: 592px; top: 104px; float:left;">
                                <tr>
                                    <td style="z-index: 1; width: 94px; height: 26px;"><asp:TextBox ID="txtDate1" runat="server" Width="88px">Date 1</asp:TextBox></td>
                                    <td style="width: 26px; height: 26px;"><asp:Image ID="imgDate1" runat="server" ImageUrl="~\Images\Calendar_scheduleHS.png" /></td>
                                 </tr>
                                 <tr>
                                    <td style="width: 94px; height: 26px;"><asp:TextBox ID="txtDate2" runat="server" Width="88px">Date 2</asp:TextBox></td>
                                    <td style="width: 26px; height: 26px;"><asp:Image ID="imgDate2" runat="server" ImageUrl="~\Images\Calendar_scheduleHS.png" /></td>
                                 </tr>
                            </table>
                        </asp:Panel>
                    </ContentTemplate>
                    <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="radOnceOff" EventName="CheckedChanged"/>
                        <asp:AsyncPostBackTrigger ControlID="radDaily" EventName="CheckedChanged"/>
                        <asp:AsyncPostBackTrigger ControlID="radWeekly" EventName="CheckedChanged"/>
                        <asp:AsyncPostBackTrigger ControlID="radMonthly" EventName="CheckedChanged"/>
                        <asp:AsyncPostBackTrigger ControlID="radBiMonthly" EventName="CheckedChanged"/>
                        <asp:AsyncPostBackTrigger ControlID="radQuarterly" EventName="CheckedChanged"/>
                        <asp:AsyncPostBackTrigger ControlID="radYearly" EventName="CheckedChanged"/>
                    </Triggers>
                </asp:UpdatePanel>
        </div>      


        <div id="rightcol">
            <cc1:CalendarExtender  ID="CalendarExtender1" runat="server"  TargetControlID="txtStartDate" Format="dd/MM/yyyy" PopupButtonID="Image1" CssClass="ajax__calendar">
            </cc1:CalendarExtender>
            <cc1:CalendarExtender ID="CalendarExtender2" runat="server" TargetControlID="txtEndDate" Format="dd/MM/yyyy"  PopupButtonID="Image2" CssClass="ajax__calendar">
            </cc1:CalendarExtender>
            <br/><br/><br/><br/><br/>
            <table style="z-index: 116; left: 592px; top: 104px; float:left;">
                <tr>
                    <td style="z-index: 1; width: 94px; height: 26px;"><asp:TextBox ID="txtStartDate" runat="server" Width="88px">Start Date</asp:TextBox></td>
                    <td style="width: 26px; height: 26px;"><asp:Image ID="Image1" runat="server" ImageUrl="~\Images\Calendar_scheduleHS.png" /></td>
                 </tr>
                 <tr>
                    <td style="width: 94px; height: 26px;"><asp:TextBox ID="txtEndDate" runat="server" Width="88px">End Date</asp:TextBox></td>
                    <td style="width: 26px; height: 26px;"><asp:Image ID="Image2" runat="server" ImageUrl="~\Images\Calendar_scheduleHS.png" /></td>
                 </tr>
            </table>
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
            <asp:Button ID="btnSubmit" runat="server" Text="Submit" />
        </div>
       
        <div id="footer">

        </div>

 </form>
    
  
    
    
    
</body>
</html>


//CSS
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;	padding: 0;	border: 0;
}

body {}

/* Layout columns */
#leftcol {display:inline; float:left; width:30%; height:500px; border: 1px solid;}
#content {display:inline; float:left; width:40%; height:500px; border: 1px solid;}
#rightcol {float:left; width:30%; height:500px; border: 1px solid;}
#header {width:100%; height:20%;  background-color:#FFD700;}
#footer {clear:both; width:100%; height:20%; text-align:center; background-color:#FFA500;}

/* leftcol */
#divManualTasksHeader {width:100%; height:5em; border:1px solid;}
#para1 {padding-left:6em; padding-top:3em; Font-Size:0.75em;}
#divManualTasksOptions {float:left; border:1px solid;}
#divManualTasksOptions ul{list-style: none; padding: 1em; border: 0.5em groove;}

/* content */
#divContentSpacer{width:100%; height:5em;}
#ulPeriod {display:inline; float:left; width:120px; list-style: none; border: 0.5em groove;}
#lblBiMonthly{float:right; Width:144px; padding-bottom:5px; padding-right:50px; Font-Size:Small;}
#pnlDay{float:right; Width:150px; left: 172px; padding-top:5px; padding-bottom:5px; padding-right:50px;}
#pnlBiMonthlyCalendar{float:right; Width:112px; left: 172px; padding-top:5px; padding-right:75px; Border:1px;}

/* rightcol */


/* Class ddlStandard */
.ddlStandard{width:220px} 


/*Calendar control*/
.MyCalendar .ajax__calendar_container 
{
	z-index : 5000000 ;
    border:1px solid #646464;
    background-color: white;
    color: black;
}
.MyCalendar .ajax__calendar_other .ajax__calendar_day,
.MyCalendar .ajax__calendar_other .ajax__calendar_year {
    color: gray;
}
.MyCalendar .ajax__calendar_hover .ajax__calendar_day,
.MyCalendar .ajax__calendar_hover .ajax__calendar_month,
.MyCalendar .ajax__calendar_hover .ajax__calendar_year {
    color: blue;
}
.MyCalendar .ajax__calendar_active .ajax__calendar_day,
.MyCalendar .ajax__calendar_active .ajax__calendar_month,
.MyCalendar .ajax__calendar_active .ajax__calendar_year {
    color: blue;
    font-weight:bold;
}

Open in new window

0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 9

Expert Comment

by:iGottZ
ID: 35729734
can you post a markup without asp stuff in it?

pure html i mean.
0
 
LVL 1

Expert Comment

by:aderse02
ID: 35729746
So you say that the left column is displaying fine, but then you go on to say that it is not?  A little confusing there.

Can you send us the full HTML file or at least the left column.  I would like to say that the padding-left you added to #para1 and the padding you added to the ul might be causing this in IE.

EM can be read differently from Firefox to IE.  Try using a static pixel amount like 10px or 15px and see if that begins to standardize your layout.
0
 
LVL 13

Expert Comment

by:jonahzona
ID: 35729749
Yes, a parsed HTML page would be good. Easy way to do this would be to open your page in your browser letting the ASP server render the html. Just right click at hit view source. Copy all that and paste it here.
0
 

Author Comment

by:AidenA
ID: 35729780
what you mean? the sourcecode from with IE is it? Have added that below if that's the case
<!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 id="Head1"><title>
	Manual Tasks
</title><link href="StyleSheet.css" rel="stylesheet" type="text/css" />
    
    <script type="text/javascript" src="JScript.js">

    </script>
    
    <script type="text/vbscript"> 
        'VBScript Only works in Internet Explorer
        'document.write("Hello World")
    </script>
    
    <style type="text/css">
    </style>

<link href="/ManualTasks/WebResource.axd?d=_Cm0Yj_iO7euSpX5V4mO7nQbjptgFym9tguALxduO37y6pQFVotXyutkJM_KDk3kHUCxzx8LYoU3yFy-7ec-tkOXq9x4bc7RZrPX5t4gh4HCg_bf0&amp;t=633398780440000000" type="text/css" rel="stylesheet" /><style type="text/css">
	.Menu2_0 { background-color:white;visibility:hidden;display:none;position:absolute;left:0px;top:0px; }
	.Menu2_1 { color:#7C6F57;font-family:Verdana;font-size:0.8em;text-decoration:none; }
	.Menu2_2 { color:#7C6F57;background-color:White;font-family:Verdana;font-size:0.8em;width:552px; }
	.Menu2_3 {  }
	.Menu2_4 { padding:2px 5px 2px 5px; }
	.Menu2_5 { font-style:italic; }
	.Menu2_6 { background-color:Orange;padding:2px 5px 2px 5px; }
	.Menu2_7 { background-color:#F7F6F3; }
	.Menu2_8 {  }
	.Menu2_9 { background-color:#5D7B9D; }
	.Menu2_10 {  }
	.Menu2_11 { background-color:#5D7B9D; }
	.Menu2_12 { color:White; }
	.Menu2_13 { color:White;background-color:#7C6F57; }
	.Menu2_14 { color:White;font-weight:bold; }
	.Menu2_15 { color:White;background-color:#7C6F57;font-weight:bold; }

</style></head>
<body class="manualTasks">
    <form name="form1" method="post" action="User.aspx" onsubmit="javascript:return WebForm_OnSubmit();" id="form1">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__LASTFOCUS" id="__LASTFOCUS" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTM0MTc2OTgzOQ9kFgICAw9kFggCEw8QDxYCHgtfIURhdGFCb3VuZGdkDxYfAgECAgIDAgQCBQIGAgcCCAIJAgoCCwIMAg0CDgIPAhACEQISAhMCFAIVAhYCFwIYAhkCGgIbAhwCHQIeAh8WHxAFAWEFAWFnEAUMQWlkZW4uQXJkaWxsBQxBaWRlbi5BcmRpbGxnEAUKQWxhbmEuQ2hhZQUKQWxhbmEuQ2hhZWcQBRFBbmEgTGF1cmEuQWJyYWhhbQURQW5hIExhdXJhLkFicmFoYW1nEAUNQW5uYS5Qcnp5YnlsbwUNQW5uYS5Qcnp5Ynlsb2cQBQxBbm5lLkhvbG9oYW4FDEFubmUuSG9sb2hhbmcQBQ9Bbm4tTWFyaWUuQ2FzZXkFD0Fubi1NYXJpZS5DYXNleWcQBQ5BbnRob255Lk11cnBoeQUOQW50aG9ueS5NdXJwaHlnEAUNQnJpYW4uRG93bGluZwUNQnJpYW4uRG93bGluZ2cQBRdDZWxlc3RlLkdvbnphbGV6cmFtaXJlegUXQ2VsZXN0ZS5Hb256YWxlenJhbWlyZXpnEAUQRGVuaXNlLlN3YW5lcG9lbAUQRGVuaXNlLlN3YW5lcG9lbGcQBQxFYW1vbm4uV2Fsc2gFDEVhbW9ubi5XYWxzaGcQBQxFbGluYS5DaXBhbmUFDEVsaW5hLkNpcGFuZWcQBQ1HZW5pZS5Qb2lzc29uBQ1HZW5pZS5Qb2lzc29uZxAFDUdsYWR5cy5BY2NpcGUFDUdsYWR5cy5BY2NpcGVnEAUMSGVsZW4uTXVycGh5BQxIZWxlbi5NdXJwaHlnEAUNSmFtaWUuR2lsbGV0dAUNSmFtaWUuR2lsbGV0dGcQBQtKZW5ueS5EZXZveQULSmVubnkuRGV2b3lnEAUKSml5b3VuLktpbQUKSml5b3VuLktpbWcQBQ9Mb3Vpc2UuTXVscXVlZW4FD0xvdWlzZS5NdWxxdWVlbmcQBQ9NYXJnYXJldC5NY0Nhbm4FD01hcmdhcmV0Lk1jQ2FubmcQBQ9NYXNha28uTnVub2thd2EFD01hc2Frby5OdW5va2F3YWcQBQ9NaWNoYWVsLk11bGhhbGwFD01pY2hhZWwuTXVsaGFsbGcQBQ5NaWNoZWxsZS5MdWNleQUOTWljaGVsbGUuTHVjZXlnEAUOUmF6YXIuVmFpbm9tYWUFDlJhemFyLlZhaW5vbWFlZxAFDlJpY2hhcmQuVG9waGFtBQ5SaWNoYXJkLlRvcGhhbWcQBQxSb2JlcnQuV2Fsc2gFDFJvYmVydC5XYWxzaGcQBQZSVVNTSUEFBlJVU1NJQWcQBQtTaW5lYWQuUnlhbgULU2luZWFkLlJ5YW5nEAUOU3RlcGhlbi5MaXR0bGUFDlN0ZXBoZW4uTGl0dGxlZxAFC1phbmUuRWdsaXRlBQtaYW5lLkVnbGl0ZWdkZAIVDxAPFgIfAGdkDxYJAgECAgIDAgQCBQIGAgcCCAIJFgkQBQFhBQFhZxAFBkFQQS9OTAUGQVBBL05MZxAFD0NoYW5uZWxzL0ZyYW5jZQUPQ2hhbm5lbHMvRnJhbmNlZxAFBkVNRUEgMQUGRU1FQSAxZxAFBkVNRUEgMgUGRU1FQSAyZxAFCkVNRUEgMy9MQU0FCkVNRUEgMy9MQU1nEAUOTGFyZ2UgUHJvamVjdHMFDkxhcmdlIFByb2plY3RzZxAFA05BTQUDTkFNZxAFBlJVU1NJQQUGUlVTU0lBZ2RkAj8PD2QWAh4Ib25jaGFuZ2UFDFN0YXJ0RGF0ZSgpO2QCQw8PZBYCHwEFCkVuZERhdGUoKTtkGAEFHl9fQ29udHJvbHNSZXF1aXJlUG9zdEJhY2tLZXlfXxYOBQpyYWRPbmNlT2ZmBQpyYWRPbmNlT2ZmBQhyYWREYWlseQUIcmFkRGFpbHkFCXJhZFdlZWtseQUJcmFkV2Vla2x5BQpyYWRNb250aGx5BQpyYWRNb250aGx5BQxyYWRRdWFydGVybHkFDHJhZFF1YXJ0ZXJseQUMcmFkQmlNb250aGx5BQxyYWRCaU1vbnRobHkFCXJhZFllYXJseQUJcmFkWWVhcmx5c9Vl5Blws8w30JwBrd2KururgS4=" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>


<script src="/ManualTasks/WebResource.axd?d=L2bNdQiZj_XJeSzW2c4vG1uoix2Lcjrqv22UF0E0_vL6P1Pb0&amp;t=634267392792002543" type="text/javascript"></script>


<script src="/ManualTasks/WebResource.axd?d=Kif7YG9aYiGtQ9_Lp33NiygOR03hV9gh4YStFh-XpqaQkL060&amp;t=634267392792002543" type="text/javascript"></script>
<script src="/ManualTasks/ScriptResource.axd?d=vaglwrByIFzUAUzOgSFN39fkCscWGQ_MkrugULXRTG2rj0PkWK7Eg3Eb0Gc41AK0GN3BiA1xmMUzrHt8AaBf0Pn4huLwVdkvSww5qFcuG6T-hR-j7VBYWgjWu9E2WmhY-CLnEg2&amp;t=633833494444631478" type="text/javascript"></script>
<script src="/ManualTasks/ScriptResource.axd?d=vaglwrByIFzUAUzOgSFN39fkCscWGQ_MkrugULXRTG2rj0PkWK7Eg3Eb0Gc41AK0GN3BiA1xmMUzrHt8AaBf0GvFjm9wglojgqcQrhyIiQmjMWP6yqpVyvvURBoxT2UGHsiWhJI97rMzyxvIifegCbp0Yuw1&amp;t=633833494444631478" type="text/javascript"></script>
<script src="/ManualTasks/ScriptResource.axd?d=IZSNy79hQDriFqfgeCCXJEGnUHsD43e5hmbekMZmEYcZfjqjtZlDeUASkuns1XnlCgad3Jij4giEXu_llGs7CDWzqu9NcfTF26X27-4AnP6kcaRn0&amp;t=633398780440000000" type="text/javascript"></script>
<script src="/ManualTasks/ScriptResource.axd?d=IZSNy79hQDriFqfgeCCXJEGnUHsD43e5hmbekMZmEYcz-V8VXNIJfeYzMckAImf3keGEGIYRWw3NYVs4i05jBU-TvrrdBa885Kw5HonamAHy7gH1mHlqHteVRxTQbvAehY2_8Q2&amp;t=633398780440000000" type="text/javascript"></script>
<script src="/ManualTasks/ScriptResource.axd?d=IZSNy79hQDriFqfgeCCXJEGnUHsD43e5hmbekMZmEYcy5qVQaxJlnxlI4l1oxd27NSx6jHWDbQQ_PoDMdlY474G5cmzqR1dA3x2A0Z1jSRtFa0N5edp5-CRTLdnFmb5TnEh7Nw2&amp;t=633398780440000000" type="text/javascript"></script>
<script src="/ManualTasks/ScriptResource.axd?d=IZSNy79hQDriFqfgeCCXJEGnUHsD43e5hmbekMZmEYdpJKLJdkaF6j_r1NmXYFV_ocdL-kjdlCb9uTzMoOQDvut5ZbKvADmlD19kDQ2dCEztTWV90&amp;t=633398780440000000" type="text/javascript"></script>
<script src="/ManualTasks/ScriptResource.axd?d=IZSNy79hQDriFqfgeCCXJEGnUHsD43e5hmbekMZmEYd9n_B1KBdQNTL3yuA71nhHIQm3EsDuAZhzv8wQCry0wsc9we_z1sRpFKhHomUcaVXH0izP0&amp;t=633398780440000000" type="text/javascript"></script>
<script src="/ManualTasks/ScriptResource.axd?d=IZSNy79hQDriFqfgeCCXJEGnUHsD43e5hmbekMZmEYe6Ho7dTGi75TBh1qg4rqSjlpHXRJTbkd1WwYfjWgZELBnt626wgWVLWIogKheRLEqR3eTm0&amp;t=633398780440000000" type="text/javascript"></script>
<script src="/ManualTasks/ScriptResource.axd?d=IZSNy79hQDriFqfgeCCXJEGnUHsD43e5hmbekMZmEYe6Ho7dTGi75TBh1qg4rqSj0KtG4QBVrZCUggTkQtwy9PcJDJMjIZnG_HV3svtIzPpI1lYT4dilBiqoer0q3FhfyC9i1g2&amp;t=633398780440000000" type="text/javascript"></script>
<script src="/ManualTasks/ScriptResource.axd?d=IZSNy79hQDriFqfgeCCXJEGnUHsD43e5hmbekMZmEYeiFVJygUYmd5DrzyzUzfafhdXS-ybksF2WkCvmMINcqWELsuLGUMg1hHca27FBxXmd8Ag1YJ-qiPCNnJiRwRt3P8_mjg2&amp;t=633398780440000000" type="text/javascript"></script>
<script src="/ManualTasks/ScriptResource.axd?d=IZSNy79hQDriFqfgeCCXJEGnUHsD43e5hmbekMZmEYcaUR_i63xvJfVup9PzZSp5SDGsZ_MoZ9nd2FSSmotUoJzQDgPXogSu9b5MO1-GdhjpV4gO0&amp;t=633398780440000000" type="text/javascript"></script>
<script src="/ManualTasks/ScriptResource.axd?d=IZSNy79hQDriFqfgeCCXJEGnUHsD43e5hmbekMZmEYerjH56Rdvp7sbbDEvgMw5MufjrbwByGDMnyoig59PIniTtgKvbpLCF3YO3PYzd0-UlXqa-d-wss0Q-lzp3Ip4XRv8BzA2&amp;t=633398780440000000" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function WebForm_OnSubmit() {
null;
return true;
}
//]]>
</script>

        
        <script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ScriptManager1', document.getElementById('form1'));
Sys.WebForms.PageRequestManager.getInstance()._updateControls(['tupdDay'], ['radOnceOff','radDaily','radWeekly','radMonthly','radBiMonthly','radQuarterly','radYearly'], [], 90);
//]]>
</script>

        
        
        
        <input type="hidden" name="TextBoxWatermarkExtender1_ClientState" id="TextBoxWatermarkExtender1_ClientState" />
        <input type="hidden" name="TextBoxWatermarkExtender2_ClientState" id="TextBoxWatermarkExtender2_ClientState" />
        <input type="hidden" name="TextBoxWatermarkExtender3_ClientState" id="TextBoxWatermarkExtender3_ClientState" />
        <input type="hidden" name="TextBoxWatermarkExtender4_ClientState" id="TextBoxWatermarkExtender4_ClientState" />
        
        <div id="header">
            <a href="#Menu2_SkipLink"><img alt="Skip Navigation Links" src="/ManualTasks/WebResource.axd?d=5SToN9U94EAB1xIwE7n4_AmLqggKVIFsHgUyrq3wxOAlgOdm0&amp;t=634267392792002543" width="0" height="0" style="border-width:0px;" /></a><table id="Menu2" class="Menu2_2" cellpadding="0" cellspacing="0" border="0" style="z-index: 101; left: 216px; position: absolute; top: 5px">
	<tr>
		<td onmouseover="Menu_HoverRoot(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" title="Display User Information" id="Menu2n0"><table class="Menu2_4" cellpadding="0" cellspacing="0" border="0" width="100%">
			<tr>
				<td style="white-space:nowrap;"><a class="Menu2_1 Menu2_3" href="UserInformation.aspx">User Information</a></td>
			</tr>
		</table></td><td style="width:3px;"></td><td onmouseover="Menu_HoverRoot(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" title="Show current status of each query" id="Menu2n1"><table class="Menu2_4" cellpadding="0" cellspacing="0" border="0" width="100%">
			<tr>
				<td style="white-space:nowrap;"><a class="Menu2_1 Menu2_3" href="javascript:__doPostBack('Menu2','Query Status')">Record Status</a></td>
			</tr>
		</table></td><td style="width:3px;"></td><td onmouseover="Menu_HoverRoot(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" title="Extract records into Excel" id="Menu2n2"><table class="Menu2_4" cellpadding="0" cellspacing="0" border="0" width="100%">
			<tr>
				<td style="white-space:nowrap;"><a class="Menu2_1 Menu2_3" href="javascript:__doPostBack('Menu2','Excel Reports')">Excel Reports</a></td>
			</tr>
		</table></td><td style="width:3px;"></td><td onmouseover="Menu_HoverRoot(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" title="Display source data from which these queries are run" id="Menu2n3"><table class="Menu2_4" cellpadding="0" cellspacing="0" border="0" width="100%">
			<tr>
				<td style="white-space:nowrap;"><a class="Menu2_1 Menu2_3" href="javascript:__doPostBack('Menu2','Source Data')">Source Data</a></td>
			</tr>
		</table></td>
	</tr>
</table><a id="Menu2_SkipLink"></a>
            
            <input type="submit" name="btnSignOut" value="Sign Out" id="btnSignOut" style="color:Blue;background-color:White;border-color:White;border-style:None;font-size:X-Small;text-decoration:underline;width:232px;z-index: 100; left: 755px; position: absolute;
                    top: 8px; text-align: right;" />
        </div>

        <div id="leftcol">
            <div id="divManualTasksHeader">
                <p id="para1">Manual Tasks: <br /> Select task options below</p>
            </div>
            <div id="divManualTasksOptions">
                <ul id="ulManualTasksOptions">
                    <li><select name="ddlBillingAnalyst" id="ddlBillingAnalyst" class="ddlStandard">
	<option value="Billing Analyst">Billing Analyst</option>
	<option value="a">a</option>
	

</select></li>
                    <li><select name="ddlBillingTeam" id="ddlBillingTeam" class="ddlStandard">
	<option value="Billing Team">Billing Team</option>
	<option value="a">a</option>
	

</select></li>
                    <li><input name="txtCustomerName" type="text" id="txtCustomerName" /></li>
                    <li><input name="txtCustomerIC01" type="text" id="txtCustomerIC01" /></li>
                    <li><input name="txtCustomerBAN" type="text" id="txtCustomerBAN" /></li>
                    <li><select name="ddlBillingStream" id="ddlBillingStream" class="ddlStandard">
	<option value="Billing Stream">Billing Stream</option>

</select></li>
                    <li><select name="TaskTypeL1" id="TaskTypeL1" class="ddlStandard">
	<option value="Task Type">Task Type</option>

</select></li>
                    <li><select name="TaskTypeL2" id="TaskTypeL2" class="ddlStandard">
	<option value="Task Sub-Type">Task Sub-Type</option>

</select></li>
                    <li><input name="txtTypeDesc" type="text" id="txtTypeDesc" /></li>
                    <li><select name="ddlTarget" id="ddlTarget" class="ddlStandard">
	<option value="Target">Target</option>

</select></li>
                    <li><select name="ddlPeriod" id="ddlPeriod" class="ddlStandard">
	<option value="Period">Period</option>

</select></li>
                    <li><select name="Criticality" id="Criticality" class="ddlStandard">
	<option value="Criticality">Criticality</option>

</select></li>
                </ul>
            </div>
        </div>
        
        <div id="content">
                <div id="divContentSpacer">
                </div>
                <ul id="ulPeriod">
                    <li><input id="radOnceOff" type="radio" name="radPeriod" value="radOnceOff" onclick="javascript:setTimeout('__doPostBack(\'radOnceOff\',\'\')', 0)" /><label for="radOnceOff">Once-off</label></li>
                    <li><input id="radDaily" type="radio" name="radPeriod" value="radDaily" onclick="javascript:setTimeout('__doPostBack(\'radDaily\',\'\')', 0)" /><label for="radDaily">Daily</label></li>
                    <li><input id="radWeekly" type="radio" name="radPeriod" value="radWeekly" onclick="javascript:setTimeout('__doPostBack(\'radWeekly\',\'\')', 0)" /><label for="radWeekly">Weekly</label></li>
                    <li><input id="radMonthly" type="radio" name="radPeriod" value="radMonthly" onclick="javascript:setTimeout('__doPostBack(\'radMonthly\',\'\')', 0)" /><label for="radMonthly">Montly</label></li>
                    <li><input id="radQuarterly" type="radio" name="radPeriod" value="radQuarterly" onclick="javascript:setTimeout('__doPostBack(\'radQuarterly\',\'\')', 0)" /><label for="radQuarterly">Quarterly</label></li>
                    <li><input id="radBiMonthly" type="radio" name="radPeriod" value="radBiMonthly" onclick="javascript:setTimeout('__doPostBack(\'radBiMonthly\',\'\')', 0)" /><label for="radBiMonthly">Bi-Monthly</label></li>
                    <li><input id="radYearly" type="radio" name="radPeriod" value="radYearly" onclick="javascript:setTimeout('__doPostBack(\'radYearly\',\'\')', 0)" /><label for="radYearly">Yearly</label></li>
                </ul>
                <div id="updDay">
	
                        
                        
                        <br /><br />
                        
                    
</div>
        </div>      


        <div id="rightcol">
            
            
            <br/><br/><br/><br/><br/>
            <table style="z-index: 116; left: 592px; top: 104px; float:left;">
                <tr>
                    <td style="z-index: 1; width: 94px; height: 26px;"><input name="txtStartDate" type="text" value="Start Date" id="txtStartDate" onchange="StartDate();" style="width:88px;" /></td>
                    <td style="width: 26px; height: 26px;"><img id="Image1" src="Images/Calendar_scheduleHS.png" style="border-width:0px;" /></td>
                 </tr>
                 <tr>
                    <td style="width: 94px; height: 26px;"><input name="txtEndDate" type="text" value="End Date" id="txtEndDate" onchange="EndDate();" style="width:88px;" /></td>
                    <td style="width: 26px; height: 26px;"><img id="Image2" src="Images/Calendar_scheduleHS.png" style="border-width:0px;" /></td>
                 </tr>
            </table>
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
            <input type="submit" name="btnSubmit" value="Submit" id="btnSubmit" />
        </div>
       
        <div id="footer">

        </div>

 

<script type="text/javascript">
//<![CDATA[
var Menu2_Data = new Object();
Menu2_Data.disappearAfter = 250;
Menu2_Data.horizontalOffset = 2;
Menu2_Data.verticalOffset = 50;
Menu2_Data.hoverClass = 'Menu2_15';
Menu2_Data.hoverHyperLinkClass = 'Menu2_14';
Menu2_Data.staticHoverClass = 'Menu2_13';
Menu2_Data.staticHoverHyperLinkClass = 'Menu2_12';
Sys.Application.initialize();
Sys.Application.add_init(function() {
    $create(AjaxControlToolkit.TextBoxWatermarkBehavior, {"ClientStateFieldID":"TextBoxWatermarkExtender1_ClientState","WatermarkText":" Customer Name","id":"TextBoxWatermarkExtender1"}, null, null, $get("txtCustomerName"));
});
Sys.Application.add_init(function() {
    $create(AjaxControlToolkit.TextBoxWatermarkBehavior, {"ClientStateFieldID":"TextBoxWatermarkExtender2_ClientState","WatermarkText":" Customer IC01","id":"TextBoxWatermarkExtender2"}, null, null, $get("txtCustomerIC01"));
});
Sys.Application.add_init(function() {
    $create(AjaxControlToolkit.TextBoxWatermarkBehavior, {"ClientStateFieldID":"TextBoxWatermarkExtender3_ClientState","WatermarkText":" Customer BAN","id":"TextBoxWatermarkExtender3"}, null, null, $get("txtCustomerBAN"));
});
Sys.Application.add_init(function() {
    $create(AjaxControlToolkit.TextBoxWatermarkBehavior, {"ClientStateFieldID":"TextBoxWatermarkExtender4_ClientState","WatermarkText":" Type Description","id":"TextBoxWatermarkExtender4"}, null, null, $get("txtTypeDesc"));
});
Sys.Application.add_init(function() {
    $create(AjaxControlToolkit.CalendarBehavior, {"button":$get("Image1"),"cssClass":"ajax__calendar","format":"dd/MM/yyyy","id":"CalendarExtender1"}, null, null, $get("txtStartDate"));
});
Sys.Application.add_init(function() {
    $create(AjaxControlToolkit.CalendarBehavior, {"button":$get("Image2"),"cssClass":"ajax__calendar","format":"dd/MM/yyyy","id":"CalendarExtender2"}, null, null, $get("txtEndDate"));
});
//]]>
</script>
</form>
    
  
    
    
    
</body>
</html>

Open in new window

0
 
LVL 1

Expert Comment

by:aderse02
ID: 35729813
Try using something like this in place of the em's and see if that standardizes your layout for multiple browsers.


/* Layout columns */
#leftcol {display:inline; float:left; width:30%; height:500px; border: 1px solid;}

/* leftcol */
#divManualTasksHeader {width:100%; height:5em;} //div which will hold the paragraph text
#para1 {padding-left:15px; padding-top:10px; Font-Size:0.75em;} //paragraph text
#divManualTasksOptions {float:left;} //div which will hold the ul list
#divManualTasksOptions ul{list-style: none; padding: 5px; border: 0.5em groove;} //ul list

Open in new window

0
 

Author Comment

by:AidenA
ID: 35729829
i meant that the left column of the layout displays fine, but what's in the left column has a mind of it's own. I've tried everything I could think of... like taking out the paragraph altogether and just leaving an empty div there, but the div styles still render in this unexpected way... the upper div (divManualTasksHeader)  not being 100% of the lefcol width and the and the div below it (divManualTasksOptions) appearing to have a margin on the left side so that even though it's floated left, it actually is about 20px i guess away from the left side of the column
0
 
LVL 9

Expert Comment

by:iGottZ
ID: 35729886
why has the left collumn a dynamic width?
0
 
LVL 9

Expert Comment

by:iGottZ
ID: 35729894
you should use a fixed width instead if you dont want it to act strange
0
 

Author Comment

by:AidenA
ID: 35729912
@ aderse02: Tried your suggestions but it didn't appear to solve the problem. Although the size of the divManualTasksHeader does now appear to be 100% of leftcol... but there now appears to be a new margin introduced below divManualTasksHeader pushing down divManualTasksOptions (by the same distance it seems to me as the margin that has been introduced to the left side of divManualTasksOptions

i.e. there is now a margin to the left and top of divManualTasksOptions
0
 
LVL 9

Expert Comment

by:iGottZ
ID: 35729923
have you actually ever tryed it through this?
http://validator.w3.org/
0
 
LVL 1

Expert Comment

by:aderse02
ID: 35729925
Could you provide us a screen shot of what you are seeing?
0
 

Author Comment

by:AidenA
ID: 35729929
well i'm using dynamic widths and ems so that the page is resizable. That's the whole point isn't it?
0
 
LVL 1

Expert Comment

by:aderse02
ID: 35729944
dynamic widths is ok, but remember each browser will read it a little different whereas is you use static widths you will have a consistent look no matter what browser you use.
0
 

Author Comment

by:AidenA
ID: 35729976
ok here's a screen shot after applying the pixel change recommended by aderse02

borderIssue
0
 
LVL 9

Expert Comment

by:iGottZ
ID: 35729985
sure but why is the top menu then having a static width?
the design just doesnt really make sense for me in the way it is.

i would never use percentage in divs width / height.
you could stick to floating instead. also you could use position: absolute; and right, left, top, bottom to stick stuff to divs in order to create interfaces and stuff like that.

i'm developing html / css for phones and desktops. my current project is a chat that already runs on my phone and even IE6
0
 
LVL 1

Expert Comment

by:aderse02
ID: 35730000
remove the padding-left and padding-top from  line 6.
0
 

Author Comment

by:AidenA
ID: 35730002
well fixed widths is what i used to use, but this is generally frowned upon as you're suppose to create websites which can flow and resize with different fonts, text sizes etc... so that's what I was trying to do... not so successfully...
0
 
LVL 9

Expert Comment

by:iGottZ
ID: 35730006
we do not even see it like that unless you give us the full css

thats how it looks with all what you posted here:
http://gyazo.com/9e57e414b65350261597435e8a98afa6.png
0
 

Author Comment

by:AidenA
ID: 35730039
CSS is above... bottom of post 35729726. It's all there
0
 
LVL 1

Expert Comment

by:aderse02
ID: 35730041
Or at least reduce the px to something that looks decent like padding-top: 2px; padding-left: 2px;
0
 
LVL 1

Expert Comment

by:aderse02
ID: 35730074
Could you provide us with a screen shot of what you desire it to look like?
0
 
LVL 9

Expert Comment

by:iGottZ
ID: 35730142
it still doesnt really make sense to me why you are having such a huge amount of invalid html in there.

in my eyes this html should even get rewritten in order to work without bugs.
0
 

Author Comment

by:AidenA
ID: 35730201
what html is invalid? obviously I'm trying to create a webpage and put certain items in a particular place... not rocket science or anything...

I'd be pretty close at this stage to just relatively positioning everything and that's the end of that.... With the other couple websites I did I just absolutely positioned everything and never had any problem with it because it's just internal work websites so if someone has a font difference or something like that it doesn't really concern me. However, like most programmers and designers, i want to try and do it in the standard accepted way... as there is usually a good reason for it...
0
 

Author Comment

by:AidenA
ID: 35730253
Here it is in firefox... you can see the difference between this firefox picture (no mysterious margins) and the IE picture above (clealy displayed margins which are not in the css)...

So, all i want to do, is know why IE is introducing these margins... and how to get rid of them, presumably without having to lose resizable functionality and without setting exact pixels (which will cause the website to lose it's ability to completely resize based on changing font size)

 Firefox... no margins
0
 
LVL 9

Expert Comment

by:iGottZ
ID: 35730305
and this is in chrome
your site in chrome
0
 

Author Comment

by:AidenA
ID: 35730333
ok so it looks ok in chome also? what about IE, that's the question right?
0
 
LVL 9

Expert Comment

by:iGottZ
ID: 35730398
since it is not really clear how your site is supposed to look like when its done, we are just not able to use our skills in order to create what you want to have.

how a dynamic layout -without- <table> or ANY kind of percentage width / height could look like:

 small big
0
 
LVL 9

Expert Comment

by:iGottZ
ID: 35730438
IE on win xp

 internet explorer
0
 

Author Comment

by:AidenA
ID: 35730483
well i haven't decided on the layout yet, I just want to know why these margins are appearing so that I can then understand how to lay out my page?

As it is, the layout in post 35729976 is fine (as I mentioned). IE7 has basically done for me what I would have done myself, which is to add in a margin to the left of the lower div. However, I have not specified anywhere in my CSS (as far as I know) for IE to do this. So, the problem is, I've no idea what's going on. And if I've no idea what's going on... I can't fix it. If I leave it the way it is, it will look fine in IE7, but in firefox it will look totally off, because firefox isn't displaying this imaginary margin

So, ultimately I guess what we're saying here is that none of us have any idea what's gonig on here? I see above you've shown the same result in Chrome as I got in Firefox. Have you tried it in IE7? (or whatever IE you have)? Can you replicate my problem?
0
 

Author Comment

by:AidenA
ID: 35730497
ok i see you more or less replicte the problem there in your post... so, any ideas why it's happening?
0
 
LVL 9

Expert Comment

by:iGottZ
ID: 35730599
unless you describe how you want the layout to look like we -cannot- help you anyhow in this ticket.

chrome debug
0
 

Author Comment

by:AidenA
ID: 35730637
I don't understand the confusion here. You have all the code I have to give, and I've said that I want to understand why IE7 is introducing the margins? I don't know how to make it any clearer?

Obviously I want the layout that you see in the screenshots, but without the margin which is introduced in IE7. In fact, I want to add that margin in myself.

I think I can't make that any clearer?
0
 

Accepted Solution

by:
AidenA earned 0 total points
ID: 35730986
ok solved it...

don't know how i missed this, i'm sure i must have tried it... but i guess maybe not.

The problem seems to be that IE7 introduces a margin for ul lists. So, it's got nothing to do with the div or anything, but with IE7 and the ul list. This solves both problems, and pixels aren't required (in this case). So, simply adding margin:0 to the code below solves the issue
#divManualTasksOptions ul{list-style: none; padding: 1em; margin:0px; border: 0.5em groove;}

Open in new window

0
 

Author Comment

by:AidenA
ID: 35731012
actually, probably better to add ul into the list at the top as i read before that IE adds in margins... but i didn't notice that ul wasn't in there, so just added it below on the end
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
table, caption, tbody, tfoot, thead, tr, th, td, ul {
	margin: 0;	padding: 0;	border: 0;
}

Open in new window

0
 

Author Closing Comment

by:AidenA
ID: 35865585
solved
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…
Suggested Courses

862 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