Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Aug 2010
    Location
    Sydney/Australia
    Posts
    18
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Post Div Positioning Issues on Various Browsers

    I am using Drupal 6, the front page is designed with Panels and therefore the divs cannot be changed. (i know, it's a mess)

    you can visit the site at http://www.emeraldplanet.com.au

    Problem i am having is the 2 boxes below the nav bar, these boxes (depending on the browser) loose position and change (see screenshots) i need to fix this soon as it looks very unprofessional (i moved the site from a windows propriety CMS to an open source one, did a good job except this small issue)

    I have tried position:relative,absolute, float:left,right and use z-index on the a3c2d6a2d411d326588272df457a4532.css and style.css file.

    The weird thing is in regards to FireFox, a few people have seen it out of position but when i use my pc, with the same version, it looks fine.

    any ideas?
    Attached Thumbnails Attached Thumbnails Div Positioning Issues on Various Browsers-firefox-3.6.8.jpg   Div Positioning Issues on Various Browsers-screen-ie8-compmode.jpg  

  • #2
    New Coder
    Join Date
    Aug 2010
    Location
    Sydney/Australia
    Posts
    18
    Thanks
    2
    Thanked 0 Times in 0 Posts
    i ran a Validator Check on it and there might be 2 things causing the issue:

    Line 108, Column 52: ID "feature-wrapper" already defined
    Line 116, Column 68: ID "nav" already defined

    any ideas?

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    any ideas?
    You can't have the same value for id attribute for multiple elements inside a document.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    New Coder
    Join Date
    Aug 2010
    Location
    Sydney/Australia
    Posts
    18
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    You can't have the same value for id attribute for multiple elements inside a document.
    OK, well i knew the "nav" ID's weren't affecting it but i fixed all the validation errors, but am still getting the displacement issues.

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    It looks OK in my FF3.6
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    New Coder
    Join Date
    Aug 2010
    Location
    Sydney/Australia
    Posts
    18
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    It looks OK in my FF3.6
    have you tried it with IE 7 or lower? or IE8 in compat mode?

  • #7
    New Coder
    Join Date
    Aug 2010
    Location
    Sydney/Australia
    Posts
    18
    Thanks
    2
    Thanked 0 Times in 0 Posts
    i take it no one can figure this out?

    my boss is starting to get annoyed

  • #8
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Your boss? Does this mean you are a web-design professional or a member of IT staff, who was lumbered with the task? Or maybe this is one of those 'in jokes' with which I'm not familiar.

    Sorry, it's very difficult to work out what's going on in someone else's code when it comes to structural problems. I'm looking at it in Firebug at the moment. You seem to have a lot of classes going on for each element! Might it be an idea to style each element up individually, to reduce the margin of error? Would suggest troubleshooting along with the premise that floated divs can have padding issues. Try removing the padding from these elements (comment out) and see what happens. Perhaps then you might be able to replace those padding attributes with some relative positioning?

    I think it's usually a good idea to; once you've assembled your content with no style, in the semantic order you want it to read; to then make a seperate, empty structure to test the positioning. If something isn't working, cream it off into a seperate document. This will enable you to observe more clearly, whether the problem is with the sub-structure itself, or whether it is due to an effect of something in the main page, with which it interferes.

    Dr. V
    Last edited by Doctor_Varney; 08-30-2010 at 04:00 PM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #9
    New Coder
    Join Date
    Aug 2010
    Location
    Sydney/Australia
    Posts
    18
    Thanks
    2
    Thanked 0 Times in 0 Posts

    [RESOLVED] Div Positioning Issues on Various Browsers

    Actually i'm just member of IT staff, who was lumbered with the task.

    actually I think i might have it (touch wood!)

    Code:
    <div class="panels-flexible-region panels-flexible-region-3-topright panels-flexible-region-last">
    I added margin-right: -800px and position: relative

    Code:
    <div class="panels-flexible-region panels-flexible-region-3-topright panels-flexible-region-last">
    I added position: absolute

    another issue i had was the position within the slideshow content were marked as absolute and relative, i changed them to inherit.

    now just need to tidy up some padding issues and its all good.

    I have tested it with FireFox and IE8 + compat mode and everything seems to be working.

    thanks for all your help


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •