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

Code:

<!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>

Code:

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

Originally Posted by bomfonk

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.

Originally Posted by bomfonk

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

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

HTML Code:

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

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

HTML Code:

<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

Originally Posted by Medyman

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"

HTML Code:

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

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

HTML Code:

<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

Originally Posted by bomfonk

Thank you, do you have a suggestion on how to fix my menu issue?

I c it works fine

**rangana** · 03-14-2008, 01:45 AM

Hi bombfonk,
See this ammendments:

Code:

#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!

Originally Posted by rangana

Hi bombfonk,
See this ammendments:

Code:

#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

Thread: General CSS questions and menu issue

Thread Tools

Search Thread

General CSS questions and menu issue

The Following User Says Thank You to rangana For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions