Opera Bug: need help

Discussion in 'HTML' started by Animesh Kumar, Aug 8, 2005.

  1. 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
     
    Animesh Kumar, Aug 8, 2005
    #1
    1. Advertising

  2. Animesh Kumar

    kchayka Guest

    Animesh Kumar wrote:
    >
    > 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.

    --
    Reply email address is a bottomless spam bucket.
    Please reply to the group so everyone can share.
     
    kchayka, Aug 9, 2005
    #2
    1. Advertising

  3. kchayka wrote:
    > Animesh Kumar wrote:
    >
    >>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.
    >


    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
     
    Animesh Kumar, Aug 9, 2005
    #3
  4. Animesh Kumar

    Spartanicus Guest

    Animesh Kumar <> wrote:

    >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.

    --
    Spartanicus
     
    Spartanicus, Aug 9, 2005
    #4
  5. Animesh Kumar

    Toby Inkster Guest

    Toby Inkster, Aug 9, 2005
    #5
  6. Spartanicus wrote:
    > Animesh Kumar <> wrote:
    >
    >
    >>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.
    >


    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
    HTML. Btw, does this mean XHTML supports <center> tag? The font tag was
    introduced in a jiffy. I will look again at it.

    >
    > 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, Aug 9, 2005
    #6
  7. Toby Inkster wrote:

    > Animesh Kumar wrote:
    >
    >
    >>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.
    >


    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, Aug 9, 2005
    #7
  8. Toby Inkster wrote:

    > Animesh Kumar wrote:
    >
    >
    >>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?)
    >



    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
     
    Animesh Kumar, Aug 9, 2005
    #8
  9. Animesh Kumar

    Spartanicus Guest

    Animesh Kumar <> wrote:

    >> 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.


    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.

    >> 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.


    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.

    --
    Spartanicus
     
    Spartanicus, Aug 9, 2005
    #9
  10. Spartanicus wrote:

    > Animesh Kumar <> wrote:

    <snip>
    >
    >
    > 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.

    <snip>
    >
    > 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)?

    >


    >>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.
    >


    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
     
    Animesh Kumar, Aug 9, 2005
    #10
  11. Animesh Kumar

    Spartanicus Guest

    Animesh Kumar <> wrote:

    >> 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)?


    The webpage in question contains a sole h2.

    >>>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.

    >
    >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.

    --
    Spartanicus
     
    Spartanicus, Aug 9, 2005
    #11
  12. Spartanicus wrote:

    > Animesh Kumar <> wrote:
    >
    >
    >>>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)?

    >
    >
    > 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).

    >
    >
    >>>>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.

    >>
    >>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.


    You mean I am intellectually challenged or my argument about
    "scripting/coding" was 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.
    >


    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
     
    Animesh Kumar, Aug 9, 2005
    #12
  13. Animesh Kumar

    Spartanicus Guest

    Animesh Kumar <> wrote:

    >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 are wrong.

    >
    >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.

    >>>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.

    >
    >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.

    --
    Spartanicus
     
    Spartanicus, Aug 9, 2005
    #13
  14. Animesh Kumar wrote:
    > 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%; }

    --
    -bts
    -This space intentionally left blank.
     
    Beauregard T. Shagnasty, Aug 9, 2005
    #14
  15. Spartanicus wrote:

    > Animesh Kumar <> wrote:
    >

    <snip>
    >
    > 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.

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

    <snip>
    >
    >
    > 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, Aug 9, 2005
    #15
  16. Beauregard T. Shagnasty wrote:

    > Animesh Kumar wrote:
    >
    >> 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%; }
    >



    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
     
    Animesh Kumar, Aug 9, 2005
    #16
  17. Animesh Kumar

    Toby Inkster Guest

    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. :)

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
     
    Toby Inkster, Aug 9, 2005
    #17
  18. Animesh Kumar

    Toby Inkster Guest

    Animesh Kumar wrote:

    > 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.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
     
    Toby Inkster, Aug 9, 2005
    #18
  19. Toby Inkster wrote:

    > 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
     
    Animesh Kumar, Aug 10, 2005
    #19
  20. Animesh Kumar wrote:
    > 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>.

    --
    -bts
    -This space intentionally left blank.
     
    Beauregard T. Shagnasty, Aug 10, 2005
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. altamir

    Opera's box model bug?

    altamir, Dec 10, 2003, in forum: HTML
    Replies:
    5
    Views:
    766
    altamir
    Dec 10, 2003
  2. Replies:
    6
    Views:
    465
  3. Robert Ludewig

    CSS bug in opera 7 ?

    Robert Ludewig, Aug 28, 2004, in forum: HTML
    Replies:
    13
    Views:
    740
    Robert Ludewig
    Aug 30, 2004
  4. Reckless
    Replies:
    1
    Views:
    825
    Deryck
    Oct 20, 2004
  5. Bob
    Replies:
    24
    Views:
    1,581
Loading...

Share This Page