View Full Version : Div Positioning Issues on Various Browsers

08-23-2010, 03:51 AM
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?

08-23-2010, 07:12 AM
i ran a Validator Check (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.emeraldplanet.com.au&charset=(detect+automatically)&doctype=Inline&group=0) 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?

08-23-2010, 11:04 AM
any ideas? You can't have the same value for id attribute for multiple elements inside a document.

08-24-2010, 04:08 AM
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.

08-24-2010, 08:52 AM
It looks OK in my FF3.6

08-25-2010, 01:02 AM
It looks OK in my FF3.6

have you tried it with IE 7 or lower? or IE8 in compat mode?

08-30-2010, 02:36 AM
i take it no one can figure this out?

my boss is starting to get annoyed

08-30-2010, 03:59 PM
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

09-01-2010, 06:24 AM
Actually i'm just member of IT staff, who was lumbered with the task.

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

<div class="panels-flexible-region panels-flexible-region-3-topright panels-flexible-region-last">

I added margin-right: -800px and position: relative

<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