OutFront Forums
     Home    Register     Search      Help      Login    

Follow Us
On Facebook
On Twitter
RSS
Via Email

Recent Posts
Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read

Sponsors
Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.
Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.
Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

 

IE Margin Problem

 
View related threads: (in this forum | in all forums)

Logged in as: Guest
Users viewing this topic: none
Printable Version 

All Forums >> Web Development >> Cascading Style Sheets and Accessibility >> IE Margin Problem
Page: [1]
 
MCD

 

Posts: 758
Joined: 3/19/2002
From: Al USA
Status: offline

 
IE Margin Problem - 3/24/2009 8:34:24   
In my content area I have the following divs.

#contentWrapper
#leftColumn
#content
#rightColumn

I am using an image to keep the 3 columns even. I want there to be a margin between these 3 columns and the footer. In Firefox I get a margin between the three columns and the footer but not in IE7. Can anyone offer a solution or point me to one? I cannot find the answer doing a Google search. Here is one sample of the CSS.

#outerWrapper #contentWrapper #leftColumn {
background-color: #536747;
float: left;
width: 175px;
color: #ffffff;
padding: 0px 10px 5px 10px;
margin: 0 0 4px 4px;
}

The site has not been uploaded for anyone to view.
Tailslide

 

Posts: 6691
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

 
RE: IE Margin Problem - 3/24/2009 9:44:30   
Ok - without seeing it's hard to say the easiest solution for you.

in the rule you've posted in your post you don't have commas between the different ids - might just be a typo here and not on your stylesheet but thought I'd mention just in case!

But give the following a try and hopefully one will work! (in no particular order):

1. clear:both on the footer & margin-top on the footer
2. clear:both on the footer and margin-bottom on the #contentWrapper
3. Clear:both on the footer and padding-top on the footer.
4. Use a border with the background colour instead of a margin.

See if any of those help. Otherwise it'll be easiest to stick the page up somewhere - then it'll be much faster to sort.

_____________________________

Little Blue Plane Web Design | Land Rover project

:)

(in reply to MCD)
MCD

 

Posts: 758
Joined: 3/19/2002
From: Al USA
Status: offline

 
RE: IE Margin Problem - 3/24/2009 9:49:54   
Thanks Tail, I'll appreciate the suggestions and work my way through them.

_____________________________

Author of " How To Build A Website With Duct Tape"

(in reply to Tailslide)
MCD

 

Posts: 758
Joined: 3/19/2002
From: Al USA
Status: offline

 
RE: IE Margin Problem - 3/24/2009 10:33:13   
If I put commas between my ID'S site falls apart. Here is the stylesheet if anyone wants to take a look.



/* Reset the rules.*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
}


body {
background-color: #51004c;
line-height: 125%;
font-size: 100%;
color: #000;
font-family: Tahoma, Geneva, sans-serif;
text-align: center;
margin: 0 0 0 0;
padding: 0 0 0 0;
}


h1 {
color: #51004c;
font-size: 120%;
font-weight: bold;
}

h2 {
color: #536747;
font-size: 115%;
font-weight: bold;
}

h3 {
color: #536747;
font-size: 105%;
}

a, a:link { color: #51004c; font-weight:bold; text-decoration: underline;}
a:visited { color: #51004c; font-weight: bold; text-decoration: underline;}
a:hover { color: #fff; font-weight: bold; text-decoration: none; background:#51004c;}
a:active { color: #51004c; font-weight: bold; text-decoration: none;}

#outerWrapper {
background: #fff;
width: 800px;
text-align: left;
margin: 0 auto 0 auto;
}

#contentWrapper {
background: #fff url(../images/green_white1.jpg) repeat-y 50% 0;
clear: both;
}

#outerWrapper #header {
background-color: #ffffff;
padding: 0px 0px 0px 0px;
}

#outerWrapper #topStrip {
background-color: #ffffff;
padding: 0px 0px 0px 0px;
}

/* The left and right columns are slightly smaller than the background image */
#outerWrapper #contentWrapper #leftColumn {
background-color: #536747;
float: left;
width: 175px;
color: #ffffff;
padding: 0px 10px 5px 10px;
margin: 0 0 4px 4px;
clear: both;

}
#outerWrapper #contentWrapper #rightColumn {
background-color: #536747;
float: right;
width: 175px;
color: #ffffff;
padding: 0px 10px 5px 10px;
margin: 0 4px 4px 0;

}

#outerWrapper #contentWrapper #content {
padding: 5px 5px 0px 5px;
margin: 0 210px 4px 210px;
}

#outerWrapper #contentWrapper .clearFloat {
display: block;
}

#outerWrapper #footer {
background-color: #51004c;
padding: 5px 5px 5px 5px;
font-size: 80%;
color: #fff;
margin: 4px 0 0 0;
}

_____________________________

Author of " How To Build A Website With Duct Tape"

(in reply to MCD)
Tailslide

 

Posts: 6691
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

 
RE: IE Margin Problem - 3/24/2009 12:31:30   
I'll have a look at the files for you - without commas the rule would only be applied to the first ID (FAIK).

_____________________________

Little Blue Plane Web Design | Land Rover project

:)

(in reply to MCD)
MCD

 

Posts: 758
Joined: 3/19/2002
From: Al USA
Status: offline

 
RE: IE Margin Problem - 3/24/2009 12:37:35   
You are right of course. I sure do hate me and tables divorced. :)

_____________________________

Author of " How To Build A Website With Duct Tape"

(in reply to Tailslide)
MCD

 

Posts: 758
Joined: 3/19/2002
From: Al USA
Status: offline

 
RE: IE Margin Problem - 4/7/2009 16:00:08   
I meant to post that putting a border above the footer did correct the problem in IE7. The info may come in handy for someone.

_____________________________

Author of " How To Build A Website With Duct Tape"

(in reply to MCD)
Page:   [1]

All Forums >> Web Development >> Cascading Style Sheets and Accessibility >> IE Margin Problem
Page: [1]
Jump to: 1





New Messages No New Messages
Hot Topic w/ New Messages Hot Topic w/o New Messages
Locked w/ New Messages Locked w/o New Messages
 Post New Thread
 Reply to Message
 Post New Poll
 Submit Vote
 Delete My Own Post
 Delete My Own Thread
 Rate Posts