CSS problem in IE: margin added even though none specified

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

AidenAAsked:
Who is Participating?
 
AidenAConnect With a Mentor Author Commented:
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
 
iGottZFrontend EngineerCommented:
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
 
jonahzonaCommented:
Is it possible to get the full markup including HTML? :)
0
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

 
AidenAAuthor Commented:
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
 
iGottZFrontend EngineerCommented:
can you post a markup without asp stuff in it?

pure html i mean.
0
 
aderse02Commented:
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
 
jonahzonaCommented:
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
 
AidenAAuthor Commented:
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
 
aderse02Commented:
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
 
AidenAAuthor Commented:
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
 
iGottZFrontend EngineerCommented:
why has the left collumn a dynamic width?
0
 
iGottZFrontend EngineerCommented:
you should use a fixed width instead if you dont want it to act strange
0
 
AidenAAuthor Commented:
@ 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
 
iGottZFrontend EngineerCommented:
have you actually ever tryed it through this?
http://validator.w3.org/
0
 
aderse02Commented:
Could you provide us a screen shot of what you are seeing?
0
 
AidenAAuthor Commented:
well i'm using dynamic widths and ems so that the page is resizable. That's the whole point isn't it?
0
 
aderse02Commented:
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
 
AidenAAuthor Commented:
ok here's a screen shot after applying the pixel change recommended by aderse02

borderIssue
0
 
iGottZFrontend EngineerCommented:
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
 
aderse02Commented:
remove the padding-left and padding-top from  line 6.
0
 
AidenAAuthor Commented:
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
 
iGottZFrontend EngineerCommented:
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
 
AidenAAuthor Commented:
CSS is above... bottom of post 35729726. It's all there
0
 
aderse02Commented:
Or at least reduce the px to something that looks decent like padding-top: 2px; padding-left: 2px;
0
 
aderse02Commented:
Could you provide us with a screen shot of what you desire it to look like?
0
 
iGottZFrontend EngineerCommented:
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
 
AidenAAuthor Commented:
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
 
AidenAAuthor Commented:
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
 
iGottZFrontend EngineerCommented:
and this is in chrome
your site in chrome
0
 
AidenAAuthor Commented:
ok so it looks ok in chome also? what about IE, that's the question right?
0
 
iGottZFrontend EngineerCommented:
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
 
iGottZFrontend EngineerCommented:
IE on win xp

 internet explorer
0
 
AidenAAuthor Commented:
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
 
AidenAAuthor Commented:
ok i see you more or less replicte the problem there in your post... so, any ideas why it's happening?
0
 
iGottZFrontend EngineerCommented:
unless you describe how you want the layout to look like we -cannot- help you anyhow in this ticket.

chrome debug
0
 
AidenAAuthor Commented:
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
 
AidenAAuthor Commented:
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
 
AidenAAuthor Commented:
solved
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.