1 2 Previous Next 43 Replies Latest reply on May 18, 2006 6:00 PM by Newsgroup_User

    CSS mess in IE

    Level 7
      Hey there,

      Can anybody tell me why this page is working in FF and Opera but such a
      mess in IE?

      Here is the URL:

      http://lamaisondecoco.com/csstest.html

      How can this be fixed?

      Anurag
        • 1. Re: CSS mess in IE
          Level 7
          Anurag wrote:
          > Hey there,
          >
          > Can anybody tell me why this page is working in FF and Opera but such a
          > mess in IE?
          >
          > Here is the URL:
          >
          > http://lamaisondecoco.com/csstest.html
          >
          > How can this be fixed?
          >
          > Anurag

          and, BTW,

          Another "issue" is that in my topnav, when you hover over the links in
          IE the border-top & bottom doens't get displayed. The same is true for
          the currently selected one. In FF and Opera it works just fine.

          Any suggestions?
          • 2. Re: CSS mess in IE
            Level 7
            Anurag wrote:
            > Anurag wrote:
            >> Hey there,
            >>
            >> Can anybody tell me why this page is working in FF and Opera but
            >> such a mess in IE?
            >>
            >> Here is the URL:
            >>
            >> http://lamaisondecoco.com/csstest.html
            >>
            >> How can this be fixed?
            >>
            >> Anurag
            >
            > and, BTW,
            >
            > Another "issue" is that in my topnav, when you hover over the links in
            > IE the border-top & bottom doens't get displayed. The same is true for
            > the currently selected one. In FF and Opera it works just fine.
            >
            > Any suggestions?

            To get your #sidenav stick left in IE you need to add "left:0" in the rule
            where you use "position:absolute".
            To get the top/bottom border on your nav links in IE I believe you need to
            use either:
            "display:block;float:left"
            or
            "display:inline-block"

            HTH,
            --
            Thierry
            Articles and Tutorials: http://www.TJKDesign.com/go/?0
            The perfect FAQ page: http://www.TJKDesign.com/go/?9
            CSS-P Templates: http://www.TJKDesign.com/go/?1
            CSS Tab Menu: http://www.TJKDesign.com/go/?3


            • 3. Re: CSS mess in IE
              Level 7
              Thierry | www.TJKDesign.com wrote:
              > Anurag wrote:
              >> Anurag wrote:
              >>> Hey there,
              >>>
              >>> Can anybody tell me why this page is working in FF and Opera but
              >>> such a mess in IE?
              >>>
              >>> Here is the URL:
              >>>
              >>> http://lamaisondecoco.com/csstest.html
              >>>
              >>> How can this be fixed?
              >>>
              >>> Anurag
              >> and, BTW,
              >>
              >> Another "issue" is that in my topnav, when you hover over the links in
              >> IE the border-top & bottom doens't get displayed. The same is true for
              >> the currently selected one. In FF and Opera it works just fine.
              >>
              >> Any suggestions?
              >
              > To get your #sidenav stick left in IE you need to add "left:0" in the rule
              > where you use "position:absolute".
              > To get the top/bottom border on your nav links in IE I believe you need to
              > use either:
              > "display:block;float:left"
              > or
              > "display:inline-block"
              >
              > HTH,

              Thierry, what a surprise to see you here ;-)

              I was actually reworking the design to clean up the CSS...

              When I add the left:0 to end up with:
              #sidenav {
              width:150px;
              position:absolute;
              margin-top: 20px;
              left:0;
              }

              then the sidenav goes way to the left, in all browsers. Now, shall I
              just fix that with a margin?

              My thought was originally to omit it, so that it would inherit the left
              position from #container.
              (And it did except IE)...

              Anurag






              • 4. Re: CSS mess in IE
                Level 7
                Thierry | www.TJKDesign.com wrote:
                > Anurag wrote:
                >> Anurag wrote:
                >>> Hey there,
                >>>
                >>> Can anybody tell me why this page is working in FF and Opera but
                >>> such a mess in IE?
                >>>
                >>> Here is the URL:
                >>>
                >>> http://lamaisondecoco.com/csstest.html
                >>>
                >>> How can this be fixed?
                >>>
                >>> Anurag
                >> and, BTW,
                >>
                >> Another "issue" is that in my topnav, when you hover over the links in
                >> IE the border-top & bottom doens't get displayed. The same is true for
                >> the currently selected one. In FF and Opera it works just fine.
                >>
                >> Any suggestions?
                >
                > To get your #sidenav stick left in IE you need to add "left:0" in the rule
                > where you use "position:absolute".
                > To get the top/bottom border on your nav links in IE I believe you need to
                > use either:
                > "display:block;float:left"
                > or
                > "display:inline-block"
                >
                > HTH,

                Now I add display:inline-block to result in:

                #topnav ul li a {
                display:inline-block;
                text-decoration:none;
                padding:0px 14px 2px 14px;
                background-color:#362419;
                border: 1px solid #362419;
                }

                Why on earth is the currently selected pushed down ... in Opera and IE
                only? (works in FF)

                I published the new file to http://lamaisondecoco.com/csstest.html
                • 5. Re: CSS mess in IE
                  Level 7
                  Anurag wrote:
                  >>> Any suggestions?
                  >>
                  >> To get your #sidenav stick left in IE you need to add "left:0" in
                  >> the rule where you use "position:absolute".
                  >> To get the top/bottom border on your nav links in IE I believe you
                  >> need to use either:
                  >> "display:block;float:left"
                  >> or
                  >> "display:inline-block"
                  >>
                  >> HTH,
                  >
                  > Now I add display:inline-block to result in:
                  >
                  > #topnav ul li a {
                  > display:inline-block;
                  > text-decoration:none;
                  > padding:0px 14px 2px 14px;
                  > background-color:#362419;
                  > border: 1px solid #362419;
                  > }
                  >
                  > Why on earth is the currently selected pushed down ... in Opera and IE
                  > only? (works in FF)
                  >
                  > I published the new file to http://lamaisondecoco.com/csstest.html

                  Try:
                  #topnav ul li a {vertical-align:top; ... }

                  --
                  Thierry
                  Articles and Tutorials: http://www.TJKDesign.com/go/?0
                  The perfect FAQ page: http://www.TJKDesign.com/go/?9
                  CSS-P Templates: http://www.TJKDesign.com/go/?1
                  CSS Tab Menu: http://www.TJKDesign.com/go/?3


                  • 6. Re: CSS mess in IE
                    Level 7
                    Anurag wrote:

                    > Thierry, what a surprise to see you here ;-)

                    ;-)

                    > I was actually reworking the design to clean up the CSS...
                    >
                    > When I add the left:0 to end up with:
                    > #sidenav {
                    > width:150px;
                    > position:absolute;
                    > margin-top: 20px;
                    > left:0;
                    > }
                    >
                    > then the sidenav goes way to the left, in all browsers. Now, shall I
                    > just fix that with a margin?

                    No, you should use a Conditional Comment to make sure only IE sees these
                    fixes.
                    http://tjkdesign.com/articles/conditional_comments.asp


                    --
                    Thierry
                    Articles and Tutorials: http://www.TJKDesign.com/go/?0
                    The perfect FAQ page: http://www.TJKDesign.com/go/?9
                    CSS-P Templates: http://www.TJKDesign.com/go/?1
                    CSS Tab Menu: http://www.TJKDesign.com/go/?3


                    • 7. Re: CSS mess in IE
                      Level 7
                      Thierry | www.TJKDesign.com wrote:
                      > Anurag wrote:
                      >
                      >> Thierry, what a surprise to see you here ;-)
                      >
                      > ;-)
                      >
                      >> I was actually reworking the design to clean up the CSS...
                      >>
                      >> When I add the left:0 to end up with:
                      >> #sidenav {
                      >> width:150px;
                      >> position:absolute;
                      >> margin-top: 20px;
                      >> left:0;
                      >> }
                      >>
                      >> then the sidenav goes way to the left, in all browsers. Now, shall I
                      >> just fix that with a margin?
                      >
                      > No, you should use a Conditional Comment to make sure only IE sees these
                      > fixes.
                      > http://tjkdesign.com/articles/conditional_comments.asp
                      >
                      >
                      Woke up this morning....

                      and thought the same thing...

                      Thanks a lot...

                      Anurag
                      • 8. Re: CSS mess in IE
                        Level 7
                        Thierry | www.TJKDesign.com wrote:
                        > Anurag wrote:
                        >>>> Any suggestions?
                        >>> To get your #sidenav stick left in IE you need to add "left:0" in
                        >>> the rule where you use "position:absolute".
                        >>> To get the top/bottom border on your nav links in IE I believe you
                        >>> need to use either:
                        >>> "display:block;float:left"
                        >>> or
                        >>> "display:inline-block"
                        >>>
                        >>> HTH,
                        >> Now I add display:inline-block to result in:
                        >>
                        >> #topnav ul li a {
                        >> display:inline-block;
                        >> text-decoration:none;
                        >> padding:0px 14px 2px 14px;
                        >> background-color:#362419;
                        >> border: 1px solid #362419;
                        >> }
                        >>
                        >> Why on earth is the currently selected pushed down ... in Opera and IE
                        >> only? (works in FF)
                        >>
                        >> I published the new file to http://lamaisondecoco.com/csstest.html
                        >
                        > Try:
                        > #topnav ul li a {vertical-align:top; ... }
                        >

                        I add, with the result that it gets pulled up, but only the bottom
                        border appears. The top border (in IE) is still missing...
                        • 9. Re: CSS mess in IE
                          Level 7
                          Anurag wrote:

                          >>> #topnav ul li a {
                          >>> display:inline-block;
                          >>> text-decoration:none;
                          >>> padding:0px 14px 2px 14px;
                          >>> background-color:#362419;
                          >>> border: 1px solid #362419;
                          >>> }
                          >>>
                          >>> Why on earth is the currently selected pushed down ... in Opera and
                          >>> IE only? (works in FF)
                          >>>
                          >>> I published the new file to http://lamaisondecoco.com/csstest.html
                          >>
                          >> Try:
                          >> #topnav ul li a {vertical-align:top; ... }
                          >>
                          >
                          > I add, with the result that it gets pulled up, but only the bottom
                          > border appears. The top border (in IE) is still missing...

                          My bad, I checked your stylesheet but not your markup.
                          I assumed you had all text in your menu inside A elements, but in fact you
                          have the "current" one "naked". This is why the rule above doesn't apply to
                          that one. The easiest path is to wrap your "current text" in an anchor and
                          add "cursor efault" in your ".current" rule.


                          --
                          Thierry
                          Articles and Tutorials: http://www.TJKDesign.com/go/?0
                          The perfect FAQ page: http://www.TJKDesign.com/go/?9
                          CSS-P Templates: http://www.TJKDesign.com/go/?1
                          CSS Tab Menu: http://www.TJKDesign.com/go/?3


                          • 10. Re: CSS mess in IE
                            Level 7
                            Thierry | www.TJKDesign.com wrote:
                            > Anurag wrote:
                            >
                            >>>> #topnav ul li a {
                            >>>> display:inline-block;
                            >>>> text-decoration:none;
                            >>>> padding:0px 14px 2px 14px;
                            >>>> background-color:#362419;
                            >>>> border: 1px solid #362419;
                            >>>> }
                            >>>>
                            >>>> Why on earth is the currently selected pushed down ... in Opera and
                            >>>> IE only? (works in FF)
                            >>>>
                            >>>> I published the new file to http://lamaisondecoco.com/csstest.html
                            >>> Try:
                            >>> #topnav ul li a {vertical-align:top; ... }
                            >>>
                            >> I add, with the result that it gets pulled up, but only the bottom
                            >> border appears. The top border (in IE) is still missing...
                            >
                            > My bad, I checked your stylesheet but not your markup.
                            > I assumed you had all text in your menu inside A elements, but in fact you
                            > have the "current" one "naked". This is why the rule above doesn't apply to
                            > that one. The easiest path is to wrap your "current text" in an anchor and
                            > add "cursor efault" in your ".current" rule.
                            >
                            >

                            I'll give that a try... I just have to find a way then that
                            "background-color:#362419;" and the padding doesn't apply...

                            I added this CC, which seems to work fine:

                            <!--[if gte IE 5]>
                            <style type="text/css">
                            #sidenav {left:250px;}
                            </style>
                            <![endif]-->

                            But, as far as I can tell from your article this doesn't cover IE for
                            mac. However, if I try the "star" hack

                            * html body div#sidenav
                            {
                            left:250px;
                            }

                            It doesn't display correctly in IE 7.0 for win.

                            And, any idea why in IE the sidenav elements move down when hovering
                            only over the first element (not any other element and not in FF)...

                            Thanks for your patience... and for your CSS magic...
                            I am glad to go through this since I am learning a lot...

                            Anurag
                            • 11. Re: CSS mess in IE
                              Level 7
                              Anurag wrote:
                              > I'll give that a try... I just have to find a way then that
                              > "background-color:#362419;" and the padding doesn't apply...

                              The easiest way to do it is to use the same element and then style
                              differently one of them.
                              You're using a span rather than the anchor I suggested, that works too, but
                              then you're stuck with having to manually edit this menu.

                              > I added this CC, which seems to work fine:
                              >
                              > <!--[if gte IE 5]>
                              > <style type="text/css">
                              > #sidenav {left:250px;}
                              > </style>
                              > <![endif]-->

                              I'd go with [if lte IE6] to leave out IE7, 8 etc.

                              > But, as far as I can tell from your article this doesn't cover IE for
                              > mac. However, if I try the "star" hack
                              >
                              > * html body div#sidenav
                              > {
                              > left:250px;
                              > }

                              I didn't check your site on a mac, but you're right, the * html hack will
                              work on both (win and mac).

                              > It doesn't display correctly in IE 7.0 for win.

                              See my comment about the version vector you're using with the Conditional
                              Comment.

                              > And, any idea why in IE the sidenav elements move down when hovering
                              > only over the first element (not any other element and not in FF)...

                              I believe it is this rule that creates the problem
                              #sidenav * {position:relative}

                              If you think it is needed then try:
                              #sidenav UL {position:static;...}

                              --
                              Thierry
                              Articles and Tutorials: http://www.TJKDesign.com/go/?0
                              The perfect FAQ page: http://www.TJKDesign.com/go/?9
                              CSS-P Templates: http://www.TJKDesign.com/go/?1
                              CSS Tab Menu: http://www.TJKDesign.com/go/?3


                              • 12. Re: CSS mess in IE
                                Level 7
                                >> I'd go with [if lte IE6] to leave out IE7, 8 etc.

                                I tried that, but it did the same thing in IE7...
                                If I use

                                >> <!--[if gte IE 5]>

                                It works...

                                > But, as far as I can tell from your article this doesn't cover IE for
                                >>> mac. However, if I try the "star" hack
                                >>>
                                >>> * html body div#sidenav
                                >>> {
                                >>> left:250px;
                                >>> }
                                >>
                                >> I didn't check your site on a mac, but you're right, the * html hack will
                                >> work on both (win and mac).
                                >>

                                If I add the star hack however, it will not work in IE7 (win)

                                Do I have to add both at the same time?

                                My understanding was that it would be either...

                                > #sidenav * {
                                > position:static;
                                > }

                                works!!!



                                Thierry | www.TJKDesign.com wrote:
                                > Anurag wrote:
                                >> I'll give that a try... I just have to find a way then that
                                >> "background-color:#362419;" and the padding doesn't apply...
                                >
                                > The easiest way to do it is to use the same element and then style
                                > differently one of them.
                                > You're using a span rather than the anchor I suggested, that works too, but
                                > then you're stuck with having to manually edit this menu.
                                >
                                >> I added this CC, which seems to work fine:
                                >>
                                >> <!--[if gte IE 5]>
                                >> <style type="text/css">
                                >> #sidenav {left:250px;}
                                >> </style>
                                >> <![endif]-->
                                >
                                > I'd go with [if lte IE6] to leave out IE7, 8 etc.
                                >
                                >> But, as far as I can tell from your article this doesn't cover IE for
                                >> mac. However, if I try the "star" hack
                                >>
                                >> * html body div#sidenav
                                >> {
                                >> left:250px;
                                >> }
                                >
                                > I didn't check your site on a mac, but you're right, the * html hack will
                                > work on both (win and mac).
                                >
                                >> It doesn't display correctly in IE 7.0 for win.
                                >
                                > See my comment about the version vector you're using with the Conditional
                                > Comment.
                                >
                                >> And, any idea why in IE the sidenav elements move down when hovering
                                >> only over the first element (not any other element and not in FF)...
                                >
                                > I believe it is this rule that creates the problem
                                > #sidenav * {position:relative}
                                >
                                > If you think it is needed then try:
                                > #sidenav UL {position:static;...}
                                >
                                • 13. Re: CSS mess in IE
                                  Level 7
                                  Anurag wrote:
                                  >>> I'd go with [if lte IE6] to leave out IE7, 8 etc.
                                  >
                                  > I tried that, but it did the same thing in IE7...
                                  > If I use
                                  >
                                  >>> <!--[if gte IE 5]>
                                  >
                                  > It works...

                                  If you need to include IE 7 (which I find odd), you'd still go with a "lte"
                                  syntax as:
                                  [if lte IE7]
                                  Or you should rethink your layout...

                                  >> But, as far as I can tell from your article this doesn't cover IE
                                  >> for
                                  >>>> mac. However, if I try the "star" hack
                                  >>>>
                                  >>>> * html body div#sidenav
                                  >>>> {
                                  >>>> left:250px;
                                  >>>> }
                                  >>>
                                  >>> I didn't check your site on a mac, but you're right, the * html
                                  >>> hack will work on both (win and mac).
                                  >>>
                                  >
                                  > If I add the star hack however, it will not work in IE7 (win)
                                  > Do I have to add both at the same time?

                                  Yes, if you want to serve different styles to all these versions you'll have
                                  to.
                                  To make it easier to understand down the road, I'd use the star html hack
                                  for IE Win and Mac (including IE6) and a CC with this syntax:
                                  [if IE7]
                                  So you'd clearly know what you're targeting.

                                  > My understanding was that it would be either...
                                  >
                                  >> #sidenav * {
                                  >> position:static;
                                  >> }
                                  >
                                  > works!!!

                                  Good

                                  --
                                  Thierry
                                  Articles and Tutorials: http://www.TJKDesign.com/go/?0
                                  The perfect FAQ page: http://www.TJKDesign.com/go/?9
                                  CSS-P Templates: http://www.TJKDesign.com/go/?1
                                  CSS Tab Menu: http://www.TJKDesign.com/go/?3


                                  • 14. Re: CSS mess in IE
                                    Level 7
                                    [if lte IE 6]
                                    ---------^^

                                    Space needed there.

                                    --
                                    Murray --- ICQ 71997575
                                    Adobe Community Expert
                                    (If you *MUST* email me, don't LAUGH when you do so!)
                                    ==================
                                    http://www.dreamweavermx-templates.com - Template Triage!
                                    http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                                    http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                                    http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
                                    ==================


                                    "Anurag" <chetan_anurag@yahoo.de> wrote in message
                                    news:e4g4fr$ajg$1@forums.macromedia.com...
                                    >>> I'd go with to leave out IE7, 8 etc.
                                    >
                                    > I tried that, but it did the same thing in IE7...
                                    > If I use
                                    >
                                    >>> <!--[if gte IE 5]>
                                    >
                                    > It works...
                                    >
                                    >> But, as far as I can tell from your article this doesn't cover IE for
                                    >>>> mac. However, if I try the "star" hack
                                    >>>>
                                    >>>> * html body div#sidenav
                                    >>>> {
                                    >>>> left:250px;
                                    >>>> }
                                    >>>
                                    >>> I didn't check your site on a mac, but you're right, the * html hack
                                    >>> will
                                    >>> work on both (win and mac).
                                    >>>
                                    >
                                    > If I add the star hack however, it will not work in IE7 (win)
                                    >
                                    > Do I have to add both at the same time?
                                    >
                                    > My understanding was that it would be either...
                                    >
                                    >> #sidenav * {
                                    >> position:static;
                                    >> }
                                    >
                                    > works!!!
                                    >
                                    >
                                    >
                                    > Thierry | www.TJKDesign.com wrote:
                                    >> Anurag wrote:
                                    >>> I'll give that a try... I just have to find a way then that
                                    >>> "background-color:#362419;" and the padding doesn't apply...
                                    >>
                                    >> The easiest way to do it is to use the same element and then style
                                    >> differently one of them.
                                    >> You're using a span rather than the anchor I suggested, that works too,
                                    >> but
                                    >> then you're stuck with having to manually edit this menu.
                                    >>
                                    >>> I added this CC, which seems to work fine:
                                    >>>
                                    >>> <!--[if gte IE 5]>
                                    >>> <style type="text/css">
                                    >>> #sidenav {left:250px;}
                                    >>> </style>
                                    >>> <![endif]-->
                                    >>
                                    >> I'd go with [if lte IE6] to leave out IE7, 8 etc.
                                    >>
                                    >>> But, as far as I can tell from your article this doesn't cover IE for
                                    >>> mac. However, if I try the "star" hack
                                    >>>
                                    >>> * html body div#sidenav
                                    >>> {
                                    >>> left:250px;
                                    >>> }
                                    >>
                                    >> I didn't check your site on a mac, but you're right, the * html hack will
                                    >> work on both (win and mac).
                                    >>
                                    >>> It doesn't display correctly in IE 7.0 for win.
                                    >>
                                    >> See my comment about the version vector you're using with the Conditional
                                    >> Comment.
                                    >>
                                    >>> And, any idea why in IE the sidenav elements move down when hovering
                                    >>> only over the first element (not any other element and not in FF)...
                                    >>
                                    >> I believe it is this rule that creates the problem
                                    >> #sidenav * {position:relative}
                                    >>
                                    >> If you think it is needed then try:
                                    >> #sidenav UL {position:static;...}
                                    >>


                                    • 15. Re: CSS mess in IE
                                      Level 7
                                      Murray *ACE* wrote:
                                      > [if lte IE 6]
                                      > ---------^^
                                      >
                                      > Space needed there.

                                      Where would you want a space? Between the version vector and the bracket?

                                      --
                                      Thierry
                                      Articles and Tutorials: http://www.TJKDesign.com/go/?0
                                      The perfect FAQ page: http://www.TJKDesign.com/go/?9
                                      CSS-P Templates: http://www.TJKDesign.com/go/?1
                                      CSS Tab Menu: http://www.TJKDesign.com/go/?3


                                      • 16. Re: CSS mess in IE
                                        Level 7
                                        No - between IE and 6.

                                        --
                                        Murray --- ICQ 71997575
                                        Adobe Community Expert
                                        (If you *MUST* email me, don't LAUGH when you do so!)
                                        ==================
                                        http://www.dreamweavermx-templates.com - Template Triage!
                                        http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                                        http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                                        http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
                                        ==================


                                        "Thierry | www.TJKDesign.com" <thierry@212utah.invalid> wrote in message
                                        news:e4g9l8$gcp$1@forums.macromedia.com...
                                        > Murray *ACE* wrote:
                                        >> [if lte IE 6]
                                        >> ---------^^
                                        >>
                                        >> Space needed there.
                                        >
                                        > Where would you want a space? Between the version vector and the bracket?
                                        >
                                        > --
                                        > Thierry
                                        > Articles and Tutorials: http://www.TJKDesign.com/go/?0
                                        > The perfect FAQ page: http://www.TJKDesign.com/go/?9
                                        > CSS-P Templates: http://www.TJKDesign.com/go/?1
                                        > CSS Tab Menu: http://www.TJKDesign.com/go/?3
                                        >
                                        >


                                        • 17. Re: CSS mess in IE
                                          Level 7
                                          Murray *ACE* wrote:
                                          > No - between IE and 6.

                                          Doh! Good catch Murray.
                                          No wonder why I didn't know where you wanted a space in there since you
                                          already added it

                                          --
                                          Thierry
                                          Articles and Tutorials: http://www.TJKDesign.com/go/?0
                                          The perfect FAQ page: http://www.TJKDesign.com/go/?9
                                          CSS-P Templates: http://www.TJKDesign.com/go/?1
                                          CSS Tab Menu: http://www.TJKDesign.com/go/?3



                                          • 18. Re: CSS mess in IE
                                            Level 7
                                            That's why it wasn't working....

                                            --
                                            Murray --- ICQ 71997575
                                            Adobe Community Expert
                                            (If you *MUST* email me, don't LAUGH when you do so!)
                                            ==================
                                            http://www.dreamweavermx-templates.com - Template Triage!
                                            http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                                            http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                                            http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
                                            ==================


                                            "Thierry | www.TJKDesign.com" <thierry@212utah.invalid> wrote in message
                                            news:e4ga4i$gud$1@forums.macromedia.com...
                                            > Murray *ACE* wrote:
                                            >> No - between IE and 6.
                                            >
                                            > Doh! Good catch Murray.
                                            > No wonder why I didn't know where you wanted a space in there since you
                                            > already added it
                                            >
                                            > --
                                            > Thierry
                                            > Articles and Tutorials: http://www.TJKDesign.com/go/?0
                                            > The perfect FAQ page: http://www.TJKDesign.com/go/?9
                                            > CSS-P Templates: http://www.TJKDesign.com/go/?1
                                            > CSS Tab Menu: http://www.TJKDesign.com/go/?3
                                            >
                                            >
                                            >


                                            • 19. Re: CSS mess in IE
                                              Level 7
                                              Murray *ACE* wrote:
                                              > No - between IE and 6.
                                              >
                                              hmm... to add to the space issue ... it actually has been in the CSS...
                                              just not in the post

                                              • 20. Re: CSS mess in IE
                                                Level 7
                                                >> If you need to include IE 7 (which I find odd), you'd still go with a "lte"

                                                Yes, Oddly enough it needs
                                                <!--[if lte IE 7]>
                                                to work in IE 7 as well...


                                                So, to sum it up...

                                                I've added this to the CSS:

                                                * html body div#sidenav {left:250px }

                                                and

                                                <!--[if lte IE 7]>
                                                <style type="text/css">
                                                #sidenav {left:250px;}
                                                </style>
                                                <![endif]-->

                                                It looks good in IE 7, FF and Opera...

                                                Now could someone please take a look at it with IE for Mac and tell me
                                                if it holds up?

                                                http://lamaisondecoco.com/csstest.html

                                                Thanks,

                                                Anurag
                                                • 21. Re: CSS mess in IE
                                                  Level 7
                                                  Anurag wrote:
                                                  > Murray *ACE* wrote:
                                                  >> No - between IE and 6.
                                                  >>
                                                  > hmm... to add to the space issue ... it actually has been in the
                                                  > CSS... just not in the post

                                                  I can't believe you reproduced my typos since you had the syntax correct
                                                  from the beginning with:
                                                  <!--[if gte IE 5]>



                                                  --
                                                  Thierry
                                                  Articles and Tutorials: http://www.TJKDesign.com/go/?0
                                                  The perfect FAQ page: http://www.TJKDesign.com/go/?9
                                                  CSS-P Templates: http://www.TJKDesign.com/go/?1
                                                  CSS Tab Menu: http://www.TJKDesign.com/go/?3


                                                  • 22. Re: CSS mess in IE
                                                    Level 7
                                                    Well the art of cut and paste and frantic "post" typing after too many
                                                    ours....



                                                    Thierry | www.TJKDesign.com wrote:
                                                    > Anurag wrote:
                                                    >> Murray *ACE* wrote:
                                                    >>> No - between IE and 6.
                                                    >>>
                                                    >> hmm... to add to the space issue ... it actually has been in the
                                                    >> CSS... just not in the post
                                                    >
                                                    > I can't believe you reproduced my typos since you had the syntax correct
                                                    > from the beginning with:
                                                    > <!--[if gte IE 5]>
                                                    >
                                                    >
                                                    >
                                                    • 23. Re: CSS mess in IE
                                                      Level 7
                                                      http://lamaisondecoco.com/csstest.html

                                                      Did anybody check the page with IE for MAC ? Does it work?
                                                      I'm dying to hear...
                                                      • 24. Re: CSS mess in IE
                                                        Level 7
                                                        > Yes, Oddly enough it needs
                                                        > <!--[if lte IE 7]>
                                                        > to work in IE 7 as well...

                                                        Why is that odd? You are asking if it's less than or equal to IE7. It
                                                        should work in IE7 as well, no?

                                                        --
                                                        Murray --- ICQ 71997575
                                                        Adobe Community Expert
                                                        (If you *MUST* email me, don't LAUGH when you do so!)
                                                        ==================
                                                        http://www.dreamweavermx-templates.com - Template Triage!
                                                        http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                                                        http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                                                        http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
                                                        ==================


                                                        "Anurag" <chetan_anurag@yahoo.de> wrote in message
                                                        news:e4ghp8$p3t$1@forums.macromedia.com...
                                                        >>> If you need to include IE 7 (which I find odd), you'd still go with a
                                                        >>> "lte"
                                                        >
                                                        > Yes, Oddly enough it needs
                                                        > <!--[if lte IE 7]>
                                                        > to work in IE 7 as well...
                                                        >
                                                        >
                                                        > So, to sum it up...
                                                        >
                                                        > I've added this to the CSS:
                                                        >
                                                        > * html body div#sidenav {left:250px }
                                                        >
                                                        > and
                                                        >
                                                        > <!--[if lte IE 7]>
                                                        > <style type="text/css">
                                                        > #sidenav {left:250px;}
                                                        > </style>
                                                        > <![endif]-->
                                                        >
                                                        > It looks good in IE 7, FF and Opera...
                                                        >
                                                        > Now could someone please take a look at it with IE for Mac and tell me
                                                        > if it holds up?
                                                        >
                                                        > http://lamaisondecoco.com/csstest.html
                                                        >
                                                        > Thanks,
                                                        >
                                                        > Anurag


                                                        • 25. Re: CSS mess in IE
                                                          Level 7
                                                          Depends on what you mean by "work". In IE5x, the "one two three" links are
                                                          to the RIGHT of the "image image", and in Safari they are to the left of
                                                          that. Also, the About button is vertically out of line with the rest of the
                                                          buttons (on this page only) - others seem better behaved. Other than that,
                                                          it looks OK.

                                                          --
                                                          Murray --- ICQ 71997575
                                                          Adobe Community Expert
                                                          (If you *MUST* email me, don't LAUGH when you do so!)
                                                          ==================
                                                          http://www.dreamweavermx-templates.com - Template Triage!
                                                          http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                                                          http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                                                          http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
                                                          ==================


                                                          "Anurag" <chetan_anurag@yahoo.de> wrote in message
                                                          news:e4giui$q8u$2@forums.macromedia.com...
                                                          > http://lamaisondecoco.com/csstest.html
                                                          >
                                                          > Did anybody check the page with IE for MAC ? Does it work?
                                                          > I'm dying to hear...


                                                          • 26. Re: CSS mess in IE
                                                            Level 7
                                                            Murray *ACE* wrote:
                                                            >> Yes, Oddly enough it needs
                                                            >> <!--[if lte IE 7]>
                                                            >> to work in IE 7 as well...
                                                            >
                                                            > Why is that odd? You are asking if it's less than or equal to IE7. It
                                                            > should work in IE7 as well, no?
                                                            >
                                                            No, by odd I mean that I would have guessed - since IE7 is more standard
                                                            complient - that the page would render more like in FF. With the one,two
                                                            three links to the left of the images... (and therefor a lte IE 6 would
                                                            suffice)

                                                            Anurag
                                                            • 27. Re: CSS mess in IE
                                                              Level 7
                                                              Murray *ACE* wrote:
                                                              > Depends on what you mean by "work". In IE5x, the "one two three" links are
                                                              > to the RIGHT of the "image image", and in Safari they are to the left of
                                                              > that. Also, the About button is vertically out of line with the rest of the
                                                              > buttons (on this page only) - others seem better behaved. Other than that,
                                                              > it looks OK.

                                                              Thanks for checking....

                                                              >> Depends on what you mean by "work".
                                                              I knew that would be coming

                                                              > In IE5x, the "one two three" links are
                                                              >> to the RIGHT of the "image image", and in Safari they are to the left of
                                                              >> that. Also, the About button is vertically out of line with the rest of the
                                                              >> buttons (on this page only)

                                                              That's the reason I thought to implement the "star hack"

                                                              http://www.info.com.ph/~etan/w3pantheon/style/starhtmlbug.html:

                                                              as

                                                              * html body div#sidenav {left:250px }


                                                              Which was supposed to work in IE5x for Mac...

                                                              Any idea how to fix that?

                                                              Anurag
                                                              • 28. Re: CSS mess in IE
                                                                Level 7
                                                                > Any idea how to fix that?

                                                                None. From my perspective, the page is functional in IE5/Mac. I wouldn't
                                                                waste another minute on it.

                                                                --
                                                                Murray --- ICQ 71997575
                                                                Adobe Community Expert
                                                                (If you *MUST* email me, don't LAUGH when you do so!)
                                                                ==================
                                                                http://www.dreamweavermx-templates.com - Template Triage!
                                                                http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                                                                http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                                                                http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
                                                                ==================


                                                                "Anurag" <chetan_anurag@yahoo.de> wrote in message
                                                                news:e4hpta$dhe$1@forums.macromedia.com...
                                                                > Murray *ACE* wrote:
                                                                >> Depends on what you mean by "work". In IE5x, the "one two three" links
                                                                >> are
                                                                >> to the RIGHT of the "image image", and in Safari they are to the left of
                                                                >> that. Also, the About button is vertically out of line with the rest of
                                                                >> the
                                                                >> buttons (on this page only) - others seem better behaved. Other than
                                                                >> that,
                                                                >> it looks OK.
                                                                >
                                                                > Thanks for checking....
                                                                >
                                                                >>> Depends on what you mean by "work".
                                                                > I knew that would be coming
                                                                >
                                                                >> In IE5x, the "one two three" links are
                                                                >>> to the RIGHT of the "image image", and in Safari they are to the left of
                                                                >>> that. Also, the About button is vertically out of line with the rest of
                                                                >>> the
                                                                >>> buttons (on this page only)
                                                                >
                                                                > That's the reason I thought to implement the "star hack"
                                                                >
                                                                > http://www.info.com.ph/~etan/w3pantheon/style/starhtmlbug.html:
                                                                >
                                                                > as
                                                                >
                                                                > * html body div#sidenav {left:250px }
                                                                >
                                                                >
                                                                > Which was supposed to work in IE5x for Mac...
                                                                >
                                                                > Any idea how to fix that?
                                                                >
                                                                > Anurag


                                                                • 29. Re: CSS mess in IE
                                                                  Level 7
                                                                  On Thu, 18 May 2006 08:34:31 -0400, Anurag <chetan_anurag@yahoo.de>
                                                                  wrote:

                                                                  >>> <!--[if lte IE 7]>
                                                                  >>> to work in IE 7 as well...
                                                                  >>
                                                                  >> Why is that odd? You are asking if it's less than or equal to IE7. It
                                                                  >> should work in IE7 as well, no?
                                                                  >>
                                                                  >No, by odd I mean that I would have guessed - since IE7 is more standard
                                                                  >complient - that the page would render more like in FF. With the one,two
                                                                  >three links to the left of the images... (and therefor a lte IE 6 would
                                                                  >suffice)


                                                                  Since you're using "lte IE 7", you're applying the same conditional
                                                                  comment to IE7 that you are to IE6 and IE5. If you want IE7 to get the
                                                                  same thing you're feeding Firefox and such, you should be using"

                                                                  <!--[if lte IE 6]>

                                                                  Gary
                                                                  • 30. Re: CSS mess in IE
                                                                    Level 7

                                                                    > I wouldn't waste another minute on it.

                                                                    Tempting thought...
                                                                    • 31. Re: CSS mess in IE
                                                                      Level 7
                                                                      Anurag wrote:
                                                                      > Murray *ACE* wrote:
                                                                      >> Depends on what you mean by "work". In IE5x, the "one two three"
                                                                      >> links are to the RIGHT of the "image image", and in Safari they are
                                                                      >> to the left of that. Also, the About button is vertically out of
                                                                      >> line with the rest of the buttons (on this page only) - others seem
                                                                      >> better behaved. Other than that, it looks OK.
                                                                      >
                                                                      > Thanks for checking....
                                                                      >
                                                                      >>> Depends on what you mean by "work".
                                                                      > I knew that would be coming
                                                                      >
                                                                      >> In IE5x, the "one two three" links are
                                                                      >>> to the RIGHT of the "image image", and in Safari they are to the
                                                                      >>> left of that. Also, the About button is vertically out of line
                                                                      >>> with the rest of the buttons (on this page only)
                                                                      >
                                                                      > That's the reason I thought to implement the "star hack"
                                                                      >
                                                                      > http://www.info.com.ph/~etan/w3pantheon/style/starhtmlbug.html:
                                                                      >
                                                                      > as
                                                                      >
                                                                      > * html body div#sidenav {left:250px }
                                                                      >
                                                                      >
                                                                      > Which was supposed to work in IE5x for Mac...
                                                                      >
                                                                      > Any idea how to fix that?

                                                                      Where does that "250px" value come from?
                                                                      That's not the value that was suggested. *0* was the value to use to keep
                                                                      these links to the left.

                                                                      --
                                                                      Thierry
                                                                      Articles and Tutorials: http://www.TJKDesign.com/go/?0
                                                                      The perfect FAQ page: http://www.TJKDesign.com/go/?9
                                                                      CSS-P Templates: http://www.TJKDesign.com/go/?1
                                                                      CSS Tab Menu: http://www.TJKDesign.com/go/?3


                                                                      • 32. Re: CSS mess in IE
                                                                        Level 7
                                                                        Murray *ACE* wrote:
                                                                        > That's why it wasn't working....

                                                                        Anurag's using the correct syntax. As I understand this, the problem is that
                                                                        IE7 needs the same fix so:
                                                                        [if lte IE 6] or [if lte IE6] would have the exact same effect on IE7
                                                                        And that's why using [if gte IE 5] was reported "working".

                                                                        --
                                                                        Thierry
                                                                        Articles and Tutorials: http://www.TJKDesign.com/go/?0
                                                                        The perfect FAQ page: http://www.TJKDesign.com/go/?9
                                                                        CSS-P Templates: http://www.TJKDesign.com/go/?1
                                                                        CSS Tab Menu: http://www.TJKDesign.com/go/?3


                                                                        • 33. Re: CSS mess in IE
                                                                          Level 7
                                                                          Thierry | www.TJKDesign.com wrote:
                                                                          > Murray *ACE* wrote:
                                                                          >> That's why it wasn't working....
                                                                          >
                                                                          > Anurag's using the correct syntax. As I understand this, the problem is that
                                                                          > IE7 needs the same fix so:
                                                                          > [if lte IE 6] or [if lte IE6] would have the exact same effect on IE7
                                                                          > And that's why using [if gte IE 5] was reported "working".
                                                                          >
                                                                          Yes, need same fix...
                                                                          • 34. Re: CSS mess in IE
                                                                            Level 7
                                                                            This is starting to get to me...
                                                                            >> Where does that "250px" value come from?
                                                                            >> That's not the value that was suggested. *0* was the value to use to keep
                                                                            >> these links to the left.
                                                                            >>

                                                                            I figured the 250px is the same value than in the CC...
                                                                            I'll try the 0 if someone could chech

                                                                            But what I just realized is that apparently when I resize the browser
                                                                            window in IE 7, the #main-wrapper doesn't stay to the right of the
                                                                            links, but foes right through...

                                                                            Uaaaahhhh...

                                                                            • 35. Re: CSS mess in IE
                                                                              Level 7
                                                                              so it should be

                                                                              * html body div#sidenav {left:0}

                                                                              ??
                                                                              • 36. Re: CSS mess in IE
                                                                                Level 7
                                                                                Ok! New approach...

                                                                                how is this holding up?

                                                                                http://lamaisondecoco.com/test.html

                                                                                (Thierry, you probably remember seeing this...)

                                                                                It works as intended in IE, FF, Opera ... (well it means I can resize
                                                                                the browser window w/o the layout falling, it apart...)... it validates...


                                                                                How about IE5x for MAC ?

                                                                                Anurag

                                                                                PS: And all I wanted was to clean up the CSS... HA!


                                                                                • 37. Re: CSS mess in IE
                                                                                  Level 7
                                                                                  Anurag wrote:
                                                                                  > Ok! New approach...
                                                                                  >
                                                                                  > how is this holding up?
                                                                                  >
                                                                                  > http://lamaisondecoco.com/test.html
                                                                                  >
                                                                                  > (Thierry, you probably remember seeing this...)

                                                                                  Thanks for the credit in the stylesheet, but I think you changed too many
                                                                                  things in there
                                                                                  You've removed the float property from the sidebar and you're using
                                                                                  "position:absolute" on the elements it contains...

                                                                                  > It works as intended in IE, FF, Opera ... (well it means I can resize
                                                                                  > the browser window w/o the layout falling, it apart...)... it
                                                                                  > validates...

                                                                                  > How about IE5x for MAC ?

                                                                                  The sidebar is way off to the right.

                                                                                  > PS: And all I wanted was to clean up the CSS... HA!

                                                                                  I think you need to keep cleaning a little, there is no such thing as
                                                                                  negative padding
                                                                                  #sidenavcontainer {padding-right:-200px;...}

                                                                                  --
                                                                                  Thierry
                                                                                  Articles and Tutorials: http://www.TJKDesign.com/go/?0
                                                                                  The perfect FAQ page: http://www.TJKDesign.com/go/?9
                                                                                  CSS-P Templates: http://www.TJKDesign.com/go/?1
                                                                                  CSS Tab Menu: http://www.TJKDesign.com/go/?3


                                                                                  • 38. Re: CSS mess in IE
                                                                                    Level 7
                                                                                    >> Thanks for the credit in the stylesheet, but I think you changed too many
                                                                                    >> things in there

                                                                                    Yes... not much left

                                                                                    > I think you need to keep cleaning a little, there is no such thing as
                                                                                    >> negative padding
                                                                                    >> #sidenavcontainer {padding-right:-200px;...}

                                                                                    I already took that out...

                                                                                    >> The sidebar is way off to the right.

                                                                                    Any idea?






                                                                                    Thierry | www.TJKDesign.com wrote:
                                                                                    > Anurag wrote:
                                                                                    >> Ok! New approach...
                                                                                    >>
                                                                                    >> how is this holding up?
                                                                                    >>
                                                                                    >> http://lamaisondecoco.com/test.html
                                                                                    >>
                                                                                    >> (Thierry, you probably remember seeing this...)
                                                                                    >
                                                                                    > Thanks for the credit in the stylesheet, but I think you changed too many
                                                                                    > things in there
                                                                                    > You've removed the float property from the sidebar and you're using
                                                                                    > "position:absolute" on the elements it contains...
                                                                                    >
                                                                                    >> It works as intended in IE, FF, Opera ... (well it means I can resize
                                                                                    >> the browser window w/o the layout falling, it apart...)... it
                                                                                    >> validates...
                                                                                    >
                                                                                    >> How about IE5x for MAC ?
                                                                                    >
                                                                                    > The sidebar is way off to the right.
                                                                                    >
                                                                                    >> PS: And all I wanted was to clean up the CSS... HA!
                                                                                    >
                                                                                    > I think you need to keep cleaning a little, there is no such thing as
                                                                                    > negative padding
                                                                                    > #sidenavcontainer {padding-right:-200px;...}
                                                                                    >
                                                                                    • 39. Re: CSS mess in IE
                                                                                      Level 7
                                                                                      Anurag wrote:
                                                                                      >>> The sidebar is way off to the right.
                                                                                      >
                                                                                      > Any idea?

                                                                                      You can either:
                                                                                      - use the original layout (it is known to work in many browsers)
                                                                                      - use a stylesheet for IE5 Mac only

                                                                                      If IE5 Mac is the only browser to give you a headache use a CSS hack to feed
                                                                                      it with the necessary rules:
                                                                                      <style type="text/css">
                                                                                      /*\*//*/
                                                                                      @import "special_stylesheet_for_ie_5_mac.css";
                                                                                      /**/
                                                                                      </style>

                                                                                      --
                                                                                      Thierry
                                                                                      Articles and Tutorials: http://www.TJKDesign.com/go/?0
                                                                                      The perfect FAQ page: http://www.TJKDesign.com/go/?9
                                                                                      CSS-P Templates: http://www.TJKDesign.com/go/?1
                                                                                      CSS Tab Menu: http://www.TJKDesign.com/go/?3


                                                                                      1 2 Previous Next