...

View Full Version : Validated my site! - IE Problems



Crispy
07-16-2008, 04:35 PM
Ive validated my site :) http://aboutchris.co.uk/Reflex/index.html

http://validator.w3.org/check?uri=http%3A%2F%2Faboutchris.co.uk%2FReflex%2Findex.html&charset=%28detect+automatically%29&doctype=Inline&group=0&st=1

took alot of figuring out! Looks a bit better in ie, like all the pieces are there though the alignment is still way out? am i missing certain tags like position:relative; etc?

abduraooft
07-16-2008, 05:05 PM
Never use position:absolute;, if you are not certain about the purpose. Have a try with

.main {
background-image:url(images/main.jpg);
width:504px;
height:976px;
margin-left:139px;
padding-top:65px;
/*position:absolute;*/
}

PS: You'd find it easy to layout a page, if you take care of divitis (http://csscreator.com/?q=divitis) :)

Crispy
07-16-2008, 06:23 PM
without that position:absolute; i've used it falls apart :(

macwiz
07-16-2008, 06:29 PM
You must remember that IE is not W3C compliant, so validating the site has no effect on it.

Crispy
07-16-2008, 07:08 PM
is there nothing similar i can use that will tell me whats wrong :P?

macwiz
07-16-2008, 07:12 PM
is there nothing similar i can use that will tell me whats wrong :P?

Dreamweaver has a built in function that can check if a site is compliant on a per browser basis...

Crispy
07-16-2008, 07:36 PM
thanks man, ive just validated them errors it came up with!

I've changed the CSS main code to



.main {
background-image:url(images/main.jpg);
width:504px;
height:976px;
margin-left:139px;
padding-top:65px;
float:left;
}


and it still looks fine in FF. I've been looking at my site/the code and really its just this "main" tag that isnt right in IE.. Its as if its pushed an extra 500px to the left in IE and im not sure why?

Any ideas?

_Aerospace_Eng_
07-16-2008, 07:38 PM
No not 500. 139 to be exact. Change this

.main {
background-image:url(images/main.jpg);
width:504px;
height:976px;
margin-left:139px;
padding-top:65px;
float:left;
}
to this

.main {
background-image:url(images/main.jpg);
width:504px;
height:976px;
margin-left:139px;
padding-top:65px;
float:left;
display:inline;
}
That display:inline; part fixes an IE 6 double margin bug.

macwiz
07-16-2008, 07:59 PM
It's an awesome looking site!

You may also want to take a look at your spacing an positioning. Your text is either to close or overlapping images:

http://idisk.mac.com/macwiz1220-Public/reflex.png

Crispy
07-16-2008, 08:46 PM
thanks man, im a designer as you see :D trying to learn to code haha.. im getting there... slowly.

I used display:inline; like you suggested and that worked great! its knocked it back to the left and got rid of the "500px gap that shouldnt have been there!".

http://aboutchris.co.uk/Reflex/index.html

if you check it out now in ie it kinda needs to just jump down!
the images arent actually overlapping the text :P its kinda the other way around, i think i probbably coded it the wrong way in coders terms, but anyway yeah lol.. I just need to find a way to make it come down so much? can i display:inline + center height wise somehow? lol

macwiz
07-16-2008, 09:19 PM
Set the margin-bottom:Xpx; property to define how much blank space u want under the image. It will cause the text to be pushed down.

Crispy
07-16-2008, 10:17 PM
tried that bud! didnt seem to work :(. Its frustrating me now lol!

Tried putting in all sorts of floats and positons but nothing seems to come up!

macwiz
07-16-2008, 10:34 PM
tried that bud! didnt seem to work :(. Its frustrating me now lol!

Tried putting in all sorts of floats and positons but nothing seems to come up!

Took a look at the code.

The entire sidebar on the right is a single image. That would be why.

The DIV that the text is wrapped around in, for example

<div id="sidebar_text2"> under testimonials, in your CSS,try adding margin-top:Xpx;. Rather than applying it to the image, try applying the property to the text.

bazz
07-17-2008, 01:33 AM
awesome site and I think you have got your answer so here's a tip.

the copyright symbol is showing up in my ff as upsidedown '?' 1/2

You might need to use &#169; or &copy;

Just thought you might be needing to know that later

bazz

oldcrazylegs
07-17-2008, 02:59 AM
Looks like you got it working great. But the W3C Valdator is kind of a lightweight when it comes to validating. The very best is CSE HTML Validator http://www.htmlvalidator.com/

Run your pages through the Professional Version (1 month trial) and it will be awhile before you smile again. But it will be well worth it. They have a free version that is slight less good.

You can write your own code in it and validate online or offline. It also has HTML Tidy.

I recommend the Pro version. It will really make you cuss because it really knitpicks you to tears. :) Be certain to read the error messages. They sometimes don't mean you did something wrong. Besides you can disable any error you don't like. :) Some error messages will tell you that it was smart of you to have used an unconventional tag or attribute because in the real world it will work better.

Download the professional trial period version and see what I mean. They have no idea i mentioned this app. I just believe it is the best so I thought you might like to hear about it.

macwiz
07-17-2008, 03:04 AM
That's GREAT! But:

It doesn't really help. W3C is the governing body for the web. They set the standards. Hence, if the site is valid with them, it is W3C compliant...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum