Interface Technical Training Blogs - Spike Xavier

FireFox Margin Issue

Let's face it. When it comes to the actual layout of a website, almost every thing has been done. 2 column, 2 column header and footer, 3 colum header only etc.. and this is not a bad thing. Imagine if there was a drastic difference in how grocery stores were laid out. Normally you can go to a dairy section, a meat section, a spices section etc...although they will contain different products and different display techniques and ideas, the layout is generally very similar. Once you get the basics of CSS layout down you pretty much have it down.

Every once in a while I am reminded of the differences in the browsers. It's often little things that just don't make too much sense. I think that IE6 got a bad rap for the box model thing, but check this out:

I recently put a site together and build a body, then a wrapper div then inside the wrapper div I put a header div. Inside the header div I had an h1.

I put a margin-top on the header div to push it off of the border of the wrapper div.

Here is the result in firefox and in ie6:

FireFox:

IE6:

In the CSS file here is the culprit:

To remedy this situation I simply changed the margin-top:15px; to margin-top:0px; and substituted a padding-top:15px declaration which works fine in both browsers.

Here is a shot of the change:

And finally here it is in FireFox and IE6 with the changed CSS:

Firefox

IE6 After:

Here is the ASP - XHTML and CSS:

Default.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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" >

<title>Dynamic Controls Page</title>

<!--[if IE 6]>

<style>

#content

{height:500px;}

#innercontent

{height:480px;}

#wrapper

{

height:600px;

}

</style>

<![endif]-->

</head>

<body>

<h1>Dynamic Controls</h1>

<h5>Interface Technical Training - http://www.interfacett.com</h5>

</div>

<h1>Content</h1>

<p>This is an example of dynamic server controls being added to an .aspx page based on

an event from an existing control.</p>

<p>When you select an item from the drop down list a postback occurs as well as a selected index

changed event firing. By using (Page.IsPostBack) to determine that the page has

in fact posted back, this page uses an event handler and grabs the value of the

selected index item in the drop down menu and creates that many textboxes. If you

continue to change the number selected in the drop down list, the number of text boxes

will change accordingly. When you click the submit button, a label which is located

just to the right of the drop down list will display a message indicating the number of

text boxes you created.</p>

<asp:DropDownList ID="DropDownList1" runat="server" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" AutoPostBack="True">

</asp:DropDownList>

<asp:Label ID="Label1" runat="server"></asp:Label>

<asp:Panel ID="Panel1" runat="server" Height="50px" Width="125px">

</asp:Panel>

</div>

</div>

<p>

</div>

</div>

</form> </body>

</html>

StyleSheet.css

body

{

background-color: #584E37;

color: #2E291A;

margin: 0px;

padding: 0px;

font-family: Arial;font-size: medium;

}

#wrapper

{

width: 800px;

min-height: 600px;

margin: 0px auto 0px auto;

background-color: #A3945D;

border: solid 2px #2A2A2A; padding:0px;

}

#header

{

background-color: #2E291A;

color: #ADAE8C;

height: 80px;

border-bottom: solid 2px #2A2A2A;

padding:0px;

margin:0px;

text-align: center;

}

#header h1

{

margin-top:0px;

padding-bottom:0px;

margin-bottom:0px;

padding-top:15px;

line-height:.5em;

letter-spacing: 3px;

}

#content

{

min-height: 500px;

}

#innercontent

{

background-color: #F5F9DE;

margin: 40px;

padding: 20px;

border:inset 2px #523419;

min-height:480px;

}

#footer

{height:30px;

background-color: #2E291A;

color: #ADAE8C;

font-size:80%;

text-align:center;

}

#footer p

{padding-top:10px;}

Posted on Wednesday, December 13, 2006 at 10:31AM by

Spike Xavier |

Reader Comments

There are no comments for this journal entry. To create a new comment, use the form below.

Interface Blogs

FireFox Margin Issue

Reader Comments