Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Jun 2012
    Location
    UK
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question A few silly defects

    Hello all,

    I've finished a site that's due to be uploaded at the end of August, but I have to fix 4 defects that have been found and create a mobile version before this can happen.

    I'll leave the mobile thing for another time but I really need some help fixing the following and if anybody can help in any way I would really appreciate it.

    http://www.zappdance.co.uk/test/ is the concerned site.

    1: Let's start with the most important and most frustrating. IE=<8. Version 8 and below of IE just does not render anything correctly. The site works perfectly in Chrome, Firefox and various other browsers other than IE8 or below. As the code for the website is quite large I will not post it here, but if you could take a look at it and see if you can provide any pointers for me (if you do view the source I apologise in advance as I have not performed any tidying yet - especially CSS). The way it looks in IE8 is that the menu appears to the right scattered around the page, no background images, and a real mess. (slip your IE in to compatibility mode for a preview!). I think I could create another version of the site if there is no way around it but I'd really rather not have to!

    2: Menu background. The striped menu background to the left of the page does not extend with the page and stops rather abruptly whenever content exceeds this initial height. Try opening a few of the tabs on the page to see what I mean. I cannot seem to work this one out, again some pointers would be great.

    3: I think this one will be really simple and I'm just being stupid! The Contact tab has an email address listed under Contact Details and I cannot seem to get this on the same line as "Email:".

    4: IE only. On the News tab there are three images with accompanying mini-articles to the right. For some reason on IE the last image has a larger gap between the image and text than the others. Odd but baffling!


    If you happen to find any more defects, do let me know! I really appreciate any help you can provide with any of the above, you'll help save my sanity!

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,471
    Thanks
    0
    Thanked 634 Times in 624 Posts
    If it is a new site why are you using a transitional doctype - that doctype is for pages originally written in HTML 3.2 that are still in the process of transitioning to HTML 4.

    Also your page contains 58 errors in the HTML - http://validator.w3.org/check?uri=ht...Inline&group=0

    Internet Explorer is less forgiving of errors than other browsers so fixing those errors might fix your problems - at least it will drastically reduce the possible causes.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,668
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello aclees86,
    Floating an element and positioning it are two very different things. Instead of relative, I think absolute positioning for your 4 tabs.

    http://www.barelyfitz.com/screencast...s/positioning/
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New Coder
    Join Date
    Jun 2012
    Location
    UK
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by felgall View Post
    If it is a new site why are you using a transitional doctype - that doctype is for pages originally written in HTML 3.2 that are still in the process of transitioning to HTML 4.

    Also your page contains 58 errors in the HTML - http://validator.w3.org/check?uri=ht...Inline&group=0

    Internet Explorer is less forgiving of errors than other browsers so fixing those errors might fix your problems - at least it will drastically reduce the possible causes.
    Thank you for your advice. I shall try and rectify as many of these errors as possible. Not seen this tool before!

    Re the doctype - I simply kicked off a new php page from Dreamweaver and didn't even look at doctype. To be honest, I'm not even sure how this affects this - I shall look it up.

    Thank you once again.

  • #5
    Regular Coder Candygirl's Avatar
    Join Date
    Apr 2008
    Location
    Switzerland
    Posts
    183
    Thanks
    3
    Thanked 56 Times in 56 Posts
    Hello,

    1.- You use html5 tags as "aside" and "menu". It seems to me that those are not supported by IE8 and under.
    "Imagination was given to man to compensate for what he is not;
    a sense of humour to console him for what he is."
    -Francis Bacon

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,668
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Candygirl View Post
    Hello,

    1.- You use html5 tags as "aside" and "menu". It seems to me that those are not supported by IE8 and under.
    Wrong DocType for the new HTML5 elements. Look at how to get that working in older browsers here.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    New Coder
    Join Date
    Jun 2012
    Location
    UK
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you all for helping with the layout problems of this. I have now managed to fix all of the errors on the page within my control, and adding that link Excavator was like magic!

  • #8
    New Coder
    Join Date
    Jun 2012
    Location
    UK
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hello aclees86,
    Floating an element and positioning it are two very different things. Instead of relative, I think absolute positioning for your 4 tabs.

    http://www.barelyfitz.com/screencast...s/positioning/
    Thanks Excavator - is this relating to stopping the menu from having an ugly end when you scroll down? If so, I have tried having a look at the positioning of this and it the content boxes end up overlapping the menu. I may be doing something incorrectly though...


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •