CSS page design

[SeekSeek]

Hi!
I created a website using page design CSS (three-column right nav)
the problem is that some computers can't see the website properly,
i mean the text in the middle column doesn't appear in the middle
between the left and the right bar but it appears below, down the left bar.

could u please please please tell me wht shud i do to solve this thing.
please please
thanks

[Whir]

Which browser?

The biggest problem with CSS... Well, no, the biggest problem for web design is that each browser renders things different. You need to find out which browser is not rendering it properly and find out how to fix it that way.

Are you using float: for the columns, or?

[SeekSeek]

Whir,
Thanks a lot. I really appreciate it.
I checked and it uses floats,

i have no info what browser is having that problem
but can u please please tell me a universal way to fix that problem.
i mean i changed the float of that middle section to 40% from 55% but
now tht centre section is on the left, is there a way i can solve this problem pleeeease.

[Whir]

Float is not great to work with. It tends to only work well for two pieces.

Honestly, I use tables when I have something like that come up. It may not be "cool," but browsers almost universally render tables the same way. Plus you can get pretty creative with embedding things in the table, like iframes and even multiple divs using float or relative positioning

The float itself will not have a percentage. Only the width or height would.

[LetMeKnow]

yeah, Whir was right...
I've seen some CSS positioning layouts where some of them use images and some (or mostly) are not.
If you just want to work with colours, then I'm pretty sure CSS positioning technique will be just nice.

But, when you wish to include images as part of your web template layout, then you should use tables.
or... combine it with CSS positioning.
Something like, if you have a 3-column css template now, you can convert it to a 3-column tables.
Then, you just apply the styles for each of the 3-columns from that css template into the 3-column tables.

CSS positioning is great, yet not "stable" or "static".
Tables are somehow annoying, with up to 20 nested tables, but they're absolutely positioned - unless you change the alignment of them.

Lately, I've seen some css templates which used images in their design (you can find out more from http://www.csszengarden.com/). Looks just great but I wasn't really amazed. I've seen lots before.

One problem I found was when I switched to full-screen mode in Opera, all styles were gone, leaving just a normal black&white web page. I wasn't sure if it's that my Opera got something incorrect/bugs...

But, I have been testing it - I modifed it so as it contained both tables and also with the original css layout styles. That's the one I was saying earlier on.

And then, all things done - with just one single table and with the help of the other div positioning&layout from the original css template, I could even save lots of space which others would normally put in lots of nested tables just to position the images into their template.

... and that's it. Just a simple note to you.

[Blazer06]

I can help you if you post your site and the CSS style sheet.

There are numerous problems, with browsers not rendering right (I.E. Especially). There are fixes. (Without using tables)


-Blaze

[LetMeKnow]

you can also check out http://glish.com/ and see how he/she designed his/her web site.
it uses no tables at all - it's centred using div and there's a nice floating navigation on the right side which will expand corresponds to your contents/links.
then, at the top, there's another div - something like a table which is overlapped over the main contents div.
he/she has provided the code for that site just at the bottom of the site.
like he/she said... feel free to steal the code found within the site... like i did...

but anyway, did you create that 3-column css layout or probably you downloaded it from somewhere?
can you just show us how does it look like...?

[SeekSeek]

You guys are angels, honestly, this is the beauty of the world and this is the reason
this gives hope that complete strangers would try their best to help out somebody.
i am touched!
i have nailed the problem, the site looks great with the display settings 1024X768
but if i change it then either the middle float stuff goes down, below or the text becomes too small.
i am sorry the people for who i made the site have taken it off temporarily and i can't show u that. But is there a way i can make it work on all the screen display settings?
i really can't put the tables or revamp the site now, so is there a way i can reduce the
middle float's width or something so that it works?
or any other suggestions?

Once again i am very very very very very thankful!

[LetMeKnow]

correction: just continue editing your Web pages with a high-resolution screen width.

to edit the middle div or float, try these: (without the quotes)

"margin-left: whatever;"
"margin-right: whatever;"
"padding-left: whatever;"
"padding-right: whatever;"

or these:

"margin: auto;"
"padding-left: whatever;"
"padding-right: whatever;" (if not "padding: auto;")

... whichever will work well&properly on browsers such as IE, firefox and opera.

[LetMeKnow]

okay,

i think if you wish your visitors to be able to read TEXTS within your Web site using whatever Screen Width Resolution, you can do one of these:

1) DO NOT specify any "font-size" within any elements/tags on your codings... or to be details, within your stylesheets (CSS) [exception to <font size="whatever">your text here</font> tags which has been depreciated anyway ] - you can, however, set the "font-family" to your own preferred font family type.
The default font size will be applied to your Web pages for whatever type of Screen Width Resolution the user currently using when viewing your Web pages.

2) Use 3 separates stylesheets files (CSS) - one for Low (like 640x480) Screen Width Resolution, one for Medium (like 800x600) Screen Width Resolution and one for High(like 1024x768) Screen Width Resolution.
Then, use JavaScript to redirect them based on user's Screen Width Resolution.

3) Use JavaScript to build an automatic stylesheets which will be embedded directly into your Web pages (inline stylesheets).
It will change the "font-size" depending on current Screen Width Resolution a user/visitor/client is using.

As with all of the above, the 1st one is recommended, then comes the third [3)] and if you wish and don't mind to create 3 or perhaps more CSS files, then use method 2).

You can also combine method 1) and 3) - nothing strange will happen... just be sure to try it first before "unleashing" them to a production Web site (or rather your own Web site).

You can find out more and get all the required JavaScript codes along with some sample stylesheets (internal) via the following [.zip] file. It consists only one file - an HTML document.

The document is an article which will explain everything to you.
Just view the source code and get back to me if you're having difficulty(ies) identifying the codes.
I don't have enough time to make separate files - sorry...