CSS - My Div Doesn't Appear In Ie?

I downloaded a free layout and started using it for my club's website. After finishing several pages, I uploaded it to the school's server. However, I realized that after publishing it, the layout does not look right. It is supposed to look like this (I had to insert spaces to get around no URL postings for newbs) https:// netfiles.uiuc. edu/ro/www/Collegiate4HClub/~26/howitssupposedtolook.jpg

Unfortunately, it looks like this https:// netfiles.uiuc. edu/ro/www/Collegiate4HClub/~26/index.html

As you can see, there are several layout issues. First, the background color inside the white border is not the lighter green color. Also, the border is missing on the right hand side.

If anyone can shed some light on this issue, I would greatly appreciate it!

In case you can't pull up the CSS document, it is https:// netfiles.uiuc. edu/ro/www/Collegiate4HClub/~26/FlexibleGreen.css

On my re-design of www.samuraiblog.com , I have a DIV that has quite a bit of text in it. I have it set to 100%, but it only goes about 1/4 of the way. You can see what I mean here, on a test server, http://samuraiblog.dreamhost.com/index.php

Thanks,
-Sam

Hi,

link to wesbite

why doesn't the drop down menu, that works in IE6 not work in Firefox 0.8? It is pure CSS, no Javascript. OK, I know it doesn't validate and don't care too much about that. I know putting tables inside an anchor tag is frowned on but hey, it works and I didn't think it up.

I thought IE was the worst when it came to CSS compliance?

Any ideas how I can fix it?

Thanks,

John

Hi All,

We develoepd an Application for a client.

This application uses CSS for all text including drop-down menu text and input box text.

My client is using XP as their OS and he tells me (sent a screen capture as well) he CANNOT read the drop-down boxes. Text is too small.

On our machines (Win 98) there are no problems. Have tested on about 15 different client computers with no problems.

Browser is not an issue as its the same for him on both Netscape and IE.

Does ANYONE have a clue how to fix this? Doesn't seem logical to me - one OS should be the same as the other. However, we're talkin about MS products and who knows with them.

Need urgent help on this one.. please.. anyone with ideas help me!

thanks all.

Peace.

Aaron

http://www.komta.com/iris.new/browse.php

Just getting a rough layout idea for a client, so none of the links work, I know that much.

I'm trying to go without tables, so the thumbnails are floated. The weird thing is, IE does it the way I expect, and FF is messing up...go look. For those who don't feel like it, Firefox is floating the thumbs, wrapping them correctly...but about 500 px south of where they should be in the document...and not in the containing element.

Anyone have an idea? I'm going to go work on other aspects of the site, and hope you geniuses can save my ***...again.

Thanks, and I appreciate the help!

MPEDrummer

Hello--I'm trying to solve a problem that I've never been able to reproduce, but my client insists that it happens for them all the time. We've just launched a new site built on PHP and Smarty Templates (I'm posting on this board because I don't think it's a PHP problem...let me know if I'm wrong about that), but with lots of javascript and css.

My client sent me a screenshot (attached) which shows that all of the stylesheet-formatted text is rendered without formatting...it's coming up Times New Roman with default colors. (Please ignore the blue boxes...I masked the identifying features of the image to protect the innocent :-) ). This goes away upon refresh, but it seems to happen (though never to me) often enough that we're worried about it.

Has anyone ever seen anything like this? I'll be happy to reproduce any code that anyone's interested in, but I wasn't sure where to start and I didn't want to have to display a bunch of irrelevant code. I searched the boards but couldn't find anything.

Thanks in advance.

Michael Schmidt

I built an image gallery with a 1px border and 5px padding around the thumbnails. Looks fine in Safari and IE5 for the Mac. But IE 6 ignores the padding completely.

<img src="'.$thumb_path.$row->thumb.'" style="margin-bottom:5px;padding:5px;border:1px solid #cccccc;" >

Any ideas are appeciated !!

