SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    FF ignores padding and borders ?

    If someone would be so kind, could you tell me why this works the way I want it to in IE - but messes up so badly in FF ?? ... odd, because I know it should be the other way around

    FF ignores the background color I set - ignores the padding I set - and ignores the border I set (simply doesn't display anything) .. it adds padding when I specifically set the padding to 0 ... please tell me why before I throw my computer out the window

    http://rickysims.com/css-test/test1c.htm

    Code:
    body {
    	background: #bfadad; 
    	text-align: center;
    	margin: 0px;
    	padding: 0px;
    }
    #outerContainer {
    	background: #FFFFFF; 
    	width: 100%; 
    	margin: auto; 
    	text-align: center;
    }
    #mainHeader {
    	height: 75px; 
    	background: #777777;
    }
    #innerContainer {
    	background: #EEEEEE;
    	width: 750px;
    	margin: auto;
    	margin-top: 0px;
    	padding: 0px;
    	text-align: left;
    	border-left: 1px solid #000000;
    	border-right: 1px solid #000000;
    }
    #mainContent {
    	width: 600px; float: left; 
    	margin: 0px; 
    	padding: 0px;
    }
    #sidebarRight {
    	width: 150px;
    	height: 100%;
    	float: left; 
    	margin: 0px; 
    	padding: 0px;
    }
    #mainFooter {
    	background: #777777; 
    	text-align: center; 
    	height: 50px; 
    	clear: both;
    }
    I appreciate any advice or help you're able to give.

    Cheers

  2. #2
    Non-Member lostseed's Avatar
    Join Date
    Sep 2005
    Location
    Zurconion Soon!
    Posts
    1,549
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First add * {margin: 0; padding: 0}
    to the top of your document. Make sure to keep the asterick there and a space after the star. That should tell all things to have a margin/padding 0 unless defined, so for both browsers itll be equal unless defined.

    Other than that; You have no p {} class defined so the spacing looks differently on firefox vs ie because of default p margins. The borders Im not sure, have you tried applying the borders to #mainContent instead of #innerContainer?

    From personal experience it is much easier to develop your site to work in FireFox first. IE is the one with all the bugs and hacks you use for it Makes the job a lot easier.

  3. #3
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    Thanks for the * advice ... that did fix the padding issues.

    the #mainContainer is just the outer wrapper - 100% width ... so I don't want borders around it.

    This isn't meant to be an actual site - I do have graphics to throw into this layout - but, not until I at least get it working the way it's supposed to.

    What I need (at the moment) .. is a 100% width top bar (header) ... then I'll put a 100% width nav bar under that ... then a fixed-width column centered on the screen - split into two separate columns (main, sidebar) ... then a 100% width footer. Doesn't seem like it should be too difficult .. I just don't understand why I set a background color and borders, and FF is ignoring those styles

  4. #4
    Non-Member lostseed's Avatar
    Join Date
    Sep 2005
    Location
    Zurconion Soon!
    Posts
    1,549
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://www.pmob.co.uk/temp/mac3column.htm

    view source and rename and copy all you want, thanks to PaulOB for his CSS
    skills

    You may want to read http://www.pmob.co.uk/temp/3colfixedtest_explained.htm so you know how to adjust it correctly. I know it sucks to read a few pages, but it will save you a lot more time than trying to puzzle together what you have and then look for all the bug fixes.

    checkout
    http://www.pmob.co.uk/ he has lots of examples of everything.
    I hope that helps, the layout is bug free and in your hands if thats the one you want


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •