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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 18
  1. #1
    Regular Coder
    Join Date
    Jun 2003
    Location
    Australia
    Posts
    528
    Thanks
    8
    Thanked 8 Times in 8 Posts

    Yet Another Validation Help

    Hi,

    I have purchased a template for this as my time is limited. However I am having two problems.

    Here is the URL: http://citysidesports.com/cliftonhill

    1) In Firefox everything looks fine. However I am having validation issues due to the rightColumn. But I don't understand why. It is saying I have not closed my <ul> tags - yet I have. I assume it's some order issue I have not picked up on.

    2) In IE it's all over the place. The original document works fine in IE (just with some slight differences but still working fine). In my version.. I believe the floating img is causing a problem, and I have no idea what is going on with the top menu buttons. Also the rightColumn text is not even close to how it appears in firefox.

    I've been fiddling around with this for quite some time now. Would appreciate any help/suggestions.

    Thanks in advance!

    Taylor
    Last edited by Taylor_1978; 11-01-2009 at 03:12 PM.

  • #2
    New Coder
    Join Date
    Oct 2009
    Posts
    87
    Thanks
    2
    Thanked 1 Time in 1 Post
    I'm not sure of your issue. They are both virtually, if not, identical in Firefox and IE8.

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Taylor_1978,
    For your first issue, the ul is not formed correctly. You have to close your ul before you open a new one, which is what the validator is telling you.
    Your list might work better if you used a Definition List instead since that gives you a title, <dt>, you can style.

    For your second, The only thing that I can see different between FF, IE8 and IE7 is that IE7 is borking your ul. I don't have a box with IE6 right now so I'm not much help there.
    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
    Regular Coder
    Join Date
    Jun 2003
    Location
    Australia
    Posts
    528
    Thanks
    8
    Thanked 8 Times in 8 Posts
    Okay so jeff's comment threw me a little because I was viewing a very odd looking IE page, then realising that it was IE6 (although this is still a problem I'm sure).

    Having upgraded to IE8 (I rarely use IE), the site looks perfect on my computer. However on my friend's laptop, which has IE8, the ball that has "Summer 2010" on it.. It isn't floating correcting. The text on the left hand side sits below the ball - diagonal. I have attached a .gif of this.

    As I mentioned, he also has IE8. Is it possible this is due to different screen resolutions?

    As for the <ul> issue I fixed this and it validates.
    Attached Thumbnails Attached Thumbnails Yet Another Validation Help-css.gif  

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    It does look like IE6 is your problem:

    Header buttons - I suggest removing the padding-left on <a> for IE6 only. That should sort the menu out.

    It's the 600px padding-right on #banner #image that's causing the problem in IE6 (and IE7). I'd suggest removing this entirely and positioning the text with the padding on #banner div div instead. You could safely do this for all browsers, not just IE6.

    EDIT:Just seen your response - I see the problem in IE7 up to 1280/800, but don't see it at all in IE8.
    Last edited by SB65; 11-01-2009 at 09:55 AM.

  • #6
    New Coder
    Join Date
    Oct 2009
    Posts
    87
    Thanks
    2
    Thanked 1 Time in 1 Post
    I am trying to found out where (I presume in Control Panel) I can see my screen's resolution. I can't find it. I think (I know) my resolution is higher than that shown on your screen-shot.

    I am going to be dealing with this same issue as I wrap-up my program, so please post in this thread when you figure it out. I'd also appreciate a PM.

    If you want me to tell you my screen res, tell me where I can find it.

  • #7
    Regular Coder
    Join Date
    Jun 2003
    Location
    Australia
    Posts
    528
    Thanks
    8
    Thanked 8 Times in 8 Posts
    Thanks SB65,

    I just did as you suggested in regards to the <a> padding for IE6. Although now that I've updated to IE8 I cannot see if this fixed the problem.

    Also I think I may have misunderstood what you meant in regards to the banner. I took out of the style sheet the 600px padding. In #banner #image div I put a padding of 400px (600 sent it off the page almost) - however the problem still occurs in IE8 on my friends computer (no problem on mine)

  • #8
    Regular Coder
    Join Date
    Jun 2003
    Location
    Australia
    Posts
    528
    Thanks
    8
    Thanked 8 Times in 8 Posts
    Jeff.. Screen Resoltuion is found in :Control Panel -> Display -> Settings

    My personal screen resolution is 1024x1024 however my friends is a lot lower. works fine for me but not him - hence why I was thinking that might be the problem. But hopefully SB66 has the solution for me.

  • #9
    New Coder
    Join Date
    Oct 2009
    Posts
    87
    Thanks
    2
    Thanked 1 Time in 1 Post
    1368 x 768.

    I am very interested in this topic.

    I program my dimensions in pixels from my laptop. On my computer at the office, I have a problem in that, due to its lower resolution, you have to scroll left and right to use the application I wrote. Of course, that's no good!

    I used pixels and not percentages because I found percentages to be troubling in some respect. I forgot, but it seems to be that I could not control the dimension, and it would dynamically re-size. Something like that.

    Maybe I'm wrong. I'd like very much to program dimensions in percentages and have the dimensions stay relative to the window and not dynamically change. That would spare lots of headache I am going to have to confront.

  • #10
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    I'm not seeing a difference in screen resolutions but maybe it does change beyond 1280px wide. Is it possible your friend is on IE7 not IE8?

    Looks like a few more changes are needed to achieve cross-browser consistency. IE6 and 7 don't like the padding right, which is causing the float drop, but without some padding the text in #image isn't consistently aligned because you're trying to centre the div as well.

    So, I'd put that image within #image, so your html is:

    Code:
                <div id="banner" >
                    <div id="image">
    				<img src="http://citysidesports.com/cliftonhill/img/newseasonball.jpg" style="float: right; padding-top:18px;" alt="New Season - Commences January 14th - Registration Open Dec. 1st" />
                        <div style="padding: 0 0px 0 0px">
                            <h2>Welcome</h2>
                            <p style="font-size:120%">
                                <span>NOTE:</span> In order to access CitySide Sports and view fixture/results/ladders you must now become a member. All you need is a valid email address.
                            </p>
    						<p style="color:#FFFACD">If you're looking to register a new team, first register yourself via the link below and then progress to register a team. Individuals should also use the registration link on this page.</p>
                            <p>
                                Soon you will see some new fantastic features implemented to our website, with a new and improved fixture format allowing players of multiple teams to see all their fixtures at once and a highly efficient Free SMS based Fill In Player Request System - just to name a couple.
                            </p>
                        </div>
                    </div>
                </div>
    Note removed padding on #banner div div. And then make your css:

    Code:
    #banner #image {
    background:#000;
    padding:10px 0px 10px 0;
    z-index:1;
    width:925px;
    margin:0 auto
    }
    
    #banner div div {
    /*margin:0 auto;*/
    /*padding:0 0 0 180px;*/
    position:relative;
    width:500px
    }
    That seems to give a consistent result across IE6/7/8 and FF. (As an aside you don't really need that extra div within #image, you could achieve the same result by applying the 500px width to #image p. Anyway...)

    jeffmatthews: There are some useful demonstrations of fluid width layouts here. Also, if you use Firefox, there's a natty little plugin called Firesizer, which will alloy you to quickly view your design at smaller (although obviously not larger) screen res.
    Last edited by SB65; 11-01-2009 at 11:14 AM.

  • #11
    Regular Coder
    Join Date
    Jun 2003
    Location
    Australia
    Posts
    528
    Thanks
    8
    Thanked 8 Times in 8 Posts
    Okay - have done exactly as you have suggested and it seems to have fixed the problem! Thank you!

    However - there is now an error with the header.

    I have attached a picture of it. The black is merging into the grey.
    Attached Thumbnails Attached Thumbnails Yet Another Validation Help-css2.jpg  

  • #12
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    I'm not seeing that on your live link.

  • #13
    Regular Coder
    Join Date
    Jun 2003
    Location
    Australia
    Posts
    528
    Thanks
    8
    Thanked 8 Times in 8 Posts
    Nope. It's on the IE8 on my friend's computer. And just to confirm it is definitely IE8 AND Firefox on his laptop. EDIT: Sorry no its not Firefox.. The problem is just IE8 on his laptop.

    Thanks for your help so far.
    Last edited by Taylor_1978; 11-01-2009 at 12:10 PM.

  • #14
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    So that problem is on IE8 only on your friend's computer, and he's on a low res monitor?

  • #15
    Regular Coder
    Join Date
    Jun 2003
    Location
    Australia
    Posts
    528
    Thanks
    8
    Thanked 8 Times in 8 Posts
    Okay oddly, it is now fixed without me doing anything! A couple of refreshes later and it's showing fine. Weird!

    Thanks for your help SB65!


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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