Hi Guys,

we're having some problems with common versions of IE (some versions work, some doesn't). In other browsers site works perfect.

Link 1
Link 2 (forum)
Screenshot

Problem is, that IE stops rendering page at some point (half of the page). It just shows blank white space. We don't have any ideas what and why that happens.

I think problem is somewhere in CSS file.

Link to CSS file

Where could be the problem?

p.s. Refreshing site doesn't help, but changing IE window size (or setting to full screen mode), helps even without refreshing. Then page just loads.

Hi guys
Look here

www DOT clickemarketing DOT com

The date, before each article, should show at right. This date uses the .createdate css class, which is this

Code:

.createdate {
	color: #A9A9A9;
	vertical-align: top;
	padding-bottom:2px;
	float: right;
	font-size: 11px;
}

I don't know why IE shows it at left... FF shows ok

Is there any way to correct this class, and make date show at right in this pseudo browser, worm collector, spyware downloader called IE ?

Thanks

Long time reader, first time poster.

I have an issue with a css vertical menu I've made but first things first. My target browser is IE7, this is a corporate intranet so I have some control over this. However, we do run alot of pcs with Firefox but, of course, the problem doesn't exist with this browser.

Here's the issue:
The div#leftbox contains the menu but when the list elements extend into the center div (div#middlebox) you can see the anchors and finger them but if you try to move to the next list item the submenu disapears? It's like it recognizes the display: block on the list element but not on the anchor?

Another weird thing is that if I extend the div#leftbox width to accommodate the size of the menu and the submenu it works fine but only if i have a background-color applied to the #leftbox. If I leave it transparent it behaves as before.

Here's the markup and css...

index.asp
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"(URL address blocked: See forum rules)"> 
<html xmlns="(URL address blocked: See forum rules)" xml:lang="en" lang="en">
<head>
	<title>Intranet</title>

	<link href="/styles/<%Response.Write(Session("session_theme"))%>/screen.css" type="text/css" media="screen" rel="stylesheet" />
	<link href="/styles/print.css" type="text/css" media="print" rel="stylesheet" />
	<style type="text/css">@import url(/styles/<%Response.Write(Session("session_theme"))%>/calendar-win2k-1.css);</style>
   <script type="text/javascript" src="/calendar/calendar.js"></script>
	<script type="text/javascript" src="/calendar/lang/calendar-en.js"></script>
	<script type="text/javascript" src="/calendar/calendar-setup.js"></script>
	<link rel="SHORTCUT ICON" href="/favicon.ico" />
</head>

<body>


<div id="topbar">
	<!--#include virtual="/inc/toolbar.asp" -->
</div>

<div id="leftbox">
	<!--#include virtual="/inc/menu.asp" -->
</div>

<div id="rightbox">
	<!--#include virtual="/inc/rightbox.asp" -->	
</div>

<div id="middlebox">
<h1>&nbsp;Welcome to the IntraNET</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ac pede. Cras tristique, ipsum in scelerisque lobortis, diam nisl lobortis ipsum, eu ultricies orci justo a purus. Integer pellentesque, dui ut ullamcorper pellentesque, diam sapien venenatis augue, id rutrum lorem nibh non ligula. Nullam mattis. Donec eget pede. Donec blandit rhoncus erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque lobortis cursus augue. Maecenas elit. Nullam viverra justo sed mi. Cras porta tellus non justo. Fusce adipiscing molestie elit. Nullam vulputate felis sed mi. Curabitur velit sem, bibendum ut, tempus sed, sodales vitae, libero. Aliquam nisl. Pellentesque tellus dolor, elementum sed, semper suscipit, pretium vitae, mauris. Vivamus sem.
</p>
</div>


</body>
</html>

