...

View Full Version : page is validated, but everything messed up



san_crazy
11-02-2008, 06:59 AM
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/external/stylesheets/resourcestyle.css
http://www.stripathi.110mb.com/external/stylesheets/header_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

Millenia
11-02-2008, 10:08 AM
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

gnomeontherun
11-02-2008, 11:52 AM
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!

san_crazy
11-02-2008, 12:26 PM
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?

gnomeontherun
11-02-2008, 01:20 PM
http://www.quirksmode.org/css/quirksmode.html gives a much better explanation that I could.

san_crazy
11-02-2008, 03:56 PM
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.



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

bazz
11-02-2008, 04:22 PM
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,



* {
padding:0;
border:0;
margin:0;
}


bazz

san_crazy
11-03-2008, 10:06 AM
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:





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

Millenia
11-03-2008, 10:10 AM
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.

jerry62704
11-03-2008, 03:52 PM
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.

abduraooft
11-03-2008, 04:32 PM
[...]it is your responsibility to die() if necessary!:thumbsup:

jamesicus
11-03-2008, 05:19 PM
.......... 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! (http://webdesign.about.com/od/webdesigntutorials/a/aa061404.htm)

James



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum