Please support our HTML and CSS advertiser: Lunarpages Web Hosting
Views: 7314 | Replies: 39 | Solved
 |
•
•
Join Date: Feb 2005
Posts: 427
Reputation: 
Rep Power: 4
Solved Threads: 12
Posting Pro in Training
...MidiMagic...
I think you "overead" into what he seems to want - a simple two column layout with Header and Footer... nothing complicated nor impossible with that.
...ashneet...
What you are asking for is possible... but it is fair easier, simplier and more reliable to "cheat".
Due to certain Browsers not following the guidelines, and others doing their own thing... things like "equal height columns" across all browsers are a pain.
So isntead,there are a couple of techniques... but "faux columns" is the most reliable.
This is basically makig a container that has a bg image, then two divs inside the container.
An alternative is to use the Ruthsarian layout... kind of Equal columns with some extras (though more complicated!).
So... simple version (try this one first!)
<div id="container">
<div id="content">
<div id="leftcol">
</div>
</div>
</div>
#container
{
float: left;
clear: both;
#zoom:1; /*IE Bug Fix */
}
#contents
{
margin-left: 200px;
}
#leftcol
{
margin: 0 -1px 0 -200px;
width: 200px;
float: left;
position: relative; /* IE Bug Fix */
#display: inline; /* IE Bug Fix */
}
Give that a go.
If you have a fixed width design, it is a simple case of applying the BG to the Container.
If it is fluid... then make 2 Containers (container1/container2), and make 2 iamges... one almost the fullwiddth of a normal resolution, with only one edge, the second make around the same size, but with the other edge on it... and apply a bit of padding.... so container1 has bg1 and padding-left 20px, container2 has the pther image, and is prevented from overlapping due to the paddig
Seriously - noe of it is complicated (one you figure the logic behind CSS)... and you can do a damn site more than with tables.
I think you "overead" into what he seems to want - a simple two column layout with Header and Footer... nothing complicated nor impossible with that.
...ashneet...
What you are asking for is possible... but it is fair easier, simplier and more reliable to "cheat".
Due to certain Browsers not following the guidelines, and others doing their own thing... things like "equal height columns" across all browsers are a pain.
So isntead,there are a couple of techniques... but "faux columns" is the most reliable.
This is basically makig a container that has a bg image, then two divs inside the container.
An alternative is to use the Ruthsarian layout... kind of Equal columns with some extras (though more complicated!).
So... simple version (try this one first!)
<div id="container">
<div id="content">
<div id="leftcol">
</div>
</div>
</div>
#container
{
float: left;
clear: both;
#zoom:1; /*IE Bug Fix */
}
#contents
{
margin-left: 200px;
}
#leftcol
{
margin: 0 -1px 0 -200px;
width: 200px;
float: left;
position: relative; /* IE Bug Fix */
#display: inline; /* IE Bug Fix */
}
Give that a go.
If you have a fixed width design, it is a simple case of applying the BG to the Container.
If it is fluid... then make 2 Containers (container1/container2), and make 2 iamges... one almost the fullwiddth of a normal resolution, with only one edge, the second make around the same size, but with the other edge on it... and apply a bit of padding.... so container1 has bg1 and padding-left 20px, container2 has the pther image, and is prevented from overlapping due to the paddig
Seriously - noe of it is complicated (one you figure the logic behind CSS)... and you can do a damn site more than with tables.
•
•
Join Date: Mar 2007
Location: RI
Posts: 147
Reputation:
Rep Power: 2
Solved Threads: 2
Junior Poster
i have to agree with autocrat. Tables are for eating on.
current personal projects The H8ers Club && PCLinuxOS non-official One stop forum
•
•
Join Date: Jun 2005
Location: USA
Posts: 147
Reputation:
Rep Power: 4
Solved Threads: 1
Junior Poster
Thanks autocrat that help me get rid of tables.
now the tables are gone but two issue still remain.
1) the container wont touch the bottom even when I set height to 100% - Ignorable issue.
2) the nav is not the same height as content.
I made the modifications at http://test.eezs.com
now the tables are gone but two issue still remain.
1) the container wont touch the bottom even when I set height to 100% - Ignorable issue.
2) the nav is not the same height as content.
I made the modifications at http://test.eezs.com
•
•
Join Date: Feb 2005
Posts: 427
Reputation:
Rep Power: 4
Solved Threads: 12
Posting Pro in Training
Arg - Validate man, Validate
http://validator.w3.org
That will show you a whole bunch of issues with the code...
Still, as you are willing to make the effort - so will I.
Keep an eye on her, I will paste you some code
http://validator.w3.org
That will show you a whole bunch of issues with the code...
Still, as you are willing to make the effort - so will I.
Keep an eye on her, I will paste you some code
•
•
Join Date: Jun 2005
Location: USA
Posts: 147
Reputation:
Rep Power: 4
Solved Threads: 1
Junior Poster
•
•
•
•
Originally Posted by autocrat 
Arg - Validate man, Validate
http://validator.w3.org
That will show you a whole bunch of issues with the code...
Still, as you are willing to make the effort - so will I.
Keep an eye on her, I will paste you some code
I validated the page all those errors are from yahoo pasting a small script at the end of the page. that should not cause any problems.
Last edited by ashneet : Aug 16th, 2007 at 1:30 pm.
•
•
Join Date: Feb 2005
Posts: 427
Reputation:
Rep Power: 4
Solved Threads: 12
Posting Pro in Training
hmmm, must have forgotte html coding...
I thought things like <img> had to be either..
<img> </img> or <img /> ???
Still... here we go....
I thought things like <img> had to be either..
<img> </img> or <img /> ???
Still... here we go....
•
•
Join Date: Feb 2005
Posts: 427
Reputation:
Rep Power: 4
Solved Threads: 12
Posting Pro in Training
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0021)http://test.eezs.com/ -->
<html>
<head>
<title>test</title>
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<link href="test_files/main.css" type=text/css rel=stylesheet>
<meta content="MSHTML 6.00.2900.3157" name=GENERATOR>
</head>
<body>
<!-- Header Section -->
<div id=header>
<img height=100 src="test_files/head.gif" />
</div>
<!-- Main Section -->
<div id="container">
<div id="content">
<div id="leftcol">
<ul>
<li>
<a href="#" title="whatever">Link</a>
</li>
<li>
<a href="#" title="whatever">Link</a>
</li>
<li>
<a href="#" title="whatever">Link</a>
</li>
<li>
<a href="#" title="whatever">Link</a>
</li>
</ul>
<ul>
<li>
<a href="#" title="whatever">Link</a>
</li>
<li>
<a href="#" title="whatever">Link</a>
</li>
<li>
<a href="#" title="whatever">Link</a>
</li>
<li>
<a href="#" title="whatever">Link</a>
</li>
</ul>
</div> <!-- leftcol -->
<p>
Test content goes here.
</p>
</div> <!-- content -->
<div id="contentfooter">
Content Footer content
</div> <!--contentfooter-->
<div class="clear"> </div>
</div> <!-- container -->
<!-- Footer Section -->
<div id="pagefooter">
Page Footer content
</div> <!--pagefooter-->
<!-- text below generated by server. PLEASE REMOVE -->
<!-- Counter/Statistics data collection code -->
<script language="JavaScript" src="test_files/geov2_001.js"></SCRIPT>
<script language="javascript">geovisit();</SCRIPT>
<noscript>
<IMG height=1 alt=setstats src="test_files/visit.gif" width=1 border=0>
</noscript>
</body>
</html>
/* You didn't include HTML */
html
{
margin: 0;
padding: 0;
height: 100%;
/* Font-size set in PX will not Resize in IE! */
/* Instead, you could go for text-size: 75%; */
font-size: 11px;
/* helvetica goes before arial, as arial is the more common modern font */
font-family: helvetica, arial, sans-serif;
}
body
{
MARGIN: 0;
padding: 0;
height: 100%;
background-color: #abcdef;
}
#header
{
height: 100px;
background-color: #abcdef;
text-align: left;
float: left;
width: 100%;
}
#container
{
margin: 0;
padding: 0;
clear: both;
float: left;
width: 100%;
background-color: #ffffff;
min-width: 770px;
position: relative;
/* IE Bug Fix - # Hack may only work for IE 5/6 - 7 doesn't need it */
#zoom: 1;
}
#content
{
margin-left: 150px;
/* IE Bug Fix - prevents 3px Jog */
#display: inline-block;
}
#leftcol
{
float: left;
margin: 0 -1px 0 -150px;
padding: 0;
width: 150px;
background-color: #EEEEEE;
text-align: center;
/* IE Bug Fixes - # Hack may only work for IE 5/6 - 7 doesn't need it */
#display: inline; /* Stops IE implimenting the Double MArgin Float Bug */
#position: relative; /* Stops IE from botching negative placement */
}
#leftcol ul
{
/* Wheres the other value ??? you have three... which means T R B... no Left! */
margin: 5px;
padding: 0;
border: #cccccc 1px solid;
list-style: none;
background-color: #ffffff
}
#leftcol a, #leftcol a:visited
/* As there is no difference between a Link and a Visited:Link, you can put them together! */
{
margin: 0;
padding: 0;
color: #000000;
text-decoration: none;
display: block;
width: 138px;
vertical-align: bottom;
line-height: 2em;
}
/*
There really should be a difference when interacting with a Link.
This permits people to "know" that they are workig with a Link.
Though changing BG is okay... you may want to think about those with color-vision issues.
- Focus is used so that keyboard-users can use the "Tab Key".
- Active is used as IE doesn't work with Focus.
#leftcol a:active, #leftcol a:hover, #leftcol a:focus
{
background-color: #abcdef;
text-decoration: underline;
}
*/
#contentfooter
{
position: absolute;
bottom: 0;
left: 150px;
}
img
/* IE Bug Fix - Images in the markup withany space after results in a "gap" in IE */
{
display: block;
}
.clear
/* This is to handle floats being contained.
Thechnically, a float is no longer part of the normal document flow - so they can overlap!
By placing a div within the parent, after the floated children - and making it clear:both, it forces the parent to "stretch" */
{
clear: both;
font-size: 1px;
line-height: 1px;
}
p
{
margin: 0;
padding: 5px 0;
}
INPUT {
FONT-SIZE: 11px
}
.center {
TEXT-ALIGN: center
}
.center TABLE {
MARGIN-LEFT: auto; MARGIN-RIGHT: auto
}
.center DIV {
MARGIN-LEFT: auto; MARGIN-RIGHT: auto
}
.right {
TEXT-ALIGN: right
}
.right TABLE {
MARGIN-LEFT: auto; MARGIN-RIGHT: 0px
}
.right DIV {
MARGIN-LEFT: auto; MARGIN-RIGHT: 0px
}
FORM {
MARGIN-TOP: 0px; MARGIN-BOTTOM: 0px
}
#error {
BORDER-RIGHT: #cccccc 2px solid; BORDER-TOP: #cccccc 2px solid; FONT-SIZE: 11px; BORDER-LEFT: #cccccc 2px solid; BORDER-BOTTOM: #cccccc 2px solid; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #eeeeee; TEXT-ALIGN: left
}
#error .head {
FONT-WEIGHT: bold; FONT-SIZE: 12px; BACKGROUND-COLOR: #cccccc; TEXT-DECORATION: underline
}
#error UL {
FONT-WEIGHT: lighter; MARGIN: 0px auto; COLOR: #990000; LIST-STYLE-TYPE: square
}
#login {
BORDER-RIGHT: #cccccc 2px solid; BORDER-TOP: #cccccc 2px solid; FONT-SIZE: 11px; BORDER-LEFT: #cccccc 2px solid; BORDER-BOTTOM: #cccccc 2px solid; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #eeeeee; TEXT-ALIGN: right
}
#login .head {
FONT-WEIGHT: bold; FONT-SIZE: 12px; BACKGROUND-COLOR: #cccccc; TEXT-ALIGN: left; TEXT-DECORATION: underline
}
#login TR {
VERTICAL-ALIGN: baseline
}
#login .desc {
FONT-SIZE: 10px; COLOR: #006600
}
#login .forget {
FONT-SIZE: 10px; TEXT-ALIGN: left
}
#login .forget A:link {
COLOR: #ff0000; TEXT-DECORATION: none
}
#login .forget A:visited {
COLOR: #ff0000; TEXT-DECORATION: none
}
#active {
BORDER-RIGHT: #cccccc 2px solid; BORDER-TOP: #cccccc 2px solid; FONT-SIZE: 11px; BORDER-LEFT: #cccccc 2px solid; BORDER-BOTTOM: #cccccc 2px solid; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #eeeeee; TEXT-ALIGN: right
}
#active .head {
FONT-WEIGHT: bold; FONT-SIZE: 12px; BACKGROUND-COLOR: #cccccc; TEXT-ALIGN: left; TEXT-DECORATION: underline
}
#active TR {
VERTICAL-ALIGN: baseline
}
#active .desc {
FONT-SIZE: 10px; COLOR: #006600
}
#forget {
BORDER-RIGHT: #cccccc 2px solid; BORDER-TOP: #cccccc 2px solid; FONT-SIZE: 11px; BORDER-LEFT: #cccccc 2px solid; BORDER-BOTTOM: #cccccc 2px solid; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #eeeeee; TEXT-ALIGN: right
}
#forget .head {
FONT-WEIGHT: bold; FONT-SIZE: 12px; BACKGROUND-COLOR: #cccccc; TEXT-ALIGN: left; TEXT-DECORATION: underline
}
#register {
FONT-SIZE: 11px; WIDTH: 618px; FONT-FAMILY: Arial, Helvetica, sans-serif; BORDER-COLLAPSE: collapse
}
#register .head {
FONT-WEIGHT: bold; FONT-SIZE: 12px; BACKGROUND-COLOR: #cccccc; TEXT-ALIGN: left; TEXT-DECORATION: underline
}
#register .desc {
FONT-SIZE: 10px; COLOR: #006600
}
#register .note {
FONT-SIZE: 10px; COLOR: #ff0000
}
#register .school TR {
VERTICAL-ALIGN: baseline
}
#register .school {
BORDER-RIGHT: #cccccc 2px solid; TEXT-ALIGN: right
}
#register .teacher TR {
VERTICAL-ALIGN: baseline
}
#register .teacher {
BORDER-RIGHT: #cccccc 2px solid; TEXT-ALIGN: right
}
#class {
FONT-SIZE: 11px; WIDTH: 100%; FONT-FAMILY: Arial, Helvetica, sans-serif; BORDER-COLLAPSE: collapse
}
#class .head {
FONT-WEIGHT: bold; FONT-SIZE: 12px; BACKGROUND-COLOR: #cccccc; TEXT-DECORATION: underline
}
#class .add {
FONT-SIZE: 11px; FONT-FAMILY: Arial, Helvetica, sans-serif; BORDER-COLLAPSE: collapse
}
<!-- saved from url=(0021)http://test.eezs.com/ -->
<html>
<head>
<title>test</title>
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<link href="test_files/main.css" type=text/css rel=stylesheet>
<meta content="MSHTML 6.00.2900.3157" name=GENERATOR>
</head>
<body>
<!-- Header Section -->
<div id=header>
<img height=100 src="test_files/head.gif" />
</div>
<!-- Main Section -->
<div id="container">
<div id="content">
<div id="leftcol">
<ul>
<li>
<a href="#" title="whatever">Link</a>
</li>
<li>
<a href="#" title="whatever">Link</a>
</li>
<li>
<a href="#" title="whatever">Link</a>
</li>
<li>
<a href="#" title="whatever">Link</a>
</li>
</ul>
<ul>
<li>
<a href="#" title="whatever">Link</a>
</li>
<li>
<a href="#" title="whatever">Link</a>
</li>
<li>
<a href="#" title="whatever">Link</a>
</li>
<li>
<a href="#" title="whatever">Link</a>
</li>
</ul>
</div> <!-- leftcol -->
<p>
Test content goes here.
</p>
</div> <!-- content -->
<div id="contentfooter">
Content Footer content
</div> <!--contentfooter-->
<div class="clear"> </div>
</div> <!-- container -->
<!-- Footer Section -->
<div id="pagefooter">
Page Footer content
</div> <!--pagefooter-->
<!-- text below generated by server. PLEASE REMOVE -->
<!-- Counter/Statistics data collection code -->
<script language="JavaScript" src="test_files/geov2_001.js"></SCRIPT>
<script language="javascript">geovisit();</SCRIPT>
<noscript>
<IMG height=1 alt=setstats src="test_files/visit.gif" width=1 border=0>
</noscript>
</body>
</html>
/* You didn't include HTML */
html
{
margin: 0;
padding: 0;
height: 100%;
/* Font-size set in PX will not Resize in IE! */
/* Instead, you could go for text-size: 75%; */
font-size: 11px;
/* helvetica goes before arial, as arial is the more common modern font */
font-family: helvetica, arial, sans-serif;
}
body
{
MARGIN: 0;
padding: 0;
height: 100%;
background-color: #abcdef;
}
#header
{
height: 100px;
background-color: #abcdef;
text-align: left;
float: left;
width: 100%;
}
#container
{
margin: 0;
padding: 0;
clear: both;
float: left;
width: 100%;
background-color: #ffffff;
min-width: 770px;
position: relative;
/* IE Bug Fix - # Hack may only work for IE 5/6 - 7 doesn't need it */
#zoom: 1;
}
#content
{
margin-left: 150px;
/* IE Bug Fix - prevents 3px Jog */
#display: inline-block;
}
#leftcol
{
float: left;
margin: 0 -1px 0 -150px;
padding: 0;
width: 150px;
background-color: #EEEEEE;
text-align: center;
/* IE Bug Fixes - # Hack may only work for IE 5/6 - 7 doesn't need it */
#display: inline; /* Stops IE implimenting the Double MArgin Float Bug */
#position: relative; /* Stops IE from botching negative placement */
}
#leftcol ul
{
/* Wheres the other value ??? you have three... which means T R B... no Left! */
margin: 5px;
padding: 0;
border: #cccccc 1px solid;
list-style: none;
background-color: #ffffff
}
#leftcol a, #leftcol a:visited
/* As there is no difference between a Link and a Visited:Link, you can put them together! */
{
margin: 0;
padding: 0;
color: #000000;
text-decoration: none;
display: block;
width: 138px;
vertical-align: bottom;
line-height: 2em;
}
/*
There really should be a difference when interacting with a Link.
This permits people to "know" that they are workig with a Link.
Though changing BG is okay... you may want to think about those with color-vision issues.
- Focus is used so that keyboard-users can use the "Tab Key".
- Active is used as IE doesn't work with Focus.
#leftcol a:active, #leftcol a:hover, #leftcol a:focus
{
background-color: #abcdef;
text-decoration: underline;
}
*/
#contentfooter
{
position: absolute;
bottom: 0;
left: 150px;
}
img
/* IE Bug Fix - Images in the markup withany space after results in a "gap" in IE */
{
display: block;
}
.clear
/* This is to handle floats being contained.
Thechnically, a float is no longer part of the normal document flow - so they can overlap!
By placing a div within the parent, after the floated children - and making it clear:both, it forces the parent to "stretch"
*/{
clear: both;
font-size: 1px;
line-height: 1px;
}
p
{
margin: 0;
padding: 5px 0;
}
INPUT {
FONT-SIZE: 11px
}
.center {
TEXT-ALIGN: center
}
.center TABLE {
MARGIN-LEFT: auto; MARGIN-RIGHT: auto
}
.center DIV {
MARGIN-LEFT: auto; MARGIN-RIGHT: auto
}
.right {
TEXT-ALIGN: right
}
.right TABLE {
MARGIN-LEFT: auto; MARGIN-RIGHT: 0px
}
.right DIV {
MARGIN-LEFT: auto; MARGIN-RIGHT: 0px
}
FORM {
MARGIN-TOP: 0px; MARGIN-BOTTOM: 0px
}
#error {
BORDER-RIGHT: #cccccc 2px solid; BORDER-TOP: #cccccc 2px solid; FONT-SIZE: 11px; BORDER-LEFT: #cccccc 2px solid; BORDER-BOTTOM: #cccccc 2px solid; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #eeeeee; TEXT-ALIGN: left
}
#error .head {
FONT-WEIGHT: bold; FONT-SIZE: 12px; BACKGROUND-COLOR: #cccccc; TEXT-DECORATION: underline
}
#error UL {
FONT-WEIGHT: lighter; MARGIN: 0px auto; COLOR: #990000; LIST-STYLE-TYPE: square
}
#login {
BORDER-RIGHT: #cccccc 2px solid; BORDER-TOP: #cccccc 2px solid; FONT-SIZE: 11px; BORDER-LEFT: #cccccc 2px solid; BORDER-BOTTOM: #cccccc 2px solid; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #eeeeee; TEXT-ALIGN: right
}
#login .head {
FONT-WEIGHT: bold; FONT-SIZE: 12px; BACKGROUND-COLOR: #cccccc; TEXT-ALIGN: left; TEXT-DECORATION: underline
}
#login TR {
VERTICAL-ALIGN: baseline
}
#login .desc {
FONT-SIZE: 10px; COLOR: #006600
}
#login .forget {
FONT-SIZE: 10px; TEXT-ALIGN: left
}
#login .forget A:link {
COLOR: #ff0000; TEXT-DECORATION: none
}
#login .forget A:visited {
COLOR: #ff0000; TEXT-DECORATION: none
}
#active {
BORDER-RIGHT: #cccccc 2px solid; BORDER-TOP: #cccccc 2px solid; FONT-SIZE: 11px; BORDER-LEFT: #cccccc 2px solid; BORDER-BOTTOM: #cccccc 2px solid; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #eeeeee; TEXT-ALIGN: right
}
#active .head {
FONT-WEIGHT: bold; FONT-SIZE: 12px; BACKGROUND-COLOR: #cccccc; TEXT-ALIGN: left; TEXT-DECORATION: underline
}
#active TR {
VERTICAL-ALIGN: baseline
}
#active .desc {
FONT-SIZE: 10px; COLOR: #006600
}
#forget {
BORDER-RIGHT: #cccccc 2px solid; BORDER-TOP: #cccccc 2px solid; FONT-SIZE: 11px; BORDER-LEFT: #cccccc 2px solid; BORDER-BOTTOM: #cccccc 2px solid; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #eeeeee; TEXT-ALIGN: right
}
#forget .head {
FONT-WEIGHT: bold; FONT-SIZE: 12px; BACKGROUND-COLOR: #cccccc; TEXT-ALIGN: left; TEXT-DECORATION: underline
}
#register {
FONT-SIZE: 11px; WIDTH: 618px; FONT-FAMILY: Arial, Helvetica, sans-serif; BORDER-COLLAPSE: collapse
}
#register .head {
FONT-WEIGHT: bold; FONT-SIZE: 12px; BACKGROUND-COLOR: #cccccc; TEXT-ALIGN: left; TEXT-DECORATION: underline
}
#register .desc {
FONT-SIZE: 10px; COLOR: #006600
}
#register .note {
FONT-SIZE: 10px; COLOR: #ff0000
}
#register .school TR {
VERTICAL-ALIGN: baseline
}
#register .school {
BORDER-RIGHT: #cccccc 2px solid; TEXT-ALIGN: right
}
#register .teacher TR {
VERTICAL-ALIGN: baseline
}
#register .teacher {
BORDER-RIGHT: #cccccc 2px solid; TEXT-ALIGN: right
}
#class {
FONT-SIZE: 11px; WIDTH: 100%; FONT-FAMILY: Arial, Helvetica, sans-serif; BORDER-COLLAPSE: collapse
}
#class .head {
FONT-WEIGHT: bold; FONT-SIZE: 12px; BACKGROUND-COLOR: #cccccc; TEXT-DECORATION: underline
}
#class .add {
FONT-SIZE: 11px; FONT-FAMILY: Arial, Helvetica, sans-serif; BORDER-COLLAPSE: collapse
}
•
•
Join Date: Feb 2005
Posts: 427
Reputation:
Rep Power: 4
Solved Threads: 12
Posting Pro in Training
Okay - I've only done those that needed doing to get the layout correct.
Please pay attention...
1) You have a habbit of the last bit of CSS for each ID not having a closing ; - which means MozFFwill have issues!
2) You should make things in "lowercase" whenapply them... so not FONT-SIZE, but font-size!
3) In "most" cases, instead of using Padding-top/padding-right/padding-bottom/padding-left... try just padding: 0 0 0 0;!
4) Similarly - try to follow the order of Top-Right-Bottom-Left... even when doing a line each!
5) Also note that "0" does not ahave a measurement unit... so it is 0, not 0px
6) For somethings, making similar entries are not needed - such as you ahving no difference between Lik and Lik:visited... so you can put them together (see CSS).
Still.... you are making the effort, and the above should help.
Keep it up, you've already made some headway, and some of the commetns should help you get over the more annoyig bugs!
Please pay attention...
1) You have a habbit of the last bit of CSS for each ID not having a closing ; - which means MozFFwill have issues!
2) You should make things in "lowercase" whenapply them... so not FONT-SIZE, but font-size!
3) In "most" cases, instead of using Padding-top/padding-right/padding-bottom/padding-left... try just padding: 0 0 0 0;!
4) Similarly - try to follow the order of Top-Right-Bottom-Left... even when doing a line each!
5) Also note that "0" does not ahave a measurement unit... so it is 0, not 0px
6) For somethings, making similar entries are not needed - such as you ahving no difference between Lik and Lik:visited... so you can put them together (see CSS).
Still.... you are making the effort, and the above should help.
Keep it up, you've already made some headway, and some of the commetns should help you get over the more annoyig bugs!
•
•
Join Date: Mar 2007
Location: RI
Posts: 147
Reputation:
Rep Power: 2
Solved Threads: 2
Junior Poster
hey autocrat my website is having problems, can you code the whole thing for me too? just kidding.
current personal projects The H8ers Club && PCLinuxOS non-official One stop forum
|
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Linear Mode
