HTML Troubleshooting

Discussion in 'HTML & Website Design' started by HMB Shiraz, Jul 11, 2015.

  1. #1
    I've been trying to wrap my brain around this HTML issue, but I haven't had any luck.

    Can someone tell me why the background goes white around halfway down the page? We don't have this problem on any of our other website pages:

    http://hostmybytes.com/shared-hosting-uk/

    Thank you so much!
     
    HMB Shiraz, Jul 11, 2015 IP
  2. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #2
    Put overflow: hidden; on the .wrapper-class. Fixed.
     
    PoPSiCLe, Jul 11, 2015 IP
  3. HMB Shiraz

    HMB Shiraz Member

    Messages:
    52
    Likes Received:
    8
    Best Answers:
    1
    Trophy Points:
    25
    #3
    That didn't work for me. It just cuts off the overflow text when it is set like that.
     
    HMB Shiraz, Jul 11, 2015 IP
  4. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #4
    Yeah, only tested on Firefox, not Chrome - okay, second attempt: find the .wp_shoting_height-class, and remove the height: 1200px; from it. Works in both Firefox and Chrome, haven't bothered testing other browsers
     
    PoPSiCLe, Jul 11, 2015 IP
  5. hdewantara

    hdewantara Well-Known Member

    Messages:
    538
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #5
    The not-so-easy fix is perhaps to bring your page first to http://validator.w3.org,
    and try to follow their suggestion as much as you can...;)
     
    hdewantara, Jul 11, 2015 IP
  6. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,280
    Likes Received:
    1,696
    Best Answers:
    31
    Trophy Points:
    475
    #6
    Right above .wrapper you have the body tag. Place background-color there instead and it should fix it.

    body{
        margin:0;
        padding:0;
        background-color:#1b1b1b;
    }
    .wrapper {
    
        width: 100%;
    
    }
    Code (markup):
     
    qwikad.com, Jul 11, 2015 IP
    HMB Shiraz likes this.
  7. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #7
    I'd say part of the problem is it looks like you're not opening or closing everything properly. The validator are bitching about <div> being unclosed by the time it gets to </body>, but at the same time a visual inspection suggests it's being closed too much...

    Really though the markup is complete rubbish typical of when the train wreck of asshattery known as bootcrap gets involved -- from the gibberish use of numbered headings with a lack of logical document structure or proper semantics (literally looks like headings were chosen just because you wanted bigger text), mated to the endless pointless div, endless halfwit bootcrap classes, lack of media targets, static style in the markup, px metric font measurements - It's just another laundry list of how NOT to build a website and reeks of whoever made it not knowing enough about HTML or CSS to be building a website in the first place.

    Hence the 24k of markup to deliver 3k of plaintext and nothing I'd even consider a content image despite a lack of proper meta -- easily three to four times as much HTML as should be present. You figure in that it's 31 files totaling an over-the-top unnecessary 1.6 megabytes for a page that by my reckoning has no reason to be more than 8 files at MAYBE 256k...

    The real laugh being it uses bootcrap and it's STILL not responsive, the entire reason people even try to use that rubbish in the first place. I still cannot fathom how anyone can see a legitimate advantage to using that mouth-breathing dumbass moronic "solution" to build a site given how it pisses on everything!

    I'd toss that entire disaster in the trash and start over with semantic markup, kicking framework idiocy like bootcrap to the curb, practicing ACTUAL separation of presentation from content, and attempting to pay attention to things like accessibility minimums. Nuke the site from orbit, it's the only way to be sure!

    That said it's VERY much what I've come to expect from web host company websites -- no, that's not a good thing. Lovely how even people providing space to host sites can't be bothered to do even the simplest of things properly. It's also very much a poster child for everything wrong with web development today.

    Hell, even the comments are some of the dumbest trash I've EVER seen...

    	<!---- title--->
        <title>UK Shared cPanel Hosting by HostMyBytes</title>
        <!---- title End--->
    
    Code (markup):
    REALLY? REALLY?!? Herpafreakingderp!

    Also it's just <!-- not <!----

    Some browsers may ignore the latter as it's invalid. When the code is so poorly written even the COMMENTS won't validate, that's time to toss it and start over.
     
    deathshadow, Jul 11, 2015 IP
    HMB Shiraz likes this.
  8. maddlytech

    maddlytech Member

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    31
    #9
    its a simple solution..
    in your css file change
    .wp_shoting_height {height: 1200px;}
    to
    .wp_shoting_height {height: auto;}
    reply if it worked!
     
    maddlytech, Jul 12, 2015 IP
  9. HMB Shiraz

    HMB Shiraz Member

    Messages:
    52
    Likes Received:
    8
    Best Answers:
    1
    Trophy Points:
    25
    #9
    Thanks for the full write-up. I had no part in the PSD to HTML part of the design; I just designed the website. At this point in the game, it is a bit late to do a full re-write of the code, but I will see what we can do. I do believe the best change at this point in time would be a fundamental re-write, but the viability of it is something that I am unsure of.
     
    HMB Shiraz, Jul 12, 2015 IP
  10. maddlytech

    maddlytech Member

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    31
    #10
    hey!! did my suggestion work for you??
     
    maddlytech, Jul 12, 2015 IP
  11. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #11
    GROAN... dicking around drawing pictures in photoshop is NOT design -- and that explains a LOT about it being broken and inaccessible too.

    NEVER seen a site that started out as a PSD that was worth a flying purple fish. They are universally inaccessible rubbish filled with design concepts that have no blasted place on a website in the first place!

    Seriously I meet up with whoever started that sleazy, broken, rubbish practice in a dark alleyway...
     
    deathshadow, Jul 12, 2015 IP
  12. Shiren Massy

    Shiren Massy Greenhorn

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #12
    I Think you should
    overflow: auto;

    on that class may work..
     
    Shiren Massy, Jul 13, 2015 IP