Although the assignment was for the Javascript class, I just wanted make it look pretty, and that started this whole thing...
I wanted the ouput to look like:
Name: Pretty Chindonya
ID: 19191919
Assignment: #01
Date: 02/03/2011
I thought since the table stuff is going under the drain, why not use div stuff? It sounded great at start. The key is use <li> and <span>, and in <span> in CSS file, fix the width.
Like this in HTML file:
<li><span>Assignment:</span>#01</li>
Like this in CSS file:
span
{
width: 100px;
}
It worked with Internet Explorer, but it didn't with Firefox. Firefox ignored the width assigned. ummmmm. To fix the Firefox problem, added "inline-block".
span
{
display: inline-block;
width: 100px;
}
This solved the problem.
Note that, while I was at it, I noticed the difference between Internet Explorer and Firefox. Firefox has the extra space at the left side of text. After spending time for try and error, I found out the I had to explicitly make padding 0 for "ul". Does this mean Firefox's default configuration for "ul" will add extra space at left? Must be, right?
Here is the working code.
HTML File:
<body>
<div id ="wrapper">
<div class ="assignmentTitle">
<ul>
<li><span>Name:</span>Pretty Chindonya</li>
</ul>
<ul>
<li><span>ID:</span>191919</li>
</ul>
<ul>
<li><span>Assignment:</span>#01</li>
</ul>
<ul>
<li><span>Date:</span>02/03/2011</li>
</ul>
</div>
</div>
</body>
</html>
CSS File:
body
{
background: #ffffff;
text-align: center;
font-size: medium;
font-family: Sans-serif;
color: #505050;
}
#wrapper{
margin: auto;
width: 900px;
text-align: left;
background: #f0f0f0;
}
.assignmentTitle
{
color: #505050;
font-size: medium;
}
.assignmentTitle ul
{
list-style: none;
font-size: 15px;
font-family: Sans-serif;
list-style: none;
margin: 0 0 0 4px;
/* With Firefox,
there is an extra space at left.
below "padding: 0;" helped to get rid of it */
padding: 0;
}
.assignmentTitle li
{
/* used them for just debugging,
but ie did NOT display the outline.
ummmmm...
outline-style: solid;
outline-width: 1px; */
/* With Firefox,
there is an extra space at left.
below did not help to get rid of it
margin-left: 0;
padding-left: 0; */
}
.assignmentTitle span
{
/* For Firefox,
this "inline-block" is needed.
without it, it will not reserve the space */
display: inline-block;
width: 100px;
/* With Firefox,
there is an extra space at left.
below did not help to get rid of it.
margin-left: 0; */
}
No comments:
Post a Comment