Learn VBA & Macros in 1 Week!

CSS - Help With Floating Menu

Full Excel VBA Course - Beginner to Expert

Help With Floating Menu	View Content

I saw this appealing menu from a css contest page and i've studied the code over and over again but i can't seem to get the same effect as this person has done. He has created a menu that just floats while the screen is able to scroll up and down.
the site is :
http://contest.prestontalk.com/index/FluidFixed/0/4/1/

if anyone knows how this effect is done, let me know.
thanks!

Full Excel VBA Course - Beginner to Expert

Floating Sub Menu

Similar Tutorials

View Content

hey I am trying to get this sub menu floating on the rollover of a list item. Here's my HTML:

Code:

<body>

<div id="banner">
</div>

<div id="leftmenu">
<ul>
<li>List 1</li>
<li><a href="">List 2</a></li>
<li><a href="">List 3</a>
	<ul>
	<li><a href="">List 3.1</a></li>
	<li><a href="">List 3.2</a></li>
	<li><a href="">List 3.3</a></li>
	<li><a href="">List 3.4</a></li>
	</ul>
</li>
<li><a href="">List 4</a></li>
<li><a href="">List 5</a></li>
<li><a href="">List 6</a></li>
<li><a href="">List 7</a></li>
<li><a href="">List 8</a></li>
<li><a href="">List 9</a></li>
</ul>
</div>

<div id="maincontent">
CONTENT
</div>

</body>

and this CSS:

Code:

#leftmenu {
	position: absolute;
	margin: 0px;
	top: 120px;
	left: 0px;
	width: 147px;
	height: 800px;
	background-color: #cccc66;
	font-size: 10px;
	font-weight: bold;	
}

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

ul li {
	color: #FFFFFF;
	display: block;
	background-color: #FF0000;
	margin-bottom: 1px;
	text-align: right;
	font-weight: bold;
}

ul li a {
	text-decoration: none;
	color: #FFFFFF;
}

ul li a:hover {
	color: #000000;
}

ul li ul {
	display: none;
	position: absolute; 
	top: 200px;
	left: 100px;
}

#maincontent {
	position: absolute;
	z-index: 0;
	left: 147px;
	top: 120px;
	height: 381px;
	width: 100%;
	padding-top: 10px;
	padding-left: 10px;
	margin-top: 0px;
	margin-left: 0px;
	background-color: #FFFFFF;
	font-family: Arial;
	font-size: 13px;
}

so yeah, I am struggling at this point, I have looked at a reference that someone gave me last time I brought up the issue, but can't get it working, if you can spot why, help would be appreciated, not having much luck, thinking maybe a syntax thing(?), not sure...HELP!!

kr.

Floating Menu Not Working In Ie

Similar Tutorials

View Content

Hi All,

I have a site

PHP Code:
hopevalleycamp.com

which features a three box floating menu over a single background image.

The menu "works" in Firefox and Safari, but not in IE8. I'm not sure if there is a"fix" I can apply for IE or not.

The code for the menu css can be viewed here...
PHP Code:
* {
    font-family: Arial,Helvetica,sans-serif;
}
.yuimenubar {
    position: static;
    visibility: visible;
}
.yuimenu .yuimenu, .yuimenubar .yuimenu {
    left: -10000px;
    position: absolute;
    top: -10000px;
    visibility: hidden;
}
.yui-menu-shadow {
    position: absolute;
    visibility: hidden;
    z-index: -1;
}
.yuimenubar ul, .yuimenu ul {
    list-style-type: none;
}
.yuimenubar ul, .yuimenu ul, .yuimenubar li, .yuimenu li, .yuimenu h6, .yuimenubar h6 {
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
}
#productsandservices {
    overflow-x: hidden;
    overflow-y: hidden;
    padding-left: 0;
    position: relative;
    z-index: 1;
}
.yuimenuitemlabel, .yuimenubaritemlabel {
    white-space: nowrap;
}
.hide-scrollbars * {
    overflow-x: hidden;
    overflow-y: hidden;
}
.hide-scrollbars select {
    display: none;
}
.yuimenu.show-scrollbars {
    overflow-x: visible;
    overflow-y: visible;
}
.yui-skin-sam .yuimenubar > .bd > ul:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    line-height: 0;
    visibility: hidden;
}
.yui-skin-sam .yuimenubaritem {
    float: left;
}
.yui-skin-sam .yuimenubarnav .yuimenubaritem {
    line-height: 1.42em;
    margin-right: 11px;
}
.yui-skin-sam .yuimenubaritemlabel {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    color: #FFFFFF;
    display: block;
    line-height: 1.42em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}
