CSS - Should I Change The Layout?

I am working on the new home page which is based on a template.

The left sideColumn is working fine, however I am having a few problems with the mainColumn layout.

Here is a static image to show what I want it to look like

Here are the problems I am having:

1) The #scroll box is place where I want it in IE but in foxfire it is right up against the left side of the #sideColumn partially hidden.

There will be text that scrolls into this box and stops. I haven't started on the part yet - in case that makes a difference. Not my choice, but that is what the bosses want.

2) I want the image centered horizontal within the #mainColumn. Here is what I have for the css:

#home img {
margin: 5px auto 5px auto;
}

which I thought would do the trick, but it's not.

3) I want the p text to have a 40px margin on the right and left side like the .large does.

Here is what I have for the css:

#home p, .large {
margin: auto 40px auto 40px;
}

It works for the .large (Welcome to Vitalograph), but not for the text below it. At one point I had it working, but after addtional changes fixing other problems, now it doesn't and I can't figure out why.

Here is the xhtml starting at the 2 column part (wrapper): Code:

  	<!--begin wrapper-->
  	<div id="wrapper">
  
  	<!--begin side column -->
  	<div id="sideColumn">
        <span class="category">Products</span>
    <ul>
		<li><a href="/products/spirometers.html">Spirometers</a></li>
		<li><a href="/products/clinical_trials.html">Clinical Trials</a></li>
		<li><a href="/products/asthma_copd.html">Asthma & COPD</a></li>
		<li><a href="/products/smoking_cessation.html">Smoking Cessation</a></li>
		<li><a href="/products/resuscitaion.html">Resuscitation</a></li>
	</ul>
	
	<span class="category">Resources</span> 
    <ul>
      <li><a href="/resources/contact_us.html">Customer Support</a></li>
	  <li><a href="/resources/training_services.html">Training & Services</a></li>
      <li><a href="/resources/exhibitions.html">Exhibitions</a></li>
      <li><a href="/resources/newsletters.html">Newsletters</a></li>
      <li><a href="/resources/downloads.html">Downloads</a></li>
      <li><a href="/resources/useful_links.html">Useful Links</a></li>
      <li><a href="/resources/industry_information.html">Industry Information</a></li>
	  <li><a href="/resources/industry_information.html">Sitemap</a></li>
	</ul>
  </div>
  <!--end of side column -->
  
  <!--begin main column -->  
  <div id="mainColumn">
  
  	<!-- InstanceBeginEditable name="Main_Section" -->
  
  
  
    <div id="home">	
        <div id="scroll"><span>scrolling news will go hear and stop</span></div>
		
        <img src="/images/boys_bubbles.gif" width="485" height="333" alt="boys and bubbles" />
	
		<span class="large">Welcome to Vitalograph</span>
		
		<p>Vitalgraph offers a wide range of spirometers along with other asthma 
          management equipment with over 40 years experience. From simple hand-held 
          units to sophisticated Windows based spirometry systems, we have it 
          all. Check out our full line of respiratory equipment under the product 
          category.</p>
		
		
      <p><a href="/about_us/about_us.html">more about us...</a></p>
		
		
	</div>
  
  
  <!-- InstanceEndEditable -->
  
  </div>
  <!--end of main column -->
  
  </div> 
  <!--end of wrapper--> 

Here is the vitalograph_master.css: Code:

body {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: center;
	background-color: #ffffff;
	color: #515151;
	margin:0px;
	padding:10px;
}

/*page container settings*/

#page {
	width: 750px;
	height: 600px;
	border: 1px solid #5094F9;
	background-color: #FFFFFF;
	overflow: hidden;
	margin: auto;
	padding: 10px 10px 10px 10px;
	text-align: left;
}

/*logo header and tag settings*/
	
#header {	
	margin: 0;
	padding-bottom: 5px;
	width: 450px;
	height: 36px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	text-align: left;
}

#header img {
    vertical-align: -7px;
    }

.tagline {
	color: #5094F9;
	font-size: 16;
	font-style: italic;
	font-weight: bold;
	display: inline;
	clear: both;
	line-height: 20px;
	margin-left: 10px;
}

/*top bar settings*/

#topbar {
	float: top;
	height: 20px;
	background-color: #5094f9;
	clear: both;
	padding-left: 10px;
	text-align: left;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
}