Here's the menu.asp include...
Code:

		 <ul id="nav">
	      <li><a href='/departments/reports/index.asp'>Reports</a>
	      	<ul>
	          <li><a href=''>EOD<span>End of Day Reports</span></a></li>
	          <li><a href=''>EOM<span>End of Month</span></a></li>
	          <li><a href=''>On Demand Reports<span>Reports sent to the web queue</span></a></li>
	          <li><a href=''>Office Reports<span>A collection of front office and customer service reports</span></a></li>
	          <li><a href=''>Warehouse Reports<span>A collection reports for warehouse operations</span></a></li>
	          <li><a href=''>Merchandising Reports<span>EIS and vendor reports for merchandising</span></a></li>
	          <li><a href=''>Accounting Reports<span>A collection of account reports</span></a></li>
	         </ul>
	      </li>		
		  <li>
		  	<a href='/index.asp'>Home</a>
		  </li>
		</ul>

and here's the css

Code:

body {background: #fff;	font-size: 62.5%;	color: #033; font-family: Verdana, Arial, san-serif;}
.alignright {margin-top: 0; text-align: right;}
.small {font-size: .9em;}
.return {position: absolute; top: 0; right: 0; text-align: right; padding: .5em;}
p { font-size: 1.2em; line-height: 1.5em; }

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 150px; /* Width of Menu Items */
	border-bottom: 1px solid #099;
	z-index: 1;
	}

ul li {
	position: relative;
	}
	
li ul {
	position: absolute;
	left: 149px; /* Set 1px less than menu width */
	top: 0;
	display: none;
	}

/* Styles for Menu Items */
ul li a {
	display: block;
	text-decoration: none;
	color: #006;
	background: #ccc;
	padding: 5px;
	border: 1px solid #006;
	border-bottom: 0;
	}

ul li a:hover { color: #600; background: #fff; display: block;} /* Hover Styles */
		
li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
		
li:hover ul, li.over ul { display: block; } /* The magic */

/* Begin Tool Tip Span */
		 
span {
display: none;
}
				
a:hover span {
z-index: 1;
position: absolute;
top: 1px;
left: 200px;
width: 220px;
display: block;
background: #fff;
border: 2px solid #006;
padding: 10px 10px 10px 5px;
		  }

/* End Tool Tip Span */

/*******************************************************************************
                       Positioning rules
*******************************************************************************/

div#leftbox {
position: absolute;
left: 10px;
width: 150px;
color: #333;
padding-top: 10px;
background-color: #fff;
z-index: 1;}

#middlebox {
margin: 0 34% 0 170px;
border-left: 3px solid #ccc;
border-right: 3px solid #ccc;
border-bottom: 3px solid #ccc;
padding: 10px;
background-color: #efefef;
}

div#rightbox {
position: absolute;
right: 25px;
width: 30%;
color: #666;
padding-top: 10px;
background-color: transparent;}


div#topbar	{
margin: 0;
padding: 0;
width: 100%;
background-image: url('/images/default-topbar-bg.jpg');
background-repeat: repeat-x;
}


div#search	{
color: #ffc;
font-size: 1.1em;
letter-spacing: .75em;
margin: 0;
padding: 0;
position: absolute;
top: 16px;
left: 20px;
word-spacing: 1em;
}

Your help and advice is most welcome and appreciated.
Mark

Hey everyone,

I am making a design for my own pleasure, and for some reason IE7 does not even show the menu. Here is my code.
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" xml:lang="en" lang="en">
    <head>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <meta http-equiv="Content-Style-Type" content="text/css" />
     <meta http-equiv="Content-Script-Type" content="text/javascript" />
     <title>Untitled - Design 1</title>
     <style type="text/css">
	 /* <![CDATA[ */
body {
	background-color: #DDDDDD;
	color: #000000;
	text-align: center; /* IE5/Win hack, why do I bother with IE5/Win? */
	font-family: verdana, tahoma, sans-serif;
	font-size: 10pt;
	margin: 0;
	padding: 15px;
}

