TheScribe
Citizen
Worldly Traveler
Registered: 02-2003
Province: Sydney, Australia
Posts: 38
Karma: 0 (+0/-0)
|
|
Reply | Quote
|
|
Fixing Messy Coding
My test board link.
Now that I know a bit more about CSS, I believe the coding for my test board is quite messy. Yet I'm not knowledgeable enough to know what can really go and what must stay (I'm scared I'll wreck the entire board). Could you give me an idea please?
The coding also has a mixture of pixels and em for fonts. I really don't understand em and how it works, whereas I feel confident with pixels. But I must stay up with the times and using em is the right way, isn't it? Can you explain the difference between the two please?
--- Speculative Realms: Where there's a will, there's a way
A collection of fantasy, science fiction and horror stories
Includes my story “Where Strength Lies”
Purchase now from http://www.speculativerealms.com |
|
5/14/2008, 8:13 pm
|
PM TheScribe
|
Lesigner Girl
Minerva
Worldly Traveler (premium)
Runboard staff member
Registered: 11-2005
Province: SW MI, USA
Posts: 5128
Karma: 89 (+103/-14)
|
|
Reply | Quote
|
|
Re: Fixing Messy Coding
Fonts:
Using em or % is the "proper" way to go if you want someone with poor vision who uses IE to be able to resize the text. If you put it in px, they won't be able to change it in IE.
1em equals the width and height of the capital letter "M", which is where it gets its name. If you define your text to be 1em, it's the same as saying 100%, and 0.75em is the same as 75%.
I think where you might have gotten the idea that em is the proper way to size things is because it is often a good way to define the width of, for example, a div. Of course, this all depends on the page's layout.
As a writer, I'm sure you know there's a point where there are just too many characters in a line to make it easily readable. Well, if you have a 1-column layout and define the page to be 1000px wide, that could make it hard for someone to read your content if they have their font reduced to 11px. But if you define it to be 60em (60 times the width of the capital letter "M"), then the width of the page will adjust to the size of the text.
Also, if you define a column to be 200px wide and someone enlarges their text because they have poor vision, chances are the text would pop right out of that column.
em is also good to use for letter-spacing and line-height, because % in that case does not refer to the percentage of the font size. You also don't want to use px for those either, because using px for letter-spacing can actually decrease the relational gap between characters if someone enlarges their text, and would make lines overlap if the text is enlarged enough.
Also, using em instead of px with margins and padding will help keep them consistent with the font size.
Of course, depending on the layout, you may need to stick with px.
Since it's a bit past my bedtime, I'll see if I can go through your CSS tomorrow. For now, the only thing that jumped out at me was seeing you using background-position where you have no background image to position.
Have a great night! 
|
|
5/14/2008, 9:09 pm
|
PM Lesigner Girl
Read Blog
|
TheScribe
Citizen
Worldly Traveler
Registered: 02-2003
Province: Sydney, Australia
Posts: 38
Karma: 0 (+0/-0)
|
|
Reply | Quote
|
|
Re: Fixing Messy Coding
Thank you for explaining the em thing. It makes so much sense now.
--- Speculative Realms: Where there's a will, there's a way
A collection of fantasy, science fiction and horror stories
Includes my story “Where Strength Lies”
Purchase now from http://www.speculativerealms.com |
|
5/14/2008, 10:29 pm
|
PM TheScribe
|
Lesigner Girl
Minerva
Worldly Traveler (premium)
Runboard staff member
Registered: 11-2005
Province: SW MI, USA
Posts: 5128
Karma: 89 (+103/-14)
|
|
Reply | Quote
|
|
Re: Fixing Messy Coding
You're welcome, Scribe. I'm glad I didn't confuse you like I tend to do to a lot of people. 
Now for the CSS. First, you have two errors:
The property horizontal-align doesn't exist, but you have it defined for .newind and .span.forumlistnewswitch.
Speaking of .newind, I don't see a class="newind" in your HTML for that to refer to.
div#post { ...
I also don't see a <div id="post"> in your HTML for div#post to refer to.
#content{
width: 760px;
text-align: left;
vertical-align: top;
margin-left: 160px;
background: white;
}
You can't vertically align content in a div like that. You can vertically align an image and certain other things within a line of text, but vertical-align: top; means nothing in this context.
#header {
background-position: center;
background-color:#FFFFFF;
width:760px;
height:212px;
margin-left: 160px;
}
As mentioned in my previous post, there is no need to define background-position on a background image that doesn't exist.
font-family:Arial, Helvetica, sans-serif;
font-size:75%;
font-weight: bold;
This can actually be shortened to:
font: bold 75% arial, helvetica, sans-serif;
When you use shorthand like this, order does matter (weight first, then size, then family).
0px can be shortened to just 0. Nothing is nothing whether you have no pixels, no percent, no em, etc. For example, you can change this:
padding: 0px 0px 6px 3px;
to this:
padding: 0 0 6px 3px;
Margins and padding that are equal on 2 or 4 sides can be shortened, for example, from margin: 0px 0px 0px 0px; to margin: 0;
Likewise, padding:0px 25px 0px 25px; can be shortened to padding: 0 25px;
CSS comments should always have a space after the opening punctuation and before the closing. For example:
--------------------------------------------------*/
would be better as (notice the space before the asterisk at the end):
-------------------------------------------------- */
#navigation .selected is looking inside the id of "navigation" for something with the class name of "selected". There is nothing in your HTML that has the class name of "selected".
Based on that full block of CSS you have:
#navigation .selected,
#navigation a:hover
{background-color:#979ed1}
I'm guessing you want #navigation a:active instead?
border-color:white;
border-right:1px solid white;
border-color:white; is redundant there.
letter-spacing:1px;
There's that letter-spacing thing I mentioned before. I like to use 0.125em instead, because a fixed 1px spacing could look weird if someone resizes their text.
That's all I saw when I read through your CSS. Note, there were a few occurrences of some of the things I pointed out, but I only chose one occurrence of each for examples. Overall, I think you did pretty good.
|
|
5/15/2008, 6:20 pm
|
PM Lesigner Girl
Read Blog
|
TheScribe
Citizen
Worldly Traveler
Registered: 02-2003
Province: Sydney, Australia
Posts: 38
Karma: 0 (+0/-0)
|
|
Reply | Quote
|
|
Re: Fixing Messy Coding
I'm going to work my way through your post and make the changes today.
The newind coding relates to the image that shows a new post has been made to a forum/thread. The code is in my language set. At first I thought I hadn't transferred it over from the "real" board, but when I checked the test board language set it is there. There used to be a bit of a glitch on the boards where this image wasn't centred vertically, which made it look weird. A lot of board owners added this coding to fix the problem. Do you know if this been dealt with now...within the actual Runboard coding? Can my extra coding be removed?
--- Speculative Realms: Where there's a will, there's a way
A collection of fantasy, science fiction and horror stories
Includes my story “Where Strength Lies”
Purchase now from http://www.speculativerealms.com |
|
5/15/2008, 7:36 pm
|
PM TheScribe
|
TheScribe
Citizen
Worldly Traveler
Registered: 02-2003
Province: Sydney, Australia
Posts: 38
Karma: 0 (+0/-0)
|
|
Reply | Quote
|
|
Re: Fixing Messy Coding
Lesigner Girl said:
font-family:Arial, Helvetica, sans-serif;
font-size:75%;
font-weight: bold;
This can actually be shortened to:
font: bold 75% arial, helvetica, sans-serif;
When you use shorthand like this, order does matter (weight first, then size, then family).
When I did this, it messed up the navigiation and footer bars (as well as the Post Reply and Add New Post sections of the board and the sidebar header). In IE6 the titles were not centred vertical and horizontal. Instead they were aligned to the top and the bottom half wasn't included in the hover colour change either. I could see the full height, but only the top half was recognised. I hope that makes sense. I've got flu and can't think straight.
Last revised by TheScribe, 5/15/2008, 10:40 pm
--- Speculative Realms: Where there's a will, there's a way
A collection of fantasy, science fiction and horror stories
Includes my story “Where Strength Lies”
Purchase now from http://www.speculativerealms.com |
|
5/15/2008, 10:37 pm
|
PM TheScribe
|
Lesigner Girl
Minerva
Worldly Traveler (premium)
Runboard staff member
Registered: 11-2005
Province: SW MI, USA
Posts: 5128
Karma: 89 (+103/-14)
|
|
Reply | Quote
|
|
Re: Fixing Messy Coding
The newind coding relates to the image that shows a new post has been made to a forum/thread. The code is in my language set. At first I thought I hadn't transferred it over from the "real" board, but when I checked the test board language set it is there. There used to be a bit of a glitch on the boards where this image wasn't centred vertically, which made it look weird. A lot of board owners added this coding to fix the problem. Do you know if this been dealt with now...within the actual Runboard coding? Can my extra coding be removed?
I can think of a way that would improve it imo, but it's not really a glitch as it stands. The elements that use the forumlistnewswitch and topiclistnewswitch classes just happen to be <span>s, which are inline elements. You can take your divs out of the custom language set, replace .newind in your CSS with .forumlistnewswitch, .topiclistnewswitch, and add display:block; to turn those two spans into block-level elements, which will make them behave like <div>s.
When I did this, it messed up the navigiation and footer bars (as well as the Post Reply and Add New Post sections of the board and the sidebar header). In IE6 the titles were not centred vertical and horizontal. Instead they were aligned to the top and the bottom half wasn't included in the hover colour change either. I could see the full height, but only the top half was recognised. I hope that makes sense. I've got flu and can't think straight.
Interesting. I didn't realize line-height was a font property (see list of font properties), but just discovered that the reason the navigation links weren't vertically aligned with the code I gave you is because it cancelled the line-height out.
When you use shorthand, any omissions from that shorthand is the same as defining a default behavior. For example, if you say:
background-color: #ffffff;
...and then later on you say:
background: url(blah_blah_blah) top left no-repeat;
...that just cancels out the background color, because it would be the same as saying:
background: transparent url(blah_blah_blah) top left no-repeat;
To incorporate the background color into the shorthand, you would use:
background: #ffffff url(blah_blah_blah) top left no-repeat;
I thought all "font" properties had to start with font-____ and didn't know it included line-height, but based on the above link I gave you, this would be why the shorthand was canceling out the line-height, just as the background-color is canceled out in the example I made up here.
Unless there was a typo in that line of shorthand, it shouldn't have messed up anything else but the line-height. In fact, I checked it in IE7 just to make sure, and the line-height in your navigation is the only thing that had changed. If you use the shorthand before line-height like this, it should work fine:
#navigation {
height:2.7em;
font: bold 75% arial, helvetica, sans-serif;
line-height:2.7em;
background-color:#7E82A7;
width: 760px;
background-position: center;
border-top:1px solid #2c3b4c;
border-bottom:1px solid #2c3b4c;
margin-left: 160px;
}
Here I used the shorthand, but then cancelled out the default line-height by defining it after the "font" shorthand instead of before. I couldn't figure out how to incorporate line-height into the font property itself, but this still shortens the CSS by 2 lines, in case you want to go this route.
Another thing I forgot to mention before, you should define a font for the overall body. I noticed right away that it wasn't defined because I have my browser default set to times new roman for the very purpose of checking for completeness. *whacks self upside the head*
|
|
5/16/2008, 5:47 pm
|
PM Lesigner Girl
Read Blog
|
Add to this discussion
Powered by AkBBS 0.9.5b - Link to us
- Blogs
- Hall of Honour
- Chat
Click here to get your own free message board
|
You are not logged in (login)
Board's time is: 12/1/2008, 7:36 pm EDT
|
|
|
