• We’re currently investigating an issue related to the forum theme and styling that is impacting page layout and visual formatting. The problem has been identified, and we are actively working on a resolution. There is no impact to user data or functionality, this is strictly a front-end display issue. We’ll post an update once the fix has been deployed. Thanks for your patience while we get this sorted.

CSS problems - absolute relavite positioning, inconsistencies across browsers

S

stndn

Golden Member
So i tried to come up with a new page design, the infamous two-column layout. It has header, footer, and middle section that is split into two sections, pageContents and pageSubContents.

For the middle section, pageContents comes before pageSubContents, making the page more basic-browser and search engine friendly. With this approach, browsers without styling will see the important page contents before the navigational menu.

All was going well until the testing period of the layout. I tested the page on mozilla 1.73, msie 6.0, and opera 7.54. All on windows 2000 sp2. I'm not sure how worse it will get on other browsers + operating system combo. But i could only imagine that it's not going to get any simpler.

Anyways, the explanation of the problems is quite long, so i've put it here on my site. I've also tried to put the explanation of the problems i encountered, as well as some screenshots. The source code used to produce the problems are also available there.

I would appreciate it if someone could help me take a look at the problem and suggest some fixes to the problem. I've spent enough hours last night i'm basically out of ideas. It's probably just me messing up the CSS rules and usage, or they could well be problems with the browsers and how they interpret CSS.

If possible, i'd like to avoid CSS hacks as much as possible. So, no hacks with \"}\" escaping or /* /* */ or anything fancy like that.

Thank you.
 
i just noticed the typo on the thread title, but i'm too lazy to edit it.
so, relavite -> relative ,p

anyways, i searched around and found out that absolute positioning does not play nice with anything that follows the absolutely-positioned elements. This is especially true when dealing with footer problem, especially when static content is shorter than the absolute positioned contents.

css-discuss reference

so i guess i either make sure my page contents is longer than the navigation menu, swap the menu contents to come before the main contents, use fixed-width layout (instead of liquid layout) or go back to using floats to achieve what i wanted...

semantically correct and orderly css-based web design is so painful ..... -(
 
Well I don't know much about about CSS, but I'd just like you to know that the Mozilla example is consistant with other Mozilla browsers...

i am using firefox 1.0, on a PowerPC laptop running Linux @ 1024x768 resolution and it looks exactly like the example screenshot your setup.
 
Okay, thanks for the information -)

at least i don't have to worry about inconsistencies among moz browsers, unlike the all mighty *coughstupidcough* msie, that can't even keep itself consistent on ie5.0, 5.5, 6.0 ... >(
 
thanks for the information, hopejr.

i'm hoping to use as little hacks as possible to achieve the layout i want. so i guess for now IE7 is out of the question. Thanks anyway, though, Beau.
 
You must log in or register to reply here.

TRENDING THREADS

Back
Top