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 16
  1. #1
    New Coder
    Join Date
    Jun 2008
    Posts
    76
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Validated my site! - IE Problems

    Ive validated my site http://aboutchris.co.uk/Reflex/index.html

    http://validator.w3.org/check?uri=ht...e&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?

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,855
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Never use position:absolute;, if you are not certain about the purpose. Have a try with
    Code:
    .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
    Last edited by abduraooft; 07-16-2008 at 05:08 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Jun 2008
    Posts
    76
    Thanks
    11
    Thanked 0 Times in 0 Posts
    without that position:absolute; i've used it falls apart

  • #4
    Regular Coder
    Join Date
    Jul 2008
    Posts
    195
    Thanks
    3
    Thanked 11 Times in 11 Posts
    You must remember that IE is not W3C compliant, so validating the site has no effect on it.

  • #5
    New Coder
    Join Date
    Jun 2008
    Posts
    76
    Thanks
    11
    Thanked 0 Times in 0 Posts
    is there nothing similar i can use that will tell me whats wrong :P?

  • #6
    Regular Coder
    Join Date
    Jul 2008
    Posts
    195
    Thanks
    3
    Thanked 11 Times in 11 Posts
    Quote Originally Posted by Crispy View Post
    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...

  • #7
    New Coder
    Join Date
    Jun 2008
    Posts
    76
    Thanks
    11
    Thanked 0 Times in 0 Posts
    thanks man, ive just validated them errors it came up with!

    I've changed the CSS main code to

    Code:
    .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?

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    No not 500. 139 to be exact. Change this
    Code:
    .main {
    	background-image:url(images/main.jpg);
    	width:504px;
    	height:976px;
    	margin-left:139px;
    	padding-top:65px;
    	float:left;
    }
    to this
    Code:
    .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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    Crispy (07-16-2008)

  • #9
    Regular Coder
    Join Date
    Jul 2008
    Posts
    195
    Thanks
    3
    Thanked 11 Times in 11 Posts
    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:


  • #10
    New Coder
    Join Date
    Jun 2008
    Posts
    76
    Thanks
    11
    Thanked 0 Times in 0 Posts
    thanks man, im a designer as you see 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

  • #11
    Regular Coder
    Join Date
    Jul 2008
    Posts
    195
    Thanks
    3
    Thanked 11 Times in 11 Posts
    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.

  • #12
    New Coder
    Join Date
    Jun 2008
    Posts
    76
    Thanks
    11
    Thanked 0 Times in 0 Posts
    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!

  • #13
    Regular Coder
    Join Date
    Jul 2008
    Posts
    195
    Thanks
    3
    Thanked 11 Times in 11 Posts

    Text/Images

    Quote Originally Posted by Crispy View Post
    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
    Code:
    <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.

  • #14
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    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
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #15
    Regular Coder oldcrazylegs's Avatar
    Join Date
    Feb 2004
    Location
    East Moline Illinois USA
    Posts
    414
    Thanks
    4
    Thanked 5 Times in 4 Posts
    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.
    Last edited by oldcrazylegs; 07-17-2008 at 03:05 AM.


  •  
    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
    •