The site in question:www.cotto-crudo.com (<!-- w --><a class="postlink" href="http://www.cotto-crudo.com">www.cotto-crudo.com</a><!-- w -->)
I put it through W3 validaters, and it comes back flawless, but when I view it in Explorer, and Netscape the results a VERY different. I understand there will be subtle differences but...this is ridiculous.
This is what I want it to look like. (<!-- m --><a class="postlink" href="http://www.cotto-crudo.com/what_I_want.jpg">http://www.cotto-crudo.com/what_I_want.jpg</a><!-- m -->)
This is what I don't want. (<!-- m --><a class="postlink" href="http://www.cotto-crudo.com/what_I_dont_want.jpg">http://www.cotto-crudo.com/what_I_dont_want.jpg</a><!-- m -->)
Now if I remove the "text-align: center" from line 42 in the style tag for the div tag the text is no longer centered justified, but in Explore the whole thing is no long centered, which it is not in Netscape anyways. And why is the table not set to the full screen height in Netscape when it is set to 100%.
And why are the CSS for the Link being ignored, the font size in 10, not what look like 14.I believe your problem with the link size is because you specify a size, but not a unit of measure. Such as px, em, pt, %, ect. It seems you are not specifying a unit of measure in a lot of places.
Question: Did you originally test in IE?
Also, I would suggest putting all your CSS in an external stylesheet, it'll make it easier to modify. IE is very buggy, and just plain bad when it comes to CSS, Netscape is probably getting it right, and IE's poor CSS support is screwing things up.Also the xml header may be screwing up IE's rendering so you really don't have a baseline to work from. What it looks like in Moz, running in compliance mode, is probably pretty close to what it should look like.put it through W3 validaters, and it comes back flawlessOh? <!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.cotto-crudo.com%2F&warning=2&profile=css2&usermedium=all">http://jigsaw.w3.org/css-validator/vali ... medium=all</a><!-- m -->
And the errors confirm what Paul Jr suspected regarding the missing units of measure.To:
Paul Jr: Thx, I usually put things in an external file, but only after debugging everything first. And yes, I did initial test everything in IE.
Jeff Mott; If you check your link again, now that I have put in the unit, it comes back perfect. Which it did through HTML-Kit. ??? Don't know maybe there is a glitch in their software.
Thank you all, but now can anyone suggest why it does not stay centered or how it should be done.
And how to keep the height 100%.
Thanks againI would suggest testing with Mozilla or Netscape along with Internet Explorer.The XML declaration at the top is not recognized in IE, and causes the browser to switch into quirks mode. If you remove it (so that IE will see the doctype as the first item on the page) IE will render your page in standards compliant mode, and you'll find that your page then looks similar to what Netscape produces. So the problem is that your entire page is built around IE's quirks. You'll probably need to redo the page from the ground up. But we'll be happy to help you out along the way.Ok, I removed the XML tags, and you were right Explorer changed. It is no longer full screen with the 100% height, but it is still center, were as it is not in Netscape.
The text-align property is only supposed to affect inline content; tables are block level. So Netscape has the proper render. A way around this is to set your table to display inline.Please explain
Because I am getting ready to do something a lot more complicated, which I am not sure how, or exactly how to execute.
Example of what I am thinking:
<script type="text/javascript">
<!--
function resPosition(){(WindowResolution-740)/2}
document.write('div.centering{ position: absolute;right:'+resPosition()+';}')
// -->
</script>Just 'cause I was really bored, I typed this up.
I'm not exactly sure why, but in Moz/Netscape the <body> will not stretch to 100% of the window height. I specified it, and it only works in IE. You'll understand what I mean when you Download the .zip file. It's got all the necessary files: external CSS, index file, and images.I'm not exactly sure why, but in Moz/Netscape the <body> will not stretch to 100% of the window height. I specified it, and it only works in IEIn Mozilla the HTML element also creates a box in which the body is contained. So you must also set the height of HTML to 100%.Ah, sweet!
Now it works!I didn't bother rewriting the tables using DIVs, but I got his original code to work in the following browsers:
Mozilla 1.5
Firebird .7
Opera 6.04
IE: 6./winxp, 5.5/win2k and 9x, 5.01 win2k and 9x
Works OK in IE 4 for Win NT and 95.
And the table stretches to the bottom of the screen like you want and doesn't overlap by default. See the attached ZIP file.Thanks you guys, I appreciate the time you invested.
I will give them a look, and keep you posted.
Thx again.Ok, I want to thank the two of you again. I looked over the two files; it was fun to see the differences, as well as the similarities between the two.
I tried to combine the two; it is amazing how hard that actually was. Certain commands canceled each other out.
Anyways,
Paul Jr.: I like you links in yours, but toicontien yours is to the full height, could you look over the revised version (See link below) and try and see why it won't stay 100%. I am at a lost.
<!-- w --><a class="postlink" href="http://www.cotto-crudo.com/index5.html">www.cotto-crudo.com/index5.html</a><!-- w --> (<!-- m --><a class="postlink" href="http://www.cotto-crudo.com/index5.html">http://www.cotto-crudo.com/index5.html</a><!-- m -->)
Thanks again.This is in your stylesheet:
#thetop {
text-align:center;
width:100%;
margin:0px;
padding:0px;
background-color:#FFF;
}
The id "thetop" is not stated in your code, but the whole page is surrounded by this:
<div id="top">
...blah page content...
</div>
Try changing that id to "thetop" and see what happens.I renamed that <div> id, and I had to rename the id in the stylesheet so that the menu worked. But that did it for me.
But the footer image is not stuck to the bottom of the page; I'm not sure if you want that to happen or not.To have block elements span the entire height of the page, you need the following lines of CSS:
/* The HTML element needs to be 100% height because most browsers other
than IE create a box with the HTML element. */
html {
height: 100%;
}
/* Margins, borders and padding all add to the height of an element in the CSS
box model. Set them to 0px.
NOTE: margin is used by most browsers but I found that Opera 6.04 uses padding in the body element. */
body {
height; 100%;
margin: 0px;
padding: 0px;
}
That's what Paul JR's code seems to accomplish. The only change should be to add this line of CSS to the #thetop declaration:
height: 100%;I changed the id, and added height to 100% and still nothing.
I changed the ID to "top" instead of "theTop" because if I left as theTop the links get out of wack. Instead of being in-line they be come on top of each other.
???
<!-- w --><a class="postlink" href="http://www.cotto-crudo.com/theStyle.css">www.cotto-crudo.com/theStyle.css</a><!-- w --> (<!-- m --><a class="postlink" href="http://www.cotto-crudo.com/theStyle.css">http://www.cotto-crudo.com/theStyle.css</a><!-- m -->)IT WORKS!!!
I re-read the last couple posts, and realized I was missing the 100% in the HTML tag.
Thank you guys, huge. I don't know what to say. I really appreciate it.
Thx.
Cotto-Crudo.com (<!-- m --><a class="postlink" href="http://www.cotto-crudo.com/index5.html">http://www.cotto-crudo.com/index5.html</a><!-- m -->)Woohoo!
Glad you got it working!
OK, I think I jumped the gun a wee bit there. It does work, but...
In Netscape it is now perfect, full screen (i.e. 100% the screen size) but in Internet Explorer now it look like it is about 130%. Which is weird because it is blank, no text so what is "pushing" it to that size.
I put it through W3 validaters, and it comes back flawless, but when I view it in Explorer, and Netscape the results a VERY different. I understand there will be subtle differences but...this is ridiculous.
This is what I want it to look like. (<!-- m --><a class="postlink" href="http://www.cotto-crudo.com/what_I_want.jpg">http://www.cotto-crudo.com/what_I_want.jpg</a><!-- m -->)
This is what I don't want. (<!-- m --><a class="postlink" href="http://www.cotto-crudo.com/what_I_dont_want.jpg">http://www.cotto-crudo.com/what_I_dont_want.jpg</a><!-- m -->)
Now if I remove the "text-align: center" from line 42 in the style tag for the div tag the text is no longer centered justified, but in Explore the whole thing is no long centered, which it is not in Netscape anyways. And why is the table not set to the full screen height in Netscape when it is set to 100%.
And why are the CSS for the Link being ignored, the font size in 10, not what look like 14.I believe your problem with the link size is because you specify a size, but not a unit of measure. Such as px, em, pt, %, ect. It seems you are not specifying a unit of measure in a lot of places.
Question: Did you originally test in IE?
Also, I would suggest putting all your CSS in an external stylesheet, it'll make it easier to modify. IE is very buggy, and just plain bad when it comes to CSS, Netscape is probably getting it right, and IE's poor CSS support is screwing things up.Also the xml header may be screwing up IE's rendering so you really don't have a baseline to work from. What it looks like in Moz, running in compliance mode, is probably pretty close to what it should look like.put it through W3 validaters, and it comes back flawlessOh? <!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.cotto-crudo.com%2F&warning=2&profile=css2&usermedium=all">http://jigsaw.w3.org/css-validator/vali ... medium=all</a><!-- m -->
And the errors confirm what Paul Jr suspected regarding the missing units of measure.To:
Paul Jr: Thx, I usually put things in an external file, but only after debugging everything first. And yes, I did initial test everything in IE.
Jeff Mott; If you check your link again, now that I have put in the unit, it comes back perfect. Which it did through HTML-Kit. ??? Don't know maybe there is a glitch in their software.
Thank you all, but now can anyone suggest why it does not stay centered or how it should be done.
And how to keep the height 100%.
Thanks againI would suggest testing with Mozilla or Netscape along with Internet Explorer.The XML declaration at the top is not recognized in IE, and causes the browser to switch into quirks mode. If you remove it (so that IE will see the doctype as the first item on the page) IE will render your page in standards compliant mode, and you'll find that your page then looks similar to what Netscape produces. So the problem is that your entire page is built around IE's quirks. You'll probably need to redo the page from the ground up. But we'll be happy to help you out along the way.Ok, I removed the XML tags, and you were right Explorer changed. It is no longer full screen with the 100% height, but it is still center, were as it is not in Netscape.
The text-align property is only supposed to affect inline content; tables are block level. So Netscape has the proper render. A way around this is to set your table to display inline.Please explainBecause I am getting ready to do something a lot more complicated, which I am not sure how, or exactly how to execute.
Example of what I am thinking:
<script type="text/javascript">
<!--
function resPosition(){(WindowResolution-740)/2}
document.write('div.centering{ position: absolute;right:'+resPosition()+';}')
// -->
</script>Just 'cause I was really bored, I typed this up.
I'm not exactly sure why, but in Moz/Netscape the <body> will not stretch to 100% of the window height. I specified it, and it only works in IE. You'll understand what I mean when you Download the .zip file. It's got all the necessary files: external CSS, index file, and images.I'm not exactly sure why, but in Moz/Netscape the <body> will not stretch to 100% of the window height. I specified it, and it only works in IEIn Mozilla the HTML element also creates a box in which the body is contained. So you must also set the height of HTML to 100%.Ah, sweet!
Now it works!I didn't bother rewriting the tables using DIVs, but I got his original code to work in the following browsers:
Mozilla 1.5
Firebird .7
Opera 6.04
IE: 6./winxp, 5.5/win2k and 9x, 5.01 win2k and 9x
Works OK in IE 4 for Win NT and 95.
And the table stretches to the bottom of the screen like you want and doesn't overlap by default. See the attached ZIP file.Thanks you guys, I appreciate the time you invested.
I will give them a look, and keep you posted.
Thx again.Ok, I want to thank the two of you again. I looked over the two files; it was fun to see the differences, as well as the similarities between the two.
I tried to combine the two; it is amazing how hard that actually was. Certain commands canceled each other out.
Anyways,
Paul Jr.: I like you links in yours, but toicontien yours is to the full height, could you look over the revised version (See link below) and try and see why it won't stay 100%. I am at a lost.
<!-- w --><a class="postlink" href="http://www.cotto-crudo.com/index5.html">www.cotto-crudo.com/index5.html</a><!-- w --> (<!-- m --><a class="postlink" href="http://www.cotto-crudo.com/index5.html">http://www.cotto-crudo.com/index5.html</a><!-- m -->)
Thanks again.This is in your stylesheet:
#thetop {
text-align:center;
width:100%;
margin:0px;
padding:0px;
background-color:#FFF;
}
The id "thetop" is not stated in your code, but the whole page is surrounded by this:
<div id="top">
...blah page content...
</div>
Try changing that id to "thetop" and see what happens.I renamed that <div> id, and I had to rename the id in the stylesheet so that the menu worked. But that did it for me.
But the footer image is not stuck to the bottom of the page; I'm not sure if you want that to happen or not.To have block elements span the entire height of the page, you need the following lines of CSS:
/* The HTML element needs to be 100% height because most browsers other
than IE create a box with the HTML element. */
html {
height: 100%;
}
/* Margins, borders and padding all add to the height of an element in the CSS
box model. Set them to 0px.
NOTE: margin is used by most browsers but I found that Opera 6.04 uses padding in the body element. */
body {
height; 100%;
margin: 0px;
padding: 0px;
}
That's what Paul JR's code seems to accomplish. The only change should be to add this line of CSS to the #thetop declaration:
height: 100%;I changed the id, and added height to 100% and still nothing.
I changed the ID to "top" instead of "theTop" because if I left as theTop the links get out of wack. Instead of being in-line they be come on top of each other.
???
<!-- w --><a class="postlink" href="http://www.cotto-crudo.com/theStyle.css">www.cotto-crudo.com/theStyle.css</a><!-- w --> (<!-- m --><a class="postlink" href="http://www.cotto-crudo.com/theStyle.css">http://www.cotto-crudo.com/theStyle.css</a><!-- m -->)IT WORKS!!!
I re-read the last couple posts, and realized I was missing the 100% in the HTML tag.
Thank you guys, huge. I don't know what to say. I really appreciate it.
Thx.
Cotto-Crudo.com (<!-- m --><a class="postlink" href="http://www.cotto-crudo.com/index5.html">http://www.cotto-crudo.com/index5.html</a><!-- m -->)Woohoo!
Glad you got it working!
OK, I think I jumped the gun a wee bit there. It does work, but...In Netscape it is now perfect, full screen (i.e. 100% the screen size) but in Internet Explorer now it look like it is about 130%. Which is weird because it is blank, no text so what is "pushing" it to that size.