position absolute different in IE than firefox, help!

Discussion in 'HTML' started by leskaPaul, Nov 9, 2007.

  1. leskaPaul

    leskaPaul Guest

    I'm stumped with a case of position: absolute behaving as expected in
    firefox but not in IE6. Here are links to what it looks like:

    firefox: http://www.flickr.com/photos/8270250@N06/1924432229/
    ie: http://www.flickr.com/photos/8270250@N06/1925262398/

    And here is the html followed by the css:


    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="templateModel.css"/>
    </head>
    <body>
    <div id="containerWrapperOuter">
    <div id="containerWrapperInner">
    <div id="container">
    <div id="outerBorderTopImage">&nbsp;</div>
    <img id="headerImage" src="mastheadFake.jpg"/>
    <div id="main">
    <div id="leftBar"><img src="sideImgFake.GIF"/></div>
    <div id="contentWrapper">
    <div id="content">
    <p>Here is some text. The quick brown fox jumped over the lazy
    dog.
    That sentence is famous because it has all 26 characters of the
    English alphabet.</p>
    <p>Here is some text. The quick brown fox jumped over the lazy
    dog.
    That sentence is famous because it has all 26 characters of the
    English alphabet.</p>
    <p>Here is some text. The quick brown fox jumped over the lazy
    dog.
    That sentence is famous because it has all 26 characters of the
    English alphabet.</p>
    <p>Here is some text. The quick brown fox jumped over the lazy
    dog.
    That sentence is famous because it has all 26 characters of the
    English alphabet.</p>
    <p>Here is some text. The quick brown fox jumped over the lazy
    dog.
    That sentence is famous because it has all 26 characters of the
    English alphabet.</p>
    </div>
    </div> <!-- end div 'contentWrapper' -->
    </div> <!-- end div 'main' -->
    <div id="outerBorderBottomImage">&nbsp;</div>
    <div id="footer"><img style="width: 698px" src="footerFake.jpg"/></
    div>
    </div> <!-- end div 'container' -->
    </div> <!-- end div 'containerWrapperInner' -->
    </div> <!-- end div 'containerWrapperOuter' -->
    </body>
    </html>


    body {
    text-align: center;
    border: 2px blue solid;
    }

    #outerBorderTopImage {
    visibility: visible;
    background-color: yellow;
    }

    #outerBorderBottomImage {
    visibility: visible;
    background-color: purple;
    }

    #containerWrapperOuter {
    visibility: visible;
    background-image: url(outerVertGrad.jpg);
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    }

    #containerWrapperInner {
    visibility: visible;
    background-image: url(vertGradient.jpg);
    width: 750px;
    margin-left: auto;
    margin-right: auto;
    }

    #container {
    visibility: visible;
    background-image: url(contentBg.jpg);
    padding: 0px;
    margin: 0px;
    width: 698px;
    margin-left: auto;
    margin-right: auto;
    }

    #headerImage {
    width: 698px;
    height: 161px;
    vertical-align: top;
    padding: 0px;
    margin: 0px;
    }

    #leftBar {
    position: absolute;
    width: 188px;
    border: 1px red solid;
    }

    #contentWrapper {
    margin-left: 188px;
    background: url(bg_gradientTop.GIF) repeat-x #bccbc1;
    background-position: top;
    }

    #content {
    background: url(bg_gradientBottom.GIF) repeat-x;
    background-position: bottom;
    padding: 1px;
    }

    #footer {
    width: 698px;
    margin: 0px;
    padding: 0px;
    background-color: #f3f0e6;
    padding-top: 20px;
    }
    leskaPaul, Nov 9, 2007
    #1
    1. Advertising

  2. On 2007-11-09, leskaPaul wrote:
    >
    > I'm stumped with a case of position: absolute behaving as expected in
    > firefox but not in IE6. Here are links to what it looks like:
    >
    > firefox: http://www.flickr.com/photos/8270250@N06/1924432229/
    > ie: http://www.flickr.com/photos/8270250@N06/1925262398/
    >
    > And here is the html followed by the css:

    ....
    > <p>Here is some text. The quick brown fox jumped over the lazy
    > dog.
    > That sentence is famous because it has all 26 characters of the
    > English alphabet.</p>


    Where's the 's'?

    > body {
    > text-align: center;
    > border: 2px blue solid;
    > }


    Try adding: margin: 0; padding: 0;

    --
    Chris F.A. Johnson, webmaster <http://Woodbine-Gerrard.com>
    ===================================================================
    Author:
    Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
    Chris F.A. Johnson, Nov 9, 2007
    #2
    1. Advertising

  3. leskaPaul

    rf Guest

    "Chris F.A. Johnson" <> wrote in message
    news:...
    > On 2007-11-09, leskaPaul wrote:
    >>
    >> I'm stumped with a case of position: absolute behaving as expected in
    >> firefox but not in IE6. Here are links to what it looks like:
    >>
    >> firefox: http://www.flickr.com/photos/8270250@N06/1924432229/
    >> ie: http://www.flickr.com/photos/8270250@N06/1925262398/
    >>
    >> And here is the html followed by the css:

    > ...
    >> <p>Here is some text. The quick brown fox jumped over the lazy
    >> dog.
    >> That sentence is famous because it has all 26 characters of the
    >> English alphabet.</p>

    >
    > Where's the 's'?


    s/jumped/jumps/

    --
    Richard.
    rf, Nov 9, 2007
    #3
  4. leskaPaul

    dorayme Guest

    In article <ulOYi.10178$>,
    "rf" <> wrote:

    > "Chris F.A. Johnson" <> wrote in message
    > news:...
    > > On 2007-11-09, leskaPaul wrote:
    > >>
    > >> I'm stumped with a case of position: absolute behaving as expected in
    > >> firefox but not in IE6. Here are links to what it looks like:
    > >>
    > >> firefox: http://www.flickr.com/photos/8270250@N06/1924432229/
    > >> ie: http://www.flickr.com/photos/8270250@N06/1925262398/
    > >>
    > >> And here is the html followed by the css:

    > > ...
    > >> <p>Here is some text. The quick brown fox jumped over the lazy
    > >> dog.
    > >> That sentence is famous because it has all 26 characters of the
    > >> English alphabet.</p>

    > >
    > > Where's the 's'?

    >
    > s/jumped/jumps/


    I carefully looked at the OP's text and could not see
    "s/jumped/jumps/" anywhere.

    --
    dorayme
    dorayme, Nov 9, 2007
    #4
  5. dorayme wrote:
    > In article <ulOYi.10178$>,
    > "rf" <> wrote:
    >
    >> "Chris F.A. Johnson" <> wrote in message
    >> news:...
    >>> On 2007-11-09, leskaPaul wrote:


    >>>> <p>Here is some text. The quick brown fox jumped over the lazy
    >>>> dog.


    >>> Where's the 's'?

    >> s/jumped/jumps/

    >
    > I carefully looked at the OP's text and could not see
    > "s/jumped/jumps/" anywhere.
    >


    Seriously? It's a regular expression substitution "replace 'jumped' with
    'jumps'"

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Nov 9, 2007
    #5
  6. On 2007-11-09, dorayme wrote:
    > In article <ulOYi.10178$>,
    > "rf" <> wrote:
    >
    >> "Chris F.A. Johnson" <> wrote in message
    >> news:...
    >> > On 2007-11-09, leskaPaul wrote:
    >> >>
    >> >> I'm stumped with a case of position: absolute behaving as expected in
    >> >> firefox but not in IE6. Here are links to what it looks like:
    >> >>
    >> >> firefox: http://www.flickr.com/photos/8270250@N06/1924432229/
    >> >> ie: http://www.flickr.com/photos/8270250@N06/1925262398/
    >> >>
    >> >> And here is the html followed by the css:
    >> > ...
    >> >> <p>Here is some text. The quick brown fox jumped over the lazy
    >> >> dog.
    >> >> That sentence is famous because it has all 26 characters of the
    >> >> English alphabet.</p>
    >> >
    >> > Where's the 's'?

    >>
    >> s/jumped/jumps/

    >
    > I carefully looked at the OP's text and could not see
    > "s/jumped/jumps/" anywhere.


    'Nuff sed!

    --
    Chris F.A. Johnson, webmaster <http://Woodbine-Gerrard.com>
    ===================================================================
    Author:
    Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
    Chris F.A. Johnson, Nov 9, 2007
    #6
  7. leskaPaul

    dorayme Guest

    In article <27385$4733ba2d$40cba7bc$>,
    "Jonathan N. Little" <> wrote:

    > dorayme wrote:
    > > In article <ulOYi.10178$>,
    > > "rf" <> wrote:
    > >
    > >> "Chris F.A. Johnson" <> wrote in message
    > >> news:...
    > >>> On 2007-11-09, leskaPaul wrote:

    >
    > >>>> <p>Here is some text. The quick brown fox jumped over the lazy
    > >>>> dog.

    >
    > >>> Where's the 's'?
    > >> s/jumped/jumps/

    > >
    > > I carefully looked at the OP's text and could not see
    > > "s/jumped/jumps/" anywhere.
    > >

    >
    > Seriously? It's a regular expression substitution "replace 'jumped' with
    > 'jumps'"


    I always take what you say seriously. So I looked again. I still
    found no answer to Chris's question in the OP's post. How complex
    is that post? Mind you, I was very superficial, I just looked at
    the visible part (I always have trouble seeing any other).

    --
    dorayme
    dorayme, Nov 9, 2007
    #7
  8. leskaPaul

    mbstevens Guest

    Jonathan N. Little wrote:

    >>>> Where's the 's'?
    >>> s/jumped/jumps/

    >>
    >> I carefully looked at the OP's text and could not see
    >> "s/jumped/jumps/" anywhere.
    >>

    >
    > Seriously? It's a regular expression substitution "replace 'jumped' with
    > 'jumps'"
    >

    Well, strictly speaking, s///; is a _Perl_ regular expression substitution.
    I think the popularity of other languages has left a gap in common knowledge of
    it.
    mbstevens, Nov 9, 2007
    #8
  9. leskaPaul

    mbstevens Guest

    dorayme wrote:
    > In article <27385$4733ba2d$40cba7bc$>,
    > "Jonathan N. Little" <> wrote:
    >
    >> dorayme wrote:
    >>> In article <ulOYi.10178$>,
    >>> "rf" <> wrote:
    >>>
    >>>> "Chris F.A. Johnson" <> wrote in message
    >>>> news:...
    >>>>> On 2007-11-09, leskaPaul wrote:
    >>>>>> <p>Here is some text. The quick brown fox jumped over the lazy
    >>>>>> dog.
    >>>>> Where's the 's'?
    >>>> s/jumped/jumps/
    >>> I carefully looked at the OP's text and could not see
    >>> "s/jumped/jumps/" anywhere.
    >>>

    >> Seriously? It's a regular expression substitution "replace 'jumped' with
    >> 'jumps'"

    >
    > I always take what you say seriously. So I looked again. I still
    > found no answer to Chris's question in the OP's post. How complex
    > is that post? Mind you, I was very superficial, I just looked at
    > the visible part (I always have trouble seeing any other).
    >

    He was saying that 'jumps' substituted for 'jumped' would leave a
    'quick brown fox jumped...' sentence with all the letters of the alphabet.
    mbstevens, Nov 9, 2007
    #9
  10. leskaPaul

    rf Guest

    "mbstevens" <> wrote in message
    news:...
    > Jonathan N. Little wrote:
    >
    >>>>> Where's the 's'?
    >>>> s/jumped/jumps/
    >>>
    >>> I carefully looked at the OP's text and could not see "s/jumped/jumps/"
    >>> anywhere.
    >>>

    >>
    >> Seriously? It's a regular expression substitution "replace 'jumped' with
    >> 'jumps'"
    >>

    > Well, strictly speaking, s///; is a _Perl_ regular expression
    > substitution.
    > I think the popularity of other languages has left a gap in common
    > knowledge of
    > it.


    I actually had VI (and its ilk) in mind :)

    --
    Richard.
    rf, Nov 9, 2007
    #10
  11. Jonathan N. Little, Nov 9, 2007
    #11
  12. leskaPaul

    GTalbot Guest

    On 8 nov, 19:13, leskaPaul <> wrote:
    > I'm stumped with a case of position: absolute behaving as expected in
    > firefox but not in IE6. Here are links to what it looks like:
    >
    > firefox:http://www.flickr.com/photos/8270250@N06/1924432229/
    > ie:http://www.flickr.com/photos/8270250@N06/1925262398/


    Hello LeskaPaul,

    Can you post an url? Can you give info on the height of
    src="footerFake.jpg" and the height
    of src="sideImgFake.GIF", etc?
    Did you try to optimize the HTML/markup code? There is a lot of <div>s
    in your code....
    Why didn't you choose a doctype declaration? Does your code pass
    validation (markup and CSS)?

    Regards,

    Gérard
    GTalbot, Nov 9, 2007
    #12
  13. leskaPaul

    dorayme Guest

    In article <>,
    mbstevens <> wrote:

    > dorayme wrote:
    > > In article <27385$4733ba2d$40cba7bc$>,
    > > "Jonathan N. Little" <> wrote:
    > >
    > >> dorayme wrote:
    > >>> In article <ulOYi.10178$>,
    > >>> "rf" <> wrote:
    > >>>
    > >>>> "Chris F.A. Johnson" <> wrote in message
    > >>>> news:...
    > >>>>> On 2007-11-09, leskaPaul wrote:
    > >>>>>> <p>Here is some text. The quick brown fox jumped over the lazy
    > >>>>>> dog.
    > >>>>> Where's the 's'?
    > >>>> s/jumped/jumps/
    > >>> I carefully looked at the OP's text and could not see
    > >>> "s/jumped/jumps/" anywhere.
    > >>>
    > >> Seriously? It's a regular expression substitution "replace 'jumped' with
    > >> 'jumps'"

    > >
    > > I always take what you say seriously. So I looked again. I still
    > > found no answer to Chris's question in the OP's post. How complex
    > > is that post? Mind you, I was very superficial, I just looked at
    > > the visible part (I always have trouble seeing any other).
    > >

    > He was saying that 'jumps' substituted for 'jumped' would leave a
    > 'quick brown fox jumped...' sentence with all the letters of the alphabet.


    mb... I know what he was *saying*. And I was saying that there
    was no such mechanism mentioned in the OP's message that answered
    Chris's question. If the OP's message looked like:

    http://netweaver.com.au/test/pics/withGrep.png

    then the position would be very different and Chris would have
    twigged to it and not asked the question in the first place.

    <g>

    --
    dorayme
    dorayme, Nov 9, 2007
    #13
  14. leskaPaul

    mbstevens Guest

    Jonathan N. Little wrote:
    > Chris F.A. Johnson wrote:
    >
    >> 'Nuff sed!
    >>

    >
    > <groan>
    >

    It was a little awk word.
    mbstevens, Nov 9, 2007
    #14
  15. leskaPaul

    GTalbot Guest

    On 8 nov, 19:13, leskaPaul <> wrote:

    > #outerBorderTopImage {
    > visibility: visible;
    > background-color: yellow;
    >
    > }
    >
    > #outerBorderBottomImage {
    > visibility: visible;
    > background-color: purple;
    >
    > }
    >
    > #containerWrapperOuter {
    > visibility: visible;
    > background-image: url(outerVertGrad.jpg);
    > width: 800px;
    > margin-left: auto;
    > margin-right: auto;
    >
    > }
    >
    > #containerWrapperInner {
    > visibility: visible;
    > background-image: url(vertGradient.jpg);
    > width: 750px;
    > margin-left: auto;
    > margin-right: auto;
    >
    > }
    >
    > #container {
    > visibility: visible;
    > background-image: url(contentBg.jpg);
    > padding: 0px;
    > margin: 0px;
    > width: 698px;
    > margin-left: auto;
    > margin-right: auto;
    >
    > }


    leskaPaul,

    The default value for visibility is visible. And I checked very
    carefully all your code and not a single element has visibility:
    hidden. So, why did you declare visibility: visible for those 5
    elements?
    Can you post that webpage of yours on an accessible web server and
    then post the url?

    Regards, Gérard
    GTalbot, Nov 9, 2007
    #15
  16. leskaPaul

    Ben C Guest

    On 2007-11-09, rf <> wrote:
    >
    > "mbstevens" <> wrote in message
    > news:...
    >> Jonathan N. Little wrote:
    >>
    >>>>>> Where's the 's'?
    >>>>> s/jumped/jumps/
    >>>>
    >>>> I carefully looked at the OP's text and could not see "s/jumped/jumps/"
    >>>> anywhere.
    >>>>
    >>>
    >>> Seriously? It's a regular expression substitution "replace 'jumped' with
    >>> 'jumps'"
    >>>

    >> Well, strictly speaking, s///; is a _Perl_ regular expression
    >> substitution.
    >> I think the popularity of other languages has left a gap in common
    >> knowledge of
    >> it.

    >
    > I actually had VI (and its ilk) in mind :)


    I'm sure s/// predates Perl. It probably started in ed (or earlier)
    which is how it found its way into vi. Other programs including Perl
    copied it because it was what everyone was already used to.

    Ticking a box marked "Use Grep" is ironic since "grep" itself is the
    name of a different ed command ("global regular expression print"),
    which filters rather than substitutes. It should be called "Use Regex".
    Ben C, Nov 9, 2007
    #16
  17. leskaPaul

    dorayme Guest

    In article <>,
    Ben C <> wrote:

    > Ticking a box marked "Use Grep" is ironic since "grep" itself is the
    > name of a different ed command ("global regular expression print"),
    > which filters rather than substitutes. It should be called "Use Regex".


    You referring to the F & R dialog box in BBEdit for Mac?

    In a spiel in the supporting files with BBEdit there is a *note*
    that says:

    Grep is the name of a frequently used Unix command that searches
    using regular expressions, the same type of search pattern used
    by BBEdit. For this reason, you will often see regular
    expressions called "grep patterns," as BBEdit does. They're the
    same thing.

    --
    dorayme
    dorayme, Nov 9, 2007
    #17
  18. leskaPaul

    Ben C Guest

    On 2007-11-09, dorayme <> wrote:
    > In article <>,
    > Ben C <> wrote:
    >
    >> Ticking a box marked "Use Grep" is ironic since "grep" itself is the
    >> name of a different ed command ("global regular expression print"),
    >> which filters rather than substitutes. It should be called "Use Regex".

    >
    > You referring to the F & R dialog box in BBEdit for Mac?


    Yes.

    > In a spiel in the supporting files with BBEdit there is a *note*
    > that says:
    >
    > Grep is the name of a frequently used Unix command that searches
    > using regular expressions, the same type of search pattern used
    > by BBEdit. For this reason, you will often see regular
    > expressions called "grep patterns," as BBEdit does. They're the
    > same thing.


    Yes, they are the same thing, but I stand by my quibble that "Use Grep"
    is a poor choice of name.

    The Unix program grep is named after the ed command. What the ed command
    does is print out each line of the buffer that matches the pattern. The
    grep program does the same: it prints out each line of its input that
    matches the pattern. That's not quite the same as Find as Replace. It's
    more like Find. The thing they have in common is regular expressions, so
    why not call the option that?

    Another difficulty is that many of these different programs use slightly
    different regular expression syntax. Does BBEdit really use grep
    patterns? I think it actually uses the PCRE library (perl-compatible
    regular expressions), which are not the same as either grep or egrep
    patterns (although closer to egrep). This is important in the real world
    because it changes what you need to escape. In a grep pattern ? matches
    a ?, and \? means "0 or more". But in an egrep (or PCRE) pattern \?
    matches a ? and ? means "0 or more". It's very annoying when you don't
    know which you're supposed to be using.

    It would be less confusing to normal people and much less confusing to
    nerds just to call it "use regex".
    Ben C, Nov 9, 2007
    #18
  19. leskaPaul

    dorayme Guest

    In article <>,
    Ben C <> wrote:

    > On 2007-11-09, dorayme <> wrote:
    > > In article <>,
    > > Ben C <> wrote:
    > >
    > >> Ticking a box marked "Use Grep" is ironic since "grep" itself is the
    > >> name of a different ed command ("global regular expression print"),
    > >> which filters rather than substitutes. It should be called "Use Regex".

    > >
    > > You referring to the F & R dialog box in BBEdit for Mac?

    >
    > Yes.
    >
    > > In a spiel in the supporting files with BBEdit there is a *note*
    > > that says:
    > >
    > > Grep is the name of a frequently used Unix command that searches
    > > using regular expressions, the same type of search pattern used
    > > by BBEdit. For this reason, you will often see regular
    > > expressions called "grep patterns," as BBEdit does. They're the
    > > same thing.

    >
    > Yes, they are the same thing, but I stand by my quibble that "Use Grep"
    > is a poor choice of name.
    >


    O I was not meaning to dispute anything you said... I would
    simply not know. (I know how to put in a set of back shocks on a
    Ford XY real quick now but...)

    > The Unix program grep is named after the ed command. What the ed command
    > does is print out each line of the buffer that matches the pattern. The
    > grep program does the same: it prints out each line of its input that
    > matches the pattern. That's not quite the same as Find as Replace. It's
    > more like Find. The thing they have in common is regular expressions, so
    > why not call the option that?
    >
    > Another difficulty is that many of these different programs use slightly
    > different regular expression syntax. Does BBEdit really use grep
    > patterns? I think it actually uses the PCRE library (perl-compatible
    > regular expressions), which are not the same as either grep or egrep
    > patterns (although closer to egrep). This is important in the real world
    > because it changes what you need to escape. In a grep pattern ? matches
    > a ?, and \? means "0 or more". But in an egrep (or PCRE) pattern \?
    > matches a ? and ? means "0 or more". It's very annoying when you don't
    > know which you're supposed to be using.
    >


    On this reasoning, it sounds to me that BBEdit is using egrep
    because I have to escape the ? to match the ?.

    > It would be less confusing to normal people and much less confusing to
    > nerds just to call it "use regex".


    Well, I was not confused because I am an innocent lamb and
    printed out some of the documentation that came with the software
    and read it lying back on the enormous bench seat of the XY after
    a swim one day at Clovelly Bay. Not that I don't get confused. It
    is enormous fun making patterns and watching them work on whole
    folders of files. Strange but true for those with the boy in
    them. <g>

    --
    dorayme
    dorayme, Nov 9, 2007
    #19
  20. leskaPaul

    leskaPaul Guest

    On Nov 8, 10:33 pm, GTalbot <> wrote:
    > On 8 nov, 19:13, leskaPaul <> wrote:
    >
    > > I'm stumped with a case of position: absolute behaving as expected in
    > > firefox but not in IE6. Here are links to what it looks like:

    >
    > > firefox:http://www.flickr.com/photos/8270250@N06/1924432229/
    > > ie:http://www.flickr.com/photos/8270250@N06/1925262398/

    >
    > Hello LeskaPaul,
    >
    > Can you post an url? Can you give info on the height of
    > src="footerFake.jpg" and the height
    > of src="sideImgFake.GIF", etc?
    > Did you try to optimize the HTML/markup code? There is a lot of <div>s
    > in your code....
    > Why didn't you choose a doctype declaration? Does your code pass
    > validation (markup and CSS)?
    >
    > Regards,
    >
    > Gérard


    The height and width of images (in pixels) is specified in the css
    files. If you have time, copy/paste the code into your own browser(s)
    and tell me if you see different.

    Regards,
    Paul
    leskaPaul, Nov 10, 2007
    #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. Luqman
    Replies:
    1
    Views:
    649
    Luqman
    Feb 7, 2006
  2. Replies:
    13
    Views:
    12,168
    Jonathan N. Little
    Oct 22, 2005
  3. Replies:
    3
    Views:
    5,400
    Neredbojias
    Jan 7, 2006
  4. tshad
    Replies:
    9
    Views:
    745
    Neredbojias
    May 13, 2010
  5. James Byrne
    Replies:
    3
    Views:
    543
    James Byrne
    Sep 14, 2010
Loading...

Share This Page