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 12 of 12
  1. #1
    Regular Coder
    Join Date
    Sep 2008
    Posts
    116
    Thanks
    2
    Thanked 0 Times in 0 Posts

    page is validated, but everything messed up

    I have validated my page successfully at w3c validation center. OK, I am just giving the screen shots what did I get before and after the page validation:

    page URL:
    http://www.stripathi.110mb.com/resourcespage.html

    CSS URL:
    http://www.stripathi.110mb.com/exter...ourcestyle.css
    http://www.stripathi.110mb.com/exter...eader_menu.css

    1 .the interesting issue is, at first I have had not included the !DOCTYPE declaration,
    the output in IE7.0 looked like this
    ----see first attachment

    the output in FF2.0.0.x looked like this
    --see second attachment

    2. when I included the !DOCTYPE declaration at top then I got every thing messed up in IE but few of those in FF.
    the output in IE--
    --see third image

    and in FF ----see fourth image

    the one thing that I don't get is, the page was running as I expected before validating it and without fixing the errors and warnings, but when I got each error/warning removed and fixed everything accordingly, then I got it messed up.

    the style sheet at first link doesn't have its effect to make every element in its proper position and looks accordingly.

    thanks in advance
    Attached Thumbnails Attached Thumbnails page is validated, but everything messed up-iew.jpg   page is validated, but everything messed up-ffw.jpg   page is validated, but everything messed up-iea.jpg   page is validated, but everything messed up-ffa.jpg  

  • #2
    Regular Coder
    Join Date
    May 2008
    Location
    Lost in Localhost...
    Posts
    702
    Thanks
    3
    Thanked 43 Times in 42 Posts
    1 .the interesting issue is, at first I have had not included the !DOCTYPE declaration,
    the output in IE7.0 looked like this
    ----see first attachment
    You must use a doctype for a good standard site, so I guess that you're using the wrong doctype.
    Look here:
    http://htmlhelp.com/tools/validator/doctype.html

  • #3
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    Well Validation doesn't necessarily mean things will work like you want, it simply means that your code conforms to the DOCTYPE's requirements helping to ensure that browsers are more likely to display it similarly (still not necessarily the exact same).

    What probably happened before like Millenia said is that the browser entered "quirks mode" when viewing your page and made up for the errors in the code, and guessed properly. The reason is that the browsers got pretty good at guessing improper code usage which was highly prevalent back in the day, and didn't always do so well with the proper coding. Sometimes the validator wants you to change things or remove things, but by doing so breaks the design because it was necessary. What you might have to do is find replacement techniques for these removed chunks.

    Also browser differences will cause these problems. However once it does work well validated, it will be much better!
    jeremy - gnomeontherun
    Educated questions often get educated answers, and simple questions often get simple answers.

  • #4
    Regular Coder
    Join Date
    Sep 2008
    Posts
    116
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jeremywilken View Post
    What you might have to do is find replacement techniques for these removed chunks.
    please be more descriptive, I didn't get what exactly you want to suggest.

    how can I get all the things back?....just look at this http://codingforums.com

    I have had validated this page also, but there were number of errors and warnings however, this site is working fine and have similar look for either of browsers.

    why couldn't I have?

  • #5
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    http://www.quirksmode.org/css/quirksmode.html gives a much better explanation that I could.
    jeremy - gnomeontherun
    Educated questions often get educated answers, and simple questions often get simple answers.

  • #6
    Regular Coder
    Join Date
    Sep 2008
    Posts
    116
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Ok, let solve evry thing from scratch.

    I have now added the following style property for a <div> element, but the positions are different in both browsers.

    Code:
      div#personalhead
    	{
    	  background-image:url(http://www.stripathi.110mb.com/external/images/resourcehead.png);
    	   position:relative;
    	   margin:155px 909px 214px 105px;		   
    	   width:804px;height:59px;
    	   background-position:center;	  
    	   border:solid; 
    	}
    I just want one thing, how can i get this style works similar for different browsers?, what should I add here?

    guys, please help me out solving this annoying issue so that I could start over making everything else corrected.

    thanks in advance

  • #7
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    You wil find it much easier if you take on board Jeremy's and Millenia's advice.

    1. Use a valid DOCTYPE
    2. design in FF/safari
    3. tweak for IE

    If you follow these tips, the tweaks for ie will be minimal whereas if you do it the other way around, your teaks for FF will likely break ie again at the same time.

    you might find that this issue you raised in the post above this can be dealt with by adding to your css code,

    Code:
    * {
    padding:0;
    border:0;
    margin:0;
    }
    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

  • #8
    Regular Coder
    Join Date
    Sep 2008
    Posts
    116
    Thanks
    2
    Thanked 0 Times in 0 Posts
    sorry, i dont know how can i decide which is the valid !DOCTYPE for a page?


    * {
    padding:0;
    border:0;
    margin:0;
    }
    would you please explain this line?

    here is another case:


    Code:
     <style type="text/css">
      
    	* {
                 padding:0;
                 border:0;
                 margin:0;
              }
    	
    	 
       #leftpane{
    			   position:absolute;
    			   width:180px;
    			   height:400px;
    			   margin:40px 632px 360px 5px;	  
    			}
    
       #leftpane ul
    			{
    			  position:relative;
    			  list-style:none;			  
    			  margin:10px;
    			} 
    
       #leftpane ul li
    			 {
    			   margin-top:-0.1em;
    			 }
    
       #leftpane ul li a
    			  { 
    			 display:block;
    					 height:20px;
    					text-decoration:none;
    					width:142px; font-family:Verdana;font-size:11px;
    			background-image:url(http://www.stripathi.110mb.com/external/images/butt.jpg);
     			padding-top:4px;text-align:center;
    			border-left:1px solid #18E2D8; border-bottom:1px solid #18E2D8; border-right:1px solid #18E2D8;
    			  }			
    
      
     		
     
    	   			
       div#mainbg
    	{	
    	  
    	  background-image:url(http://www.stripathi.110mb.com/external/images/resmiddbg.png);
    	  position: relative;	 
    		  background-repeat:repeat-y;	
    	  border:solid;
    		 margin-left:104px;margin-top:260px;
    	  width: 807px;height: 790px;	  
    	  
    	}	
      </style>
    
     <body bgcolor="#EFFFFB">  
      
       <div id="mainbg">
    	  <div id="leftpane">		
    		 <ul>		  
    		  <li><span><a href="/interestspage.html">C</a></span></li>
    		  <li><span><a href="/photo.html">C++</a></span></li>
    		  <li><span><a href="/contactpage.html">Java</a></span></li>
    		  <li><span><a href="/resourcespage.html">Resources</a></span></li>
    		  <li><span><a href="/photo.html">Courses</a></span></li>
    		  <li><span><a href="/linkspage.html">Links</a></span></li>
    		  <li><span><a href="/extrapage.html">Extra</a></span></li>
    		  <li><span><a href="/photo.html">Site Map</a></span></li>
    		</ul>
    		
    	  </div>	  
       </div>
      
    </body>
    </html>
    what i got till now getting through HTML/CSS is , when a sub node is created like nested <divs>, the inside element always positioned relative to its nearest parent node.
    as in above example, the <div id=mainbg> is the child node of <body> node, similarly same is the parent node of <div id=leftnode>.

    using the style as above doesn't position the child element #mainbg relative to its parent node <body>. rather,its top position goes relative to the element <div> at the same level.

    similarly, the element #leftpane also goes differently relative to its parent node #mainbg in FF and IE.

    what all i want to get is, a child element should be positioned relative to its parent and all the measurement should be comparing to its parent and that must be similar in different browsers.

  • #9
    Regular Coder
    Join Date
    May 2008
    Location
    Lost in Localhost...
    Posts
    702
    Thanks
    3
    Thanked 43 Times in 42 Posts
    Quote Originally Posted by san_crazy View Post
    please be more descriptive, I didn't get what exactly you want to suggest.

    how can I get all the things back?....just look at this http://codingforums.com

    I have had validated this page also, but there were number of errors and warnings however, this site is working fine and have similar look for either of browsers.

    why couldn't I have?
    Yes I have been to that site before, I can't remember when...

    Upsetting content warning:

    Most sites work better when valid, just because a site is not valid, does not mean it will not work. Although if it was valid, I guess it would have it's upside. Sorry CF

    If you wanted to I'll let you make a site that doesn't validate, uses tables for layout, has a heavy use of browser dependant javascript, uses frames for pages and uses <blink> and <marquee>, but I can guarantee it won't be very good.

  • #10
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    The margin, padding, border 0 thing is to remove the independent browser setting and make it all start from a common position. Every browser has a default css page that is different so you have to level the playing field if you want the page to display the same on different browsers.

    Within the same browser can be different rules which you have already been told about with the quirks discussion.

    I get the feeling you are fighting us on our advice. Why? What is the problem with validating your page? What is the problem with using a DOCTYPE? If you go to the validator, you can dynamically change the DOCTYPE - see what validation affects are cause by that.

    Personally, I use transitional after getting it mostly right in strict. I like the new browser function on links unlike several people here. They do have good arguments, so you might want to go with them.
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls

  • #11
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Quote Originally Posted by www.php.net/set_error_handler
    [...]it is your responsibility to die() if necessary!

  • #12
    Regular Coder jamesicus's Avatar
    Join Date
    Oct 2008
    Posts
    106
    Thanks
    0
    Thanked 11 Times in 10 Posts
    Quote Originally Posted by san_crazy View Post
    .......... the style sheet at first link doesn't have its effect to make every element in its proper position and looks accordingly ..........
    Please do not take it that I am suggesting that you are expecting too much as far as exact layout positioning is concerned, but the subtle differences in page rendering by various Browsers does make this a problem.

    Do not aspire to "pixel perfect" layouts. Refer to: About.com: Web Design/HTML -- You Can't Get Every Page to Look Identical, So Stop Trying!

    James
    Web Developer Tool Kit - for creating Standards compliant and Interoperable web pages
    W3C Markup Validation Service - validate HTML code for reliable rendering in all Browsers
    WAVE accessibility evaluation tool - check page structure, image alt text, form labels, etc.


  •  

    Posting Permissions

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