Browsers & CSS Problem

[matauri]

I have a bit of a problem I am hoping someone will be able to help me with. Actually...it's 2 diff problems surrounding the same issue.

1. On my business site http://activnet.org/attitude/ I am having problems with my links in Opera (mainly under the portfolio section). I had it viewing fine in the other browsers, but with Opera it kept wanting to display different sized fonts. Now I changed it so that all the font sizes in the .css to the one size in hopes of recitfying it, but to no avail.
Any ideas?

2. I am redoing one of my sites http://www.activnet.org/enviro-beta/v.2.0/index.html using the .css to format the page. This is the first time I have done it to such a great degree. Now I have fiddled & fiddled to try & make it look as I want it in most browsers, which I have kind of achieved with the boxes. But, I cant get the text to center in them as it should. No matter which browser I try to make it look better, it will look blech on another. (pay no attention to the links, they aren't working properly yet)
Any ideas?

Is this jsut one of those revolting cross browsers sagas where you have to wear it...or can it be solved?

Any help much appreciated ! :-)


Cindy

[carbonize]

Try putting the class="lhnav" in the TD tag rather than the A tag, see if that makes a difference. Same with the bottom menu.

As for the second site you should try viewing it in 800x600 if you think your only problem is getting the text centred. Not very helpful I know but something that needs addressing.

[vwebworld]

For the 2nd site... posting you CSS file would help.

There is a significant delay for the page to refresh
when the browser size is cjanged too.


~Roland

[matauri]

I have made a couple of changes b4 I read this, a bit better.


As for the second site you should try viewing it in 800x600 if you think your only problem is getting the text centred. Not very helpful I know but something that needs addressing.
I'm not sure quite how to address that one. To use the menu as I have, to have a smaller one looks blecchh. Unless someone knows how to the make the script collapsible. And I know the bottom images overlap too on 800x600.

Will try your suggestion for the first site after some sleep...brain of jello at present.

Script for menu is... http://www.activnet.org/enviro-beta/v.2.0/custom.js
CSS file is ..... http://www.activnet.org/enviro-beta/v.2.0/enviro.css


There is a significant delay for the page to refresh
when the browser size is cjanged too.
Can't see why there would be a delay, unless its the overlap...or..it could be that my server has been acting up all day.


Thanks guys :-)

Cindy

[mikmik]

matauri, I have actually had to be heavily medicated several times after wrestling with both-cross browser compatabilities(I know, quit my whinging)as every one has, but start throwing in pure CSS layout to the mix - as you are aboot to find out.
I almost ALWAYS use this arangement ; <div id="box"><blockquote class="all the formattingproperties I want">Here is some perfectly aligned and formatted text, please enjoy the view.</blockquote></div>

