Web Analytics Made Easy - StatCounter My Web page does not show on IE proper? - CodingForum

Announcement

Collapse
No announcement yet.

My Web page does not show on IE proper?

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    My Web page does not show on IE proper?

    Hello and please help ...lol My website is missing the whole design and structure when I veiw my website on IE older or newer version don't know why?? But when I check with Firefox or Safari or Google Chrome its fine...its just the IE is giving me problem my footer logo and design is mass up completly ?? here is my website. www.mxstudio.ca

    Thanks

    Mursallo..
    Tags: None
  • #2
    You have quite a few validation errors, which can cause some issues. But, mainly I think you're using HTML5 elements which doesn't yet play well with IE yet without a bit of script. Your not using HTML5 doctype, so not sure why you used HTML5 specific elements.
    Teed

    Comment

    • #3
      Okay Thanks for your quick reply Teedoff okay so should I check with W3CValidator and find my errors right and for the HTML5 doctype what should i do...i didn't get this properly understand ??? can you help me little bit more with this plzzz if u dont mind ...thanks

      Mursallo

      Comment

      • #4
        Well you can change you doctype to HTML5 which is simply:

        Code:
        <!DOCTYPE HTML>
        but again, HTML5 is still experimental and not fully supported, so the HTML5 tags you use may not work as is in IE browsers. There is a "hack" of some sorts specifically for IE if you google HTML5 IE hack or something similar.

        I think it would be easier to remove your HTML5 elements and switch them to standard divs and just use a standard fully supported doctype instead.
        Teed

        Comment

        • #5
          all I see is the missing background image and an incorrect dropshadow use for IE. I pulled the raw CSS file and found this:


          #footerwrap {
          background: url(images/footerbg.jpg) repeat-x scroll 0 0 transparent;
          height: 275px;
          }


          Put quotes around the url in the footerwrap class and see if that works.
          #footerwrap {
          background: url("images/footerbg.jpg") repeat-x scroll 0 0 transparent;
          height: 275px;
          }

          To fix the shadow on the logo: IE does not recognize text-shadow. You have to use filter with dropshadow parameter
          In the class:
          #pagefooter h2

          add this line after the text-shadow:
          filter: dropshadow(color=#1E3727, offx=1, offy=1);

          note-- IE doesn't support the shadow blur part so it won't be perfectly identical.

          Comment

          • #6
            Hello teedoff and LRM okay I fallow both of you I Change IE hack which you told me to get it from google and also I change footerwrap quote and text-shadow to filter:dropshadow take a look at my footer now the text CHANGE to different direction and and I'm still losing the logo on it and still the same issue .....


            wwww.mxstudio.ca

            Comment

            • #7
              You're almost there!
              From what I see, you misunderstood what I said above and didn't put filter: in front of dropshadow, and you seem to have replaced the text-shadow line... put that line back in, the other browsers need it. Filter is just for IE.

              To make it easy, replace that whole #pagefooter block with this one:

              #pagefooter h2 {
              display:block;
              font:bold 2.0em 'TeXGyreAdventor', Arial, sans-serif;
              margin-bottom:10px;
              color:#cfc;
              text-shadow: 1px 1px 2px #1e3727;
              filter: dropshadow(#1e3727 offx=1, offx=1);
              }

              Finally, remove the height: 240px; from the #pagefooter class. You don't really need it unless you know the footer container needs to be larger than the contents will push it.
              Last edited by LRM; Sep 1, 2011, 06:40 PM. Reason: fixed a typo

              Comment

              • #8
                LRM i did excatly what you said now still the footer IMAGE is not showing on IE don't know why ??

                Comment

                • #9
                  You need a space between the url() and repeat-x in your footerwrap id:
                  change this line
                  background:url("images/footerbg.jpg")repeat-x;
                  to look like this
                  background:url("images/footerbg.jpg") repeat-x;
                  That will get you the gradient color background.

                  The Shadow effect you won't get to show in IE6 or 8 or 9's compatibility mode.

                  Comment

                  • #10
                    LRM your the best seriously thank you so much for your help and your time.....In future just to clairfy with uu as u said the shadow effect won't show for IE6 or 8, 9...I have to change something else or should i leave as it is.... thanks again...


                    Mursallo

                    Comment

                    • #11
                      No problem. Glad to help.

                      The shadow shows in IE9 (possibly 8, not sure though - and I doubt it will in 7), but only if compatibility mode is not turned on in those browsers, but I think IE's rendition of it looks really bad.

                      If you really want to use it, there is a trick I did a long while back I can email you using absolute positioning of a second text over another offset slightly, and an opacity set on the lower one. In the long run, you're probably better off just turning it into a graphic. That eliminates all the problems.

                      Comment

                      • #12
                        sure no problem precaite your help thank you so much here is my email address.. [email protected]. thanks

                        Mursallo .

                        Comment

                        Previous template Next
                        Working...
                        X
                        😀
                        🥰
                        🤢
                        😎
                        😡
                        👍
                        👎