#topbar a:link, #topbar a:visited {
	background-color: inherit;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
}

#topbar a:hover, #topbar a:active {
	background-color: #FFFFFF;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

#topbar ul {
	list-style: none;
	margin: 0;
	padding-top: 2px;
}

#topbar li {
	display: inline;
	margin-right: 160px;
}

/*Main Section two columns under top section*/

#wrapper{
	padding: 10px 10px 10px 0px;
	width: 100%;
	height: 100%;
}

#sideColumn {
	float:left;
	width:155px;
	height: 78%;
	background-color: #5094F9;
	padding-top: 50px;
	padding-left:10px; 
	padding-bottom:10px;
	pading-right: 10px;
	margin-right: 10px;
	text-align: left;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-weight: bold;
	line-height: 20px;
}

.category {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 5px;
}

#sideColumn a:link, #sideColumn a:visited {
	background-color: inherit;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
}

#sideColumn a:hover, #sideColumn a:active {
	background-color: #FFFFFF;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

#sideColumn ul {
	list-style: none;
	padding: 15px 0px 15px 10px;
	margin: 0px;
}

#mainColumn {
	padding: 0px;
}

/*footer*/

.footer {
	font-family: "Times New Roman", Times, serif;
	font-size: 9px;
	color: #999999;
}

/*text*/

.large {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 15px;
}

Here is the home.css: Code:

/*home page*/

#home {
	margin: auto;
}

#home img {
	margin: 5px auto 5px auto;
}

#home p, .large {
	margin: auto 40px auto 40px;
}

#home a:link, #home a:visited {
	background-color: inherit;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

#home a:hover, #home a:active {
	background-color: inherit;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #990099;
	font-size: 12px;
	font-weight: bold;
}

#scroll {
	width: 560px;
	padding: 5px;
	background-color: inherit;
	border: 1px solid #5094F9;
	margin-bottom: 5px;
}

Any help or suggestions are greatly appreciated.

Hi there and thanks for reading & helping! I am new to this site, but here is my question:

I need to build about a 20 page website. I have been told I should do the "layout" for each page using CSS. Is it possible for each page to "link" to one CSS file for layout instructions? I have found suitable CSS layout templates but am unsure how to link each page to the external CSS file for a basic "header, 2 column, footer" layout, or if it is even possible?

The page is http://cannons.dsl.xmission.com/index.html I am having problems making the footer go to the bottom what do I need to change to make it work?

Thanks

i have a problem with my css layout for wordpress, please help me.

in this page: http://rohitkumar.org/blog/index.php?p=29#comments

1. the comment div doesnt have a 10px margin
2. the leave ur comment heading is rite aligned ( i want it to be left aligned)
3. the title of the comment input field is not aligned with the form field
4. users with a non 1024X768 resolutions see the page differently, is there anyway this can be fixed?

index.php:

Code:

<?php 
/* Don't remove this line. */
require('./wp-blog-header.php');
?>
<!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 profile="http://gmpg.org/xfn/1">
	<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
	
	<meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo('charset'); ?>" />
	<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->

	<style type="text/css" media="screen">
		@import url( <?php echo get_settings('siteurl'); ?>/wp-layout.css );
	</style>
	
	<link rel="stylesheet" type="text/css" media="print" href="<?php echo get_settings('siteurl'); ?>/print.css" />
	<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
	<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
	<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
	
	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    <?php wp_get_archives('type=monthly&format=link'); ?>
	<?php //comments_popup_script(); // off by default ?>
	<?php wp_head(); ?>
</head>

<body>
<div id="rap">
<h1 id="header"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>

<div id="content">
<?php if ($posts) : foreach ($posts as $post) : start_wp(); ?>

<?php the_date('','<h2>','</h2>'); ?>
	
<div class="post">
	 <h3 class="storytitle" id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link: <?php the_title(); ?>"><?php the_title(); ?></a></h3>
	<div class="meta"><?php _e("Filed under:"); ?> <?php the_category() ?> — <?php the_author() ?> @ <?php the_time() ?> <?php edit_post_link(); ?></div>
	
	<div class="storycontent">
		<?php the_content(); ?>
	</div>
	
	<div class="feedback">
            <?php wp_link_pages(); ?>
            <?php comments_popup_link(__('Comments (0)'), __('Comments (1)'), __('Comments (%)')); ?>
	</div>
	
	<!--
	<?php trackback_rdf(); ?>
	-->