a img,a {
	border: 0;
}
a,a:link {
	color: #000000;
	text-decoration: underline;
}
a:visited {
	color: #000000;
	text-decoration: underline;
}
a:hover {
	color: #0096ff;
	text-decoration: none;
}
#container {
	margin: 0 auto;
	width: 79%;
	height: auto;
	text-align: left;
}
#outer {
	background-image: url( bg_top.gif );
	background-repeat: no-repeat;
	height: 86px;
	padding: 15px;
}
#inner {
	margin-top: -16px;
	background-image: url(body_bg.gif);
	background-repeat: repeat-y;
	background-position: top left;
	padding: 15px;
}
#leftmenu {
	float: left;
	width: 202px;
}
#leftmenu p {
	border-left: 1px solid #0099cc;
	border-right: 1px solid #0099cc;
	text-align: center;
	/* Blah, damn whitespaces */
	margin-top: -15px;
	margin-bottom: -5px;
}
#leftmenu h1 {
	height: 35px;
	background-image: url( header_top.gif );
	background-repeat: no-repeat;
	font-size: 15pt;
	color: #FFFFFF;
}
#menulast {
	background-image: url( menu_bottom.gif );
	background-repeat: no-repeat;
	background-position: top left;
	height: 18px;
	width: 202px;
}
.cleareasy {
	clear: both; /* Good bye gullotine bug :) */
}
/* ]]> */
</style>
</head>
<body>
  <div id="container">
   <div id="outer">
   asdfsdaf<br />
   asdfsdaf<br />
   asdfsdaf<br />
   </div>
   <div id="inner">
    <div id="leftmenu">
	 <h1>asdfasdf</h1>
	 <p>
	  asdf<br />
	  asdf<br />
	  asdf<br />
	  asdf<br />
	  asdf<br />
	  asdf<br />
	  asdf<br />
	  asdf<br />
	  asdf<br />
	  asdf<br />
	  asdf<br />
	  asdf<br />
	  asdf<br />
	  asdf<br />
	  asdf<br />
	  asdf<br />
	 </p>
	 <div id="menulast"></div>
	</div>
	<div class="cleareasy"></div>
   </div>
  </div>
 </body>
</html>

And also IE5 shows spacings, which other browsers don't because of the negative margins I have said, anyway to do get rid of those?

Hi everyone...new here and I hope you can help! Thanks is advance!

I want to repeat an image (bkgd.jpg) in my background and it doesn't seem to be working. Here is the site:

romanceplaybook
I can't post the entire URL because I'm a new registrant. But just put dot com at the end.

Not that the page background is white. It should be repeating the image bkgd.jpg

Here is the CSS:

body {
background: #ffffff url(images/bkgd.jpg) top repeat-y;
color: #333333;
font-size: 11px;
font-family: Verdana, Helvetica, Sans-Serif;
margin: 0px auto 0px;
padding: 0px;
}

#wrap {
background: #ffffff url(images/bg.jpg) top center repeat-y;
color: #333333;
font-size: 11px;
font-family: Verdana, Helvetica, Sans-Serif;
margin: 0px 300px 0px;
padding: 0px;
}

/************************************************
* Hyperlinks *
************************************************/

a, a:visited{
color: #507AA5;
text-decoration: none;
}

a:hover{
text-decoration: underline;
}

/************************************************
* Header *
************************************************/

#header {
background: #FFFFFF;
width: 1000px;
margin: 0px auto 0px;
padding: 0px 0px 0px 0px;
text-align: center;
text-transform: uppercase;
}

#header a {
font-family: Times New Roman, Helvetica, Sans-Serif;
font-size: 48px;
color: #333333;
text-decoration: none;
padding: 0px 10px 0px 10px;
margin: 0px;
text-transform: uppercase;
}

#header a:hover{
color: #333333;
}

/************************************************
* Navbar *
************************************************/

/************************************************
* Left Sidebar *
************************************************/

#l_sidebar {
float: left;
width: 160px;
margin: 0px 20px 0px 0px;
padding: 20px 0px 20px 0px;
}

