Opera Bug: need help

[Animesh Kumar]

Hello All:

I have launched a testing phase of my website on sanskrit poetry. It
uses CSS and HTML only, so far. I was checking my page in IE and Mozilla
and the results were nice so far. Yesterday I happen to check the page
in Opera and the result was awful :-(

http://www.stutimandal.com/gif_misc/vishnu_vandanam.htm

Can someone suggest if there is something wrong with the CSS or is it
just Opera?

Also, in MS-IE, the anchor links or navigation bar on top is not
middle-aligned. I used a width of 700 px and gave 150px left margin to
the 400px-wide "div containg nav-list". In Mozilla the result was as
expected. Seems IE is adding some padding or something somewhere.

Finally, is there a way to align Nav-links at bottom to the real bottom
without using space and breaks? I did google, but could not settle with
something meaningful.

Thanks a lot for the help.
Best regards,
Animesh

 

[kchayka]

I was checking my page in IE and Mozilla
and the results were nice so far.

http://www.stutimandal.com/gif_misc/vishnu_vandanam.htm

Hmmm... try it in mozilla again, but this time zoom text up a notch or
two. The layout is rather broken.

BTW, you probably don't realize you haven't set a body background color.
My browser default, which is not white, shows through. It is not very
attractive.

 

[Animesh Kumar]

Hmmm... try it in mozilla again, but this time zoom text up a notch or
two. The layout is rather broken.

BTW, you probably don't realize you haven't set a body background color.
My browser default, which is not white, shows through. It is not very
attractive.

hi

I am aware of the bug you mentioned. I have to fix it some day after
reading the CSS block elements.

Actually I have a div which has a repetitive background (see
div#master). Inside #master, I have two divs -- the second div which is
div#rightcol does not defines the height of the div#master (if it did,
the background will extend all the way). My guess is p-element is again
a block level element and is messing up the layout. Any suggestions?

I will set the body-background color. Indeed as I said things are in a
testing phase and bugs (like the one you said) have to be fixed.

Thanks,
Animesh

 

[Spartanicus]

I have launched a testing phase of my website on sanskrit poetry. It
uses CSS and HTML only, so far. I was checking my page in IE and Mozilla
and the results were nice so far. Yesterday I happen to check the page
in Opera and the result was awful :-(

http://www.stutimandal.com/gif_misc/vishnu_vandanam.htm

Can someone suggest if there is something wrong with the CSS or is it
just Opera?

Given the subject line you seem to have already made up your mind.

Your doctype triggers quirks mode in most browsers. You should use
strict coding with a matching doctype, dump the mixup between XHTML and
HTML and the <center> and <font> crap.

A document should be structured with at least one header, they should
not be used to select a font size, but in an hierarchical and successive
manner.

Opera centers the "midcol", since you've not positioned it this is
perfectly normal behaviour.

 

[Toby Inkster]

http://www.stutimandal.com/gif_misc/vishnu_vandanam.htm
Can someone suggest if there is something wrong with the CSS or is it
just Opera?

Neither -- your HTML.

Ditch the big <center>...</center> element wrapping the whole page and
find some other way of centring the content on the page (perhaps using
auto-width margins?)

 

[Animesh Kumar]

Given the subject line you seem to have already made up your mind.

No no I haven't made up my mind. Since Mozilla and IE were showing it
properly, I guessed it to be a bug with Opera. Sorry about that.

Your doctype triggers quirks mode in most browsers. You should use
strict coding with a matching doctype, dump the mixup between XHTML and
HTML and the <center> and <font> crap.

I see, so your reply suggests me that <center> is not suitable in HTML.
I am looking at the w3.org site to find out which tags are allowed in

A document should be structured with at least one header, they should
not be used to select a font size, but in an hierarchical and successive
manner.

Sorry, I didn't get your point here.

Opera centers the "midcol", since you've not positioned it this is
perfectly normal behaviour.

Okay thanks! I will look more into my buggy design. I just started about
3 months ago with HTML & CSS on a weekend basis, so there will be
sometime since I mature with everything. Thanks for all the suggestions.
If you can find more bugs at my site, I shall be obliged.

PS: any good tutorial on positioning?

Best regards,
Animesh

 

[Animesh Kumar]

Animesh Kumar wrote:




Neither -- your HTML.

Thanks for pointing this out. I am going to polish my clunky HTML skills.

Ditch the big <center>...</center> element wrapping the whole page and
find some other way of centring the content on the page (perhaps using
auto-width margins?)

Hmm can you cite one example of this auto-width (do you mean left: 25%
and right: 25%)?

PS: I Need a tutorial on positioning as well, if you know a good one.

Best regards,
Animesh

 

[Animesh Kumar]

Animesh Kumar wrote:




Neither -- your HTML.

Ditch the big <center>...</center> element wrapping the whole page and
find some other way of centring the content on the page (perhaps using
auto-width margins?)

Hey Guys:

I removed <center> tag using margin-left: auto; margin-right: auto;.

Opera & Mozilla/FF display the page correctly. IE doesn't centers the
content on my poetry page though :-(. Though IE does actually center the
main page using that trick. I will dig more into it, but I dunno if
there is some hack around this stuff.

Best regards,
Animesh

 

[Spartanicus]

I see, so your reply suggests me that <center> is not suitable in HTML.

Nor any other type of presentational markup. HTML should be used to
structure and semantically mark up content. Styling such as alignment
should be done via CSS.

I am looking at the w3.org site to find out which tags are allowed in
HTML. Btw, does this mean XHTML supports <center> tag? The font tag was
introduced in a jiffy. I will look again at it.

Use a strict doctype in your documents, you can then run your documents
through the w3c HTML validator and it'll throw errors when you use
presentational elements.

Sorry, I didn't get your point here.

The first header in a document should be an h1, subsections below that
should be preceded by h2, subsections of the h2 section should be
preceded by an h3 etc.

PS: any good tutorial on positioning?

Positioning is tricky to get right, budding CSS authors often make the
mistake of using positioning before they have the skills to do it right.
An example: http://homepage.ntlworld.com/spartanicus/temp.png

I'd advice to stay clear of positioning until you are skilled with CSS.

 

[Animesh Kumar]

Animesh Kumar <[email protected]> wrote:

Nor any other type of presentational markup. HTML should be used to
structure and semantically mark up content. Styling such as alignment
should be done via CSS.

Good I understand it after making mistakes.

Use a strict doctype in your documents, you can then run your documents
through the w3c HTML validator and it'll throw errors when you use
presentational elements.

Hmm thanks for this tip. I used a doctype, but as per your suggestion,
rightly so, I should make my document strict HTML.

<snip>

The first header in a document should be an h1, subsections below that
should be preceded by h2, subsections of the h2 section should be
preceded by an h3 etc.

That's fine. I understand this, but how does it relate to the webpage in
question (or rather tatters)?

Positioning is tricky to get right, budding CSS authors often make the
mistake of using positioning before they have the skills to do it right.
An example: http://homepage.ntlworld.com/spartanicus/temp.png

I'd advice to stay clear of positioning until you are skilled with CSS.

Hmm, I have read the block model, padding etc stuff from Meyer's book.
Mostly you learn computer scripting/coding by applying them and I think
I am that stage. Running away from positioning isn't going to help my cause.

Please do suggest if you know any positioning guide.

Re: The picture you showed: I am aware of that bug. I tried to fix it a
while ago, without success. (I explained what, I feel, is the error in
last reply to you).

Best regards and thanks,
Animesh

 

[Spartanicus]

That's fine. I understand this, but how does it relate to the webpage in
question (or rather tatters)?

The webpage in question contains a sole h2.

Hmm, I have read the block model, padding etc stuff from Meyer's book.
Mostly you learn computer scripting/coding by applying them and I think
I am that stage.

You are wrong.

Running away from positioning isn't going to help my cause.

It will, there are few good reasons to resort to positioning, and many
drawbacks. Study the flow instead.

 

[Animesh Kumar]

The webpage in question contains a sole h2.

Consider h1 > h2 > h3 .. in terms of font sizes, can't we just pick one
which suits our purpose? Or Should I choose <h1> and style it at
appropriate size? I thought <h1> with a size equal to <h2> or an <h2>
are identical --- provided the page will not use any other h-tag (as is
the case).

You are wrong.

You mean I am intellectually challenged or my argument about
"scripting/coding" was wrong?

It will, there are few good reasons to resort to positioning, and many
drawbacks. Study the flow instead.

Hmm, but I do have to position the two divs which have meaning and
poetry columns. Are you suggesting that it can be done using flow too?

Best regards,
Animesh

 

[Spartanicus]

Consider h1 > h2 > h3 .. in terms of font sizes, can't we just pick one
which suits our purpose? Or Should I choose <h1> and style it at
appropriate size?
Yes.

I thought <h1> with a size equal to <h2> or an <h2>
are identical --- provided the page will not use any other h-tag (as is
the case).
No.


You mean I am intellectually challenged or my argument about
"scripting/coding" was wrong?

You are wrong in thinking that you are at a stage where you can handle
positioning, your webpage shows that you are nowhere near the level
required to handle it without causing major problems.

Hmm, but I do have to position the two divs which have meaning and
poetry columns. Are you suggesting that it can be done using flow too?

An expert understanding of the flow is one of the prerequisites for
creating layouts that work on the web. Until you've acquired such (and
more), tables are the best way to create robust layouts.

 

[Beauregard T. Shagnasty]

Consider h1 > h2 > h3 .. in terms of font sizes, can't we just pick
one which suits our purpose?>

Stop right there!

The <hx> elements are *not* about picking a font size. They are for
marking up relevant *headings* in your page.

<h1>Darkest Africa</h1>
<h2>The Congo</h2>
<p>Deep in the jungles of ... blah blah ...</p>
<h3>Rivers of the Congo</h3>
<p>There are many deep rivers in the Congo ... blah blah</p>
<h2>The Sahara</h2>
<p>Lots of sand and it's hot ... </p>

Like an outline...
A.
1.
a.
B.
1.
2.
a.
b.
C.

Or Should I choose <h1> and style it at appropriate size? I thought
<h1> with a size equal to <h2> or an <h2> are identical ---
provided the page will not use any other h-tag (as is the case).

<hx> are for semantically describing the document, not styling it.

An <h1> on my browser may not be anything like an <h1> on yours, in
terms of appearance.

You can set font sizes in your CSS, maybe:

h1 { font-size: 150%; }
h2 { font-size: 140%; }

 

[Animesh Kumar]

You are wrong in thinking that you are at a stage where you can handle
positioning, your webpage shows that you are nowhere near the level
required to handle it without causing major problems.

Well thanks for the hint. I may not be there, but I dont think it will
take a lot of effort (as in months or several weeks) to understand
positioning/flow. In my case there is hardly anything to "flow" around.
I just have two columns which I want to layout table-less.

An expert understanding of the flow is one of the prerequisites for
creating layouts that work on the web. Until you've acquired such (and
more), tables are the best way to create robust layouts.

Sure, I will keep this in mind. Thanks a lot,

Best regards,
Animesh

 

[Animesh Kumar]

Stop right there!

The <hx> elements are *not* about picking a font size. They are for
marking up relevant *headings* in your page.

<h1>Darkest Africa</h1>
<h2>The Congo</h2>
<p>Deep in the jungles of ... blah blah ...</p>
<h3>Rivers of the Congo</h3>
<p>There are many deep rivers in the Congo ... blah blah</p>
<h2>The Sahara</h2>
<p>Lots of sand and it's hot ... </p>

Like an outline...
A.
1.
a.
B.
1.
2.
a.
b.
C.



<hx> are for semantically describing the document, not styling it.

An <h1> on my browser may not be anything like an <h1> on yours, in
terms of appearance.

You can set font sizes in your CSS, maybe:

h1 { font-size: 150%; }
h2 { font-size: 140%; }

You are right in your way and I understand that very well. I was
introduced to this tag-based headings in latex, far before than in HTML.
In fact, it isn't a big over-statement to say that, all of CSS tries to
capture this essence of latex.

However, however! I just want _one_ (yeah just one) heading in bold and
I used <h2> for that. I don't quite see if I just have to use _one_
heading, why can't I use <h2> or <h1> or <h6> and size it according to
my need? (I could also use a "p" and define it properly in CSS; just
that <h2> suited my need very well so I used it).

Best regards,
Animesh

 

[Toby Inkster]

I removed <center> tag using margin-left: auto; margin-right: auto;.
Opera & Mozilla/FF display the page correctly. IE doesn't centers the
content on my poetry page though :-(

Neat trick alert! Replace <center>...</center> with this:

<!--[if IE gte 5]><center><![endif]-->
...
<!--[if IE gte 5]></center><![endif]-->

IE 5+ will see the <center> element. Proper browsers won't.

 

[Toby Inkster]

Consider h1 > h2 > h3 .. in terms of font sizes, can't we just pick one
which suits our purpose? Or Should I choose <h1> and style it at
appropriate size? I thought <h1> with a size equal to <h2> or an <h2>
are identical --- provided the page will not use any other h-tag (as is
the case).

Yes, but the <hX> elements aren't just about setting font size; they add
structure to your content. When they are used correctly, some browsers[1]
have the ability to, for example, generate a document outline from the
headings.

That is one reason why you should always use the <h1> for the main heading
on a page, <h2> for subheadings, <h3> for the level of headings below
that, and so on.

If you don't like the way that *looks*, then adjust the appearance with
CSS, but not by changing the heading structure.

____
1. Off the top of my head, two spring to mind: Dillo and Amaya. Opera also
uses headings in clever ways, but doesn't do document outlines yet.

 

[Animesh Kumar]

Animesh Kumar wrote:

I removed <center> tag using margin-left: auto; margin-right: auto;.
Opera & Mozilla/FF display the page correctly. IE doesn't centers the
content on my poetry page though :-(

Neat trick alert! Replace <center>...</center> with this:

<!--[if IE gte 5]><center><![endif]-->
...
<!--[if IE gte 5]></center><![endif]-->

IE 5+ will see the <center> element. Proper browsers won't.

Great! You rock. Thanks a lot for the tips in all three threads.

Best regards,
Animesh

 

[Beauregard T. Shagnasty]

However, however! I just want _one_ (yeah just one) heading in bold
and I used <h2> for that. I don't quite see if I just have to use
_one_ heading, why can't I use <h2> or <h1> or <h6> and size it
according to my need? (I could also use a "p" and define it
properly in CSS; just that <h2> suited my need very well so I used
it).

Well, Google ranks <h1> higher than it ranks <h2>, so you decide. <g>

Proper structure would dictate that there should be no <h2> without an
<h1>. They are headings, not styling devices.

If your heading is truly a page heading (and not just something you
want emphasis on), use an <h1> and style it with a font, a size, a
color ...

<h1>The Subject of My Page</h1>

If you just want bolder text, use the <p class="bolder"> and style
that, or if within a paragraph, use a <span>.