CSS help please... positioning issue

[ivcho]

Hey guys,

I have a page that I'm laying out with CSS positioning but I'm stuck at something.

i have a bottom part of the site with privacy/legal links copyright info etc.

how with CSS can I tell it to always be after the longest element on my page which will be my text.

this is how im defining my text tag to give you a better visual of what's happening

#text { position:absolute; visibility:show; left:190; top:117; z-index:1; width:580;}

so pretty much my question is what do i put here

#bottom { position:absolute; visibility:show; ???????????????? }

I realize that I could of course set its top a little down from where the text actually ends but I want the code to do it for me if you know what I mean so that I can use it for other pages too where the text part won't be as long

I really hope my question makes sense and would really appreciate your help

Thank you kindly in advance

 

[pistol]

With CSS I really don't reccomend absolutely positioning everything like that. Certain browsers will display it differantly.

There are hacks to get around these errors, but as every browser has it's own little quirks, these are quite extensive.

If you absolutely must absolutely position everything. Why not just absolutely position it from the bottom? This is possible per the CSS specification, no? As for how it parses in differant browsers, god knows.

Here is an example of positioning from the bottom from w3schools: http://www.w3schools.com/css/tryit.asp?filename=trycss_bottomright

It also allows you to edit the code and see if it works. Take notice that in the example, the text will stay at the bottom as you make the window smaller and larger, so you don't have to worry about differant resolutions!

Make sure the z-index is the same for that text as the text on top of it, otherwise they may overlap.

If I missed what you're asking completely, just tell me! :D

 

[ivcho]

hey..

thanks for your reply..

I fixed my problem by nesting the bottom div with my text div and setting its left to -170px;

I checked it on Netscape and everything seems to position the way it's supposed to.. what browsers cause the problems you mentioned?

my biggest goal with this project is 4.0+ browser compatibility..

and even if there's a problem is it possible to provide different CSS Styles for different browsers?

Thanks

 

[pistol]

well, my friend, you are not in much luck. the biggest problem browsers are the pre 5.5 (and even 5.5 and 6.0 browsers don't render it quite right all the time.)

The main problem is if you have padding, margins, or borders in unison with using absolute positioning. 5.5. and earlier browsers display the padding and such on the wrong side of the div adding or subtracting from the amount of pixels your div should be.

I don't know of a way to make it so you could have seperate stylesheets for each browser(this is something to ask the backend coding wizzes here. )

On the other hand, there's extensive amounts of hacks to make it parse right in certain browsers or make your CSS not show up at all in the older browsers that parse it entirely incorrectly.

I would try glish.com for those hacks. There should be some links to explanations of them.

This is the main reason why big corporate sites like Yahoo are still using the lousy table based layout techniques leftover from the early nineties. Not to fear, my friend, 4.0 and earlier browsers without any support for CSS will merely not parse the CSS file at all. leaving your site dull, but intact at least. The content is what they're coming for anyway, right? Meanwhile, you can use a {display:none} on a link to where users who can't see your pretty CSS layout can update their browser. This way it will only display in 4.0 and earlier browsers.

 

[ivcho]

Hey.. first of all thanks for your post.. it was helpful

now I'm just wondering if anybody would know how to fix the following problem.. seems to be the last issue I have

ok..

problem I have now is the postitioning of the bottom div

when I use this
position:relative; margin-left:-170px; margin-top:10px;

IE shows me this ( the left part of the div isn't showing )
http://www.bgidesign.com/GCMHTML/iexplorer.GIF

but that's the only way that it would display correct in NN.. it likes the margin stuff..


Now..

If i do
position:relative; left:-170px; margin-top:10px;
Netscape shows this (somehow doesnt position it correctly ) you have to roll over at a totally different place to get the rollover effect.. the circle represents where my mouse is
http://www.bgidesign.com/GCMHTML/netscape.GIF

Anyone know how I can fix this please?

I've tried all I could think of but I can't get this to work properly on both my NS4.7 and IE6.0

Thank you

P.S... btw.. why is the image tag disabled on this forum?

 

[deadserious]

Originally posted by ivcho
P.S... btw.. why is the image tag disabled on this forum?

It is now enabled. :D

 

[pistol]

gah! This is a tough one. Hopefully a CSS genius will come by and help us out. Browser incompatibilities are a tough one with CSS because every browser and browser version has it's own little idiosyncrasies. If only the browser companies would just do things like the W3C reccomendation says...

 

[ivcho]

Thanks for allowing images .. i'm gonna make sure I bookmark this board now... seems to be a really cool place

and Pistol... I ended up fixing it by using the import vs link hack to give 2 different stylesheets depending on the browser..

I've read and heard a lot about all this browser compatibility stuff but never realized how frustrating it can be.. hehe

anyway..

here's a link to main page and 2nd level contact page...
there's one more problem but I'm gonna fix that later on... I think the main background bulb doesnt display properly in NN7

http://www.bgidesign.com/GCMHTMLV.2/GCMHTML/index.html

http://www.bgidesign.com/GCMHTMLV.2/GCMHTML/contactus.html

Thanks