Float:right in position: absolute messed up in firefox

Discussion in 'HTML' started by eslachance@gmail.com, Oct 12, 2005.

  1. Guest

    Hey there,

    I have a small problem with some weird behavior of Firefox. I haven't
    the courage to see if it's firefox not following specs or IE doing what
    it does most (not following standards), but in any case, this is the
    only thing preventing my code from not working.

    So here are the details. I have a div that's positioned absolutely on
    my page. This div contains a small calendar that I update using a
    little AJAX trick, and navigation arrows left and right to call up that
    ajax javascript. The two arrows are positioned using floats left and
    right, and under it is a table that shows the actual calendar.

    now the kicker is that on IE, the div is the proper width, the arrows
    look great, everything is a-ok. But in Firefox, the arrow that's
    floating on the right, instead of floating on the right of the absolute
    DIV, decides to float on the right of the PAGE. So the ~200 px wide div
    gets streched all the way to the right side of the page.

    I've tried using a "span style='clear: both'" after the float div's, as
    I've see this seems to be the most common solution, but nothing helps.

    Here's the page URL:
    http://b2blog.sh.nu:81/users/test/index.html

    The HTML:

    <div id="calendar" style="position: absolute; top: 75px; left: 400px;
    border: 2px solid #000; display:none;" onmouseout="if
    (!this.contains(event.toElement)) this.style.display = 'none';">
    <table class='calendar'><caption><div style="float:left;"><a
    href="javascript:showCalendar('9','2005',
    'test')">&lt;&lt;</a></div><div style="float:right;"><a
    href="javascript:showCalendar('11','2005', 'test')">&gt;&gt;</a></div>
    October, 2005</caption>

    And the CSS that goes with it (you can view
    http://b2blog.sh.nu:81/styles/common.css for the calendar CSS, and
    http://b2blog.sh.nu:81/styles/default/style.css for the rest of the
    page's layout):

    caption
    {
    font-family:arial,helvetica;
    font-size:11px;
    color: black;
    font-weight: bold;
    background-color:#FFFFFF;
    text-align: center;
    }

    ..calendar
    {
    font-family:arial,helvetica;
    font-size:11px;
    color: white;
    background-color: #c0c0c0;
    border: #1px solid #000;
    }


    I invite you to view the page in IE and FireFox to see the
    difference...

    Thanks in advance for anyone who can shed light on this for me. I've
    done my reasearch, google didn't seem to help me this time, which is
    very rare :(

    Eric-S Lachance.
     
    , Oct 12, 2005
    #1
    1. Advertising

  2. Guest

    *cough* Correction: "Keeping my code from working properly", rather
    than keeping it from not working. That's something easy to do :p
     
    , Oct 12, 2005
    #2
    1. Advertising

  3. Mark Parnell Guest

    In our last episode, <> pronounced to alt.html:

    > The two arrows are positioned using floats left and
    > right, and under it is a table that shows the actual calendar.


    No, the arrows are in the table (in the caption element), not above it.

    > Here's the page URL:
    > http://b2blog.sh.nu:81/users/test/index.html


    Well, it would help if display: none; wasn't set on the calendar. Makes
    it easier to check. :)

    Anyway, set the same width on the table and caption as the div (200px
    ATM).

    FWIW, Opera displays it the same as IE.

    You should validate your HTML and CSS (for the HTML you'll have to fix a
    couple of invalid characters first) - that's always the first step in
    trying to fix this sort of problem.

    http://validator.w3.org/
    http://jigsaw.w3.org/css-validator/

    The specs require a width on any floated elements, but the validator
    doesn't seem to be complaining about it - that may be because you are
    using inline styles though. The validator doesn't seem to check inline
    styles. Adding a width to the arrow divs doesn't seem to fix the problem
    though.

    We'll get to the rest of the problems shortly. :)

    --
    Mark Parnell
    http://clarkecomputers.com.au
    alt.html FAQ :: http://html-faq.com/
     
    Mark Parnell, Oct 12, 2005
    #3
  4. Vladdy Guest

    wrote:
    > Hey there,
    >
    > I have a small problem with some weird behavior of Firefox. I haven't
    > the courage to see if it's firefox not following specs or IE doing what
    > it does most (not following standards), but in any case, this is the
    > only thing preventing my code from not working.
    >
    > So here are the details. I have a div that's positioned absolutely on
    > my page. This div contains a small calendar that I update using a
    > little AJAX trick, and navigation arrows left and right to call up that
    > ajax javascript. The two arrows are positioned using floats left and
    > right, and under it is a table that shows the actual calendar.
    >
    > now the kicker is that on IE, the div is the proper width, the arrows
    > look great, everything is a-ok. But in Firefox, the arrow that's
    > floating on the right, instead of floating on the right of the absolute
    > DIV, decides to float on the right of the PAGE. So the ~200 px wide div
    > gets streched all the way to the right side of the page.
    >
    > I've tried using a "span style='clear: both'" after the float div's, as
    > I've see this seems to be the most common solution, but nothing helps.
    >
    > Here's the page URL:
    > http://b2blog.sh.nu:81/users/test/index.html
    >
    > The HTML:
    >
    > <div id="calendar" style="position: absolute; top: 75px; left: 400px;
    > border: 2px solid #000; display:none;" onmouseout="if
    > (!this.contains(event.toElement)) this.style.display = 'none';">
    > <table class='calendar'><caption><div style="float:left;"><a
    > href="javascript:showCalendar('9','2005',
    > 'test')">&lt;&lt;</a></div><div style="float:right;"><a
    > href="javascript:showCalendar('11','2005', 'test')">&gt;&gt;</a></div>
    > October, 2005</caption>
    >
    > And the CSS that goes with it (you can view
    > http://b2blog.sh.nu:81/styles/common.css for the calendar CSS, and
    > http://b2blog.sh.nu:81/styles/default/style.css for the rest of the
    > page's layout):
    >
    > caption
    > {
    > font-family:arial,helvetica;
    > font-size:11px;
    > color: black;
    > font-weight: bold;
    > background-color:#FFFFFF;
    > text-align: center;
    > }
    >
    > .calendar
    > {
    > font-family:arial,helvetica;
    > font-size:11px;
    > color: white;
    > background-color: #c0c0c0;
    > border: #1px solid #000;
    > }
    >
    >
    > I invite you to view the page in IE and FireFox to see the
    > difference...
    >
    > Thanks in advance for anyone who can shed light on this for me. I've
    > done my reasearch, google didn't seem to help me this time, which is
    > very rare :(
    >
    > Eric-S Lachance.
    >

    Since your div with id="calendar" does have explicit width, setting a
    child element to float left actually floats it as far left as possible.
    Adding width: [N]px; to your inline style will solve the problem.

    --
    Vladdy
    http://www.klproductions.com
     
    Vladdy, Oct 12, 2005
    #4
  5. Gary Dale Guest

    HTML elements seem to have borders

    Can someone please explain what is going on here? I have some examples
    of weird behaviour that I can't figure out.

    I have valid XHTML 1.1 and CSS according to W3C validators.

    I have an image at the top left of my page. If I specify a
    border-bottom, the border starts a couple of pixels below the bottom of
    the image. My workaround was to create a span and manually position it
    at the bottom of the image. Why do I need to do this (yes, my
    measurements are correct - the image is 94 pixels high and I have to
    position the span at 94px down to get it in the right position)? I've
    read some material that suggests that the <div> tag is like <p> and puts
    extra space below it, but this even happens when I don't have a <div> tag.

    I have a table that is just below the span. Again, I had to manually
    position it. I've specified border: none; margin: 0px; padding: 0px; but
    the table is still one pixel from the edge of the page. Moreover,
    although it is the same width as the span above it, it looks like it
    ends a pixel before the span as well.

    The effect is the same with both FireFox and IE 6 on Linux and XP. I've
    had the table problem on other pages too, but as my left column is
    usually white, it didn't matter. On this site, the left and right
    columns are different colours from the background, so the white
    background shows the problem quite visibly.

    Can someone explain where these extra pixels are coming from and how to
    position a table to start at left: 0px;?

    Here's the relevant HTML:
    <!--
    <body class="main">
    <div>
    <img src="images/banner.jpg" width="382" height="94" alt="MCC
    logo" />
    <span class="banner"><script
    type="text/javascript">document.write(document.title);</script>
    </span>
    </div>
    <table class="full">
    <tr>
    <td class="leftcolumn">
    <div><a href="index.html">Home</a></div>
    <div><a href="whoweare.html">Who we are</a></div>
    <div><a href="mission.html">Our mission</a></div>
    <div><a href="events.html">Events</a></div>
    <div><a href="contact.html">Contact</a></div>
    <div><a href="donate.html">Donations</a></div>
    <div><a href="membership.html">Join</a></div>
    <div><a href="articles.html">Articles</a></div>
    <div><a href="links.html">Links</a></div>
    </td>
    <td class="mainarea">
    ...

    -->
     
    Gary Dale, Oct 12, 2005
    #5
  6. Dylan Parry Guest

    Re: HTML elements seem to have borders

    Using a pointed stick and pebbles, Gary Dale scraped:

    > Can someone please explain what is going on here?


    Could you post a URL? It is very difficult to figure out what is going
    wrong when you only posted the code, which without the images etc is not
    complete.

    --
    Dylan Parry
    http://webpageworkshop.co.uk -- FREE Web tutorials and references
     
    Dylan Parry, Oct 12, 2005
    #6
  7. Gary Dale Guest

    Re: HTML elements seem to have borders

    Dylan Parry wrote:
    > Using a pointed stick and pebbles, Gary Dale scraped:
    >
    >
    >>Can someone please explain what is going on here?

    >
    >
    > Could you post a URL? It is very difficult to figure out what is going
    > wrong when you only posted the code, which without the images etc is not
    > complete.
    >


    Didn't have it running anywhere. Anyway, the problem seems generic.
    Tables seem to have hidden, non-removable borders.

    I've got some test code in www.muslimcanadiancongress.org/test.html
    which shows the problem. To make it less visible, I started the span 2
    pixels to the right of the left edge of the page. That makes it line up
    with the leftmost column in the table.

    To see the problem with the image, just write your own page and put a
    border at the bottom of an image.

    Another problem is getting the right column to space out properly. With
    FireFox it looks perfect. With Konqueror they are too close and with IE
    they are too far apart. I've read that IE treats height and width as
    suggestions, but it apparently also feels that in doing its
    calculations, it should ignore position tags too. To be fair, so does
    FireFox, but at least it allowed me to build a div box around things to
    position them properly. With Konqueror the problem is mainly the font
    sizes it uses.
     
    Gary Dale, Oct 12, 2005
    #7
  8. Guest

    Re: HTML elements seem to have borders

    Hijacking my thread, Gary Dale wrote:
    > Dylan Parry wrote:
    > > Using a pointed stick and pebbles, Gary Dale scraped:
    > >
    > >
    > >>Can someone please explain what is going on here?

    > >
    > >
    > > Could you post a URL? It is very difficult to figure out what is going
    > > wrong when you only posted the code, which without the images etc is not
    > > complete.
    > >

    >
    > Didn't have it running anywhere. Anyway, the problem seems generic.
    > Tables seem to have hidden, non-removable borders.
    >
    > I've got some test code in www.muslimcanadiancongress.org/test.html
    > which shows the problem. To make it less visible, I started the span 2
    > pixels to the right of the left edge of the page. That makes it line up
    > with the leftmost column in the table.
    >
    > To see the problem with the image, just write your own page and put a
    > border at the bottom of an image.
    >
    > Another problem is getting the right column to space out properly. With
    > FireFox it looks perfect. With Konqueror they are too close and with IE
    > they are too far apart. I've read that IE treats height and width as
    > suggestions, but it apparently also feels that in doing its
    > calculations, it should ignore position tags too. To be fair, so does
    > FireFox, but at least it allowed me to build a div box around things to
    > position them properly. With Konqueror the problem is mainly the font
    > sizes it uses.


    Erm, two things.

    1. Please open your own thread instead of hijacking someone else's.
    That's lame.

    2. Why is everyone telling me to validate? How does that have anything
    to do with it? Anyways, I fixed this problem by applying a width to my
    absolute DIV... that seemed to punch firefox into submission.
     
    , Oct 14, 2005
    #8
  9. Guest

    Re: HTML elements seem to have borders

    Hmn. nevermind, google groups seemed to have messed this one up
    himself, i just realized the post titles were different. wtf?
     
    , Oct 14, 2005
    #9
  10. Guest

    Re: HTML elements seem to have borders

    Hmn. nevermind, google groups seemed to have messed this one up
    himself, i just realized the post titles were different. wtf?
     
    , Oct 14, 2005
    #10
  11. Mark Parnell Guest

    Re: HTML elements seem to have borders

    In our last episode, <> pronounced to alt.html:

    > Hmn. nevermind, google groups seemed to have messed this one up
    > himself, i just realized the post titles were different. wtf?


    No, Gary posted it as a reply to your original post - that's why it
    appears as part of the same thread. But let's give him the benefit of
    the doubt - it was probably an accident.

    BTW: Don't forget to quote the text you are replying to. ;-)

    --
    Mark Parnell
    http://clarkecomputers.com.au
    alt.html FAQ :: http://html-faq.com/
     
    Mark Parnell, Oct 14, 2005
    #11
  12. Re: HTML elements seem to have borders

    In article <>,
    wrote:

    > Why is everyone telling me to validate?


    Because validation can catch some fundamental errors in your markup,
    errors that will trip up browsers and that you might not be sharp enough
    to catch yourself. That's not meant as an insult. The fact is that
    presented with a page of markup, a validator will flawlessly and
    reliably pick out badly-formed constructs, whereas your weary eyes are
    nowhere near as reliable.

    Sometimes those fundamental errors are the cause of the observed
    problem. It makes sense to use a tool like a validator first and correct
    any badly-formed markup, _before_ calling in the meatware for help.
    It'll save you and everyone else time.

    --
    Joel.
     
    Joel Shepherd, Oct 14, 2005
    #12
  13. Gary Dale Guest

    Re: HTML elements seem to have borders

    Mark Parnell wrote:
    > In our last episode, <> pronounced to alt.html:
    >
    >
    >>Hmn. nevermind, google groups seemed to have messed this one up
    >>himself, i just realized the post titles were different. wtf?

    >
    >
    > No, Gary posted it as a reply to your original post - that's why it
    > appears as part of the same thread. But let's give him the benefit of
    > the doubt - it was probably an accident.
    >
    > BTW: Don't forget to quote the text you are replying to. ;-)
    >


    My apologies to everyone. I've been having trouble getting messages to
    post for some reason. If I post to alt.html, it never shows up. I tried
    doing a reply to then changing the subject line, hoping it would create
    a new thread, but it didn't.

    Anyway, I solved my major problem. It appears that the cellspacing html
    attribute defaults to a non-zero value and there is no corresponding css
    value to set. I need to specify cellspacing="0" in every table I create.

    I'm still not sure what's happening with the images - why they seem to
    have a bottom spacing - but that's not as critical.
     
    Gary Dale, Oct 22, 2005
    #13
  14. Re: HTML elements seem to have borders OT: Thunderbird hints

    Gary Dale wrote:

    > My apologies to everyone. I've been having trouble getting messages to
    > post for some reason. If I post to alt.html, it never shows up. I tried
    > doing a reply to then changing the subject line, hoping it would create
    > a new thread, but it didn't.


    In Thunderbird hitting reply then changing the message subject does not
    create a new thread, like I have modified the subject in this message.
    To create a new thread you can either click and highlight the appropriate
    newsgroup in the folder window on the left then click the new message
    button, or click the new message button and the "To:" with the dropdown
    to "Newsgroup:" and type in the newsgroup "alt.html"...The important
    thing is you must click the "New Message" button to create a new thread
    not the "Reply" button.


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Oct 22, 2005
    #14
    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. Luqman
    Replies:
    1
    Views:
    669
    Luqman
    Feb 7, 2006
  2. Replies:
    3
    Views:
    5,453
    Neredbojias
    Jan 7, 2006
  3. sorry.no.email@post_NG.com

    Float Left or Absolute Position?

    sorry.no.email@post_NG.com, May 23, 2006, in forum: HTML
    Replies:
    3
    Views:
    744
    Neredbojias
    May 24, 2006
  4. bd
    Replies:
    0
    Views:
    659
  5. Carsten Fuchs
    Replies:
    45
    Views:
    1,627
    James Kanze
    Oct 8, 2009
Loading...

Share This Page