I can give you some excellent sites for quick solutions etc for CSS, but I am very pressed for time today(I know what you're all thinking!), so I will take a closer look later today or tomorrow(ya ya LOL).

You want to know something! I Have stopped trying to reach the virtually impossible goal of getting a page to cover all browsers, at all resolutions, all the time(Ipromise to look after youse guys though Bgcolor=cindy gonna kill me if I don't use),

and just settle for it being 'Understandable' in some.
Also, the secret to fluid design CSS is in creating many layers starting with a main div box and nesting sections(boxes) and more nesting yet on top.

My favorite trick though, is the blockquote inside the box.
Sorry if I'm not clear, I'm working on that.Sorry.

[masterpeace]

Hi Cindy,

AS you know I just did my first CSS valid site whyich I stuck up for review and I have to say I have a great deal of fun trying to get centre aligned text which appeared the same in all browsers.

I found some decided that text-align:center made some browsers centre the "block' and some centre the text. In the end I did as Carbonize hinted and created a bow the right size and the created a custom class which was just:
.centre {text-align: center; padding-top: 2px; } to cente certain text sections such at the navigation links...

If they all read it the same it would be esier but at least it works!

I have downloaded your html and css so I try find a minute to fiddle with it and see if I can help o the images & text overflowing on the 800 x 600 screen, but I am no good with the menu thing...

Tania

[mikmik]

Set font sizes with ems or % ; 80, 100, 120%, or, .8, 1, 1.2 ems etc. I don't have opera installed but that might help

[matauri]

Try putting the class="lhnav" in the TD tag rather than the A tag, see if that makes a difference. Same with the bottom menu.
Nope...lost my links altogether with that one.


I almost ALWAYS use this arangement ; <div id="box"><blockquote class="all the formattingproperties I want">Here is some perfectly aligned and formatted text, please enjoy the view.</blockquote></div>
That one seemed to work to a degree, I had to still keep identical attributes in the id tag.


I found some decided that text-align:center made some browsers centre the "block' and some centre the text. In the end I did as Carbonize hinted and created a bow the right size and the created a custom class which was just:
.centre {text-align: center; padding-top: 2px; } to cente certain text sections such at the navigation links...
Was this for the Attitude site or the enviro one Tania? (I think Carbonize ws talking about the enviro one) But I did use that for one part of the enviro one. The prob with the Attitude one is that Opera isnt reading the css like the others are & the links text changes size.


Set font sizes with ems or % ; 80, 100, 120%, or, .8, 1, 1.2 ems etc. I don't have opera installed but that might help
Haven't heard of setting font sizes in % before. Worth a try I suppose :-)

Thanks to everyone for helping. I think I have formatted it to fit 800x600 now...except for the dam menu. It has a section there that I figured would combat the width problem, but no matter how I change it, I dont get any success. The only thing I achieved was that the menu went right off the page. I ideally want it to collapse, if not, its out with one section of the menu. Here's the script again if anyone wants to have a crack at it.
http://www.activnet.org/enviro-beta/v.2.0/custom.js

Mannnny thanks guys !! :-)


Cindy

[ranjan]

the 'pt' unit should be fixed, always corresponding to exactly one seventy-second of a physical inch.

But it is generally impossible for a Web browser to determine the true size of rendered content.

A well-designed Web browser allows the user to set the pixel-to-'pt' ratio. Obviously, if the user can set the ratio, the user can set a false ratio to enlarge the text.

So firstly avoild fixed font sizing like px anf pt and design with relative font sizes like em and %

Now coming to your problem

A docType should usually contain the URL for the dtd

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">

In absence of the URL most browsers work in non standard (quirks mode). Debugging in quirks mode may solve your problem in Opera but compond it in other browsers.

So first Change your DocType to include the URL and then we can go from there, when all browsers are set to standards mode.

This is a classic example on why one should code to standards.

[matauri]

Thanks Ranjan & Mik....tried it using the % in the Attitude site & it did the trick :-)

Have included the addition in the DOC tag Ranjan...thanks !

So now I am down to just this enviro one & that stupid menu I cant get to fit on a lower res. Any takers? :-)


Cindy

[masterpeace]

Hi Cindy,

Well I played with the CSS for the enviro pagfe, but by the time I got back here you had it all under control anyway so I shall toddle off to bed.

I have to say I found rajan's info about font sizes interesting. I hav been wondering about what it the most reliable way of sizing fonts in the CSS so I will try change them to em & see how that works...

[vwebworld]

Ranjan is the man!

A great resource and so knowledgable!

See his posts a total-impact.com (www.total-impact.com)

~Roland

[matauri]

He certainly is ! And so is Mik! I did some reading up on what he talked about...and BINGO! Apart from a minor glitch in Opera @ 800x600 (which I can live with)...BOTH problems solved :-)

Never even thought of using ems before, now can't imagine working with any other format.

I gave up on trying to sort out the menu, it will suffice with less headings. But if anyone ever figures out how to make it collapse...let me know for future use.

So give yourselves a pat on the back from a grateful person :-)

Definately give it a try Tania, it gives you so much more control over exactly where you want stuff to go. (BTW...is any of this heat wave making down there? They say 39C tomorrow & 40C on Wednesday! --- for the ancient imperial ppl...thats between 100F-104F!)

Cheers to all !


Cindy

[ranjan]

I gave up on trying to sort out the menu,

I cannot reach the menu. Can you repost the URL?

[mikmik]

