CSS - Please Read I Need Some Advice =)

I had posted in another thread about this but it's been awhile and I am not sure if that thread is still "alive" so to speak. Here is what I am after -

www.tmhdesign.com/buzza.jpg

Here are my attempts:

www.tmhdesign2.com

www.tmhdesign2.com/default2.asp

www.tmhdesign2.com/default3.asp

I have come close in IE but in Firefox it bombs. I can't fathom how that bottom background can be positioned so the text in the navigation and content divs can sit on top of it.

Hello,

Here's the site, it's being built on a CMS called Sitestaker.
http://www.mera.sitestacker.com

I can't for the life of me fix all the messed up positioning. here is my CSS. I used another CSS file from a previous site, so there are duplicates and who knows what else I am missing so I can easily lay this thing out. Where can get some CSS templates that I could use to start out a new site. the cms is using Cake PHP if that helps any. I am not a programmer and it is driving me nuts attempting to do the job of one. thanks for your help. I have managed with my other sites, but I can't fix this one. www.theinlan.com
Code:

body {
	
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	line-height: 16px;
	color: #666;
	background-color:#FF9933;
	margin: 10 10 10 10;
	
}

#header {
	background-color:#FFFFFF;
	margin-right: auto;
	margin-left: auto;
	width: 1000px;
	height: 133px;
	
	

	
}
#header_right{
		
	
}



#search {
	
	width: 150px;
	margin-left: 10px;
	float: right;
	
	
}

#header_container {
	background-color:#cc6600;
	width: 800px;
	margin-left: auto;
	margin-right: auto;
	
}

#header_wrapper {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	height: 133px;
	background-color: #cc6600;
	
	/*/#cc6600/*/
		
}


#menu_wrapper {
	width: 900px;
	/*/background:url(images/mera_slice_09.jpg) repeat-x;/*/
	
	margin-right: auto;
	margin-left: auto;
	
}

#menu {
	background-color:#333333;
	width: 900px;
	padding: 10px 0px 0px 0px;
	font-size: 14px;
	
	font-weight: bold;
	
	
}

#menu .item {
	
	float:left;
	width: 120px;
	margin-right: auto;
	margin-left: auto;
	height: 30px;
	padding-top: 13px;
	text-align:center;
	
	
}


#menu a {
	color: #666666;
	text-decoration:none;
	
}

#menu a:hover {
	color: #CCC;
	
}


#menu .main_menu {
	float:left;
}

#breadcrumbs {
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	font-family:Verdana, Geneva, sans-serif;
	font-size: 9px;
	color: #666;
	margin-left: auto;
	margin-right:  auto;
	width: 750px;
	
	
}


/*/#r1c1 {
	width: 100%;
	
	height: 38px;
}/*/

#r1c1 {
	background-color:#CC9966;
	
	/*/Dan's New Stuff/*/
	
	width: 180px;
	float:left;
	
	/*/ width: 800px;/*/
	/*/padding: 40px 0px 0px 20px;/*/
	font-size: 14px;
	margin:30px 10px 10px 10px;
	padding: 10px;
	/*/font-weight: bold;/*/
	
	
	
} 

#r1c1 .item {  /*/ controls positioning of menu items & text/*/
	
	width: 175px;
	height: 30px;
	
	text-align:middle;
	background:url(/data/sites/34/images/merabutton.png);
	background-repeat:no-repeat;
	padding:5px 0px 0px 0px; /*/controls positioning/*/
	
	
}

#r1c1 a { /*/ this is the menu font styling/*/
	color: #333333;
	text-decoration:none;
	padding:5px 0px 0px 10px;
	
}

#r1c1 a:hover {  /*/ this is the menu button hover color/*/
	color: #999999;
	
}


#r1c1 .main_menu {
	
}


#r1c2 {
	margin-left: auto;
	margin-right:  auto;
	width: 640px;
}

#r2c2 {
	padding: 15px 0px 15px 15px;
	margin-left: auto;
	margin-right:  auto;
	width: 700px;
	float: left;
}