#l_sidebar ul {
list-style: none;
margin: 0px;
padding: 0px 0px 20px 0px;
}

#l_sidebar li {
list-style: none;
margin: 0px;
padding: 0px;
}

#l_sidebar ul li {
margin: 0px;
padding: 5px 0px 0px 0px;
}

#l_sidebar ul li a {
color: #507AA5;
text-decoration: none;
}

#l_sidebar ul li a:hover {
color: #507AA5;
text-decoration: underline;
}

/************************************************
* Right Sidebar *
************************************************/

#r_sidebar {
float: right;
width: 160px;
margin: 0px 0px 0px 0px;
padding: 20px 0px 0px 0px;
}

#r_sidebar p{
padding: 2px 0px 16px 0px;
margin: 0px;
line-height: 20px;
}

#r_sidebar ul {
list-style: none;
margin: 0px;
padding: 0px 0px 20px 0px;
}

#r_sidebar ul li {
margin: 0px;
padding: 5px 0px 0px 0px;
}

#r_sidebar ul li a {
color: #507AA5;
text-decoration: none;
}

#r_sidebar ul li a:hover {
color: #507AA5;
text-decoration: underline;
}

/************************************************
* Content *
************************************************/

#content {
width: 950px;
margin: 0px auto 0px;
padding: 0px;
}

#content p{
padding: 0px 0px 15px 0px;
margin: 0px;
line-height: 20px;
}

#content p img{
float: left;
border: none;
margin-right: 15px;
margin-bottom: 10px;
}

#content h1 {
color: #333333;
font-size: 22px;
font-family: Times New Roman, Verdana, Arial, Sans-Serif;
font-weight: normal;
padding: 0px 0px 0px 0px;
margin: 0px;
}

#content h1 a {
color: #333333;
text-decoration: none;
}

#content h1 a:hover {
color: #658DB5;
text-decoration: none;
}

#content h2 {
color: #333333;
font-size: 14px;
font-family: Times New Roman, Verdana, Arial, Sans-Serif;
font-weight: bold;
padding: 5px 0px 5px 0px;
margin: 0px;
border-top: 1px dotted #C0C0C0;
border-bottom: 1px dotted #C0C0C0;
}

#content p ol{
margin: 0px;
padding: 0px 0px 0px 20px;
}

#content p ul{
margin: 0px;
padding: 0px 0px 0px 20px;
}

blockquote{
margin: 0px 0px 0px 25px;
padding: 0px 25px 0px 10px;
font-style: italic;
color: #666666;
border-left: 3px solid #B3C8DB;
}

#content blockquote p{
margin: 0px 0px 20px 0px;
padding: 0px;
}

#contentmiddle {
float: left;
width: 550px;
margin: 0px 0px 0px 0px;
padding: 20px 5px 10px 20px;
text-align: left;
}

#contentmiddle p img{
float: left;
border: none;
margin-right: 15px;
margin-bottom: 10px;
}

.contentdate {
background: #FFFFFF url(images/date.gif);
float: left;
width: 45px;
height: 50px;
margin: 0px;
padding: 0px;
}

.contentdate h3 {
color: #FFFFFF;
font-size: 10px;
font-weight: normal;
padding: 1px 0px 0px 10px;
margin: 0px;
text-transform: uppercase;
}

.contentdate h4 {
font-family: Times New Roman, Helvetica, Sans-Serif;
color: #999999;
font-size: 21px;
font-weight: bold;
padding: 5px 4px 0px 0px;
margin: 0px;
text-align: center;
}

.contenttitle {
float: left;
width: 480px;
margin: 0px;
padding: 0px 0px 0px 10px;
}

#contentmiddle ul {
list-style: none;
margin: 0px;
padding: 0px 0px 20px 0px;
}

#contentmiddle ul li {
margin: 0px;
padding: 5px 0px 0px 0px;
}