matuari, I was just looking at your 'enviro' page, and I have this: if you set your padding to a percentage instead of px it will keep it centered properly.
In fact, I guess because I was lucky enough to start out from beginning makind 'fluid' or 'resizeable pages I have gotten to the point where I always use % to format sizes and widths.
The same goes for div boxes, t, tr ,td, positioning(absolute of course), and it has become second nature and is an extremely powerful and versatile way to layout pages.
I have a problem getting the menu to show up in the download I did, I even got all the .js files like sniffer , menu_moz.js, etc cause of course I know what they all are! It is a puzzlement to me because even when I transfer mine (I'm doing another menu for my site using that one, I like it) sometimes it won't work, even though nothing has changed in the code!
Anyways, I was trying to narrow all the box width's in 'custom.js' to 106 (or 116 might work), and give the menu box a background to maintain the coloring
scheme. Also I was going to try to center align the menu but sometimes these scripts don't like that.
I am goint to try to make a css version of that menu, as both menu's on my site were originally javascript and I was able to get identical results with half the code.
Anyways, I have a new client to see in an hour, and I even put off my site all the time, so I will let you know when I've completed the CSS version(hint: a.class:hover = onMouseOver) and maybe get you to zip the .js files if I can't get these working meantime. I learn much for myself by helping with these scenarios so hope to come up with something soon, ya ocker!(LOL, I mean re:CSS).
Alright, we'll yabber later, she'll be right,riper sheila. (o;

[mikmik]

I see two more posts while doing above. Ranj, dito on the kuddo's, learned from your site before. also, must have 10 (!) .js files for menu.
Maybe you can zip them and leave in the same directory, call it "java.zip" so we can referrence it, or you can put a hyperlink to it on your page and it will download!

[matauri]

Alright, we'll yabber later, she'll be right,riper sheila. (o;

ehhhh???? ;-)

Couldn't quite translate the Cannuck talk...(chuckles)....but did you want me to zip the menu & send it ya? If so...all the files? The browser ones too? Mik me darlin....you are going to have to learn to speak english one day ;-)


Cindy

[ranjan]

I reached the menu...

The moment I saw the menu, I disabled javascript. The menu doesn't show without javascript enabled.

How will someone that doesn't understand javascript (read search engine bots) read your links, follow them and index them?

I suggest you get a better script for your dropdowns

Try these links

http://www.alistapart.com/articles/dropdowns
http://gazingus.org/dhtml/?id=109

[ranjan]

roland, mik thanks for the compliments

[mikmik]

Ranj, you can download the rest of the script with a working version(not mat's though) here, the link is called "menu thing", it's located on left hand side right below the yellow header. The 'custom.js' is the one that is used to format the menu, It uses absolute positioning and for size, I tried using %'s but it didn't work(for me!)

http://factor1.net/

[mikmik]

I see that you've already adressed the issue, Ranj.
I checked top link of the two above and I can do it.
I see it uses 'over' instead of 'hover' like I use, so I will now have another one of those 'deadly' always used code snippets, or templates in my arsenal! Thanks muchly, man!
Mat, I will build your menu if it is all to new to you, or whatever, it's overwhelming to learn to much at once for me anyway, and you are one of the very, very smart ones so nothing would surprise me from you. Enough already!
I still LOVE to argue(debate, I mean) with you, if I could get you to stick to the (my LOL) point.

[matauri]

Not a prob with the menu Ranjan. I have only just started laying the site out (it's a redo) at moment. Whenever I have a javascript menu I also have a site map off the front page, for those that do disable javascipt & for the search engines. I would rather have the slick appearance of a javascript menu for the majority, rather than those css ones. By having the sitemap option I am fairly well covering my bases.

But thanks anyway :-)


Cindy

[carbonize]

Is it me or do a lot of people on here answer questions that were not asked?


(pay no attention to the links, they aren't working properly yet)

I did notice that in the second url she has defined the body element twice. Has nothig to do with the problem though. I tried to make sense of the CSS but there' such a mix of different sizing )EM's, %, etc) I found it confusing. I think some of the problems may be your use of elements in elements.

[matauri]

Mik...ditto the message I posted for Ranjan. I fairly well have the alternate menu sussed out using a site map, which will be on there soon. But thanks anyway :-)


Mat, I will build your menu if it is all to new to you, or whatever, it's overwhelming to learn to much at once for me anyway, and you are one of the very, very smart ones so nothing would surprise me from you.

Well thank you for the compliment...LOL...smart eh? More like stubborn ! I don't like losing to a computer ;-)


Cindy

[ranjan]

the slick appearance of a javascript menu for the majority, rather than those css ones

What is wrong with the appearance of this CSS/JS menu

http://gazingus.org/html/menuDropdown.html

More over since it uses CSS the design possibilities are endless with background color and background images.

[matauri]

I think some of the problems may be your use of elements in elements.

Did you find another problem? I thought I fairly well had them all licked.

Yeah I know I have % & ems, but I read that it wasn't a prob to mix the 2. I use the % for dimension sizing (except for heights), I find it a lot easier that way.


Cindy

[matauri]

What is wrong with the appearance of this CSS/JS menu

Here you have me a bit confused. This one uses javascript. What is the difference?


Cindy

[ranjan]

This one uses javascript. What is the difference

The menu you have :
The script writes HTML to your document. So the HTML is always absent without javascript on

The menu link suggested
The script manipulates the HTML within the document. So even if javascript is off, Plain HTML is still available

[matauri]

ahhh...gotcha !

ok...will have a play around with it tomorrow then :-)


Cindy

[matauri]

Well... I just about cracked that css/js menu. Just having a couple of headaches with it.....

1. I obviously have some padding, or whatever issues going astray...see by how when you hover over it.. it moves.

2. Is it possbile to space the titles out a bit more without resorting to chunks of ? I need them to be same size as the 'earth science' field. The 'site' one is rediculously smaller. I tried the padding, but that didnt move the first 'site' list, tho it did send it off the page in 800x600

3. #mainMenu has come a lot further down page that it should have to fit where the menu is now. And the font sizes etc are adjsuted for a lot smaller than they appear to be showing.

4. Couple of issues about it not quite lining up in Firebird & Opera.

I tried validating the css to see if I could find it there, but scores perfect (except for colour scroll bar).

http://www.activnet.org/enviro-beta/v.2.0/index(2).html
http://www.activnet.org/enviro-beta/v.2.0/enviro(2).css



Any ideas?

Cindy

[mikmik]

I had the spacing for the text and blocks perfect, was just about to move on to menu but went to put background color in, and it didn't work!! I can't believe it. Actually, I'll get a link up in a few minutes so you can see. I started CSS from scratch but...
I do have the text formatted though.
Also, not quite sure what you mean, by the menu but I was just fooling with the one one my site - same thing, add .1 ems or 1px padding and yikes. Ill take a look as soon as I put the other up and post link here!
Luck be ya!

Here 'tis: http://factor1.net/temp/matuari/enviromic.htm

[matauri]

Well..I actually solved one of the previous probs. I didnt solve:


2. Is it possible to space the titles out a bit more without resorting to chunks of ? I need them to be same size as the 'earth science' field. The 'site' one is rediculously smaller. I tried the padding, but that didnt move the first 'site' list, tho it did send it off the page in 800x600
I ended up putting a few next to text to even them out more.


3. #mainMenu has come a lot further down page that it should have to fit where the menu is now. And the font sizes etc are adjsuted for a lot smaller than they appear to be showing.
I'm still not sure why this one is measured lowered than it actually appears.


4. Couple of issues about it not quite lining up in Firebird, Opera, Netcrap, Mozilla.
For some reason it isnt showing the background colour of the lists.


Cindy

[mikmik]

Css. Can't live with it. CAN live without it! (For layout, I mean)

[matauri]

I have decided I am on a mission Mik !

I am determined to show ya can build a site that is accessible, cross browser & resolution compatible....and still look good ! There are so many bland looking 'accessible' & 'compatible' sites out there.

It may kill me...or I may kill someone...but it CAN be done :-)