.yui-skin-sam .yuimenubaritemlabel-selected, .yui-skin-sam .yuimenubaritem a.active, .yui-skin-sam .yuimenubaritem-hassubmenu-selected {
    color: #FFFFFF;
}
.yui-skin-sam .yuimenubarnav .yuimenubaritemlabel {
    font-size: 34px !important;
    font-weight: bold;
    line-height: 1.42em;
}
.yui-skin-sam .yuimenu .bd {
    left: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    top: 0;
    width: 151px;
}
.yui-skin-sam .yuimenu ul {
    padding-bottom: 10px;
    padding-left: 19px;
    padding-right: 19px;
    padding-top: 10px;
}
.yui-skin-sam li.first-of-type a.active, .yui-skin-sam li.first-of-type a.yuimenubaritemlabel-selected {
}
.yui-skin-sam .yuimenuitemlabel {
    color: #FFFFFF;
    font-size: 14px;
    font-weight: bold;
    line-height: 25px;
    padding-left: 12px;
    text-decoration: none;
    text-transform: uppercase;
}
.yui-skin-sam .yuimenuitemlabel-selected, .yui-skin-sam .bd .yuimenuitem a.active {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("images/drop-hover.png");
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: auto auto;
    color: #AF4B3E;
    display: block;
    overflow-x: hidden;
    overflow-y: hidden;
}
#yui-gen0 {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("images/bg-li.png");
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: auto auto;
    width: 210px;
}
#yui-gen0 a.yuimenubaritemlabel {
    height: 115px;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 95px;
}
#yui-gen0 .bd {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("images/bg-li-drop.png");
    background-origin: padding-box;
    background-position: 0 bottom;
    background-repeat: no-repeat;
    background-size: auto auto;
    margin-top: -12px;
    width: 210px;
}
#yui-gen0 .yuimenuitemlabel-selected, #yui-gen0 .bd .yuimenuitem a.active {
    color: #95D4B5;
}
#yui-gen1 {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("images/bg-li2.png");
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: auto auto;
    width: 210px;
}
#yui-gen1 a.yuimenubaritemlabel {
    height: 115px;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 95px;
}
#yui-gen1 .bd {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("images/bg-li2-drop.png");
    background-origin: padding-box;
    background-position: 0 bottom;
    background-repeat: no-repeat;
    background-size: auto auto;
    margin-top: -12px;
    width: 210px;
}
#yui-gen1 .yuimenuitemlabel-selected, #yui-gen1 .bd .yuimenuitem a.active {
    color: #F7C609;
}
#yui-gen2 {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("images/bg-li3.png");
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: auto auto;
    margin-right: 0;
    width: 210px;
}
#yui-gen2 a.yuimenubaritemlabel {
    height: 115px;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 95px;
}
#yui-gen2 .bd {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("images/bg-li3-drop.png");
    background-origin: padding-box;
    background-position: 0 bottom;
    background-repeat: no-repeat;
    background-size: auto auto;
    margin-top: -12px;
    width: 210px;
}
#yui-gen2 .yuimenuitemlabel-selected, #yui-gen2 .bd .yuimenuitem a.active {
    color: #C01349;
}
.first-of-type a, .first-of-type li a.active, a.yuimenubaritemlabel {
    color: #FFFFFF;
    font-size: 34px;
    text-transform: uppercase;
}

