here is a link to my site:http://ijsr32.infj.ulst.ac.uk/~B00443022.20812/home.html on firefox there becomes a space between the header and the content and the content and the footer, where as on internet explorer it is fine. can any1 help me out please??
Adding padding to #middle should solve it. padding: 1px 0 1px 0; Code (markup): #middle { width:800px; height:auto; background-image:url(mi.jpg); background-repeat:repeat-y; margin-left: 250px; padding: 1px 0; } Code (markup):
Big0ne - he's having vertical spacing issues, how is changing the width going to help that? As to the 'problem', I'm not seeing any margins being reset, so I'd change those single side margin declarations to declare all sides 'just to be sure' or add a reset. height:auto is the default behavior so there's no reason to be declaring that, the margin on #nav is likely causing a collapse issue, which is likely why the menu has the gap behind it, etc, etc. Looking at it, I'd have to majorly revamp the code to fix it. Let's see... First I'd give it a containing div so you only have to worry about positioning it once, narrow the width to 768px to make it 800 friendly (unless your intent was for 1024 users), actually auto-CENTER everything, use heading tags for the headings (instead of throwing paragraph marks at things that aren't paragraphs), with an image replacement technique applied to the page header, etc, etc... Which would look a little something like this: http://www.cutcodedown.com/for_others/sturgy/template.html As with all my examples, the directory: http://www.cutcodedown.com/for_others/sturgy is unlocked so you can grab the bits and pieces. Excuse the XHTML 1.0 Strict, it's what I do... I also redid the images removing the 1px border and ditching the one behind content alltogether. I used a gaussian sum to give the body a background color that combined with the image replacement on the header should give better graceful degredation for people browsing with images off. To break it down: In the CSS I toss in a 'reset' of margins and paddings on elements known to have an inconsistant baseline value cross-browser, as well as ditching borders on fieldsets and images. This type of 'reset' is pretty much standard practice if you care about cross-browser design. On the body I set our default font size for content to 85% - this dynamic size is good for accessability, just remember that anything declared in the default will appear 25% larger on large font/120dpi machines. For most machines where the browser assumes 96dpi, the default is 16px and 85% works out to 14px in all browsers. I also set a nice wide line-height to make it consistant (NEVER trust the defualt line-height cross browser) and ease accessability. (I find slightly larger line heights are easier to read) Large font users will recieve anything in the default font as 18px. In the markup first I put in a #container div which will let us set the width and centering from ONE location. On the CSS side of things I applied that 1px border I removed from the images, and set a width of 768px to be truly 800 friendly (I edited the images for that as well). Setting text-align:center on our document body will center #container on older browsers that are stuck in 'quirks mode' like IE 5.5 - not entirely neccessary in this day and age but hey, it's one line. Likewise margin:0 auto; will auto-center the container in IE6 and newer. We can also set our black background color here and have it span all elements inside it. Next we have a h1, because it's the first heading on the page and a heading that would be unique to every page. (A lot of SEO nutjobs say use a div for that and save the h1 for content, on my pages that usually makes no sense since I'd then need more than one h1 to retain semantic heading orders). We have a dummy span in there for a reason. I set the h1 dimensions then use a little 'trick' of line-height and vertical-align to position the text roughly where it would be in the image - this means images off it sill looks kind of the same. We then absolute position the span over this text with your header image, hiding said text. Gives search engines and screen readers something meaningful to look at, while retaining the image. Next is your menu. A menu is a list of options, so that should be an unordered list. All those classes you had are unneccesary since we can style the anchors off the parent containers ID. On the CSS side I don't much with the UL apart from stripping bullets with list-style:none; - and on the LI we set them to display:inline letting us center them. We don't have to say to center it here because we say it on our body tag - so did that legacy support even cost us code? The menu anchors get some padding, your font settings, and colors... No real shockers there, though notice I added :active and :focus - this is for people navigating with devices OTHER than a mouse. Next is the #content DIV. A simple padding all around and a text-align (ok, I guess it did cost us a line ). The Top padding means we don't need that blank line on what follows. Where you had three paragraphs with a class to create a 'heading', I would just use a heading tag. They exist for a reason after all. Since we have a nice top padding from our #content div, we only have to worry about the bottom. Notice I am using padding, I do this so I never have to think about margin collapses. The font-size:130% allows the heading to grow on large font machines as it's based off our 85%... 130% of 14px works out to the 18px you had, or 22px for large font users. Likewise because we are no longer using paragraphs to make the heading, we can just use P without any styles. Because I set the font size and colors on the body, I don't need to do anything else to them. On the footer because you had all black on your image background apart from the borders (which we handled on #container), I just cropped it down to the required bits of the image retaining the bottom and left padding, allowing me to simply set #footer's dimensions then put that image aligned bottom right. I did not use an image replacement technique here because the 'text' displayed by the image would simply be redundant given the page header. You'll also notice I threw in a clear - in theory the behavior to wrap floats should go on #content, but just in case you add floats to the content are and something goes screwy, this little precaution will keep the layout well behaved. ... and that's how I'd do it. Tested working in IE 5.5, 6, 7 & 8, FF, Opera and Safari. Hope this helps - figured I'd give you a couple pointers and a free rewrite to get you headed the right direction.