<?php include(ABSPATH . 'wp-comments.php'); ?>
</div>

<?php endforeach; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
</div>



<div id="menu">

<ul>
	<?php get_links_list(); ?>
 <li id="categories"><?php _e('Categories:'); ?>
	<ul>
	<?php wp_list_cats(); ?>
	</ul>
 </li>
 <li id="search">
   <label for="s"><?php _e('Search:'); ?></label>	
   <form id="searchform" method="get" action="<?php echo $PHP_SELF; ?>">
	<div>
		<input type="text" name="s" id="s" size="15" /><br />
		<input type="submit" name="submit" value="<?php _e('Search'); ?>" />
	</div>
	</form>
 </li>
 <li id="archives"><?php _e('Archives:'); ?>
 	<ul>
	 <?php wp_get_archives('type=monthly'); ?>
 	</ul>
 </li>
 <li id="calendar">
	<?php get_calendar(); ?>
 </li>
 <li id="other"><?php _e('Other:'); ?>
	<ul>
		<li><a href="<?php echo get_settings('siteurl'); ?>/wp-login.php"><?php _e('Login'); ?></a></li>
		<li><a href="<?php echo get_settings('siteurl'); ?>/wp-register.php"><?php _e('Register'); ?></a></li>
	</ul>
 </li>
 <li id="meta"><?php _e('Meta:'); ?>
 	<ul>
		<li><a href="<?php bloginfo('rss2_url'); ?>" title="<?php _e('Syndicate this site using RSS'); ?>"><?php _e('<abbr title="Really Simple Syndication">RSS</abbr> 2.0'); ?></a></li>
		<li><a href="<?php bloginfo('comments_rss2_url'); ?>" title="<?php _e('The latest comments to all posts in RSS'); ?>"><?php _e('Comments <abbr title="Really Simple Syndication">RSS</abbr> 2.0'); ?></a></li>
		<li><a href="http://validator.w3.org/check/referer" title="<?php _e('This page validates as XHTML 1.0 Transitional'); ?>"><?php _e('Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr>'); ?></a></li>
		<li><a href="http://wordpress.org/" title="<?php _e('Powered by WordPress; state-of-the-art semantic personal publishing platform.'); ?>">WP</a></li>
	</ul>
 </li>

</ul>

</div>

</div>

<p class="credit"><!--<?php echo $wpdb->num_queries; ?> queries. <?php timer_stop(1); ?> seconds. --> <cite><?php echo sprintf(__("Powered by <a href='http://wordpress.org' title='%s'><strong>WordPress</strong></a>"), __("Powered by WordPress, state-of-the-art semantic personal publishing platform")); ?></cite></p>
</body>
</html>

wp-layout.css:

Code:

/*
    VerySimple - Style for Wordpress
    by Gary Rogers (gary.rogers@dmin.net)
    
    Licensed under the Creative Commons License
    (http://creativecommons.org/licenses/by/2.0/)
    
    ** NOTE **
    Not all Styles are used here, but they all exist in Alex's sample
    page, so they remain for reference.
*/

body {
    margin: 0px;
    padding: 0px;
    font-family: 'Georgia';
    font-size: 12pt;
}

blockquote {
    margin-left: 20px;
    color: #000;
}

a img {
    border: none;
}

code {
    font-family: Monaco, 'Courier New', Courier, monospace;
    font-size: 10pt;
    color: #000;
}

h2 {
    font-size: 12pt;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
    color: #000;
    text-align: right;
}

#rap {
    width: 900px;
    margin-left: 25px;
    margin-right: 25px;
}

#header {
    font-size: 36pt;
    font-weight: bold;
    text-align: center;
    margin-bottom: 40px;
}

#header a {
    text-decoration: none;
    color: #000;
}

#header a:hover {
 text-decoration: underline;
}

#content {
    width: 725px;
}

.post {
    border: 1px solid #000;
    margin: 25px;

}

.storytitle {
    font-size: normal;
    font-weight: bold;
    margin-left: 10px;
    margin-bottom: 2px;
}

.storytitle a {
    text-decoration: none;
    color: #000;
}

.meta {
    font-size: x-small;
    margin: 0px;
    padding-left: 10px;
    margin-bottom: 2px;
}