All help appreciated in advance!

Creating A Floating Menu

Similar Tutorials

View Content

I want to create a menu that will float on the side of my page and stay in the same position on the screen as the user scrolls down. Is this done with CSS, Javascipt, or a little bit of both?
thanks.

Floating Box (fixed Position Menu)

Similar Tutorials

View Content

I have seen this done but can't find any examples at the moment, but what I am looking to emmulate is have a page that required vertical scrolling. On either the left or right hand side is (for example) a square image and directly below it is a menu. When the user scrolls down the page the image goes off the top but the menu sticks to the top so is always visable. When the user scrolls back up as soon as the image starts to appear it pushes the menu back down so it is sat below the image. If i used position:fixed I can keep the menu in the same place when scrolling but I would like it to rise to the top of the browser when space is availble when scrolling.
Make sense?

Menu Floating Right Pushes Main Text Down In Ie7

Similar Tutorials

View Content

See the image at http://i187.photobucket.com/albums/x205/vitainf/IEhelp.png
- having trouble to get it showing the image with the bbcodes :S

As you can see the menu to the right, which is known as '.sidebar' in the css followed below, is sort of pushing the main content, which is known as .content in the css below, down.

Anyone has any idea how to fix this?

Style Sheets
Code:

body
{
text-align: center;
  background: #800000;
  color: #fff;
}
* {
  padding: 0;
  margin: 0;
}

div#container
{
margin-left: auto;
margin-right: auto;
width: 700px;
text-align: left;
}

#spacer {
  height: 50px;
}

#header {
  height: 100px;
  width: 100%;
  background: url(ctfiles/logo.png) no-repeat top center #000;
}

#container {
  background: #fff;
  padding: 10px;
}

#main {
  background: #000;
  color: #fff;
  width: 700px;
}

.sidebar {
  float: right;
  text-align: right;
  background: #000;
  color: #fff;
  width: 30%;
  padding-left: 8px
  padding-right: 12px
}

.content { 
  color: #fff;
  background: #000;
  width: 70%;
  margin-left: 2px;
  margin-right: 2px
}

HTML/Template/PHP w/e
Note: It's a template for the MODx CMS, which explains some of the calls like [(site_name)]. The lorum ipsum is in the [*content*] call, the menu in the [[wayfinder...]] one.
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>
    <title>[(site_name)] | [*pagetitle*]</title>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

    <link rel="stylesheet" href="[(base_url)]chinatown.css" type="text/css" media="screen" />
        <base href="[(site_url)]" />



        </head>
<body>

<div id="page">

<div id="spacer">
</div>

<div id="container">

<div id="header">
</div>

