We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
MODX Community Forums Archive

[solved] Quick CSS issue

    • 29703
    • 217 Posts
    thehen Reply #1, 18 years, 6 months ago
    Hi all,

    I’m trying to finish off my web design blog at the mo and am having a few cross-browser issues.

    Website: www.henryhoffman.com

    Firstly, I know it doesn’t validate. It will, but I don’t have time to track down all the wrong formatting. It shouldn’t interrupt the issues I have.

    Problem 1.)

    My site container has a fixed width with auto margins to center it. I needed a footer that expanded beyond this boundary and created a footer below with width 100% so that it expanded to fit the users screen.

    This works on Firefox but on no other browser. Every other browser seems to cut it off based on the width on the container above it. It’s almost like the <body> is contracting as opposed to the margins expanding?

    Problem 2.)

    This is truly bizarre and I can’t begin to see what the problem is.

    Basically Opera seems to be adding another set of unstyled and unbranded Adsense ads at the footer of the page underneath the page content. Opera also seems to be displaying some Jot admin stuff, but I haven’t had a chance to look at it yet.


    Any help would be truly appreciated. I’d like to point out that content is far from finished and things like the footer nav and tag landing pages etc will be sorted out in due course.

    Thanks!
      My Web Design Blog

      Free Web Templates

      Indie Games
      • 24495
      • 407 Posts
      rasc Reply #2, 18 years, 6 months ago
      Nice design, but

      Problem 1: fix the validation problems! Especially you have 2 misspelled tags
      </ul    <--- closing angle bracket missing
</div>

      Maybe this can be the problem for IEs because of an "open" container before the footer.
        • 29703
        • 217 Posts
        thehen Reply #3, 18 years, 6 months ago
        Quote from: rasc at Apr 03, 2008, 02:37 PM

        Nice design, but

        Problem 1: fix the validation problems! Especially you have 2 misspelled tags
        </ul    <--- closing angle bracket missing
</div>

        Maybe this can be the problem for IEs because of an "open" container before the footer.

        Ah, okay. That was me being thick. I thought all the validation errors were to do with comment tags inside comment tags. Though it seems the bizarre adsense issue is regarding just that.

        I figured putting conditional comments to target IE users would be better than javascript, though I am clearly wrong as comments inside comments don’t validate (and seriously confuse Opera).

        Could someone have a quick peek at my javascript and help me out so that I can detect the browser and change the style to ’display:block’ (as opposed to ’none’) if the browser is IE? Or any easy resources that could help me out.

        Thanks for the heads up Rasc.
          My Web Design Blog

          Free Web Templates

          Indie Games
          • 24495
          • 407 Posts
          rasc Reply #4, 18 years, 6 months ago
          To avoid comments within comment you should outsource the script. The values for google_ad are fix? Then outsource this script as
          <script type="text/javascript" src="assets/js/google_ad.js">


          And the best way to change styles in IE only is putting conditional comments.
            • 29703
            • 217 Posts
            thehen Reply #5, 18 years, 6 months ago
            Quote from: rasc at Apr 04, 2008, 02:33 AM

            To avoid comments within comment you should outsource the script. The values for google_ad are fix? Then outsource this script as
            <script type="text/javascript" src="assets/js/google_ad.js">


            I would do this but I need to monitor channels, which becomes disabled when you use external javascript. Google needs the page content so that it can scan it to obtain all of the necessary information. That and it’s also against the Adsense TOC and I would get banned from Adsense for doing it (unless I contacted them and requested special permission).

            Quote from: rasc at Apr 04, 2008, 02:33 AM

            And the best way to change styles in IE only is putting conditional comments.

            Okay I see. However I currently have to have the DIV’s display:none on IE and Firefox hence conditional comments are irrelevent. The default display is none, but the javascript detects whether a cookie exists and I need the javascript to override the default styles if the cookie isn’t present. i.e. Internet Explorer would display the popup whether or not the cookie existed. It may disappear after the script runs, but there’s still an annoying popup that appears then vanishes.

            My code is as follows:

            if (getCookie("here") != "yes") 
{
  document.getElementById('iebox').style.display = "block";
  document.getElementById('firefox').style.display = "block";
  document.getElementsByTagName("html")[0].style.overflow = "hidden";
  setCookie('here','yes',10);
}


            Is it possible to alter this so that it detects the browser then if it doesn’t find the cookie it changes the styles appropriately?

            Thanks
              My Web Design Blog

              Free Web Templates

              Indie Games
              • 29703
              • 217 Posts
              thehen Reply #6, 18 years, 6 months ago
              Oops, my javascript does exactly what it’s supposed to do seemingly.

              Thanks anyway for all the help.
                My Web Design Blog

                Free Web Templates

                Indie Games