problem: when visitor zooms in, "DIV 1" and "DIV 3" go out of position because they are "position absolute."

So I was thinking of having the entire page top just made in illustrator and have it as a .gif for top part BUT that won't work because I need "DIV 1" and "DIV2" and "DIV 3" as individual divs AND NOT a part of a .gif because I want these "DIV"s to implement a different jquery slideshow...

what do you think would be the best way to achieve that layout (DIVS #1 #2 #3 are all still divs waiting for slideshow content)...

i could even maybe have #page_word floated to left and #header floated to the right and repeat again for #navigation and #real_content underneath... there are so many different ways to do this my head is gonna explode trying to figure out best way...

Rayzur
—
2010-02-11T02:21:52Z —
#2

Hi,Just do away with all that AP/RP positioning and use floats and margins.

Take that little DIV#1 (#page_word) and nest it in your #header div. It soes not matter if it is taller you can drag it through the top and bottom with negative margins.

Take that RP off the #header div and drag it into the #page_content top padding with a neg margin also.

Do the same technique (float & margin) with the other AP div #real_content

Rayzur
—
2010-02-11T02:42:36Z —
#3

For the other div you will need to float the nav bar left in order to remove it from the page flow. Then float the #real_content div to the right, now you will need your main wrapper to contain all these floats.

Since you are going to pull that lower right div (#real_content) out of the wrapping div you will not be able to use overflow:hidden for float containment. You will need to use a "clearfix" adaption.

I didn't even know what clearfix was, but I'm reading about it now. I'll start again tomorrow and see if I don't have any other questions.

thanks again...

Rayzur
—
2010-02-11T03:56:59Z —
#10

Your welcome. You can zoom in on your page now and it holds together.

SirFrigglesworth
—
2010-02-11T22:43:23Z —
#11

Hi again... you wanted me to position #page_word within #header. This causesa problem because I actually need #page_word to the left of #header so "float: left"in #page_word will lock it within the #header div when need it off to the left abovethe navigation.

I realized #page_word was inside #header so I took #page_word out of the #headerand had #page_word come before #header and floated BOTH left with margin-rightto #page_word creating separation between #page_word and #header.

Im also thinking about positioning both #page_word and #header relative because if I had say "margin-top: -15px" for #page_word instead of relative positioning, negativemargins cuts off the line piping area for the top of page.

header {

another problem is that IE7 and IE6 are displaying the proportions for padding withinthe top of the page all messed up even before the relative positioning is implemented...why is IE7 and IE6 displaying the top of this page differently from FireFox and IE8?(the area underneath div 1 and div 2 are being extended vertically)

Hi again... you wanted me to position #page_word within #header. This causesa problem because I actually need #page_word to the left of #header so "float: left"in #page_word will lock it within the #header div when need it off to the left abovethe navigation.

If you need it "on the left side and above the nav" now then yes you will want to take it back out of the header. That is not where it was when I gave you the revised code though. I was imitating what I saw before a zoom with your original link.

I think the problem is that my monitor was displaying it different than yours because you were AP'ing off the viewport originally. Hence I was not seeing it in the same place that you were.

That is the reason you need to position it in relationship to your main wrapping div. It can be done either way (floats or position) as long as you are using the wrapping div as your reference.

SirFrigglesworth
—
2010-02-12T00:42:58Z —
#13

ok then two questions please:

1) if i "postion: relative" for a div i notice that this DOES NOT mess up layout when user zooms in and out... is this the case with all major browsers (i develop using FireFox)? i ask because i know "position: absolute" messes things up bad when user zooms in and out...

http://cleanitvalet.com/test/index.html2)why this page look the same in IE8 and FireFox, but adds extra white space underneath DIV 1 and DIV 2 when viewed in IE7 and IE6. What .css problem is causing this?

thanks again...

Rayzur
—
2010-02-12T00:53:33Z —
#14

1) if i "postion: relative" for a div i notice that this DOES NOT mess up layout when user zooms in and out... is this the case with all major browsers (i develop using FireFox)? i ask because i know "position: absolute" messes things up bad when user zooms in and out...Relative positioning does not remove an element from the page flow as Absolute positioning does. But RP will position an element in relation to itself and the original space it occupied is still preserved. It leaves a black hole behind if you will and neighboring elements still act as if the RP element never moved.

2)why this page look the same in IE8 and FireFox, but adds extra white space underneath DIV 1 and DIV 2 when viewed in IE7 and IE6. What .css problem is causing this?That clearing div your using is adding a default line-height in IE6/7, you really don't need a hard clearing div there anyway. But when you do need a clearing div set the font-size to zero and give it overflow:hidden to kill IE6/7 default line-heights on empty divs.

All you need to do is set clear:both on your #horiz_pipe, that fixes IE6/7. Remove the clearing div from the html and adjust your css.

well in FireFox, the #navigation content is just tall enough to fit and match the #DIV 3 area nicely... however, in IE 6 and 7 this #navigation is being stretched out lengthwise so that it is much longer in length than #DIV 3 and it is causing massive problems...

please help...

Rayzur
—
2010-02-12T04:36:11Z —
#17

I saw the problem briefly but when I refreshed the page it was fixed.You must have changed something in the css before I got a chance to look at it.

EDIT:Ok I see it happening in IE6 now, let me take a look

RyanReese
—
2010-02-12T04:41:01Z —
#18

Hi, try setting the anchors to have haslayout

#navigation li a:link, #navigation li a:visited{width:100&#37;;}

Rayzur
—
2010-02-12T04:45:03Z —
#19

Give IE6 haslayout on the nav li a by setting a width, you don't need a:link. Just set it as "li a"