<div id="main">
<div class="sidebar">
[[Wayfinder? &startId=`0`]]
</div>
<div class="content">
            <h4>[*longtitle*]</h4>
                [*#content*]
</div>
</div>

<div id="footer">
        [(site_name)] is powered by
        <a href="http://modxcms.com/" title="Powered by MODx"><strong>MOD</strong>x Content Management System</a>
        <br /><a href="[~11~]" title="Link to our Blog RSS Feeds">Blog Entries (RSS)</a><br />
MySQL: [^qt^], [^q^] request(s), PHP: [^p^], total: [^t^], document retrieved from [^s^].
</div>

</div>
</div>

</body>
</html>

Css Floating

Similar Tutorials

View Content

Hi Everyone,

I've been doing modest CSS for a while now and feel like I have a good grasp of it, and generally find a way of doing what I want. But, this has always bugged me and I need to understand what is going on...

I think it's a question of Floating.

This is in reference to http://www.arabellamusic.co.uk

I want the blog posts to be on the left, and some other content on the right. How is the best way to go about doing this? You can check my source, but this was my thinking:

Code:

HTML

<div class='inner'>
     <div class='left'>
     BLOG PHP HERE
     </div>

     <div class='right'>
     SOME OTHER STUFF HERE
     </div>
</div>

And the CSS:

.inner { width:788px; }
.left { float:left; width:50%; }
.right { float:left; width:50%; }

If you grab my stylesheet and my source, you will see that I have a couple more things in there, but I don't think they could be affecting the rest (text-align etc...)

So, am I doing this wrong? I have floated columns in other websites this way and it sometimes works, sometimes doesn't. Incidentally, once it would only work when I set 49% to each, I was assuming this was something to do with the box model I read about, but wasn't too sure.
I will try not to play around with the site too much until I get a reply or two, but a few things may jump around as I try stuff!

Thanks in advance...
James

Help With Floating Div

Similar Tutorials

View Content

hi,

i am a total newbie with css and trying to create a floating divider. an example can be seen at www.payjunction.com.
does anyone know a tutorial on how to create one?
thanks for the help in advance

Box In A Box Floating Right

Similar Tutorials

View Content

Learning CSS and trying to emulate the following table:
Code:

|--------------------------------------|
| Text 1           |----------------|  |
| Text 2           |  Inner box text|  |
| Text 3           |----------------|  |
|--------------------------------------|

I can get a nested div to work vertically but not horizontally. I'm trying:

Code:

        div#container { float: left }
        div#title { float: right }
	<div id="container">
	        hello<br>hello
		<div id="title">
			Text 1<br />
                        Text 2
		</div>
	</div>

Which is producing:
Code:

|--------------------------------------|
| Hello                                |
| Hello                                |
|                  |----------------|  |
|                  |  Text 1        |  |
|                  |  Text 2        |  |
|                  |----------------|  |
|--------------------------------------|

Perhaps a positioning thing which I don't understand yet? It's not homework so you don't have to do it for me, but rather you could just point to knowledge sources.... Tx!

Help With Floating In A Div

Similar Tutorials

View Content

Hi,

Can someone help me with why the following header bar doesn't work in Firefox? It just shows the very top of the bar with the two other divs inside of it.

Code:

<div class="cmsHeader">
	<div style="float: left;">Page Name</div>
	<div style="float: right;"><a href="" title='Add Page'><img src='images/icons/file_(add)_16x16.gif' border='0' alt='Add Page'></a></div>
</div>


.cmsHeader{
	background: #809096;
	padding: 5px;
	width: 98%;
	color: #FFFFFF;
}

.cmsHeader a{
	color: #FFFFFF;
	text-decoration: none;
}
.cmsHeader a:hover{
	text-decoration: underline;
}

Floating...

Similar Tutorials

View Content

I currently have the following layout

Code:

<table>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

how do i go about making the same layout but using CSS. Each <td> is 50% wide

Floating Div?

Similar Tutorials

View Content

I have 3 tables in a div. I have two of the tables one on top of the other. I wanted to place the third table to the left of the bottom table. So I placed the second table relative and left -50px. I placed the third with position absolute, top -70px and float right to achieve this layout. Is there a better way of doing this out of curiousity?

Div Floating Issue In Ff, Not Ie

Similar Tutorials

View Content

Please look at this page in FF

http://www.roadhousecamper.com/camper.asp?rv=17

Notice div with the red background and the thumbnails? It should float to the right of the large image but is does not. It does though in IE7? Thanks for any help. T

Text Outside Of Floating Div

Similar Tutorials

View Content

I have a 4 column div layout using floats.

When I resize the browser the text in the columns goes outside of the div, and over everything below it. Is there any way to insure that as the browser is resized the text will stay inside it's div?

Here's an example of my code:

CSS:
Code:

div#middle {
line-height: 130%;
text-align: left;
margin-left: auto;
margin-right: auto;
min-width: 800px;
}

