CSS: Comments Please…

[TAM]

Hi,

I have two pages designed using CSS (without tables),

http://www.ngrain.com/CSS/home1.htm designed for IE

and

http://www.ngrain.com/CSS/home2.htm designed for NN, Mozilla, FireFox
and Opera.

The page home2.htm looks fine on Windows in NN, Mozilla, FireFox and
Opera, but look messed up on Red Hat Linux in NN, Firefox and Opera.

Is it because these browsers behave differently on different platform
or something is wrong with my CSS? Any comments…

Thanks in advance.

TM

[kchayka]

TAM wrote:

http://www.ngrain.com/CSS/home1.htm designed for IE
http://www.ngrain.com/CSS/home2.htm designed for NN, Mozilla, FireFox
and Opera.

Is it because these browsers behave differently on different platform
or something is wrong with my CSS? Any comments…

There should be no reason to have 2 separate pages, or even 2 separate
stylesheets.

I think your main problem is all the fixed box dimensions and
inappropriate relative positioning - it creates a fragile layout that
easily falls apart, especially at enlarged text sizes. I don't think you
fully understand what relative positioning does.

I suggest getting rid of all the positioning, reorganize the html so it
makes sense when stylesheets and images are disabled, then work on the
layout. And have a look at the page in a text browser like Lynx, or in
Opera in user-mode (CTRL+G). It can be a real eye-opener. ;)

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[TAM]

Hi kchayka,

Since I dind't had browser detection I created two seperate pages.
Later on I have have browser detection in place and I will select the
CSS, but I didn't understand when you said that I do not even need two
style sheets. Can you explain how I can have only one style sheet for
all the browsers?

Thanks,

TM

kchayka <us****@c-net.us> wrote in message news:<2p************@uni-berlin.de>...

TAM wrote:

http://www.ngrain.com/CSS/home1.htm designed for IE
http://www.ngrain.com/CSS/home2.htm designed for NN, Mozilla, FireFox
and Opera.

Is it because these browsers behave differently on different platform
or something is wrong with my CSS? Any comments…

There should be no reason to have 2 separate pages, or even 2 separate
stylesheets.

I think your main problem is all the fixed box dimensions and
inappropriate relative positioning - it creates a fragile layout that
easily falls apart, especially at enlarged text sizes. I don't think you
fully understand what relative positioning does.

I suggest getting rid of all the positioning, reorganize the html so it
makes sense when stylesheets and images are disabled, then work on the
layout. And have a look at the page in a text browser like Lynx, or in
Opera in user-mode (CTRL+G). It can be a real eye-opener. ;)

[kchayka]

TAM wrote:

Hi kchayka,
Hi. Please don't top post in this newsgroup. thanks
kchayka <us****@c-net.us> wrote in message news:<2p************@uni-berlin.de>...

TAM wrote:

>
> http://www.ngrain.com/CSS/home1.htm designed for IE
> http://www.ngrain.com/CSS/home2.htm designed for NN, Mozilla, FireFox
> and Opera.

There should be no reason to have 2 separate pages, or even 2 separate
stylesheets.

Since I dind't had browser detection I created two seperate pages.
Later on I have have browser detection in place and I will select the
CSS, but I didn't understand when you said that I do not even need two
style sheets. Can you explain how I can have only one style sheet for
all the browsers?

Browser detection is inherently unreliable and shouldn't be used for any
reason. There are many ways to show different style rules to different
browsers without JavaScript. If you searched the news archives, you
could probably find some in a few seconds.
http://groups.google.com/advanced_group_search

I'll save you a little time, here's a fairly good list of CSS links:
http://groups.google.com/groups?as_q...04&safe=images

But you really need to get a basic understanding of CSS, particularly
the box model and how positioning works, before you try to use any
advanced layout techinques like the attempts on your page.

I think you really should start over if you want clean code that will be
both cross-browser compatible, and easy to maintain. The "div soup" you
have now will only get worse as time goes by, and be ever more prone to
display problems.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[TAM]

Hi kchayka,

Thanks for your comments but it's not helping me get on the right
track and find the mistakes that I am making. Since you said I a m
cooking a soup of DIV's, I went through the source code of other sites
designed without tables, and I found that they are using a lot of
div's. Perhaps I am using too many than necessary. I took your advise
and have started from scratch. I am also designing the page for other
browser than IE first. As I am designing, I am checking the page on
Windows and Linux in NN, Opera, Mozilla and Firefox. Here is my new
simple page http://www.ngrain.com/css/new1.htm that I created. On
Linux I see a wider gap between the textbox and navigation on Linux
than on Windows.

I am also using absolute positioning now to have better control. I am
going through a lot of articles but it will help me if you go through
my code and show me what is the correct way. That way I will know
exactly where and what is the mistake. Right now all I know is that
something is wrong but I am trying to shoot in dark hoping I will find
the target.

Thanks again

kchayka <us****@c-net.us> wrote in message news:<2p************@uni-berlin.de>...

TAM wrote:

Hi kchayka,

Hi. Please don't top post in this newsgroup. thanks

