SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member dckirba's Avatar
    Join Date
    Sep 2009
    Location
    Addis Ababa, Ethiopia
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question margin error in Internet Explorer

    Hello all,

    Hope you are doing well. I'm dabbling in web design and I recently designed a website for a friend of mine. The site displays correctly in Firefox and Opera but in Internet Explorer content that is supposed to be on the left column displays on top of right column content. For some reason the navigation links are also moved off towards the left.

    I validated all the xhtml on the validator and it checks out. The only errors I get when validating the css are for the opacity value.

    I've read that Internet Explorer doesn't handle absolutely positioned elements well, but my understanding was that this was fixed in IE7 and above.

    I would highly appreciate it if you could have a look at the site and let me know what you think the problem could be or if you could point me in the right direction.

    I'm not allowed to post the link to the site up and I'm not sure how to show you the code

    Looking forward to your feedback,
    Regards,
    David K

  2. #2
    SitePoint Evangelist stonedeft's Avatar
    Join Date
    Aug 2009
    Posts
    589
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I wouldn't use absolute positioning if I were you. Posting your CSS and html codes will get you better answers.
    Don't Panic

  3. #3
    SitePoint Member dckirba's Avatar
    Join Date
    Sep 2009
    Location
    Addis Ababa, Ethiopia
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    the reason I needed to use absolute positioning was because I used a transparent background for my columns. Probably didn't do it the best way. Opacity makes the text transparent as well so what I di was I overlapped another div with all my content on top of that. That's the reason for the absolute positioning. I now see that wasn't the best way. I've found other ways to implement transparency so I'll try that and consolidate everything into one div. I think that should solve it.

    I can't post a link to the site unless I've posted 5 messages which is why I couldn't point you to the code. I can post the xhtml of one page and the css.

    Ten frustrating minutes later
    I'm sorry, I'm not being allowed to post the code either. Tried removing all links and email addresses but doesn't seem to be working.

    As soon as I rack up enough posts I'll post the url for the site.

    Thanks a ton,
    David K

  4. #4
    SitePoint Evangelist stonedeft's Avatar
    Join Date
    Aug 2009
    Posts
    589
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ahh well ok anyway just an advice for nesting things inside an absolute positioned element always apply a relative position like so:

    css:

    .absoluteDiv{
    position:absolute;
    left:100px;
    top:100px;
    }

    .relativeDiv{
    position:relative;
    left:0px;
    top:0px;
    }


    <div id="absoluteDiv">
    <div id="relativeDiv">
    some contents here
    </div>
    </div>

    This way your relative div won't mess up your absolute divs as it makes the absolute div it's parent container and it's much cleaner when your "overlapping" things

    Well good luck
    Don't Panic

  5. #5
    SitePoint Member dckirba's Avatar
    Join Date
    Sep 2009
    Location
    Addis Ababa, Ethiopia
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks stonedeft, I'll give that a try and let you know what happens. I did find a better way to do transparent backgrounds so the left and right columns are displaying correctly now, but I have a misaligned part of my menu. I'll do this and see how it works. Thank you so much, have a good day, David


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
  •