div#featured {
background-color: #666;
color: #333;
border-right: 1px solid gray;
width: 30%;
float: left;
padding: 1em;
font-size: 14px;
}
        
div#snippets {
background-color: #444;
color: #333;
width: 20%;
float: left;
padding: 2em;
font-size: 12px;
}

div#tools {
color: #333;
background-color: grey;
width: 150px;
float: left;
padding: 1em;
}

div#ads {
background-color: #444;
color: #333;
width: 100px;
float: left;
padding: 1em;
}

HTML:
Code:

<div id="middle" class="minmax">
<!-- Main Articles -->
<div id="featured"  class="vsize">
<h1>Featured Header</h1>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<!-- Short Articles -->
<div id="snippets" class="vsize">
<h1>Snippets Header</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<!--  Search, other tools, event calendar -->
<div id="tools" class="vsize">Tools</div>
<!-- Ads -->
<div id="ads"  class="vsize">Ads</div>
</div>

Div Floating Problem

Similar Tutorials

View Content

Hi

I use DIV to display image thumbnails in a row from php loop.

for each div containing image I have set the attribute float: left; so that multiple images can be displayed in parallel. Now the problem is that if I have a single image then there is no need to show it on the extreme left of the page but in the center, but the thumbnail is displayed on the extreme left,

here is my code till now,

PHP Code:
echo "<div style='
    text-align: center;
    border: solid 1px #993333;
    padding: 1px;
    margin: 2px;
    float: left;
    margin-left: 6%;
    '>";

echo "<div style='
     text-align: center;
     padding: 0px 0px 0px 0px;
     margin: 0px 0px 0px 0px;'>
     <a href='/$path' rel=\"lightbox\"><img src='/print_resize_image.php?image=$path&type=$extension' width=200 height=150 border=0 ></a>
     </div></div>";

Floating Lists

Similar Tutorials

View Content

http://jordanmeeter.com/new/links.php

If you view that page in Firefox, it displays how it is supposed to. But if you view the page in Internet Explorer, you can see that it is severely ****ed up!

Any suggestions?

Thanks,
Jordan

Floating Boxes

Similar Tutorials

View Content

Hello,

I created a site with floating frames and it looks good in IE6 and FF/Mozilla.

But I have one problem:
I use in my dynamic layout an ID more then once
(thats not OK according w3 validation)

I tried to do something with pseudo classes but this works not really goed. My "uni" thumb box is used on two diff. pages
The skyscraper: http://www.all4yourwebsite.com/
and the result/search page: http://www.all4yourwebsite.com/search.php

I know there is a solution, but because the tumbbox have to be much flexible the solution must be simple as the current (wrong) solution. Anyone an idea?

Floating Issues.

Similar Tutorials

View Content

I am having problem layout out a series of spans in a row...

The code I am using should output:

ITEM1 ITEM2 ITEM3 ITEM4 ITEM5 ITEM6 ITEM7

but it is outputting

ITEM1 ITEM2 ITEM3 ITEM4
............................................. ITEM5 ITEM6 ITEM7

It steps down a line when the drop down navigation makes an appearance. The code I have is:

CSS:

PHP Code:
.textbox {
    position: relative;
    clear: right;
    float: left;
    padding-right: 17px;
    padding-left: 17px;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #DAEEAC;

}
a {
color: #FF6600;
}
ul {
  padding: 0;
  top: 0px;
  list-style: none;
  }

li {
  float: left;
  position: relative;
  width: 100px;
  }
li ul {
  display: none;
  position: absolute;
  top: 2em;
  left: 0;
  background-color: #e7e7e7;
  }
li > ul {
    top: 15px;
    left: 5px;
    }
li:hover ul, li.over ul{ display: block; }

HTML:

PHP Code:
<div id="navbackground">
  <div class="navholder">