kchayka <us****@c-net.us> wrote in message news:<2p************@uni-berlin.de>...

TAM wrote:
>
> http://www.ngrain.com/CSS/home1.htm designed for IE
> http://www.ngrain.com/CSS/home2.htm designed for NN, Mozilla, FireFox
> and Opera.

There should be no reason to have 2 separate pages, or even 2 separate
stylesheets.

Since I dind't had browser detection I created two seperate pages.
Later on I have have browser detection in place and I will select the
CSS, but I didn't understand when you said that I do not even need two
style sheets. Can you explain how I can have only one style sheet for
all the browsers?

Browser detection is inherently unreliable and shouldn't be used for any
reason. There are many ways to show different style rules to different
browsers without JavaScript. If you searched the news archives, you
could probably find some in a few seconds.
http://groups.google.com/advanced_group_search

I'll save you a little time, here's a fairly good list of CSS links:
http://groups.google.com/groups?as_q...04&safe=images

But you really need to get a basic understanding of CSS, particularly
the box model and how positioning works, before you try to use any
advanced layout techinques like the attempts on your page.

I think you really should start over if you want clean code that will be
both cross-browser compatible, and easy to maintain. The "div soup" you
have now will only get worse as time goes by, and be ever more prone to
display problems.

[Andrew Thompson]

On 27 Aug 2004 15:38:13 -0700, TAM wrote:

http://www.ngrain.com/css/new1.htm ...<span class="topNavSelect">Home</span> | <a href="../contact/index.html">Contact</a>
| <a href="../sitemap/index.html">Site
Map</a> | <a href="../support/index.html">Support</a>
|&nbsp;

...I think you need to structure that as a list,
then style it so that it forms a row.

Buth then, it looks as if you are inherently
putting form over structure, which is the wrong
way around.

Mark-up your content with the most logical element,
then style the element to your tastes..
I am also using absolute positioning now to have better control

Uggh. Which meant *I* had to go to Mozilla
so *I* had better control. lesseee.. Text
zoom 200%.

Your page breaks! :-O

On my current screen settings, it does not span
the screen in either IE or Mozilla, and it seems
you are far too hooked up on how *you* want the page
to look, rather than how your visitors might want or
need to see it.

I recommend you go to c.i.w.a.html and sort out
the structure first, but ..I doubt you will do that. ;-)

--
Andrew Thompson
http://www.PhySci.org/ Open-source software suite
http://www.PhySci.org/codes/ Web & IT Help
http://www.1point1C.org/ Science & Technology

[kchayka]

TAM wrote:

Thanks for your comments but it's not helping me get on the right
track and find the mistakes that I am making.
I suggest you take Andrew's advice and learn proper HTML structure and
semantics first. The truth is, there is no instant fix for lack of
understanding.

If this rewrite of yours is something you need in short order, you would
be better off hiring someone with the right skill set to do it
correctly. Otherwise, take the time to learn proper HTML and CSS so you
can do it correctly yourself. Take a class, read a book, whatever. I've
already pointed you to online resources, you can go from there.
I am also using absolute positioning now to have better control.

This is not the answer, either. While the relative positioning you used
before made for a fragile layout, absolute positioning can make a bad
situation worse. You should use as much static positioning as possible,
and not resort to other methods until you understand how they work and
what the repercusions are.

BTW, in reality the author has very little control over how a page is
displayed. Attempts at pixel-perfect layouts are pretty much always
doomed to failure. The sooner you accept this, the better off you'll be.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[Arne]

TAM skrev 2004-08-28 00:38:

Hi kchayka,
kchayka <us****@c-net.us> wrote in message news:<2p************@uni-berlin.de>...

TAM wrote:

Hi kchayka,

Hi. Please don't top post in this newsgroup. thanks

A: Because it messes up the order in which people normally read text.

Q: Why is top-posting such a bad thing?

A: Top-posting.

Q: What is the most annoying thing on usenet?

--
/Arne

[TAM]

Thanks guys for some help.

I will use a list.

The only reason why I created a new and simple document new1.htm, so
that you guys can show me what and how the I am marking up the content
with the most illogical element but that's OK. What I wanted to see
is that how CSS pros like you can design three-four elements that I
have in my sample page. Seeing how you think and arrange them would
have taught me more. Not everyone can be a good communicator and
teacher.

I will try now using static method. I think I understand absolute and
relative positioning.

I know that my page won't look the same on all platforms, browsers and
devices. I am not trying to achieve the same look with pixel
precision. All I am trying is to get close. That's all.

Arne <ar**@luras.nu> wrote in message news:<gr*********************@newsc.telia.net>...

TAM skrev 2004-08-28 00:38:

Hi kchayka,
kchayka <us****@c-net.us> wrote in message news:<2p************@uni-berlin.de>...

TAM wrote:

Hi kchayka,

Hi. Please don't top post in this newsgroup. thanks

A: Because it messes up the order in which people normally read text.

Q: Why is top-posting such a bad thing?

A: Top-posting.

Q: What is the most annoying thing on usenet?