View Full Version : Resolved Yet Another Validation Help

11-01-2009, 07:13 AM

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! :thumbsup:


11-01-2009, 08:48 AM
I'm not sure of your issue. They are both virtually, if not, identical in Firefox and IE8.

11-01-2009, 09:25 AM
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 (http://www.w3schools.com/TAGS/tag_dl.asp)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.

11-01-2009, 10:49 AM
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.

11-01-2009, 10:51 AM
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.

11-01-2009, 11:01 AM
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.

11-01-2009, 11:07 AM
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)

11-01-2009, 11:08 AM
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.

11-01-2009, 11:37 AM
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.

11-01-2009, 12:11 PM
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:

<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">
<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 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>
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.

Note removed padding on #banner div div. And then make your css:

#banner #image {
padding:10px 0px 10px 0;
margin:0 auto

#banner div div {
/*margin:0 auto;*/
/*padding:0 0 0 180px;*/

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 (http://bonrouge.com/2c-hf-fullyfluid.php). Also, if you use Firefox, there's a natty little plugin called Firesizer (https://addons.mozilla.org/en-US/firefox/addon/5792), which will alloy you to quickly view your design at smaller (although obviously not larger) screen res.

11-01-2009, 12:26 PM
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.

11-01-2009, 12:31 PM
I'm not seeing that on your live link.

11-01-2009, 01:05 PM
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.

11-01-2009, 01:11 PM
So that problem is on IE8 only on your friend's computer, and he's on a low res monitor?

11-01-2009, 01:20 PM
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! :thumbsup:

11-01-2009, 02:06 PM
Okay so I have taken the resolved off as I have one other issue with this and figure its better than starting another new thread.

The ball with "Summer 2010" - How do I make this more vertically centered.

On my Firefox and IE on 1280x1024, it's perfect! However on my mates laptop his resolution is 1028 x 768 and the text to the left is a lot bigger in height all up than the ball as shown in the last .gif I attached.

The problem could actually be the text sizing itself. But it I bring the size of the text down then it makes the ball go over the boundaries of #banner in my resolution.

Why can't we all just have the same resolution??? :p

Thanks in advance!

11-01-2009, 03:44 PM
I'm struggling to see how the screen resolution could be causing this because everything is a fixed width, so no matter how wide your screen is, the text should still be the same width. Some screenshots attached.

It could be because the text is being zoomed on the browser.

You could centre the image vertically by applying:

#banner #image{position:relative}

#image img{

and remove the inline styling on that image (currently float:right/padding-top). This should keep the image vertically centered even if the text size is changed.

To explain this a little more, we're using absolute positioning here so we can control exactly what happens to the image. We set position:relative on the containing element of the image to set a "starting point" for our positioning. The left positioning roughly replicates the float:right behaviour - amend this if you need to.

Now, if you think about what you'd do to work out where the top should be, you take the height of the containing div, and then take away the height of the image. This would give you the amount of space top and bottom - so you take half of this to find out the position of the top. So the top is:

(Height of div-height of image)/2

which is the same as:

(Height of div/2)-(Height of image/2)

which, here is:

(50% of the height of the div) -(206px/2)

which is

50% of the height of the div - 103px

Hence, we set the top to be 50%, and use a negative margin of 103px to bring the image back up again.

Hope that makes sense.

11-01-2009, 03:55 PM
Thank you! That works perfect.

And thank you for taking the time to explain it. I like to learn as I go along and have done so here!