Sign in
 
HomeLearnLibraryForums
Microsoft Expression >
> 
> 
Unwanted White Space

Answered Unwanted White Space

  • Tuesday, May 15, 2012 8:14 PM
     
     
    Sign In to Vote
    0

    What I Want:

    The header and footer are missing about 2px on the right side compared to the content.

    Info:

    http://autoexporter.com/
    Content is to be 1024px width and the list items together equal 1022px width.  The gap is likely those 2 missing pixels but how do I add them in without making my list item boxes uneven.  I tried covering it up witha  background colour to the header and footer divs but they dont show.

     

All Replies

  • Tuesday, May 15, 2012 9:21 PM
     
     
    Sign In to Vote
    0
    Which browsers are you talking about?  (Have you previewed in many browsers?  They look different, regarding the 2px.  Are you aware of that?)
     
  • Tuesday, May 15, 2012 9:27 PM
     
     
    Sign In to Vote
    0

    KathyW2,

    In FF12 it looks the same as IE9 and IE8 except in IE9 and IE8 theres a white space above the site.  In IE6 it is the same as FF12 except for the header, the white space is there and not a similar colour just like the footer.

    Cheers, Ben


     
  • Wednesday, May 16, 2012 8:29 PM
     
     
    Sign In to Vote
    0

    Ben, I assume you used includes for the header and footer information, correct? Your source code shows three head sections on the page, just like your previous issue did. The first thing to do is remove those extra heads. The multiple heads and identical linked stylesheet in each one seem to slightly confuse the developer tools in whichever browser I use.

    I can say that the white background in the copyright div overrides a background color assigned to the footer. I'm not sure why that is, and Firebug was less than helpful in displaying accurate information, what with the three-headed page. However, when I cleared the white and assigned the footer div the background color of the list items, it looked fine.

    Hopefully this will help point you in the right direction.

    Jim

    'Tis the business of little minds to shrink; but he whose heart is firm, and whose conscience approves his conduct, will pursue his principles unto death. Thomas Paine

     
  • Wednesday, May 16, 2012 9:24 PM
     
     
    Sign In to Vote
    0

    fcphdJim,

    Yes, I used includes for my header and footer.  I am unsure why you are seeing triple of things.  In EW4 I do not have external CSS attached to my includes nor <html><head><title><body> in the code.  When I view sourse code of the website in FF12 I do not see the thing your are seeing either.

    Edit:

    I have tried your solution but it will do me no justice on the header.

    The div - footer is 1024px width (cannot change size)
    The ul is 1022px width (cannot change size)
    The div - copyright is 1024px width (needs to be white)

    This seems to be the problem:

    The ul is floated so the div - copyright fills in those 2px's on the right with its own background colour.

    I have put a <br class="clearfloat" /> in which 'clearfloat'=clear:both.  This solves the problem but adds a new one which is a white bar of space between the list and the div - copyright (of course).

    Is there a way to put something with a width of 2px and the proper colour beside the ul?  Is there a different element that isn't comming to my mind that can do the job that doesn't create a line break?

    Whatever the solution I can then apply it to the problem on the header.

    Cheers, Ben


    • Edited by Travel Trips Wednesday, May 16, 2012 11:24 PM See Edit
    •  
     
  • Wednesday, May 16, 2012 11:12 PM
     
     
    Sign In to Vote
    0

    Ben, you keep saying that you've got a handle on those includes, yet you keep coming up with these off-the-wall issues that seem to stymie Firebug's ability to present accurate source and, especially, CSS. Like Jim, I can change the #copyright background color to #DDC268 and the footer width issue apparently is resolved. This, despite the fact that the #copyright div is contained BY the #footer, not the other way around, AND that according to Firebug, there is NO background color at all assigned to the #footer. Furthermore, I had to use ColorPic® to grab the color value #DDC268, since according to Firebug, it's not assigned to either the footer or the menu's <ul>, that is, either of the two elements which clearly display it.

    By the nature of server-side includes, I can't demonstrate conclusively that these oddities are caused by the way you're implementing includes. But when I see issues like this that bollox Firebug's ability to present accurate information about included content, I'm happy to let someone else try to work with you on it. I have already suggested that you eliminate the includes as a source of issues by using standard in-place content until the page is developed and working as expected, and then extracting that content into includes. You are apparently adamant in your refusal to do so, so I will leave it to you and to anyone else willing to try to work without a reliable Firebug. Good luck.

    cheers,
    scott

    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

     
  • Thursday, May 17, 2012 12:40 AM
     
     
    Sign In to Vote
    0

    paladyn,

    I can not see an error in my includes and they function correctly.  I also do not believe this is because of the includes.  You also suggest I put the includes in when the site is finished but that does not change anything and lets assume the site is complete and I just put the includes in, the problem is still there.  This problem exists whether the file is included or not.  I also want to use includes so I do not have to edit every page' header and footer when I want to make any change.

    I installed Firebug today just to see these duplicate <head> and <html> tags you see and even in Firebug I do not see them (which is what I expected because they are not there in the code).  Also I looked at the css in the program to find the background-color for the div - footer and it clearly told me it.

    I think this has to do with the floats and clearing both on the footer resolves this problem but I do not know what to use without creating a line break.

    Cheers, Ben



     
  • Thursday, May 17, 2012 4:27 PM
     
     
    Sign In to Vote
    0

    Ben, the extra head tags aren't there now, but they definitely were before. I don't know what changed. I originally checked with FF, Safari, and IE8, and they showed in the source code in every one. They were not the cause of the problem, but like Scott and I observed, it was messing with Firebug's ability to accurately troubleshoot the issue.

    The point that Scott was making about the includes is that you can design one page without them, get everything displaying correctly, then turn those parts into includes. Taking them out of the equation just helps to get the page fixed.

    At any rate, now that the includes appear to be working correctly, it should be easier to troubleshoot the problem. I'll try to poke around later when I have more time. Or, someone else might solve it before then.

    Jim

    'Tis the business of little minds to shrink; but he whose heart is firm, and whose conscience approves his conduct, will pursue his principles unto death. Thomas Paine

     
  • Thursday, May 17, 2012 10:08 PM
     
     Answered
    Sign In to Vote
    0

    Problem solved.  I could have sworn I tried this before but it is working now.  I put a line break with a clear:both before the closing div tag for the header and after the closing list tag in the footer.

    Thanks everyone for contributing!

    Cheers, Ben


    • Marked As Answer by Travel Trips Thursday, May 17, 2012 10:08 PM
    • Edited by Travel Trips Thursday, May 17, 2012 10:09 PM
    •