CSS Positioning

I'm not really sure as to why it isn't working but just to add to your list Opera is majorly messing it up! Also when you change the resolution the absolute positioning is being affected so there is also something to work out there as well.

I'll have a look at it again when my headache has gone!

I just took a *very* quick glance at the code - busy day here!

Generally speaking, I think that many of your problems are resulting from absolute positioning in a centered layout - it is a problem I'm far too familiar with. In fact we were just discussing it in another thread very recently.

Your absolute content will always be n pixels from the left regardless of screen resolution. This will have unfavourable results for anything other than left aligned placement.

Hopefully someone with more knowledge and time can explain this a little better.

Good luck!

Okay, so I've fiddled a little on a separate page (to allow people to see where we began). I realized that I had a mixture of absolute and relative so I redid it with relative only and just kept playing with the numbers until they all lined up. Here's the new page http://www.mikesussman.com/test2.php

In IE 5.5 it looks great, even at different resolutions. (But remember before, it looked different on 2 different computers each running IE 5.5. I haven't gotten to look at it from home yet to double check how it looks)

In NS 6 it looks 100 times better but still not right. Close. The x-axis is right but the y alignment seems to be progressively off just a couple of pixels per each tab.

In NS 4.7 it does improve over version 1 but it is still a disaster. But should I be overly worried about NS4.7 based on browser share?

And IE6 I don't have so I don't know what it looks like.

I'm getting much closer but browser view is still proving to be an obstacle. Since I haven't beat this problem yet, I still welcome all suggestions. And if I just have to live with the difference between major browsers, can somebody tell me the corrct php syntax for saying "if NS6 then this, if NS4.7 then this, else this"?

Thanks everybody.

well, the thing i found out is that, when redesigning some of my pages or converting from tables to layers, what ever uwanna call it, i found that, putting everything as relative is better because then, it will be where u want it to be (if u get what i mean) also try to put everything in order of how u want it to show,

...o and btw your site looks almost the same on IE6, only the text sizes are different, (my default browser is opera6)

... and if this post don't make sence it's maybe cause i'm in a bit of a hurry,

IE6 looks fine but there are still issues in Opera6 as all the 'graphic x' texts are appearing together and overlapping on the left and when you click on the tabs they show the correct numbers on the left but the box under the tab isn't consistant and the 2 & 3 don't show properly.

It works fine in Opera 7. Opera 6 does have issues with the DOM, which means that many dHTML scripts won't work in there.

So I tried adding dummy text to each content area and I discovered that this really set everything out of alingment again. What I had to do was decide on a consistant fixed height for the content area so I would know how much to relatively position the subsequentcontent area. If somebody knows another way let me know. My new test page is mikesussman.com/test3.php

If you check it out you'll see I've come across a new big problem. There is tons of space below. It's being caused because if I didn't adjust the relative positioning of everything, that's the space that would have been taken up by the stuff in the 4 content areas. Is there any way to avoid this huge gap of nothing? I'm stuck on this one - no ideas!

Also, correct me if I'm wrong, but due to browser incompatibilities I see no alternative but writing this page in two styles. One for IE5+ and NS6+ that will use the tabs that I'm really trying to implament. And another version that just boxes the content (click here). I also figure that if I did this two-version stuff then it would be better to insert the content using includes so each version can say the same thing without me updating everything twice. Am I thinking correctly?

well u have stuff like: style="position:relative; left:0px; top:-503;

why -503? why know 0px? try putting the values to left:0px;top:0px; and see what that does?

and you have id="content2" but i dont' c that in your stylesheet anywhere? what is it for?

Quote: Originally posted by Renegade
well u have stuff like: style="position:relative; left:0px; top:-503;

why -503? why know 0px? try putting the values to left:0px;top:0px; and see what that does?

and you have id="content2" but i dont' c that in your stylesheet anywhere? what is it for?

If I didn't re-position anything then each element would come up right underneath eachother. After I positioned the tabs graphic I then made each end up right below it, whatever those numbers ended up being. 0pixels when using relative positioning would leave it exactly where it is.

As for the id="content2" not being in the css, that's right. I'm not sure exactly how this code works with one layer hiding behind another but I think it's relavant to that and not a css "style"

ADVICE TIME:

Unless somebody can tell me how to eliminate all of that empty space mentioned earlier for "test3", should I just anchor the page left so that I can use absolute positioning? It will make tons of black space on the right side of high resolution screens (rather than spliting half the black on each side). I don't like the look of a page jammed on the left with lots of nothing on the right but maybe some of you who use the higher screen resolutions can tell me if that's actually pretty normal?

Should I give up my centered page in order to allow absolute positioning?

my advice, don't use absolute positioning, unless u have absolutly no choice left, i absolutely avoid it unless, it's for a nav that i want in an odd place :S

o and the z-index is what makes layers overlap or hide underneath

Do you end up with this empty wasted space below things, and if so how do you get rid of it? I'd love to keep the relative over the absolute but that all depends on figuring out the empty space

no, i don't get empty space underneath, can u turn your borders on? so that i (or we) know where each div is? and how many you have used?

Quote: Originally posted by Renegade
no, i don't get empty space underneath, can u turn your borders on? so that i (or we) know where each div is? and how many you have used?

I made a copy with all the div's borders on 1 but none of it shows up in the empty area because they've all been relatively positioned. It's wierd to me?

http://www.mikesussman.com/test3borders.php

Mike, when I run into inexplicable coding mayhem, I do a few things to troubleshoot:

1. Validate the HTML/XHTML/CSS and correct ALL errors that come up, one by one and revalidate and test between them. This helps me see how different things affect display and the validator.

2. Use a DOCTYPE to force the browsers to display what I write, not in quirks mode.

3. Comment the heck out of my CSS and XHTML/HTML so I know EXACTLY what each thing does and I can then turn off things and turn them on and check the results inbetween.

hth,

Suzanne

EUREKA! (I think)

I finally got it!

Relative positioning will always leave a dummy space where the element would have been, while absolute positioning closes up that space so it looks nice. But I couldn't use absolute positioning without abandoning my centered page style.

After a ton of google searching I finally came across the answer. You can use absolute positioning nested from within a fixed point on a page (rather than the edge of the screen). This fixed point is created by a relative positioning anchor! The best of both worlds. Plus it made the values consistant ("top:0px; left:0px")

The page that explained it to me was http://www.meyerweb.com/eric/articles/webrev/199802b.html but go half way down the page to a section titled "Combination Plays"

Here's what I believe is a working example for MSIE5+ and NS6+ : http://www.mikesussman.com/test3d.php. (although it may not work perfectly in NS6+, it's pretty close)
Yea! Now I can finally go to sleep.

:D

hey looks pretty cool what about putting a set height for ur title?

Opera6 doesn't like that at all. But looks good in IE6

great work! looks en works terrific!

yeah ie loves it, but opera hates it lol

Thanks for testing Opera (which I don't have). I've already got a separate script which will determine the browser type and give you this code for MSIE5, MSIE6, and NS 6 and will give all others a plain "safe" version. That'll cover +98% of my expected traffic Iif it didn't come installed on their computer, my friends and family don't even know about other browsers. But still, I'll make that safe version so I don't look bad. Thanks everyone

You don't use unit measures with zero values -- 0px isn't right, it should just be 0.

N7/mac is a mess, though. And I've found that N7 works the same on both pc and mac...