Log in

View Full Version : General CSS questions and menu issue


bomfonk
03-13-2008, 09:45 PM
First some general things I've been wondering about:

1. What is the best way to set font size? And what should it be set to? I've seen websites with body font size as 100% and others 70%.

2. What's the difference in using ul#id or #id ul?

3. Why is Opera text always seem to come out smaller then IE and Firefox?

4. When should lists be used? Footers, links, or just plain old lists?

If you have any tips or tricks when using CSS please let me know.

On to my menu question:

I have the following menu, and it works just fine in Firefox however in IE and Opera the right border isn't displayed properly(the left padding isn't applied)

What is the best way to do and fix this type of thing?

URL: http://testwebsite54.bravehost.com/index.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="testcss.css" rel="stylesheet" type="text/css" />
</head>

<body>
<ul id="ala">
<span class="border">1</span>
<li>lorem</li>
<span class="border">2</span>
<li>ispum</li>
<span class="border">4</span>
<li>alabala</li>
</ul>
</body>
</html>



ul#ala {
margin-top: 11px;
font-size: 90%;
line-height: 20px;
}
#ala li {
padding-left: 6px;
}
.border {
float: left;
color: #666666;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #D8D8D8;
padding-right: 6px;

}
ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
Medyman
03-13-2008, 10:03 PM
1. What is the best way to set font size? And what should it be set to? I've seen websites with body font size as 100% and others 70%.


Well, this depends on how you're setting font size for the rest of your document. You can use percentages, EMx, pixels (px) and point sizes (pt). Each have their pros and cons, mostly related to accessibility.

Setting a percentage will allow you to have relatively uniform sizes across browsers. So, it depends on your design and your goals.

Here (http://www.dave-woods.co.uk/?p=79) are some thoughts on that whole issue and some recommendations as well.




What's the difference in using ul#id or #id ul?


ul#id is a unordered list with an id of "id"


<ul id="id">
<li>List Item</li>
</ul>

#id ul is an unordered list within an element with an id of "id"


<div id="id">
<ul>
<li>List Item</li>
</ul>
</div>



Why is Opera text always seem to come out smaller then IE and Firefox

Again, this depends on what unit your using for sizing and also what the browser's settings are.

You might want to look at the Yahoo UI Libraries to see how to normalize fonts across browsers:

http://developer.yahoo.com/yui/fonts/
http://developer.yahoo.com/yui/reset/



When should lists be used? Footers, links, or just plain old lists

It depends on your need for them. There isn't a right/wrong way. CSS Menus utilize unordered lists. Of course, when create lists.
bomfonk
03-13-2008, 10:28 PM
Well, this depends on how you're setting font size for the rest of your document. You can use percentages, EMx, pixels (px) and point sizes (pt). Each have their pros and cons, mostly related to accessibility.

Setting a percentage will allow you to have relatively uniform sizes across browsers. So, it depends on your design and your goals.

Here (http://www.dave-woods.co.uk/?p=79) are some thoughts on that whole issue and some recommendations as well.




ul#id is a unordered list with an id of "id"


<ul id="id">
<li>List Item</li>
</ul>

#id ul is an unordered list within an element with an id of "id"


<div id="id">
<ul>
<li>List Item</li>
</ul>
</div>




Again, this depends on what unit your using for sizing and also what the browser's settings are.

You might want to look at the Yahoo UI Libraries to see how to normalize fonts across browsers:

http://developer.yahoo.com/yui/fonts/
http://developer.yahoo.com/yui/reset/




It depends on your need for them. There isn't a right/wrong way. CSS Menus utilize unordered lists. Of course, when create lists.

Thank you, do you have a suggestion on how to fix my menu issue?
Spiritvn
03-13-2008, 11:53 PM
Thank you, do you have a suggestion on how to fix my menu issue?

I c it works fine :confused:
rangana
03-14-2008, 01:45 AM
Hi bombfonk,
See this ammendments:


#ala {
margin-top: 11px;
font-size: 90%;
}
ul li {
line-height: 20px;
}
.border {
float: left;
color: #666666;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #D8D8D8;
padding-right: 6px;
margin-right:6px;

}
ul
{
margin: 0px;
padding: 0px;
list-style-type: none;
}


See if it helps ;)
bomfonk
03-14-2008, 04:22 AM
Perfect, thank you!


Hi bombfonk,
See this ammendments:


#ala {
margin-top: 11px;
font-size: 90%;
}
ul li {
line-height: 20px;
}
.border {
float: left;
color: #666666;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #D8D8D8;
padding-right: 6px;
margin-right:6px;

}
ul
{
margin: 0px;
padding: 0px;
list-style-type: none;
}


See if it helps ;)