.meta ul {
    display: inline;
    list-style: none;
    margin: 0px;
    padding: 0px;
}

.meta li {
    display: inline;
}

.post-categories {
    font-style: normal;
}

.storycontent {
    margin: 10px

}

.storycontent img {
    margin-right: 15px;
}

.feedback {
    font-size: normal;
    text-align: right;
    padding-right: 10px;
    margin-bottom: 20px;
}

#commentform input, #commentform textarea {
 background: #fff; 
 border: 1px solid #000; 
 margin: 10px;
}

.postcomment {
 text-align: left;
 margin: 10px;
}

<h2 id="postcomment" style="text-align: left">Leave a comment</h2>

#commentform textarea {
 width: 90%; 
 margin: 10px;
}
 
ol#comments li p {
 font-size: 100%;
 margin: 10px;
}

.credit {
    width: 700px;
    margin-left: auto;
    margin-right: auto;
    font-size: x-small;
    text-align: center;
    padding-top: 10px;
}

#menu {
    position: absolute;
    top: 121px;
    margin-left: 765px;   
    font-size: normal; 
    width: 180px;
}

#menu a img {
    padding: 3px;
}

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

#menu ul li {
    font-weight: bold;
    margin-top: 10px;
}

#menu ul li p {
    font-weight: normal;
}

#menu ul li ul {
    font-weight: normal;
    margin-top: 4px;
    margin-left: 0px;
    padding-left: 10px;
}

#menu ul li ul li {
    text-indent: 0px;
    font-weight: normal;
    padding: 0px;
    margin: 0px;
    margin-top: 0px;
}

#wordpress {
    font-style: normal;
}

#categories {

}

#search {

}

#archives {

}

#calendar {
    font-weight: bold;
    text-align: left;
}

#wp-calendar {
    font-weight: normal;
    padding-left: 10px;
}

#wp-calendar caption {
 color: #000;
 font-size: normal;
 font-weight: bold;
 text-align: left;

}

#prev {

}

#pad {

}

#today {
    background: #CCC;
}

#other {

}

#style {

}

phew, lotta code i say (i just copied and pasted btw)

thanks

Hello,

I want need to do the following:

div_01

div_02 div_03 div_04

div_05

Do I need to place div_02, div_03 and div_04 inside a div container?

Thanks,
Miguel

Need help with layout, picture attached. I need the footer's end to be at the level of the sidebars end unless content is too long and in that case it would expand in height. In other words there has to be a min height for content so footer wont go any higher than in the picture, but will go down if content expands.

Any tips on how this needs to be done?

Hello,

I am creating the base design of a web site that consists in two
horizontal bars: Navigation and Intro.

"Navigation" will contain the menu.

"Intro" will contain two items: a logo (image) on the left and a
banner (flash) on the right.

In this moment I have the following:
http://www.27lamps.com/Beta/Bar/Bar.html

I am not sure if using a background image is the best way to do
this ...
... it seems to me that since the two bars are two different sections
then I should use two divs.

So the questions I have:

1. Should I use two divs, one for each bar, and setting the line-
height in em instead of using the background image?
2. How to place side by side the logo and the banner and centered them
vertically?
3. I would like the Navigation and the Intro bars to have a minimum
height.

Thanks,
Miguel

I'm using a similar template to the one located he

http://www.linux.co.uk

In Internet Explorer you'll notice a space to the right of the "sponsored links" text in the right hand portlets area. Also a space at the bottom of this same porlet on the left hand side.

It seems to be aggravated at different font sizes.

These spaces don't show up on Mozilla, it works perfectly.

Any ideas for fixing this behaviour?

Thanks..

-j.

Hi,

I am relatively new to CSS and am trying to come up with a layout very similar to Noteableapp.

What I like about that design is that the taskbar stays floated at the top, while the central column exands with the width of the browser. What I'm trying to do different is have a much more detailed background image, rather than a simple gradient. The problem I'm having is that the navigation divs seems to be transparent so the detailed texture shows through. I've tried building the divs from scratch without success as I can't seem to get the central column to stay in the centre of the page, so I had a look at the css for Noteableapp however its a bit complicated for me and raised more questions than answers!