#r3c2 {
	margin-left: auto;
	margin-right:  auto;
	width: 750px;
}

#r2 {
	width: 1000px;
	margin-left: auto;
	margin-right:  auto;
}

#r4 {
	width: 1000px;
	margin-left: auto;
	margin-right:  auto;
}

#r2c2 .title {
	
	font-size: 24px;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-weight: bold;
	line-height: 40px;
	
}
#content_area {
	background-color: #e6ebba;
	width: 1000px;
	margin-left: auto;
	margin-right:  auto;
	margin-bottom: 0px;
	
	
}
#content_bg { /*/ white content area with dropshadow edges/*/
	width: 1275px;
	
	margin-left: auto;
	margin-right:  auto;
	background: url(images/me) repeat-y ;
	/*/height: 1000px;/*/
/*/padding-left: 40px;
	padding-right: 45px;
	}
	/*/

#mainpositions{    /*/ look at tables created in index to see how it was done
						tables ,once formatted work the best to hold together 
						two column layout accross browsers./*/
	width:900px;
	margin-left: auto;
	margin-right:  auto;
	
	}

#footer_wrapper {
	/*/
	background:url(images/mera_slice_02.jpg) repeat-y;
	width: 100%;
	margin-top: 0px;
	position: bottom;
	/*/
}

#footer {
	background:url(/data/sites/34/images/footer.png) repeat-x;
	/*/width: 100%;/*/
	margin-left:auto;
	margin-right:auto;
/*/	color: #FFF9933; 
	text-align:center;
	padding-top: 30px;/*/
	height:369px;
	
}

#r3c1 {
	
	padding: 10px 10px 10px 10px;	
	
}

#r2 {
	
	
}

.cells {
	padding: 10px 10px 10px 10px;	
	vertical-align: top;
	text-align: left;
}


#menu .style .menu .submenu_item {

	background: url(images/dropdown.png) repeat-x;

	height:27px;
	text-align: left;
	font-size: 12px;

	padding-left:10px;
	padding-right:14px;
	padding-top: 10px;
	width: 900px;
	cursor: pointer;


}

#menu .style .menu .submenu_item_children {

	
}

#menu .style .menu .submenu_item:hover{

	color: #ccc;

}

#menu .style .menu .submenu_item:hover > div > a{

	color: #CCC;

}

#menu .style .menu .submenu_item a {

	text-decoration:none;

	color:#6699FF;

}

.submenu_item, .submenu_separator {

	display:none;

	position:absolute;

}

HERE IS THE INDEX FILE

PHP 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=utf-8" />
<title>{{PAGE_TITLE}}</title>
<base href="{{BASEHREF}}" />
<link href="{{CSS_HREF}}" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript" src="{{JS_SRC}}" ></script>
<style type="text/css">
<!--
body {
    margin-left: auto;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
}
-->
</style>
<meta name="verify-v1" content="mQhyWuqXn58ls4L3sIdz1oujvxtwMSi8YIWGW8HPAGg=" />
{{HEAD}}
</head>
<body>

<div id="header_wrapper">
<div id="header_container">

    <div id="header" tpl_position="header">{{HEADER}}</div>
    <div id="header_right" tpl_position="header_right">{{HEADER_RIGHT}}</div>
    <div id="search" tpl_position="search">{{SEARCH}}</div>
</div>
</div>
<div id="menu_wrapper">
    <div id="menu" tpl_position="menu">{{MENU}}</div>
</div>

<div id="content_area">

<table id="content_bg" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>


<div id="breadcrumbs" tpl_position="breadcrumbs">{{BREADCRUMBS}}</div>


<div id="r1c1" tpl_position="r1c1">{{R1C1}}</div>


<div id="r2c2" tpl_position="r2c2">{{R2C2}}</div>
 
<div id="r3c2" tpl_position="r3c2">{{R3C2}}</div>
  </td></tr>
</table>
</div>

<div id="footer_wrapper">
<div id="footer" tpl_position="footer">{{FOOTER}}</div>
</div>


</body>
</html> 

Hello,

I am working on a web site with a two column layout, "Content" on the left and "Sidebar" on the right.

Sidebar
1) Sidebar is divided into sections (div). Each section has header.

Content
Content can display the following data (each is a different page):

2) In HomePage.html a list of blog articles is displayed. Each blog article has a title.

3) In ShowArticle.html a specific article is displayed (Title, Body, Tags).

4) In Documents.html a list of documents is displayed but in this case the page
has a title and a subtitle. For example:

Documents
here you can find all the documents you need.

5) In Contact.html a title with subtitle is displayed just as in (4).
After the title and subtitle there is only paragraphs with the contacts.

So basically that's it ... I am trying to figure the correct way to use <h1>, <h2>, etc.

The text font, weight and color is always the same ... what changes is the size.

For example, if in HomePage the Post Header could be <h1> because there is no page title, in Documents there is a page title and a subtitle (should be this a paragraph? it's more like a description phrase then a section separator). So in Documents each Document could have <h3> ...

And if there is a Page Title (h1) then should side bar have <h2>? I suppose it is more correct to be h1.Sidebar.

And in ShowArticle I am displaying one article. Should I use the <h1> in the title? Then it would be the same tag then in Sidebar section ...

I have been looking in a few web sites and blogs and they differ ...

Anyway, I am just trying to make this right ...

Any help is welcome.

Thanks,
Miguel

I am having problems with my footer once I resize my to make my page have to scroll left to right. It displays fine until I do this. It makes my footer background not display all the way.



Here is my css for reference:


Code:

.footerWrapper {
	margin: 20px 0 0 0;
	padding: 0;
	width: 100%;
	background: url(../images/content123bg.png) repeat-x;
}
.footer {
	margin: 0 auto;
	padding: 0;
	width: 960px;
	height: 155px;
}
.footer img {
	margin: 10px 0 0 0;
	float: right;
}
.footer h3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: normal;
	color: #09F;
	text-decoration: none;
	text-align: center;
	padding: 10px 0 10px 0;
	margin: 0;
	width: 145px;
}
h3.facts {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: normal;
	color: #09F;
	text-decoration: none;
	text-align: center;
	padding: 10px 0 10px 0;
	margin: 0 0 0 -3px;
	width: 145px;
}
.footer p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	color: #CCC;
	text-decoration: none;
	text-align: center;
	width: 140px;
	margin: 0 0 0 2px;
	padding: 0 0 5px 0;
}
.footer p a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-style: normal;
	font-weight: normal;
	color: #999;
	text-decoration: underline;
}
.footer p a:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-style: normal;
	font-weight: normal;
	color: #FFF;
	text-decoration: none;
}

#twitter_t {
	margin: 0;
	padding: 0;
}
#twitter_t img {
	width: 150px;
	height: 50px;
	margin: 0;
	border: none;
	padding: 0 230px 0 0;
	/* [disabled]float: left; */
	position: relative;
}
 
