Web Analytics Made Easy -
StatCounter 100% Width Div Issue... - CodingForum

Announcement

Collapse
No announcement yet.

100% Width Div Issue...

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • 100% Width Div Issue...

    Okay-- I suspect this is some simple something... but for the life of me I cannot figure out why my #topwide div will not extend 100% of the browser width on some browsers. It works in IE6 and modern browsers, but IE7, IE8, older firefoxes... not extending. If I take position:relative off of it, it throws the floating div above it.

    You can see the site at: www.concordjc.org/mops

    Here is the CSS:

    [CODE]
    @charset "utf-8";
    /* CSS Document */

    html, body {
    margin: 0;
    padding: 0;
    }

    body {
    background-image:url(images/whitebg.png);
    background-color: #fff;
    margin: 0 auto;
    padding: 0;
    font-family:"Lucida Sans", "Lucida Grande", sans-serif;
    color: #555;

    }

    #topwide {
    margin: 0;
    padding: 0;
    width: 100%;
    background-image:url(images/yellowbg.png);
    background-repeat:repeat-x;
    height: 398px;
    z-index: 50;
    position: relative;


    }

    #header {
    background-image:url(images/prettyyellow.png);
    background-repeat:no-repeat;
    width: 1100px;
    height: 400px;
    margin: 0 auto;
    z-index: 999;
    position: relative;
    margin: 0 auto;

    }

    #maincontent {
    margin: 0 auto;
    width: 1000px;
    padding: 0;
    text-align: left;
    }

    #leftside {
    width: 650px;
    float: left;
    padding-right: 20px;
    }

    #rightside {
    width: 300px;
    float: left;
    padding-left: 10px;
    }

    #gridpost {
    width: 200px;
    height: 200px;
    border: solid #eee2a1 6px;
    padding: 5px;
    margin: 8px;
    float: left;
    }

    #footer {
    background-image:url(images/yellowfooter.png);
    background-repeat: repeat-x;
    width: 100%;
    height: 50px;
    padding-top: 17px;
    margin-top: 20px;
    margin-bottom: 0px;
    padding-bottom: 0px;
    text-align: center;
    }


    img.JCMOPS {border: 0;
    float: right;
    margin-right: 80px;
    position: relative;
    z-index: 800;
    }

    #whatis {width: 700px;
    position: absolute;
    left: 260px;
    top: 120px;
    z-index: 700;
    }

    p.whatis {
    font-family:"Lucida Sans", "Lucida Grande", sans-serif;
    color: #555;
    font-size: 14px;
    line-height: 16px;
    padding-left: 20px;
    padding-bottom: 0px;
    margin-bottom: 5px;
    padding-top: 5px;


    }

    a.learnmore {font-family:"Lucida Sans", "Lucida Grande", sans-serif;
    color: #3e737b;
    font-size: 16px;
    text-transform: uppercase;
    text-decoration: none;
    float: right;
    margin-top: -5px;
    padding: 0;
    }

    a:hover.learnmore {font-family:"Lucida Sans", "Lucida Grande", sans-serif;
    color: #3e737b;
    font-size: 16px;
    text-transform: uppercase;
    text-decoration: none;
    float: right;
    margin-top: -5px;
    padding: 0;
    }

    ul {margin-top: 0px;
    padding-top: 0px;
    }

    li {margin-top: 0px;
    padding-top: 0px;
    }
    /* Nav */

    ul.menu#menu-header-menu{
    float: left;
    margin-top: 18px;
    margin-left: 40px;
    padding: 0;
    }
    li.menu-item{
    display: inline;
    float: left;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 0px;
    margin-top: 10px;

    }

    .menu-item a {
    font-family:"Lucida Sans", "Lucida Grande", sans-serif;
    color: #b42e44;
    font-size: 20px;
    text-transform: uppercase;
    text-decoration: none;
    font-variant: normal;
    font-weight: bold;
    }

    .menu-item a:visited {
    font-family:"Lucida Sans", "Lucida Grande", sans-serif;
    color: #b42e44;
    font-size: 20px;
    text-transform: uppercase;
    text-decoration: none;
    font-variant: normal;
    font-weight: bold;
    }

    .menu-item a:active {
    font-family:"Lucida Sans", "Lucida Grande", sans-serif;
    color: #b42e44;
    font-size: 20px;
    text-transform: uppercase;
    text-decoration: none;
    font-variant: normal;
    font-weight: bold;
    }
    .menu-item a:hover {
    font-family:"Lucida Sans", "Lucida Grande", sans-serif;
    color: #e5c969;
    font-size: 20px;
    text-transform: uppercase;
    text-decoration: none;
    font-variant: normal;


    }

    .menu-item.current-menu-item a {
    font-family:"Lucida Sans", "Lucida Grande", sans-serif;
    color: #e5c969;
    font-size: 20px;
    text-transform: uppercase;
    text-decoration: none;
    font-variant: normal;
    font-weight: bold;
    }

    h1 {
    font-family:"Lucida Sans", "Lucida Grande", sans-serif;
    color: #b42e44;
    font-size: 22px;
    font-weight: normal;
    margin-bottom: 0px;

    }

    h1.frontpage {
    padding-left: 10px;
    }

    h2 {
    font-family:"Lucida Sans", "Lucida Grande", sans-serif;
    color: #b42e44;
    font-size: 18px;
    font-weight: normal;
    padding-bottom: 5px;
    margin: 0px;

    }

    h3 {
    font-family:"Lucida Sans", "Lucida Grande", sans-serif;
    color: #555;
    font-size: 18px;
    font-weight: normal;
    padding-bottom: 0px;

    }

    h4 {
    font-family:"Lucida Sans", "Lucida Grande", sans-serif;
    color: #555;
    font-size: 14px;
    font-weight: normal;
    padding-bottom: 5px;
    padding-top: 10px;

    }

    p {font-family:"Lucida Sans", "Lucida Grande", sans-serif;
    color: #555;
    font-size: 12px;
    line-height: 16px;
    margin-top: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-bottom: 10px;
    }

    p.sidebar {font-family:"Lucida Sans", "Lucida Grande", sans-serif;
    color: #555;
    font-size: 12px;
    line-height: 16px;
    margin-top: 10px;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-bottom: 20px;
    }

    a {font-family:"Lucida Sans", "Lucida Grande", sans-serif;
    color: #3e737b;
    font-size: 16px;
    text-transform: uppercase;
    text-decoration: none;
    }

    a:hover {
    font-family:"Lucida Sans", "Lucida Grande", sans-serif;
    color: #e5c969;
    font-size: 16px;
    text-transform: uppercase;
    text-decoration: none;
    }

    a:active { font-family:"Lucida Sans", "Lucida Grande", sans-serif;
    color: #e5c969;
    font-size: 16px;
    text-transform: uppercase;
    text-decoration: none;
    }

    a:visited {font-family:"Lucida Sans", "Lucida Grande", sans-serif;
    color: #3e737b;
    font-size: 16px;
    text-transform: uppercase;
    text-decoration: none;
    }

    #searchsubmit, #submit, .button{
    background: #fff;
    margin-top: 3px;
    padding: 4px;
    font-family: "Lucida Sans", "Lucida Grande", sans-serif;
    color: #555;
    font-size: 13px;
    border: #e5c969 solid 1px;
    text-align: center;


    }

    small {
    font-size: 10px;
    }

    #searchform label {
    position:absolute;
    top:-1500px;
    left:-1500px;
    }
    [CODE]

  • #2
    No need to post code if you provide alink to your site.

    I'm not seeing your issue at all in IE8, which is one version you said was giving you trouble?
    Teed

    Comment


    • #3
      Browserlab is showing the problem in Firefox 4.0, 5.0 and IE 7,8, and 9....

      On the top where the header is, I don't want white on the sides-- just the yellow background.

      Comment


      • #4
        Originally posted by iamjordanne View Post
        Browserlab is showing the problem in Firefox 4.0, 5.0 and IE 7,8, and 9....

        On the top where the header is, I don't want white on the sides-- just the yellow background.
        i just checked chrome, FF, IE7,8,&9 and no problem... clear your cache and check again. If it IS there still... can you screen shot is and circle it in red or something to clarify?

        I code C hash-tag .Net
        Reference: W3C W3CWiki .Net Lib
        Validate: html CSS
        Debug: Chrome FireFox IE

        Comment


        • #5
          I did that and still same thing... but I'm pretty excited you are telling me differently.

          Comment


          • #6
            I even zoomed out to 10% for chrome IE7, IE8, IE9... SS is from IE9
            Attached Files

            I code C hash-tag .Net
            Reference: W3C W3CWiki .Net Lib
            Validate: html CSS
            Debug: Chrome FireFox IE

            Comment


            • #7
              Well, awesome then. I guess I will let it go unless someone specifically tells me it is screwed up on their browser. Thank for you being so prompt!

              Comment


              • #8
                no prob did you clear your cache? maybe your seeing a cached page

                I code C hash-tag .Net
                Reference: W3C W3CWiki .Net Lib
                Validate: html CSS
                Debug: Chrome FireFox IE

                Comment


                • #9
                  Yep I did... it's strange... and I don't even think that browserlab works off of my cache...maybe they need to clear things?

                  Comment

                  Working...
                  X