Need help fixing a possible background problem in a windowed browser

Discussion in 'HTML & Website Design' started by BC23, Jan 17, 2010.

  1. #1
    Hello!

    I was wondering if anyone could help me fix a problem I am having with my website.

    [​IMG]

    As you can see if you are in a windowed browser and move left, something goes wrong.

    Where is my best place to start looking to fix?

    Thanks!
     
    BC23, Jan 17, 2010 IP
  2. BC23

    BC23 Peon

    Messages:
    11
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Please, any ideas?
     
    BC23, Jan 18, 2010 IP
  3. duben

    duben Active Member

    Messages:
    50
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    61
    #3
    Describe better whats wrong, from this screencam I cannot get it,what about URL to see it in browser?
     
    duben, Jan 18, 2010 IP
  4. BC23

    BC23 Peon

    Messages:
    11
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    When the browser is not maximized, and your in a smaller window, and then you move left, the background just kinda ends and you can see the menu keep going.

    Studyorfail.com is my site that it is happening at.
     
    BC23, Jan 18, 2010 IP
  5. BC23

    BC23 Peon

    Messages:
    11
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I ment when you move right.
     
    BC23, Jan 18, 2010 IP
  6. BC23

    BC23 Peon

    Messages:
    11
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Please. Anything would help me at this point.
     
    BC23, Jan 18, 2010 IP
  7. johagulo

    johagulo Peon

    Messages:
    879
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Now that is a problem!
     
    johagulo, Jan 19, 2010 IP
  8. duben

    duben Active Member

    Messages:
    50
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    61
    #8
    I think, you have problem with width = 100% in CSS for header and mid ... this is calculated from browser resolution. So correct, but then content will overflow, to more than 100 percent but rest separate parts are on 100 percent of browser window only.

    My advice is, create one higher level DIV contains Header, Mid and Content inside. Then 100 percent for header and mid will be calculated from parent DIV and not from browser resulotion. Overflow of content will affect parent div and this will bubble to header and mid too.
     
    duben, Jan 19, 2010 IP
  9. BC23

    BC23 Peon

    Messages:
    11
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    I'm new. Is that spam or something?
     
    BC23, Jan 19, 2010 IP
  10. BC23

    BC23 Peon

    Messages:
    11
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Thanks for the response! Unfortunately it did not work.

    Again, thanks.
     
    BC23, Jan 19, 2010 IP
  11. BC23

    BC23 Peon

    Messages:
    11
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Anyone else?
     
    BC23, Jan 19, 2010 IP
  12. hartwm

    hartwm Member

    Messages:
    141
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    30
    #12
    its the width 100% thats wrong...it tells the browser to size it to the window size therefore its smaller with a smaller window...you need to define the size in #menu, #mid, #header or you could create a new div commonly called #wrapper to wrap the main content of the page add a definite size to it ie 1264px....

    or you could also do a min-width:1264px;
     
    Last edited: Jan 19, 2010
    hartwm, Jan 19, 2010 IP
  13. BC23

    BC23 Peon

    Messages:
    11
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #13
    Ok wow, this worked out pretty perfectly. The only small issue I have now is there is a left to right scroll bar even on maximized browser windows, but it is much better than my last issue.

    Any ideas on that?

    Thank you so much!
     
    BC23, Jan 19, 2010 IP
  14. BC23

    BC23 Peon

    Messages:
    11
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #14
    Thank you for this response, I did not see it before, or was not able to for some reason.
     
    BC23, Jan 19, 2010 IP
  15. hartwm

    hartwm Member

    Messages:
    141
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    30
    #15
    its b/c your size is a lil too wide ... make it 1256px or smaller
     
    hartwm, Jan 19, 2010 IP
  16. m7md_cis

    m7md_cis Peon

    Messages:
    91
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #16
    Change the width, for example if you need to display your design on resolution (1024), you should make the width (1004), that's mean decrease (20px).
     
    m7md_cis, Jan 19, 2010 IP
  17. pmek

    pmek Guest

    Messages:
    101
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #17
    Hi BC23,

    you should really design to a maximum width of 960px; this fits into the most common browser sizes and above.

    Your site is fairly large at the moment, a lot of users will have to use the horizontal scroll, which will probably make them want to leave! It'd be easy enough to resize your site slightly - I'd definitely consider doing so!
     
    pmek, Jan 20, 2010 IP
  18. BC23

    BC23 Peon

    Messages:
    11
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #18
    Ok, thank you for your input. How should I go about doing this? If you want to see my CSS code, I will upload it.
     
    BC23, Jan 20, 2010 IP