#twitter_m {
	width: 370px;
	padding: 0 10px 0 0;
	background:url(../images/twiiterbubble.png) no-repeat;
	float: right;
	height: 140px;
	margin: -40px 0 0 0px;
	border: none;
}
 
   #twitter_container {
	min-height:45px;
	height:auto !important;
	height:40px;
	padding-bottom:10px;
	/* [disabled]padding-right: 10px; */
   }
 
       #twitter_update_list {
	width: 350px;
	padding: 0 0 0 20px;
	overflow: hidden;
	font-family: Georgia;
	font-size: 14px;
	font-style: italic;
	color: #000;
	line-height: 16px;
	font-weight:bold;
       }
 
       #twitter_update_list li {
	width: 350px;
	list-style: none;
	margin: 60px 0 0 0;
       }
 
       #twitter_update_list li a {
	color: #FFF;
	border-bottom: dotted 1px;
	text-decoration: none;
       }
       #twitter_update_list li a:hover {
	color: #09f;
       }

Here is my HTML:

Code:

 <div class="footerWrapper">
  <div class="footer">
  <div class="fltlft">
  <h3>Quick Links</h3>
  <p><a href="http://www.beckin.com/">Home</a></p>
    <p><a href="http://www.beckin.com/portfolio.html">Portfolio</a></p>
    <p><a href="http://www.beckin.com/css-menus.html">CSS Menus</a></p>
  <p><a href="http://www.beckin.com/free-templates.php">Templates</a></p>
