Our site (ten years old) is primarily built on tables, fixed width, etc. We use css extensively, but the tables are still utilized. Sort of a "hybrid" design that will do until we transition to a pure css design. On the home page, there are several elements that are contained in absolute-positioned DIVs. Please see growth trac dot com Note the page is left-justified. All is well. We want to re-position the pages to center, so we've deployed the code below on a test page: *{ margin:0; padding:0; } body { text-align: center; margin: 5px; background: #CBC9B9; color : #000; } #wrapper { width:960px; margin:0 auto; width: 50em; text-align: left; } <body> <div id="wrapper"> // content </div> </body Code (markup): The result: growth trac dot com/index-center.php QUESTION The positioning of the DIVs seems to vary depending on screen resolution. Previously (before the "centering change"), the DIVs were consistent across all resolutions. >> Why is this occurring? PLEASE NOTE: We know the code is a mess. We'd like to make a "fix" to make this work-- and at a future date, do a re-design. Thanks much.
because whoever invented css should be shot in the head it works differently in different browsers and has lot of other ambiguous crap I can;t comprehend as opposed to more descent technologies languages data translating such xslt good luck
Noway to blame just CSS, mostly older browser (read IE) is inept and interpret in a different way. Anyways, that's not the issue with your code. positioned with absolute value is causing. The main image holder of the page, <div style="position: [U]absolute[/U]; width: 249px; height: 115px; z-index: 2; left: 468px; top: 182px;" id="Layer1"> Code (markup): No need of absolute positioning.
<div style="[COLOR="red"]position: absolute; [/COLOR]width: 249px; height: 115px; z-index: 2; left: 468px; top: 182px;" id="Layer1"> Code (markup): Remove the part in red from the HTML mark up.
Okay. I removed the "absolute positioning". The code looks like: <body> <div id="wrapper"> <div style="top: 551px; left: 199px; z-index:1; border: 0px; width: 470px; height: 43px"> // content </div> </div> </body> Code (markup): Wondering if that's correct. It seems that now, I cannot position the layer. Changing the 'top' or 'left' settings have no effect. Thanks.
You may not need to position the boxes. It depends on what is coming before and after it. But in the meantime, for that particular box you would want to change the position from absolute to relative. <div style="position: [color=red]relative[/color]; width: 249px; height: 115px; z-index: 2; left: 468px; top: 182px;" id="Layer1"> Code (markup): The reason is simple. It was absolute before because the positioning was fixed for the entire page. You adjusted with with a centered wrapper div, now you have to base the position relative to that div, or the div it follows (in which case you may have to tweak the left and top attributes accordingly)
Is there more best way to insult? one being ignorant on the subject but choose insult someone who is trying to help. When you do not have a element positioned , why would you need top or left or right for referene (That's basics)? try going through basics. First of all there is no need of that Block to be positioned if you know how to place and use the html elements. It's because the markup is wrong all efforts are to fix through CSS. And one doesn't even need of a relative positioning that block, why to have more styles/codes when it is not not required and can be done in a optmized manner. All I can see, DIV 1 is Relative, inside that DIV 2 Absolute and there are <br> pushing the <DIV1> so efforts to push the DIV1 using -Ve value for top. Remove all position and the <br>s , you'll have your issues sorted. anyways, remain at your own will, make it more complex layout even works, why not.
Success! Follow-up question . . . --Please see this page: http://www.growth trac dot com/dating/ --Note the bullet lists --The bullets are not indenting (they did before the page was centered) --The lists are simply: <ul style='list-style-image: url(http://d1tqw2pkoqqxbc.cloudfront.net/bullet3.gif)'> <li>content</li> </ul> Code (markup): Ideas anyone? Thanks.