Can anyone point me in the direction of a good tutorial to achieve a layout similar to Noteableapp or able to contact me and guide me through what is actually happening with the noteable css. My preference would be a tutorial so I can actually understand what is happening but any help would be much appreciated.

..

I am working on a site for a class assignment and got it too look how I wanted in firefox 3 but then when I tested it in Explorer it is a completely different monster! I know that explorer is backwards but could someone shed some light on my code for me and get me going down the right path...

http://jjs5327.aisites.com/IMD311/index.html

Code:

@charset "UTF-8"; 
/* CSS Document */  
body { 	
background-color:#FFFFFF; 	
text-align:center; 	
font-family:Arial, Helvetica, sans-serif; 	
font-size:12px; 	color:#000000; 	
} 	 

#site { 	
width:775px; 	
height:500px; 	
margin:25px auto 0 auto; 	border:none; 	
} 	 
#container {     
width:775px;      
height:500px;      
margin:0 auto 0 auto;      
border:1px solid #99CCCC;  	
} 	 
#header, img { 	
margin-top:10px; 	
border:none; 	
cursor: default; 	
} 	 
#left { 	
width:210px; 	
height:208px; 	
margin-top:80px; 	
margin-left:20px; 	
border-top:1px solid #99CCCC; 	
border-right:1px solid #99CCCC; 	
border-left:1px solid #99CCCC; 	
float:left; 	
clear: both;  	
}	 	 
#menubar, #menubar p { 	
background-color:#FFFFFF; 	
text-align:left; 	
margin:auto; 	
} 	 
#menubar a { 	
display:block; 	
font-family:Arial, Helvetica, sans-serif; 	
font-size:12px; 	color:#FF9933; 	
text-decoration:none; 	
padding: 7.1px 0px 7.21px 10px; 	
border-bottom:1px solid #99CCCC; 	
cursor:default; 	
} 	 
#menubar a.active { 
color:#99CCCC; 	
} 	 	 
#menubar p:hover a, #menubar a:focus, #menubar a:active { 	color: #FFFFFF; 
background-color: #99CCCC; 	
} 	 
#right { 	
width:520px; 	
height:390px; 	
margin:15px 40px 15px 255px;  	
border-top:1px solid #99CCCC; 	
border-left:1px solid #99CCCC; 	
} 	 
#headline { 	
font-family:Arial, Helvetica, sans-serif; 	
color:#000000; 	
font-size:14px; 	
text-align:center; 	
margin-top:60px; 	
} 	 
#content { 	
font-family:Arial, Helvetica, sans-serif; 	
font-size:12px; 	
text-align:left; 	
width:380px; 	
margin:10px 60px 10px 60px; 	
padding:5px; 	
line-height:20px; 	
} 	 
#sumheadline { 	
font-family:Arial, Helvetica, sans-serif; 	
color:#000000; 	font-size:14px; 	
font-style:italic; 	
text-align:left; 	
margin:60px 0 0 90px; 	
} 	 
#sumcontent ul{ 	
font-family:Arial, Helvetica, sans-serif; 	
font-size:12px; 	
list-style:disc; 	
text-align:left; 	
width:250px; 	
padding:10px; 	
margin-left:150px; 	
line-height:20px; 	
} 	 
#techcontent { 	
font-family:Arial, Helvetica, sans-serif; 	
font-size:12px; 
text-align:left; 	
width:380px; 	
margin:60px 60px 10px 60px; 	
line-height:20px; 	
} 	
 .tech2 { 	
font-family:Arial, Helvetica, sans-serif; 	
font-size:14px; 	
color:#FF9933; 	
font-style:italic; 	
} 	 
#expcontent { 	
font-family:Arial, Helvetica, sans-serif; 	
font-size:12px; 	
text-align:left; 	
width:460px; 	
height:330px; 	
margin:59px 30px 10px 30px; 	
line-height:20px; 	
overflow: auto; 	
}  	
 .exp2left { 	
font-family:Arial, Helvetica, sans-serif; 	
font-size:14px; 	
color:#FF9933; 	
font-style:italic; 	
} 	 
#gencontent { 	
font-family:Arial, Helvetica, sans-serif; 	
font-size:12px; 	
text-align:left; 	
width:490px; 	
height:385px; 	
margin:15px 10px 10px 15px; 	
line-height:22px; 	
} 	 
.deshead { 	
font-family:Arial, Helvetica, sans-serif; 	
font-size:14px; 	
color:#FF9933; 
font-style:italic; 	
margin-left:115px; 	
padding-top:10px; 	
} 	 
.description { 	
width:350px; 	
margin-left:115px; 	
} 	 
#example { 	
overflow-y:scroll; 	
overflow-x:hidden; 	
height:389px; 	
width:519px; 	
} 	 
#example1 img, #example2 img, #example3 img, #example4 img { 	float:left; 	
} 	 
#example1 { 	
width:505px; 	
height:100px; 	
margin:10px 0px 0 10px; 	
text-align:left; 	
} 	 
#example2 { 	
width:505px; 	
height:100px; 	
margin:10px 0px 0 10px; 	
text-align:left; 	
} 	 
#example3 { 	
width:505px; 	
height:100px; 	
margin:10px 0px 0 10px; 	
text-align:left; 	
} 	 
#example4 { 	
width:505px; 	
height:100px; 	
margin:10px 0px 0 10px; 	
text-align:left; 	
}  	 
#content li { 	
padding:5px; 	
} 	 
#footer { 	
color:#999999; 
font-family:Arial, Helvetica, sans-serif; 	
font-size:10px; 	
text-align:right; 	
width:775px; 	
height:20px; 	
margin-top:5px; 	
}