</div><!-- end fltlft -->

<div class="fltlft">
  <h3>Help</h3>
  <p><a href="http://www.beckin.com/support/">Custom Quotes</a></p>
    <p><a href="http://www.beckin.com/support/">Support</a></p>
  <p><a href="http://www.beckin.com/support/">Webmasters</a></p>
</div><!-- end fltlft -->

<div class="fltlft">
  <h3 class="facts">Facts</h3>
  <p><a href="#">Privacy Policy</a></p>
    <p><a href="#">Terms of Use</a></p>
</div><!-- end fltlft -->

<div id="twitter_t">
<a href="http://twitter.com/beckindesigns"><img src="images/top.png" alt="free web templates" /></a>
</div><!-- end twitter_t -->
<div id="twitter_m">
   <div id="twitter_container">
       <div id="twitter_update_list"></div>

  <!-- end .twitter_container --></div>

  <!-- end .twitter_t --></div>

<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/beckindesigns.json?callback=twitterCallback2&count=1" type="text/javascript"></script>

  
    <!-- end .footer --></div>
  <!-- end .footerWrapper --></div>

Any help with this would be very appreciated.

Hi all, just begun on the path of learning CSS and a little advice needed. I am experimenting with an image and thought it would be easy to animate my banner pic with a flash animation, but its not.

Basically I have a transparent GIF image rather like a picture frame with irregular inside edges. I want the flash animation to show in the centre, ie so that the gif image overlays it and parts are hidden by the jagged edges of the gif.

I thought this would be simple to achieve with what I have picked up so far but not so!

Could someone let me know how to achieve this.

EDIT- sorry should have made it clearer, this is two images, one over the other.

Hello,

I am creating a form that includes a few JQuery scripts and TinyMCE Editor:
http://www.27lamps.com/Beta/Form/Form.html

I am having a few problems with my CSS:

1. Restyling the Select

(a) When using IE the Drop Down List is on the right instead of on the bottom;
(b) The current item in the list should have a different background color;

(Please check the select on the bottom of the page to check these 2 items working fine.
In this case I used a different class)

2. Error messages

Please, submit the form. After the Name input you will get a error message.
How can I make this message to not expand and still have the padding?
And also having the text aligned left.

One problem I am having with my form is every time I use a list inside my form somethings get "broken".
This is because the form is using a list.

What should be the best way to counteract the styles of the form list into a child list?

Any suggestion to improve my form CSS would be great.

Thanks,
Miguel

http://www.beckin.com
http://www.bestdropshipper.net

I just recently updated my firefox to the most available version. This firefox version absolutely sux. I don't know why all these browsers have to keep causing trouble for designers.

You will notice that my css style for Beckin Designs no longer works.

Code:

<style type="text/css">
@font-face {
	font-family: English;
    font-weight: normal;
	src: url(fonts/English_.ttf);
}
</style>

If you view this site in other browsers or the firefox version previous to the latest release you will notice it displays fine. However, not in the new firefox.

Next, the best dropshipper menu doesn't display correctly either.

How can I go about fixing these issues? Do I need to do some time of if statement. Please let me know exactly how to address these issues.

Thanks!!

Hello,

I'm a self taught web designer, i've not really got much experience of CSS and i'm having a few issues with some alignment.

I'm in the process of developing a site for my cousin, what i'm trying to achieve is the left menu to be at the top of the page, and the text to be in the center of the screen, as i'm new here i'm not able to post a link to my site, so have posted the CSS below.

Playing with css and looking at Google I've padded the text so its where i want it, but i can't get the menu to come up from below the text.

Any help / links in the right direction would be really appreciated.