<table width="600px" height="15" border="0" cellspacing="0" cellpadding="0">
  <tr>
        <td align="center">
            <span class="textbox"><a href="index.php" class="navtext">Homepage</a></span>

            <span class="textbox"><a href="packages.php" class="navtext">Packages</a></span>

            <span class="textbox"><a href="booking.php" class="navtext">Booking</a></span>

            <ul id="nav">
                <li><span class="textbox" style= "height:45px; width: 100px;"><a href="booking.php" class="navtext">Gallery</a></span>
                  <ul>
                    <li><a href="#">Ground Shots</a></li>
                    <li><a href="#">Recent Events</a></li>
                    <li><a href="#">Hen Parties</a></li>
                    <li><a href="#">Lorem Ipmus</a></li>
                  </ul>
                </li>
            </ul>

            <span class="textbox"><a href="contactus.php" class="navtext">Contact Us</a></span>

            <span class="textbox"><a href="links.php" class="navtext">Links</a></span>
        </td>
  </tr>
</table>

</div></div>

Images Floating Over In Ff

Similar Tutorials

View Content

In IE, this will produce the look that I'm looking for. The image and a couple of details are provided inside of a blue box.
In FF, they overlap eachother. Not the text, just the image. How can I adjust my CSS?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  
<head>
<title>Test</title>
<style type="text/css">
<!--
.fieldset {
	border: #26a solid 1px;
	width: 85%;
	margin-bottom: 5px;
	padding: 10px;
}
-->
</style>
</head>
  <body> 	        
		
<div class="fieldset"> 1: dfas <br />
  <hr />
  <img src="../../imageApp/images/smallrear.JPG" 
		width="160" 
		height="120" 
		border="0" 
		align=left hspace="12"/> etwrThis is an edit </div>
<div class="fieldset"> 2: <br />
  <hr />
  <img src="../../imageApp/images/small100_1737 (Small).JPG" 
		width="89" 
		height="120" 
		border="0" 
		align=right hspace="12"/> </div>
  </body>
</html>

Problem With Floating

Similar Tutorials

View Content

I use form field hints on my sign up page. I am trying to float it to right with the codes below but its not happening.

.hint {
float:right;
display: none;
position:absolute;
width: 150px;
border: 1px solid #aaaaaa;
background: #d7d7d7;
}
www.pearl.ru/isdunyasi/signup.asp

Floating Images In Ff

Similar Tutorials

View Content

I am at my wits end as I have tried and searched just about everywhere for some guidance.

I'm currently changing my site to an entirely tableless markup. On the following page, I have an image floated right of my <ul> which is wrapped by a div with a dotted border on the top, right and bottom. When I float my image right, the bottom edge of my image runs below the bottom border of the div. This only happens in FF and NOT IE.

Check out the following link:

My problem

Here is my xhtml markup:

Code:

<!-- Start Linear Template -->

    <div class="contain">

      <img src="/images/linearthumb.png" class="templatethumb" alt="Linear Template" />

	<p>
	
	    Linear Template

	</p>

	    <ul class="template">

		<li><span class="rarr">&rarr;</span> Professional and sophisticated.</li>
		<li><span class="rarr">&rarr;</span> Drop-down navigation menu.</li>
		<li><span class="rarr">&rarr;</span> Information &ldquo;boxed&rdquo; for easy reading.</li>
		<li><span class="rarr">&rarr;</span> Background can be &ldquo;watermarked&rdquo; with <br />
		    your logo or any color you wish.</li>

	    </ul>

    </div>

<!-- End Linear Template -->

And here is my css for the div and image (forgive the roughness of it):
Code:

div.contain {
    padding-right: 5px;
    margin-bottom: 10px;
    border-top: 2px white dotted;
    border-right: 2px white dotted;
    border-bottom: 2px white dotted;
}

img.templatethumb {
    float: right;
    width: 168px;
    height: 160px;
    border: 2px outset #808080;
    margin-top: 5px;
    margin-right: 100px;
}