Cindy

[mikmik]

The Irrevocable and the Incorridgeable vs. the Unrenderable. The unmoveable force races the irresistable object to overcome the laws of physics and sanity!

[mikmik]

Matauri!! I have to stop now, my friend is on his way over to buy my mobo, and bringing my new one - and I have to stop now!

I'm gettin' close, I know, but I have a stable latout and colors are right , but MAN, that menu looks rough in Odzzilla LOL.
I know how to make the scrollbar validate, Html4.01trans (of course) but also CSS 1. I haven't tried the script yet, it might totally crummble Net6+ etc.
Good luck, I'll be back 9o;

[ranjan]

Here are some hints for you Matauri,

1.Do not use absolute positioning unless absolutely necessary when you are working on a flexible layout.

There are 5 possible values for position: static, relative, absolute, fixed and inherit.

Static - The Default
means position generated as normal, just the way you would expect given the flow of the HTML. So you seldom state it explicitly.

Let say I have a div with id header
div#header {
width: 80%;
margin-right: auto;
margin-left: auto;
}

will center the div header horizontally.

Relative
means the "box" that contains the positioned element is offset from its static position in the rendering flow of the document. This means it may overlap the position of other rendered elements.

Absolute
means the element is offset in relation to its CONTAINING block. If the containing block is <body>, this means you are just choosing its coordinates on the page. If the containing block is <div> or some other block-level element, you are positioning it relative to that block.