Code for the text:
Code:

p.mainbody
{ 
z-index: 1000; 
vertical-align:top; 
padding-left: 200px; 
padding-right: 250px; 
text-align:left;

code for the menu:
Code:

/* The outermost container of the Menu Bar, a fixed width box with no margin or padding */ 
ul.MenuBarVertical 
{ 
vertical-align:top; 
margin: 0; 
padding: 0; 
list-style-type: none; 
font-size: 100%; 
cursor: default; 
width: 10em; 
/*height:10em;*/ 
} 
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */ 
ul.MenuBarActive 
{ z-index: 1000; } 
/* Menu item containers, position children relative to this container and are same fixed width as parent */ 
ul.MenuBarVertical li 
{ 
margin: 0; 
padding: 0; 
list-style-type: none; 
font-size: 100%; 
position: relative; 
text-align: left; 
cursor: pointer; 
width: 10em; 
} 
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */ 
ul.MenuBarVertical ul 
{ 
margin: -5% 0 0 95%; 
padding: 0; 
list-style-type: none; 
font-size: 100%; 
position: absolute; 
z-index: 1020; 
cursor: default; 
width: 8.2em; 
left: -1000em; 
top: 0; 
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */ 
ul.MenuBarVertical ul.MenuBarSubmenuVisible { left: 0; } 
/* Menu item containers are same fixed width as parent */ 
ul.MenuBarVertical ul li { width: 8.sem; } 
/******************************************************************************* DESIGN INFORMATION: describes color scheme, borders, fonts *******************************************************************************/ 
/* Outermost menu container has borders on all sides */ 
ul.MenuBarVertical { border: 1px solid #CCC; } 
/* Submenu containers have borders on all sides */ 
ul.MenuBarVertical ul { border: 1px solid #CCC; } 
/* Menu items are a light gray block with padding and no text decoration */ 
ul.MenuBarVertical a 
{ 
display: block; 
cursor: pointer; 
background-color: #EEE; 
padding: 0.5em 0.75em; 
color: #333; 
text-decoration: none; 
} 
/* Menu items that have mouse over or focus have a blue background and white text */ 
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus 
{ 
background-color: #33C; 
color: #FFF; 
} 
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */ 
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible 
{ 
background-color: #33C; 
color: #FFF; 
} 
/******************************************************************************* SUBMENU INDICATION: styles if there is a submenu under a given menu item *******************************************************************************/ 
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */ 
ul.MenuBarVertical a.MenuBarItemSubmenu 
{ 
background-image: url(SpryMenuBarRight.gif); 
background-repeat: no-repeat; 
background-position: 95% 50%; 
} 
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */ 
ul.MenuBarVertical a.MenuBarItemSubmenuHover 
{ 
background-image: url(SpryMenuBarRightHover.gif); 
background-repeat: no-repeat; 
background-position: 95% 50%; 
} 
/******************************************************************************* BROWSER HACKS: the hacks below should not be changed unless you are an expert *******************************************************************************/ 
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */ 
ul.MenuBarVertical iframe 
{ 
position: absolute; 
z-index: 1010; 
filter:alpha(opacity:0.1); 
} 
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */ 
@media screen, projection 
{ 
ul.MenuBarVertical li.MenuBarItemIE 
{ 
display: inline; 
float: left; 
background: #FFF; 
} 
}

Many Thanks

Hi,

Im interseted in creating V.3.0 of my site in a css valid layout using Div's and Xhtml compliant code. I am vaguely familiar with this practice, however would like some preliminary feedback and advice on how to go about doing it.

Here's a preliminary screenshot of my site in jpg. format, thanks.

http://uberserver.ath.cx/~rohan/PS1.0.jpg

Here's the main site (v.2.0) if you're interested.

http://www.ubertropolis.tk

Thank you!

I am working on converting my site (http://www.thejokejukebox.com ) from html to css/xhtml . I am working on the header image. I've used Photoshop's image slicing routine to cut the photoshop image into smaller pieces and have outputted the css code for the images.

While this is mostly fine, Photoshop outputs css using absolute positioning. My goal is to have the header graphic displayed centered regardless of the screen resolution of the user. This is how the site appears now using html. On either side of the centered image is a filler graphic (bg.gif) that is repeated in x only.

What approach should I take to accomplish this look in css? I've read a bit on using floating divs . Is this the route I should be looking at? If so, can someone give me a rough idea on how I can position the individual images to make the continous graphic within the floating div?

As you can tell, I am very green when it comes to CSS, so your patience and time is appreciated.

On two pages of my site:
mileswright . com/?page_id=324
and
mileswright . com/?page_id=331

it seems that part of the CSS file is being ignored. If you look at any of the other team members such as:
mileswright . com/?page_id=334

you will see that the content div has padding being applied to it. In the first two pages though, the content div is being ignored. I'm really at a loss as to why this is happening. If anyone can shed some light on it I would be very grateful!

(I apologize for the links not working but since I am a new poster I can't post links, but I figure that it would be pretty worthless if I didn't give links.)

Obviously something is just not clicking for me. I've spent almost all day reading, and everyone makes it sound so darn easy!

I have 2 basic problems, and it doesn't seem like they should be that hard to fix.

The test site is at
lgs.lambrite.com/test.htm and the stylesheet is lgs.lambrite.com/new.css

Problem 1. For the life of me, I cannot get the link that says "Skip To Content" to accept the more specific set of link colors. I have tried every variation I can think of, with no luck.
Code:

<div id="subnav0" style="position:absolute; width:769px; height:22px; z-index:3; top: 192px; visibility: visible;" 
class="subnav"><a href="#content">Skip to Content</a></div>

Code:

.subnav #subnav0 a:link a:visited a:hover a:active {
color: #343457;
text-decoration: none;
}

My second issue is a little more complicated. Right now, all my layers have their positions hard-coded. This means that the content area is fixed in height, and I need it to be able to expand to accomodate the text. I did this because I was not able to (figure out how to) place the many subnav layers in the same position to do the rollovers, the wrapper would not expand properly, and the footer would not regularly start below the end of the content.

Even a good example of a similar layout would be helpful; everything that I find uses 2-3 columns, float and the clear property.

I really want to understand this stuff, but if I don't figure this one out in a few days, I'm going to have to use tables and learn it the next time around. So I really appreciate any input. Thanks!

Sarah

Hi everyone I was thinking about making a navigation which when an element was clicked on it would show (display:block) subsections of that element which would then be the end links. Until a navigation section was clicked on its relavent block would be set to display:none.

My question is does / will google and others have a problem with this or would they be able to understand a link which would be like the following:

<a href="#" onClick="idofelement.style.display=block">
and then would they be able to follow the regular links which this link creates.

Thank you for your help.

I was quite proud of that title, especially at 4 minutes past monday. Anyway - I digress.

I am trying to create a scrolling news-type box using a div which is clipped so it looks like it scrolls up and down inside a 'window'. I have not declared what height i want the scrolling div to be as i never know how much text will be in it.

When you scroll all the way to the bottom, I want there to be a way so that it stops scrolling - and for this i need the height of the div.

Is there anyway of finding the height at all, or will i have to use a fixed height div.

If my explanation is a touch wooly, the prototype page is here

http://www.mortivica.com/moonrakers - the nav menu displays differently in IE and FF

Here is the css:

Code:

#menu {
 float: left;
 width: 100%;
 text-align: center;
 margin: 0px auto;
 padding: 0px;
 display: inline;
}

ul {
 text-align: center;
 margin: 0 auto;
 padding: 0;
 display: inline;
}

li {
 float: left;
 padding: 10px;
 margin: 0 auto;
 border: 1px solid black;
 background: #333;
 list-style-type: none;
 display: inline;
 width: 10.84%;
}

li a {
 padding: 0;
 width: 69.9px;
}

li:hover {
 background: #000;
}

menu is a containing div.

Whats wrong????

Thanks in advance.