SitePoint Sponsor

User Tag List

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

    inconsistent div location on two pages

    I am working on a website where the background is a drawing and the "header" is on the right side of the page, as it would be in a drawing for this company. The top of the div containing the company information is located slightly differently between two pages (I checked Chrome, IE 8 and Firefox), and I cannot find any difference in the code between the two pages. I am sure I am missing something obvious, but I am going crosseyed trying to find it. I am hoping someone here can take a look and quickly pick up what I am missing. I also went to chrome and used 'inspect element', but still could not find any difference between the two pages in the way the div is positioned. The div in question is on the top right of the page and its id is 'header-name'.

    The two pages are:

    home page

    and

    philosophy page

    I have a busy day mostly out of the office, so if you have questions my apologies if I don't respond right away.

    Thanks!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,217
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    Hi GALJohnson! Welcome to SitePoint.

    I think the negative margin here is causing your grief:

    Code:
    #container {
      font-family: "Californian FB","Times New Roman",Times;
      font-size: 11pt;
      margin-bottom: -9px;
    }
    Is there any reason for it? I'd just remove it. If it has a purpose, there will no doubt be a better solution.

  3. #3
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for identifying that as the problem - but I'm still not sure why that was causing the problem. Unless I am still missing something, that was present for both pages (since it came from the css), and the content should have been the same on both pages, and when I looked I couldn't see any difference - almost all of the content is coming from a common template.

    So how did you identify that as the problem, if you don't mind sharing?

    thanks!

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    The difference is caused by id="content_main" which exists in one of the pages and not in the other. It is absolutely positioned and has no impact on the flow.

    In the other page you have div with some breaks in them which follow floated content and therefore it's background rises up to meet #container and soaks the negative margin up that you placed on #container.

    The other page has no such static content and the negative margin hits the right floated element instead.

    Be careful with multiple floated elements like that. If you want a side column then just float one column and then stack the content inside otherwise some browsers won't allow elements to rise pass a series of floats unless there are no gaps between them.


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
  •