I am in the process of creating a website using CSS. I am very new to this, this being my second page I have attempted.
When you go to my site:
<!-- m --><a class="postlink" href="http://www.sammysosa.pointclark.net/cyw-newidea/cyw-newidea/website/index.htm">http://www.sammysosa.pointclark.net/cyw ... /index.htm</a><!-- m -->
1. you will see that the vertical "bar" on the right doesn't go all the way down to the footer. I have no idea how to do this:
2. The border is supposed to go around the entire website but it's not (it's the black bar at the top) behind the header logo
Here is my css sheet:
<!-- m --><a class="postlink" href="http://www.sammysosa.pointclark.net/cyw-newidea/cyw-newidea/website/style.css">http://www.sammysosa.pointclark.net/cyw ... /style.css</a><!-- m -->
Thanks!Validate your code. You have many, many errors, particularly multiply defined 'id's. You are only allowed one per page, ie, one id of that type.It never occured to me you can't use multiple id'sElement identifiers (<!-- m --><a class="postlink" href="http://www.w3.org/TR/html401/struct/global.html#h-7.5.2">http://www.w3.org/TR/html401/struct/global.html#h-7.5.2</a><!-- m -->)It now validates, but I still have the same problem.
It also looks REALLY bad in IE, but decent in firefox (still a lot of things not right though)<div id="footer"
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/footer.jpg" height="20px" width="750px" alt="footer">
</div>
Also the semantics of the markup just aren't there. Don't do this:
<div class="spotlightheader">
when what you MEAN is this:
<h3>
Never use a div where you can use a meaningful element.For your right bar, google for "clear floats". IE expands floats to the bottom of the box which is incorrect. FF won't, and it shouldn't, so you need to clear the float.
Check your widths. IE tends to screw up page widths so if your total width is, say 800px, and your divs add up to 800px, IE will drop that right bar down thinking there's no room for it. Just set all your margins and paddings to zero in the body. Then make them what you want throughout the code so all browsers will follow the same rules and not make some up like IE does.
In your CSS, you have the element 'Body'. Make that all lower case.stupid IE...
Thanks for the tips guys. I will continue working on this and come back with any further questions I have.Possibly you want to look into using "faux columns". See <!-- m --><a class="postlink" href="http://www.alistapart.com/articles/fauxcolumns/">http://www.alistapart.com/articles/fauxcolumns/</a><!-- m --> for more inf
k. I have worked on my website and implemented the faux columns idea.
I can get the website to display 100% property in firefox (except for the black border does not go all the way around the page)
It's a mess in IE. I would appreciate your help in this.Validate your code. You have important errors in your CSS.All those validator errors have to do with the link to learn more about firefox. It shouldn't affect the way the page loads, right?Well the actual errors bear looking into.
* Line: 132 Context : .bookstoresale
Invalid number : padding-top Parse Error - padding-top
* Line: 132 Context : .bookstoresale
Parse Error - 15px;
* Line: 138
Parse Error - : left; text-align: left; border-style: solid; border-width: 0px; } .sale
* Line: 147 Context : .advertising
Invalid number : float center is not a float value : center
Also, the "px" values are for use in styles, not HTML element attributes. Those assume px is the unit.I don't see where you got those errors. It validates now.
<!-- m --><a class="postlink" href="http://www.sammysosa.pointclark.net/cyw-newidea/cyw-newidea/website/index.htm">http://www.sammysosa.pointclark.net/cyw ... /index.htm</a><!-- m -->
Still have problems in IE. I think that I am just going to try and figure out a way for it to work in IE.I got them from the W3C CSS validator. Maybe you're just validating the HTML. The HTML warnings I got from Tidy.<!-- m --><a class="postlink" href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.sammysosa.pointclark.net%2Fcyw-newidea%2Fcyw-newidea%2Fwebsite%2Findex.htm">http://validator.w3.org/check?uri=http% ... Findex.htm</a><!-- m -->
Did you go somewhere other than that website?Yep. That is an HTML validator, this is the CSS validator.
<!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.sammysosa.pointclark.net%2Fcyw-newidea%2Fcyw-newidea%2Fwebsite%2Findex.htmI">http://jigsaw.w3.org/css-validator/vali ... index.htmI</a><!-- m --> didn't even know there was one of those...haha
I'll have to go through that. thanks.The CSS validates now, but still the same issues with IE
The website again (so you don't have to scroll up)
<!-- m --><a class="postlink" href="http://www.sammysosa.pointclark.net/cyw-newidea/cyw-newidea/website/index.php404Oops">http://www.sammysosa.pointclark.net/cyw ... php404Oops</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.sammysosa.pointclark.net/cyw-newidea/cyw-newidea/website/index.htm">http://www.sammysosa.pointclark.net/cyw ... /index.htm</a><!-- m -->
When you go to my site:
<!-- m --><a class="postlink" href="http://www.sammysosa.pointclark.net/cyw-newidea/cyw-newidea/website/index.htm">http://www.sammysosa.pointclark.net/cyw ... /index.htm</a><!-- m -->
1. you will see that the vertical "bar" on the right doesn't go all the way down to the footer. I have no idea how to do this:
2. The border is supposed to go around the entire website but it's not (it's the black bar at the top) behind the header logo
Here is my css sheet:
<!-- m --><a class="postlink" href="http://www.sammysosa.pointclark.net/cyw-newidea/cyw-newidea/website/style.css">http://www.sammysosa.pointclark.net/cyw ... /style.css</a><!-- m -->
Thanks!Validate your code. You have many, many errors, particularly multiply defined 'id's. You are only allowed one per page, ie, one id of that type.It never occured to me you can't use multiple id'sElement identifiers (<!-- m --><a class="postlink" href="http://www.w3.org/TR/html401/struct/global.html#h-7.5.2">http://www.w3.org/TR/html401/struct/global.html#h-7.5.2</a><!-- m -->)It now validates, but I still have the same problem.
It also looks REALLY bad in IE, but decent in firefox (still a lot of things not right though)<div id="footer"
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/footer.jpg" height="20px" width="750px" alt="footer">
</div>
Also the semantics of the markup just aren't there. Don't do this:
<div class="spotlightheader">
when what you MEAN is this:
<h3>
Never use a div where you can use a meaningful element.For your right bar, google for "clear floats". IE expands floats to the bottom of the box which is incorrect. FF won't, and it shouldn't, so you need to clear the float.
Check your widths. IE tends to screw up page widths so if your total width is, say 800px, and your divs add up to 800px, IE will drop that right bar down thinking there's no room for it. Just set all your margins and paddings to zero in the body. Then make them what you want throughout the code so all browsers will follow the same rules and not make some up like IE does.
In your CSS, you have the element 'Body'. Make that all lower case.stupid IE...
Thanks for the tips guys. I will continue working on this and come back with any further questions I have.Possibly you want to look into using "faux columns". See <!-- m --><a class="postlink" href="http://www.alistapart.com/articles/fauxcolumns/">http://www.alistapart.com/articles/fauxcolumns/</a><!-- m --> for more inf
k. I have worked on my website and implemented the faux columns idea.I can get the website to display 100% property in firefox (except for the black border does not go all the way around the page)
It's a mess in IE. I would appreciate your help in this.Validate your code. You have important errors in your CSS.All those validator errors have to do with the link to learn more about firefox. It shouldn't affect the way the page loads, right?Well the actual errors bear looking into.
* Line: 132 Context : .bookstoresale
Invalid number : padding-top Parse Error - padding-top
* Line: 132 Context : .bookstoresale
Parse Error - 15px;
* Line: 138
Parse Error - : left; text-align: left; border-style: solid; border-width: 0px; } .sale
* Line: 147 Context : .advertising
Invalid number : float center is not a float value : center
Also, the "px" values are for use in styles, not HTML element attributes. Those assume px is the unit.I don't see where you got those errors. It validates now.
<!-- m --><a class="postlink" href="http://www.sammysosa.pointclark.net/cyw-newidea/cyw-newidea/website/index.htm">http://www.sammysosa.pointclark.net/cyw ... /index.htm</a><!-- m -->
Still have problems in IE. I think that I am just going to try and figure out a way for it to work in IE.I got them from the W3C CSS validator. Maybe you're just validating the HTML. The HTML warnings I got from Tidy.<!-- m --><a class="postlink" href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.sammysosa.pointclark.net%2Fcyw-newidea%2Fcyw-newidea%2Fwebsite%2Findex.htm">http://validator.w3.org/check?uri=http% ... Findex.htm</a><!-- m -->
Did you go somewhere other than that website?Yep. That is an HTML validator, this is the CSS validator.
<!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.sammysosa.pointclark.net%2Fcyw-newidea%2Fcyw-newidea%2Fwebsite%2Findex.htmI">http://jigsaw.w3.org/css-validator/vali ... index.htmI</a><!-- m --> didn't even know there was one of those...haha
I'll have to go through that. thanks.The CSS validates now, but still the same issues with IE
The website again (so you don't have to scroll up)
<!-- m --><a class="postlink" href="http://www.sammysosa.pointclark.net/cyw-newidea/cyw-newidea/website/index.php404Oops">http://www.sammysosa.pointclark.net/cyw ... php404Oops</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.sammysosa.pointclark.net/cyw-newidea/cyw-newidea/website/index.htm">http://www.sammysosa.pointclark.net/cyw ... /index.htm</a><!-- m -->