Site overriding padding/margins

Posted: 12 May 2008 10:58 PM

[ Ignore ]

Grad Student

Total Posts: 84

Joined 05-12-2008

Ok I have a template (html) that works flawlessly on my test apache server, but I copy the html to EE it messes up my padding/margins. So my content is not starting with 0 top padding/margin and its actually pushing down some. Please help

Here is the CSS:

body {
    padding: 0;
    text-align: center;
    min-width: 960px;
    background-image: url(images/index_bg.jpg);
    background-repeat: repeat-x;
    margin: 0px;
}

#centered {
    position: relative;
    top: 0;
    right: 0;
    width: 960px;
    text-align: left;
    overflow:hidden;
    padding: 0px;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
}

#masthead {
    background-image: url(images/mastHead.jpg);
    background-repeat: no-repeat;
    height: 100px;
    width: 960px;
    margin: 0px;
    padding: 0px;
}

Here is the beginning of the HTML

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="master.css" rel="stylesheet" type="text/css" />
<link href="navbar.css" rel="stylesheet" type="text/css" />

</head>

<body>

    <div id="centered">
        <div id="header">
            <div id="masthead"></div> 

Profile

Andy Harris

Posted: 13 May 2008 03:52 AM

[ Ignore ] [ # 1 ]

Research Assistant

Total Posts: 881

Joined 02-15-2008

I don’t suppose we’re able to see the version that isn’t working?

Signature

Andy Harris | Pepper Digital | Malvern, UK | Twitter | New to ExpressionEngine? Start here!
Remember - If at first you don’t succeed, you’re not Chuck Norris

Profile

Greg Aker

Posted: 13 May 2008 09:21 AM

[ Ignore ] [ # 2 ]

Moderator

Total Posts: 2026

Joined 05-07-2007

The only thing I see that could be is that you are not setting the html margin/padding to 0. I’m also not sure about the relative positioning on #centered.

how about this:

<style type="text/css">
html, body {
    margin: 0;
    padding: 0;
}

body {
    text-align: center;
    min-width: 960px;
    background-image: url(images/index_bg.jpg);
    background-repeat: repeat-x;
}

#centered {
    width: 960px;
    text-align: left;
    overflow:hidden;
    padding: 0;
    margin: 0 auto;
}

#masthead {
    background-image: url(images/mastHead.jpg);
    background-repeat: no-repeat;
    height: 100px;
    width: 960px;
    margin: 0;
    padding: 0;
}

</style> 

Signature

Profile

MSG

fxidesigns

Posted: 13 May 2008 12:48 PM

[ Ignore ] [ # 3 ]

Grad Student

Total Posts: 84

Joined 05-12-2008

Got it… there was something in the way the HTML was formatted… I removed extra spaces and it stopped doing it

Thanks for your help.

Profile

‹‹ Positioning Images and divs Default post showing on "home page" ››

Username		Remember Me?
Password		forgot password?

Post Marker Legend
	New posts	Hot Topic with new posts	New Poll	Moved Topic	Sticky topic
	No new posts	Hot Topic with no new posts	Old Poll	Closed Topic	Announcements

Visitor Statistics
The most visitors ever was 1149, on July 16, 2007 09:33 AM
Total Registered Members:	64978	Total Logged-in Users:	29
Total Topics:	82018	Total Anonymous Users:	17
Total Replies:	440827	Total Guests:	184
Total Posts:	522845