Margin layout is wacky

blelisa posted this at 18:58 — 24th October 2006.

Joined: Aug 2003

Hi everyone,

I am building a site which consists of two columns in CSS and Html. I am checking cross browser capadability with IE7 and Firefox. When I am coding may page then save it then open it with a browser it looks one way, then when I ftp my site up to my hosting server and check it on the web, it looks totally different. What is happening?

Also my margins are off between Firefox and IE any one know of a work around?

Thanks in advance for any help.

PS I you want to see what I am speaking of and my code the path is:
http://www.hemisphere.net/testing/index.html

The code from my .css page is:

body {width: 850px; 
      margin-top: 0; 
      margin-left: auto; 
      margin-right: auto; 
      font-family: arial, sans-serif; 
      font-size: small;}

.logo {float: left;
       right-padding: 15px;
       padding: 15px;}

.link {border: 0;}

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

#left {float: left;
       width: 100px;
       padding: 10px;}

#right {float: right;
        width: 200px;
        padding: 5px;}

#center {margin-right: 265px;
	 margin-left; 265px;
         padding: 8px;
	 border-right: #000000;
         text-align: center;
	 background-color: #FFFFFF;}

#footer {clear: both;
        text-align: center;}

#footer2 {clear: both;
         background-color: #FFFFFF;
         width: 800px;
         margin-left: auto;
         margin-right: auto;
         margin-top: 100px;
         text-align: center;
         padding: 5px;}

#ctext {text-align: center;}

.headingl1 {font-family: arial;
            font-color: #FFFFFF;
            font-weight: bold;
	    text-align: center;
            background-color: #000099;
	    border-color: red;
            padding: 2px;}


#headpic {width: 844px;
          height: 180px;
          align: center;}

.greet {font-size: large;
        font-weight: bold;
        color: red;
	text-align: center;}

.greet1 {font-size: large;
        font-weight: bold;
        color: red;
	text-align: left;}

.leftcolumn {float: left;
	     width: 100px;
	     margin-left: 0%; 
	     margin-right: 5%;}

.middlecolumn {float: left;
               width: 1%;
	       padding: 1px;}

.middlecolumn2 {float: right;
               width: 1%;
	       padding: 1px;}

.heading1 {font-family: sans-serif; 
           color: red;
	   text-decoration: underline; 
	   font-size: 16px; 
           text-align: left; 
           font-weight: bold;
           margin-top: 12px;}

#lisa {text-indent: 1in;}

#lisa1 {text-indent: .50in;
        float:left;}

.firstletter {color: #COCOCO;
	      font-size: large;
              font-weight: bold;}

.pheading {color: navy;
	   font-size: large;
	   font-weight:bold;
	   border-bottom: 1px solid #000066;}

#menu {
	float: right;
	text-align: center;
}
#menu div {
	display: block;
	width: 70px;
	float: left;
	border-left: 1px solid black; 
}

#menu a:link, a:visited, a:active {text-decoration: none;
              			   color: #000000;
              			   font-weight: bold;
}

#menu a:hover {color: #ff0000;
}

.bold {font-weight: bold;
       font-size: medium;  
       text-indent: 1in;}

.indent {text-indent: 1in;}

#navcontainer a  {color: #000066;
		  display: block;
                  padding: 3px;
                  text-decoration: none;
                  border-bottom: 1px solid #000066;}

#navcontainer a:visited {text-decoration: none;
                         font-weight: normal;}

#navcontainer a:hover {background-color: #000066;
                       color: #ffffff;}

benf posted this at 15:17 — 25th October 2006.

They have: 426 posts

Joined: Feb 2005

Try setting your margins and padding to 0 at the top and then only use margins or padding on specific classes / ids. This is because different browsers have different padding and margin defaults. So setting to 0 normally fixes it.

i think you do it like this.

* {
margins: 0;
padding: 0;
}

Good Value Professional VPS Hosting

Renegade posted this at 20:01 — 25th October 2006.