Fixed
The most poorly supported value. When it is supported, the element stays fixed in relation to the viewport - the edges of your monitor. When browser support is up to par for this value, we will be able to generate frames-like behavior without the drawbacks of actually creating a frameset.

Inherit
When an element "inherits" color or size, all seems well. But what is a browser supposed to do when it gets told position:inherit ? I haven't been able to figure this one out yet, and even the O'Reilly CSS book is vague.

Use static(default) as much as you can and use the othersonly when required.

2. Keep an eye on "C" of CSS

Cascading works like this

My HTML



<span>Hi there</span></p>

p {
font: Verdana,80%;
}
span{
font: Verdana,80%;
}

"Hi there" in this case will get cascade value that is 80% of 80%

[masterpeace]

I have decided I am on a mission Mik !...

...It may kill me...or I may kill someone...but it CAN be done :-)

Available breakables in computer crisis...
mice = cheap
keyboards = cheap
monitors = really expensive
people = inconvenient price tag called "jail".

[mikmik]

Matauri wrote:
I have decided I am on a mission Mik !...

...It may kill me...or I may kill someone...but it CAN be done :-)

Then masterpeace replied:

Available breakables in computer crisis...
mice = cheap
keyboards = cheap
monitors = really expensive
people = inconvenient price tag called "jail".
Thanks, masterPEACE(!), you may have saved some lives(o;

Matauri, here are several absolutely fantastic sites about CSS layout - with many free examples presented as templates most with explanations and descriptions.
I used one for your page, which I am just getting back to now(then on to janeth, finally!) from yesterday.
About 'issues' with floating, nesting: http://www.positioniseverything.net/bughouse.html , including - OPERA! - with it's own section!: http://www.positioniseverything.net/op-omnibus.html.
Here are the template pages (they are
really good: http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html , and here is the one that I am using for your page, which is 'so far so good' - I just didn't use any text in the center column and set the widths of left and right to percentages i.e. left:45% and right:55% ,I think(!), you can play around. Keep in mind that I postioned the columns 'absolutely' to allow for the page margins (I set padding:4% 5% 4% 5%; in the "body" tag. Anyway, it's here: http://www.redmelon.net/tstme/3cols2/.
The link "This layout for 'lazy people'" in the right column (easy to see right off) is for a CSS page layout generator, which I haven't tried, because I am a 'hand type coder' LOL (thats why I'm using a template...shakes head in mock disgust...).
Keep the questions coming, mat, because like I said somewhere before, I'm learning a lot, right along with you (and whoever I help), and I'm almost far enough along, which is not much at all actually, to have stopped wanting to dynamite my comuter, and I'm starting to get 'used to it'!
Just kidding about the dynamite , masterpeace! Wait a minute, no I'm not [o;

(note about 'edits'. Had to get 'url' tags positioned properly, now I know why some of the newbie posts (and every one else sometimes, I would imagine) have all those closing tags at the end of their posts)

[mikmik]

I just found out the last url in my post above (to redmelon) redirects to his home page, which doesn't link to his page with 3 col, equal heights with header and footer(very stable, all CSS) so here it is again:http://www.redmelon.net/tstme/3cols2/index.htm

[matauri]

All very interesting tips guys ! Thanks muchly.

I haven't quite solved the problem yet, but I think I am getting closer :-)


Cindy