Main Content Margins Not Working In Firefox

Popular Searches: FrontPage Hosting | FrontPage Templates | FrontPage Training | Free FrontPage

Logged in as: Guest

Printable Version

All Forums >>FrontPage Specific Issues >>FrontPage Newbies >>

Page: [1]

Name:

Message

<< Newer Topic Older Topic >>

bbidderonoh

Posts: 5
Member since: 10/19/2008

Main Content Margins Not Working In ...

My site is a pretty basic design with a header, horizontal navigation bar, left side bar, and content in the middle, with a footer that bottom. The current content is very simple in design as well. My main content margins appear as I had planned in IE but when I view the site in Firefox they are not working. My footer also floats up in Firefox but not IE. I was wondering if anyone could help me with a fix.

My site is at:http://akronaccountingservices.com/

<code>
<!--
body {
font: 100% Arial, Helvetica, sans-serif;
margin: 0px; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;

}

.wrapper #container {
width: 100%;
/*margin: 0 auto; the auto margins (in conjunction with a width) center the page if needed */
text-align: left; /* this overrides the text-align: center on the body element. */
background: #FFFFFF;}

.wrapper #header {
padding: 0px 0px; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
color: #FFFFFF;
font-size: 1.5em;
background: #000099;
margin-bottom: 1px;
}

.wrapper #header img {
margin-left: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 0px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
text-align: center;
float: left;
width: 5em;
height: 3.35em;
}

.wrapper #header h1{
text-align:center;
margin-bottom: .25em;}

.wrapper #header p{
text-align: center;
margin:0;
}

.wrapper #sidebar1 {
float: left;
width: 11em; /* since this element is floated, a width must be given */
background: #000099; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 15px 0px; /* top and bottom padding create visual space within this div */
text-align: center;
color: #FFFFFF;
font: Arial; sans serif;
font-size: .9em;
}

.wrapper #sidebar1 p {margin-right: 2px;
margin-left: 2px;
padding: 0;}

.wrapper #sidebar1 h2 {color: #FFFF00;
font-size: 1em;
font-weight: bold;
margin: 0 1px 0 1px;
}

.wrapper #mainContent {
margin: 1em 0em 0 0em; /* the right margin can be given in ems or pixels. It creates the space down the right side of the page. */
padding: 0 2em 0 2em; /* padding here creates white space "inside the box." */
position: relative;
}

.wrapper #mainContent h3 {
font-size: 1em;
text-align: left;
margin-top: 2em;}

/*Home Page CSS*/

.home img {float: left;
padding-right: 8em;
padding-left: 1em;}

/*Tax Page CSS*/

div#pricelist ul {margin:0;
float: left;
width: 35%;
height: 8em;
text-align: left;
}

div#pricelist ul h3 {background: #FFFFCC;}

div#pricelist ul img {float:left;
margin-left: 2em;
}

div#pricelist ul li {line-height: 1.5;
list-style: none;
font-weight: bold;
margin-left: 8em;
background: #FFFFCC;
border: solid 1px;
}

div#inclist ul {margin: 0;
}

div#inclist ul h3 {font-size: 1em;
background: none;
margin-left: 7em;}

div#inclist ul li {margin-left: 8em;
width: 15em;
background: none;
list-style-type: square;
border: none;}

/*Contact Page CSS*/

.contact {text-align: center;
width: 100%;
}

/* Navbar CSS */
div#navbar {height: 20px;
Width: 100%;
white-space: no wrap;
border: solid 1px #ffffff;
}

div#navbar ul {margin: 0px;
padding: 0;
font-family: arial, sans-serif;
font-size: 1em;
font-weight: bold;
color: #000099;
line-height: 20px;
white-space: no wrap;
text-align: center;
margin-left: 20%;
margin-right: 15%;
}

div#navbar ul li {list-style: none;
display: inline;
padding: 1em;
text-align: center;}

</code>

#footer {
background: #eee;
bottom: 0;
color: #666;
font-size: 11px;
font-weight: bold;
height: 14px;
margin: 0;
padding: 6px;
width: 100%;

Report Abuse | Date: 11/21/2008 5:38:55 AM

d a v e

Posts: 883
Member since: 9/24/2002
From: Finland

RE: Main Content Margins Not Working... (in reply to bbidderonoh)

first thing to do is validate your code AND fix it ;)
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fakronaccountingservices.com%2F

_____________________________

d a v e

Report Abuse | Date: 11/21/2008 6:13:16 AM

newseed

Posts: 833
Member since: 1/13/2005
From: Florida

RE: Main Content Margins Not Working... (in reply to bbidderonoh)

Becareful with fluid design. It can make your site look a bit cramped or thin depending on the user's screen resolution. Also, if your main content area is to expand depending on the size of the screen resolution the content can get pretty long to read from left to right. Maybe you can but most people don't like to read anything wider than a normal book.

Now the problem.

Since you are going to be expanding the main content and that the sidebar is going to be fixed width, I suggest that you move that sidebar div inside of the maincontent div. Just move it just inside at the beginning of the maincontent div.

Now some adjustments indicated in bold:

.wrapper #sidebar1 {
float: left;
width: 11em; /* since this element is floated, a width must be given */
background: #000099; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 15px 0px; /* top and bottom padding create visual space within this div */
text-align: center;
color: #FFFFFF;
font: Arial; sans serif;
font-size: .9em;
margin-right: 2em;
}

.wrapper #mainContent {
margin: 1em 2em 0 2em; /* the right margin can be given in ems or pixels. It creates the space down the right side of the page. */
padding: 0 0em 0 0em; /* padding here creates white space "inside the box." */
position: relative;
}

Now the footer issues. Just add clear: both; to the footer css.

Since you are in the early stages, I strongly recommend going with a fixed width site. Most people are using 1024 resolution and so it safe to use 980px for maximum width.

< Message edited by newseed -- 11/21/2008 6:36:21 AM >

_____________________________

I'm going to do it myself! Can you help me??
Link:The Kasper Group
A Graphic and Web Design Company

Report Abuse | Date: 11/21/2008 6:35:19 AM