SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2003
    Location
    USA
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Positioning issues.

    Any ideas why my left bottom div on this is so far down? I have it set to go down only 220px. But it is much farther down than that. Plus in FireBird it doesn't show the border. Thanks.
    --David Reagan
    DavidReagan.net

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You have missed a closing div tag out and you have an extra closing html and body tag in the middle of your code.

    Find this position in your code and add in the closing </div> tag and take out the closing html body tags that are in the same place.

    Your code should then look like this.
    Code:
    </div>
    <div style="position:absolute; left:185px; top:220px; width:590px; z-index:1;"> 
    <p class="content"> <span class="contenttitle">Announcements</span><br />
    Your borders are missing in firebird because you haven't specified units on a lot of your styles. IE will guess you mean pixels but firebird will treat the number as zero which means the border won't display. Always specify a unit e.g. border:1px solid #000;

    The other display issues where firebird overlaps and elements are sized differently are due to the broken box model in ie.

    You are using a partial doctype (no uri) which puts ie6 into quirks mode. Ie5, 5.5. and ie6 in quirks mode use the broken box model where padding and borders are kept inside the specified width of an element.

    In the correct box model padding and borders are added to an elements width thus making it larger.

    To alleviate this problem try not to add padding and borders at the same time as specifying width/height. Try to add the padding and borders to an inner element that has no width defined and it will expand to fill its parent. (The borders aren't so critical as they are usually only 1px but 10px padding will make an element 20px wider.)

    Alternatively use one of the many box model hacks that are around to give different values to ie only.

    To avoid the simple errors that caused your problems in the first place just run your code (and css) through the validator at w3c. This will pick up and unclosed tags or typing errors and save a lot of searching.

    Also try not to mix inline styles in your code as this makes it hard to upkeep and also really defeats the purpose of css. There is very little need for inline styles except maybe for a one-off effect and even then it's doubtful.

    Sorry if my answer was a little more than you asked for

    Paul

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2003
    Location
    USA
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    *grins* Thanks for pointing my problem out!

    And that was some good advice. I will try to keep it in mind.
    --David Reagan
    DavidReagan.net


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
  •