#contentmiddle ul li a {
color: #507AA5;
text-decoration: none;
}

#contentmiddle ul li a:hover {
color: #507AA5;
text-decoration: underline;
}

#content img.wp-smiley {
float: none;
border: none;
padding: 0px;
margin: 0px;
}

#content img.wp-wink {
float: none;
border: none;
padding: 0px;
margin: 0px;
}

.postspace {
background: #EFEFEF url(images/spacer.gif);
width: 440px;
height: 32px;
margin: 0px;
padding: 0px;
}

/************************************************
* Footer *
************************************************/

#footer {
background: #FFFFFF;
width: 952px;
margin: 0px auto 0px;
padding: 10px 0px 10px 0px;
text-align: center;
border-top: 1px solid #C0C0C0;
}

/************************************************
* Search Form *
************************************************/

#searchdiv {
margin: 0px;
padding 0px;
}

#searchform {
margin: 0px;
padding: 0px;
overflow: hidden;
}

#s {
width: 190px;
background: #EFEFEF url(images/search.gif);
color: #333333;
font-size: 11px;
font-family: Verdana, Helvetica, Sans-Serif;
padding: 3px;
margin: 8px 0px 0px 0px;
border: 1px solid #C0C0C0;
}

/************************************************
* Comments *
************************************************/

#commentblock {
width: 395px;
background: #EFEFEF;
color: #333333;
float: left;
padding: 10px 20px 0px 20px;
margin: 10px 0px 10px 0px;
border: 1px solid #C0C0C0;
}

ol#commentlist {
padding: 5px 0px 5px 0px;
margin: 0px;
list-style-type: none;
}

.commentdate {
font-size: 12px;
padding-left: 0px;
}

#commentlist li p{
margin-bottom: 8px;
line-height: 20px;
padding: 0px;
}

.commentname {
color: #333333;
margin: 0px;
padding: 5px 5px 5px 0px;
}

.commentinfo{
clear: both;
}

.commenttext {
clear: both;
margin: 5px 0px 20px 0px;
padding: 20px 10px 5px 10px;
width: 365px;
background: #FFFFFF url(images/comment.gif) no-repeat top;
}

.commenttext-admin {
clear: both;
margin: 5px 0px 20px 0px;
padding: 20px 10px 5px 10px;
width: 365px;
background: #FFFFFF url(images/comment.gif) no-repeat top;
}

#commentsformheader{
padding-left: 0px;
}

#commentsform{
text-align: left;
margin: 0px;
padding: 0px;
}

#commentsform form{
text-align: left;
margin: 0px;
}

#commentsform p{
margin: 0px;
}

#commentsform form textarea{
width: 99%;
}

p.comments_link img{
margin: 0px;
padding: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}

Hi there,
Sorry for being silly and pathetic and crap at CSS, but I'm having an issue with a site I've been working on.
Site URL is here, and the issue that I am having is as follows:
I have a layer with a cloud as it's background. It's the one in the centre, called layer1 because I didn't bother renaming it. Because of the background being a cloud, the edges are curved, like a fluffy cloud would be. Obviously any text in this layer will overrun the edges of the cloud, and so I thought it would make sense to use padding to trim the text area down so it would all fit on the cloud.
Now the problem that I am having is that while padding the left side works, padding the right side appears to have no effect :-(
If anyone's got any hints or tips that might solve my proble, I'd be reeeeally grateful!
Regards,
Lawrence

hi
i just can't seem to get this problem. i have searched and tried everything. but i don't know what i am doing wrong.

the background doesn't repeat in firefox. i want the background -- bg to repeat vertically. instead the content in the para tag overlaps on the footer. here's a short version of the code.

Code:

<body>
<div id='bg'>
<div id='banner'>

	<div id='logout'>
		<a href='../templates/home.php'>Home</a>
		<a href='../php/logout.php'>Logout</a>
	</div>


	<div id='menupos'> 

	<!-- Menu for the site -->

	</div><!-- menu -->
	
	
	<p id='clear'> Content of the site </p>
	
</div> <!-- banner -->
<div id="footer"></div>

</div> <!-- bg -->
</body>
</html>

and following is the css :-
Code:

body{
font-family: arial, helvetica, sans-serif;
color: #000000;
margin: 5px;
text-align: center;
vertical-align: top;  
}


/* site background */
#bg{background: url(../images/bg.jpg) repeat-y;
width: 800px;
height: 37;
margin: 0 auto; /* firefox fix to center align the whole page */
}

