Header and footer not extending to ends of broswer window

  • Resolved Akram Taghavi-Burris

    (@taghaviburris)


    14 years, 8 months ago

    Hello All,
    I’ve been working on this problem all night and I can not figure out what I’m doing wrong.

    I have a header image and a footer image and they are supposed to extend to the width of the browser (or so I thought since I have a repeat-x attribute set to the background property.

    When the browser is maximized it looks great, but when you re-size the browser or in some cases a browser at a lower resolution, will cause you to scroll horizontally and you discover that the footer and header images are cutting off at a certain point. WHY IS IT DOING THIS and why is it cause some browsers to scroll.

    Here is an image of what it is doing: https://www.akramsideas.com/wp-content/themes/akramsideas_V7/error.png
    (note that the main body image is repeating fine)

    Here is the link to the css: https://www.akramsideas.com/wp-content/themes/akramsideas_V7/style.css

    Please let me know what’s wrong.
    PS I know there are other weird errors if you view in IE, but right now I just want to fix these background image errors as they appear in firefox and safari.

    Thank you

Viewing 1 replies (of 1 total)
  • Thread Starter Akram Taghavi-Burris

    (@taghaviburris)

    I have had no replies. However I did find a work around. If you set the main container div to a percentage rather than a pixel size, the backgrounds do go all the way to the end. However the minute you put a pixel size with any div, it freaks out again.

    Another note, that while this works, it can have a weird look on your site. For example my container is set to 75% of the screen, which on my monitor makes the content and sidebar relatively far apart, however on other monitors they will appear closer together.

Viewing 1 replies (of 1 total)
  • The topic ‘Header and footer not extending to ends of broswer window’ is closed to new replies.