IE and Opera vs. Firebird

Discussion in 'HTML' started by Andrew Cameron, Sep 7, 2003.

  1. Hi everyone,

    I've got a serious problem with a page layout I've made. It works
    beautifully in IE and Opera, but doesn't work in Firebird. I've tried
    everything I can think of (even giving the background, #shell, a height
    attribute which was a total hack and looks wrong) to get the background DIV
    to stretch to accomodate the nested DIVs. I asked a friend whose job it is
    to design sites and she had no idea either.

    If you think you can help, please visit < http://x01.co.uk/pleasehelp/ > for
    a description of the problem, screenshots and code. Thanks in advance for
    any help.

    --
    Andrew Cameron
    "Got my hand on my heart, I know no better location..."
     
    Andrew Cameron, Sep 7, 2003
    #1
    1. Advertising

  2. Just thought I'd mention that my reply-to address is false because of spam.
    For this post, if you want to reply by email, you can contact me at tags
    (at) x01 (dot) co (dot) uk.

    --
    Andrew Cameron
    "Got my hand on my heart, I know no better location..."
     
    Andrew Cameron, Sep 7, 2003
    #2
    1. Advertising

  3. Andrew Cameron

    Ernest Cline Guest

    "Andrew Cameron" <> wrote:
    > Hi everyone,
    >
    > I've got a serious problem with a page layout I've made. It works
    > beautifully in IE and Opera, but doesn't work in Firebird. I've tried
    > everything I can think of (even giving the background, #shell, a height
    > attribute which was a total hack and looks wrong) to get the background

    DIV
    > to stretch to accomodate the nested DIVs. I asked a friend whose job it

    is
    > to design sites and she had no idea either.
    >
    > If you think you can help, please visit < http://x01.co.uk/pleasehelp/ >

    for
    > a description of the problem, screenshots and code. Thanks in advance for
    > any help.


    A quick look at your code leads me to believe that the problem is probably
    your DOCTYPE which is an invalid attempt to hybridize the XHTML1.0
    Transitional DOCTYPE with the XHTML1.1 DOCTYPE. As such it probably is
    putting IE 6 into its quirks mode where it emulates the CSS box-model bugs
    that are in IE 5 for Windows. Opera intentionally emulates IE 6's behaviour
    in this regard which explains why it looks the same.

    You should correct the DOCTYPE problem anyway and if you use one of the ones
    that puts IE 6 into Standards mode instead of Quirks mode, it should help
    you to get your pages to look more like each other in IE 6 and other
    browsers. If having it also look the same in IE 5 for Windows is important
    for you, you will need to employ the voice-family hack (which makes use of
    another of IE 5's CSS bugs) to give that browser different values that
    account for IE 5's CSS box-model bugs
     
    Ernest Cline, Sep 7, 2003
    #3
  4. "Ernest Cline" <> wrote in message
    news:qJI6b.8083$...
    >
    > A quick look at your code leads me to believe that the problem is probably
    > your DOCTYPE which is an invalid attempt to hybridize the XHTML1.0
    > Transitional DOCTYPE with the XHTML1.1 DOCTYPE. As such it probably is
    > putting IE 6 into its quirks mode where it emulates the CSS box-model bugs
    > that are in IE 5 for Windows. Opera intentionally emulates IE 6's

    behaviour
    > in this regard which explains why it looks the same.


    Ok, it is now a valid DOCTYPE - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
    Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> - as shown in <
    http://www.w3.org/TR/xhtml1/ >. However, this makes no difference to the
    page layout in either browser. I'm not even sure which browser is "wrong",
    to be honest. I hope it's Firebird...

    --
    Andrew Cameron
    "Got my hand on my heart, I know no better location..."
     
    Andrew Cameron, Sep 7, 2003
    #4
  5. Andrew Cameron

    Adrienne Guest

    Gazing into my crystal ball I observed "Andrew Cameron"
    <> writing in
    news:bjflp1$i8mat$-berlin.de:

    > "Ernest Cline" <> wrote in message
    > news:qJI6b.8083$...
    >>
    >> A quick look at your code leads me to believe that the problem is
    >> probably your DOCTYPE which is an invalid attempt to hybridize the
    >> XHTML1.0 Transitional DOCTYPE with the XHTML1.1 DOCTYPE. As such it
    >> probably is putting IE 6 into its quirks mode where it emulates the
    >> CSS box-model bugs that are in IE 5 for Windows. Opera intentionally
    >> emulates IE 6's behaviour in this regard which explains why it looks
    >> the same.

    >
    > Ok, it is now a valid DOCTYPE - <!DOCTYPE html PUBLIC "-//W3C//DTD
    > XHTML 1.0 Transitional//EN"
    > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> - as shown
    > in < http://www.w3.org/TR/xhtml1/ >. However, this makes no difference
    > to the page layout in either browser. I'm not even sure which browser
    > is "wrong", to be honest. I hope it's Firebird...
    >


    You need to go with a Strict doctype, transitional goes into quirks mode.

    --
    Adrienne Boswell
    Please respond to the group so others can share
    http://www.arbpen.com
     
    Adrienne, Sep 7, 2003
    #5
  6. "Adrienne" <> wrote in message
    news:Xns93EF6B98FF212arbpenyahoocom@207.115.63.158...
    > Gazing into my crystal ball I observed "Andrew Cameron"
    > <> writing in
    > news:bjflp1$i8mat$-berlin.de:
    >
    > > "Ernest Cline" <> wrote in message
    > > news:qJI6b.8083$...
    > >>
    > >> A quick look at your code leads me to believe that the problem is
    > >> probably your DOCTYPE which is an invalid attempt to hybridize the
    > >> XHTML1.0 Transitional DOCTYPE with the XHTML1.1 DOCTYPE. As such it
    > >> probably is putting IE 6 into its quirks mode where it emulates the
    > >> CSS box-model bugs that are in IE 5 for Windows. Opera intentionally
    > >> emulates IE 6's behaviour in this regard which explains why it looks
    > >> the same.

    > >
    > > Ok, it is now a valid DOCTYPE - <!DOCTYPE html PUBLIC "-//W3C//DTD
    > > XHTML 1.0 Transitional//EN"
    > > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> - as shown
    > > in < http://www.w3.org/TR/xhtml1/ >. However, this makes no difference
    > > to the page layout in either browser. I'm not even sure which browser
    > > is "wrong", to be honest. I hope it's Firebird...
    > >

    >
    > You need to go with a Strict doctype, transitional goes into quirks mode.


    Ah, I will do that in future. For the time being, putting a strict doctype
    in doesn't change anything in Firebird - check it out at the original URL.

    Really confused now. :eek:)

    --
    Andrew Cameron
    "Got my hand on my heart, I know no better location..."
     
    Andrew Cameron, Sep 7, 2003
    #6
  7. Andrew Cameron pounced upon this pigeonhole and pronounced:
    > "Ernest Cline" <> wrote in message
    > news:qJI6b.8083$...
    > >
    > > A quick look at your code leads me to believe that the problem is probably
    > > your DOCTYPE which is an invalid attempt to hybridize the XHTML1.0
    > > Transitional DOCTYPE with the XHTML1.1 DOCTYPE. As such it probably is
    > > putting IE 6 into its quirks mode where it emulates the CSS box-model bugs
    > > that are in IE 5 for Windows. Opera intentionally emulates IE 6's

    > behaviour
    > > in this regard which explains why it looks the same.

    >
    > Ok, it is now a valid DOCTYPE - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
    > Transitional//EN"
    > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> - as shown in <
    > http://www.w3.org/TR/xhtml1/ >. However, this makes no difference to the
    > page layout in either browser.


    There is something flaky with your doctype. The validator thinks it is
    Strict... ? http://validator.w3.org/ (I selected a charset for you.)

    <URL:http://validator.w3.org/check?uri=http://x01.co.uk%
    2Fpleasehelp%2F&doctype=%28detect+automatically%29&charset=iso-8859-1+%
    28Western+Europe%29&ss=1>

    (Personally, I'd recommend Strict for new work.)
    http://www.w3.org/QA/2002/04/valid-dtd-list.html

    > I'm not even sure which browser is "wrong",
    > to be honest. I hope it's Firebird...


    Heh, I'd bet Firebird is right <g>.

    Oh, please change your divs.css font size to 100% instead of using px. I'd
    rather see my default size than what you think I should. For your
    p.bigger, use font-size: 110% and for p.small, use font-size: 90%. Thanks.

    You can also remove redundant things like font-family from all but body.

    --
    -bts
    -This space intentionally left blank.
     
    Beauregard T. Shagnasty, Sep 7, 2003
    #7
  8. Andrew Cameron

    Ernest Cline Guest

    "Andrew Cameron" <> wrote:
    > "Ernest Cline" <> wrote:
    > >
    > > A quick look at your code leads me to believe that the problem is

    probably
    > > your DOCTYPE which is an invalid attempt to hybridize the XHTML1.0
    > > Transitional DOCTYPE with the XHTML1.1 DOCTYPE. As such it probably is
    > > putting IE 6 into its quirks mode where it emulates the CSS box-model

    bugs
    > > that are in IE 5 for Windows. Opera intentionally emulates IE 6's
    > > behaviour in this regard which explains why it looks the same.

    >
    > Ok, it is now a valid DOCTYPE - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML

    1.0
    > Transitional//EN"
    > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> - as shown in <
    > http://www.w3.org/TR/xhtml1/ >. However, this makes no difference to the
    > page layout in either browser. I'm not even sure which browser is

    "wrong",
    > to be honest. I hope it's Firebird...


    Well, I did find one other coding mistake, but I don't think it's the cause
    of your problem either.

    In your CSS file,

    #shell #menu {
    clear: top;
    }

    top is not a valid value of the clear property. For what you have in your
    sample, the default value of none should work fine and a look at the DOM
    inspector in Mozilla shows that is what is being generated for theis
    element. I think you may have found a bug in Mozilla.

    A potential fix, altho I make no guarentees would be the following:

    <body>
    <div id="shell">
    <div id="banner"></div>
    <div id="menu"></div>
    <div id="content"></div>
    </div>
    </body>

    Then use:

    #shell, #banner {
    margin-left: auto;
    margin-right: auto;
    }

    Instead of the <center> element to center things. It may be that Mozilla's
    bug is a result of the use of <center>, in which case this may avoid your
    problem. At the very least, this will get you one step close to a Strict as
    opposed to a Transitional DOCTYPE, which based on your earlier DOCTYPE I am
    assuming is of interest to you.
     
    Ernest Cline, Sep 7, 2003
    #8
  9. "Ernest Cline" <> wrote in message
    news:TlK6b.8201$...
    >
    > Well, I did find one other coding mistake, but I don't think it's the

    cause
    > of your problem either.
    >
    > In your CSS file,
    >
    > #shell #menu {
    > clear: top;
    > }


    That was me getting frantic and trying loads of silly things and forgetting
    to take them out :eek:)

    > top is not a valid value of the clear property. For what you have in your
    > sample, the default value of none should work fine and a look at the DOM
    > inspector in Mozilla shows that is what is being generated for theis
    > element. I think you may have found a bug in Mozilla.


    Oh dear. Turns out I may have to just define a height for #shell, or
    possibly use tables. Not sure which because I don't like the idea of
    either.

    > A potential fix, altho I make no guarentees would be the following:

    <snip>
    > Instead of the <center> element to center things. It may be that

    Mozilla's
    > bug is a result of the use of <center>, in which case this may avoid your
    > problem.


    Well, w3c's validator complains less, but Firebird now aligns the whole site
    to the left and does the same as before. I may have to "hack" this one...

    --
    Andrew Cameron
    "Got my hand on my heart, I know no better location..."
     
    Andrew Cameron, Sep 7, 2003
    #9
  10. "Ernest Cline" <> wrote in message
    news:TlK6b.8201$...
    > I think you may have found a bug in Mozilla.


    A thought about this... if it's a bug, then it's a bug in XHTML, because a
    friend of mine got the same thing happening on IE for Mac. Should I be able
    to do what I want to do? It's not, complex, right? Somebody must have done
    it before me or at least tried and failed.

    --
    Andrew Cameron
    "Got my hand on my heart, I know no better location..."
     
    Andrew Cameron, Sep 7, 2003
    #10
  11. Andrew Cameron

    SteW Guest

    Andrew Cameron wrote:

    >
    > Ah, I will do that in future. For the time being, putting a strict doctype
    > in doesn't change anything in Firebird - check it out at the original URL.
    >
    > Really confused now. :eek:)
    >


    You also have errors in your xhtml and css.
    http://validator.w3.org/
    http://jigsaw.w3.org/css-validator/

    Ste W
     
    SteW, Sep 7, 2003
    #11
  12. "Andrew Cameron" <> wrote in message
    news:bjfgcm$iel88$-berlin.de...
    > Hi everyone,
    >
    > I've got a serious problem with a page layout I've made. It works
    > beautifully in IE and Opera, but doesn't work in Firebird. I've tried
    > everything I can think of (even giving the background, #shell, a height
    > attribute which was a total hack and looks wrong) to get the background

    DIV
    > to stretch to accomodate the nested DIVs. I asked a friend whose job it

    is
    > to design sites and she had no idea either.
    >
    > If you think you can help, please visit < http://x01.co.uk/pleasehelp/ >

    for
    > a description of the problem, screenshots and code. Thanks in advance for
    > any help.
    >

    Hi,
    I think it is because you are floating both the menu and content divs are
    floating
    and thus not taking up any space in the shell div. In order to make a
    container
    div actually contain floated items there must be non-floated items at the
    start and
    end of the container div. You have the banner at the start and so you need
    something
    at the end. If you don't want to add any content then you can use a spacer
    div.

    <div class="spacer">&nbsp;</div>

    div.spacer { clear:both; }

    hope this helps,
    AM

    > --
    > Andrew Cameron
    > "Got my hand on my heart, I know no better location..."
    >
    >
     
    Anne Marie Denley, Sep 7, 2003
    #12
  13. "Anne Marie Denley" <> wrote in message
    news:...
    > Hi,
    > I think it is because you are floating both the menu and content divs are
    > floating
    > and thus not taking up any space in the shell div. In order to make a
    > container
    > div actually contain floated items there must be non-floated items at the
    > start and
    > end of the container div. You have the banner at the start and so you

    need
    > something
    > at the end. If you don't want to add any content then you can use a

    spacer
    > div.


    Of course! There's nothing holding them down! How simple, and yet how easy
    to forget when just building what needs to be seen, not what needs to be
    there.

    Thank you so so so much, Anne. I had people (myself included) tearing their
    hair out over this one and it was so simple. Thank you again, you have made
    my day.

    --
    Andrew Cameron
    "Got my hand on my heart, I know no better location..."
     
    Andrew Cameron, Sep 7, 2003
    #13
    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. Tim Zych

    Textbox is tiny on Mozilla Firebird

    Tim Zych, Dec 22, 2003, in forum: ASP .Net
    Replies:
    3
    Views:
    521
    JiangZemin
    Dec 24, 2003
  2. saif

    IIS 5.1 and Mozilla Firebird

    saif, Feb 15, 2004, in forum: ASP .Net
    Replies:
    4
    Views:
    12,944
    Bernard
    Feb 17, 2004
  3. Bob
    Replies:
    24
    Views:
    1,592
  4. flupke

    firebird and unicode

    flupke, May 22, 2005, in forum: Python
    Replies:
    3
    Views:
    572
    F. Petitjean
    May 23, 2005
  5. pbjs

    RoR and Firebird

    pbjs, Jun 2, 2008, in forum: Ruby
    Replies:
    0
    Views:
    108
Loading...

Share This Page