/* site banner */
#banner{background: url(../images/banner.jpg) no-repeat;
width: 800px;
height: 492px; 
}

/* site footer */
#footer{background: url(../images/footer.jpg) no-repeat;
width: 800px;
height: 71px;
}


/* menu position */
#menupos{padding-top: 20px; padding-left: 40px;}


/* Main Menu ul */
/* Remove all space and padding and list style */
#menupos ul{ margin: 0; padding: 0;}


/* displays all Main Menu links in one line*/
#menupos ul li{ 
position: relative;
display: inline;
float: left; 

height: 50px; /* needed for menu_img & Sub Menu to render properly */
width:150px; 	/* Width of Menu Items to render the menu properly */

background: url(../images/menu_img.jpg) no-repeat; 

}


/* Sub Menu ul */
#menupos ul li ul{ 
display: none;		/*Make the sub list items invisible*/
position: absolute;	/*when items appear, they come one below the other instead of in one line */
width:150px;		/* Width of Sub Menu Items to render the sub menu below the main menu */
left: -1; 		/* to align right below */
top: 50;		/* to align right below */
}

/*When hovered, make Sub Menu appear*/
#menupos ul li:hover ul{ 
display: block;
}


#menupos ul li ul li{
padding: 5px 0px 5px 0px;	/* (Top-Right-Bottom-Left) Sub Menu items padding */
border-top: 1px solid #787878;
background: #B3B3B3;  
text-align: left; 
height: auto; /* to clear Main Menu height of 50px */
}



/* align logout and home to top right of page */
#logout{ 
margin-left: 735;  
margin-right: 5;
padding-top: 55; 
text-align: right;
}


/* to clear floats for para */
#clear{padding-top: 10px;
clear: both; 
font-size: 10pt;
color: #C90514;
} 

i want the site background :-

/* site background */
#bg{background: url(../images/bg.jpg) repeat-y;

to repeat vertically..but it doesn't.

thank you

Hi guys, I've trying to achieve the following.

I want to have a div element floating on the right 100px from the top and the rest of content is filled with text.

PHP Code:
<div>[image]</div><p>text 1</p><p>text 2</p> 





I could do this easily with simple float:right but then the image would at 0px from top and if I try to move it down (using margin or padding) the text wouldn't reach above it (would get cut off at the width of the image form the right)

If I try to add another div with 100px height and 10px (for example) width above the image, the text overlaps over my image div

Any ideas how to achieve this?

Below is my full html code

PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html > <head> <title>float</title> <style type="text/css"> .content { width: 400px; background: #FFFF00; padding: 5px; } .floatright { float: right; height: 100px; border: 1px solid #000; } .offset { width: 10px; } .imgholder { width: 100px; clear: right; } </style>  </head> <body>  <div class="content">  <div class="floatright offset"></div>  <div class="floatright imgholder"><h1>image</h1></div>  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ornare. Vestibulum a nulla id velit elementum imperdiet. Nam a purus. Suspendisse non enim. Nullam id sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas aliquet varius tellus. Aliquam sed nunc eu tortor semper vulputate. Nunc risus. </p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ornare. Vestibulum a nulla id velit elementum imperdiet. Nam a purus. Suspendisse non enim. Nullam id sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas aliquet varius tellus. Aliquam sed nunc eu tortor semper vulputate. Nunc risus. </p>  </div>  </body> </html>