Hi,
How do I position "new.gif" on the same line as text
"some subject here" ?
Right now "new.gif" appears on right side as intended but underneath text.
Code:

<td><a href="">some subject here<span style="float:right"><img src="new.gif" alt="New" width="30" height="10" align="middle" /></span></a></td>

Thank you.

thanks

Hi, i've just started using css and have noticed a small problem in my code - i get a white bar above my header, but i'm not sure how to get rid of it. It only appers in firefox and not ie.

my code is

index.html

Code:

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

<body>
 <!-- container -->
 <div id="container">
   <!-- start wrapper -->
   <div id = "wrapper">
     <!-- start header -->
     <div id = "header">
	  <h5> BANNER GOES HERE</h5>
	  <h5> BANNER GOES HERE</h5>
	  <h5> BANNER GOES HERE</h5>
	  <h5> BANNER GOES HERE</h5>
	  <!-- start nav -->
      <div id="nav">
        <ul>
	      <li><a href="#">Home</a></li>
	      <li><a href="#">About Us</a></li>
	      <li><a href="#">Search</a></li>
	      <li><a href="#">Contact Us</a></li>
	    </ul>
      <!-- end nav -->
      </div> 
     <!--end header --> 
     </div>
   <!-- end wrapper -->
   </div>
   <h4> Copyright xyz.co.uk. 2006-2007 All rights reserved </h4>
  <!-- end container -->
 </div>

</body>
</html>

css file

Code:

/* general html element formatting */

html, body, table  {
  font-family: verdana, arial, sans-serif;
  font-size: 7pt;
  color: #000000;
  margin: 0;
  padding: 0;
}

body  {
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6  {
  margin: 10px 10px 10px 0px;
  text-align: center;
}

h1  {
  font-size: 150%;
  margin-top: 0px;
}

h2  {
font-size: 130%;
}

h3  {
font-size: 110%;
}

h4  {
font-size: 100%;
}


h5  {
font-size: 100%;
color: #FFFFFF;

}


#container {
	
	background-image: url(images/background_gradient2.jpg);
	border: 1px solid #000000;	
}

#wrapper {
	width: 760px;
	height: 600px;
	background-color:#FFFFFF;
	margin:10px auto;
	border: 1px solid #000000;
	text-align: left;
}

#header {
    width: 760px;
    background: #242424;
}

#nav {
	border-bottom: 1px solid #000000;
}

#nav ul {
	padding: 0;
	margin: 0;
	background-color:#242424; 
}

#nav ul li {
	display: inline;
	padding: 0;
	margin: 0;
}

#nav ul li a {
	font-size: 120%;
	color: #FFFFFF;
	background-color:#778899;
	text-decoration: none;
	padding: 0px 25px 0px 25px;
	border-right: 0px solid #000000;
	text-align: center;
	width: 9em;
}

#nav ul li a:hover, #nav ul li a:focus {
	background-color: #990000;
}

please find attached a screenshot in firefox. Any help is appreciated.

thanks!