|
CSS - Float:right Element Pushing Down Table In Ie
Hey guys, I'm now truly understanding why all my tech friends constantly talk about how much they hate IE. Anyways, im working on a site and am trying to add a corner element to one of my divs.
It works perfect in firefox... but in IE it pushes the table below it and adds like a 2px wide sliver to the right of the img. Here is the table layout Code:
<div class='wrapp'>
<img src='Images/tr.gif' />
<table style='width:100%;'>
<tbody>
<tr class='time'>
<td colspan='6' style='text-align:left;'>" . date('F d Y',$key[5]) . ", " . date('g A T',$key[5]) . "</td>
</tr>
</tbody>
</table>
[/div]
Then here is the related CSS codes to make the image float to the right. Code:
.wrapp {
margin-bottom:8px;
width:354px;
text-align:center;
}
.wrapp img {
float:right;
display:inline;
}
table {
margin-left:auto;
margin-right:auto;
}
So once again what im trying to do is have the corner img show on the top right corner of the wrapp div. It works perfect in firefox but again it does not work in IE... and I have read about 20 articles on google that talk about these problems but I just can't figure the right combination out to make it work. Thanks in advance for any help! Similar TutorialsHi, My page has 3 elements: one at the top(header banner), one in the middle (a middle content area) and one at the bottom (footer banner). Now I want those positions to remain intact regardless of the number of lines output in the middle element. The content is going to be determined at runtime by a server-side routine so I don't want to use a fixed positioning for the footer banner. I want it to be displayed at the bottom - after the middle content is displayed. And I want the middle content to be visible in the page i.e. I don't want a scroll area within the page. I have tried various approaches and read up on positioning but so far have not been able to do it using css. Any help is much appreciated. Jim For some reason, my table (using this for a calendar) is being pushed down in my <div>. Please look this over and see if you can figure out why this is doing this. (and pay no mind to the width, I'm still working on that part) TIA Javashackgirl http://www.fit4lifehealthclub.com/index2.html Hi, any help with this would be very useful? I'm having trouble with a float element on ie. It works fine on firefox, basically I'm wanting an element to be removed from the flow of all the other elements and placed on top... Heres the simple code, the colors are just to show the elements positioning. HTML <body> <div id="wrapper"> <div id="picture"></div> <div id="header">content</div> <div id="content"> content content content content content content content content content content content content.....</div> <div id="footer"></div> </div> </body> CSS body { text-align: center; } #wrapper { width: 750px; text-align: left; } #header { width: 100%; height: 50px; margin-top: 10px; background-color: #009966; } #content { width: 100%; height: auto; background-color: #CCCCCC; min-height: 300px; /*ie ignores this one*/ height: 300px; /*ie treats this as min height*/ } *>#content { height: auto; /* ie ignores child selector, modern browsers replace height declaration */ } #footer { width: 100%; height: 25px; background-color:#FF0000; } #picture { height: 350px; margin: 15px; width: 200px; float: left; background-color:#FFFF99; } Firefox displays fine with the green header, grey content, and red footer with the yellow picture element overlapping. IE puts the three content elements below the picture element.. I tried making the #picture position: absolute and this almost works except the content goes behind the picture! And I tried removing the width 100% from #header, #content, #footer and this almost works - its positioned right but the background does not flow under the #picture?! any thoughts? thanks. John okay I don't know why my text will not wrap in any of my "float:rights" My quicklink section I don't care about as much as the feature student section I'm building. The text spills out of the paragrah block and keeps running. http://www.mgan.net/form-honors/main(2).htm Any thoughts on how to fix it or a link to a site that would explain it's just as good Here is the relevant HTML code: <table> <tr> <td> <div style="float:left;"> <div class="middle"><div class="r"><div class="l"> <a id="gridtitle" href="javascript:void(0)" onclick="reload()"></a> </div></div></div> <div style="width: 200px;"> <a href="#" onclick="addheader()"><img border="0" src="tab_new_header.png" alt="Delete this grid"/></a> <a href="#" onclick="addfooter()"><img border="0" srctab_new_footer.png" alt="Delete this grid"/></a> </div> </div> <div style="float:right;"> <a href="#" onclick="javascript:toggleLayer('newgrid');"><img border="0" src="button_add.png" alt="Add a grid"/></a> <a href="#" onclick="deleteGrid()"><img border="0" src="button_delete.png" alt="Delete this grid"/></a> </div> </td> </tr> <tr> <td> <div id="gridbox3" class="gridbox" width="870px" height="600px" style="background-color:white;"></div> </td> </tr> </table> And the relevant CSS code [which just sets the background of the tab]: .l {background: url(../../datadir/client/images/billinggrid/name_sidebg1.png) 0 0 no-repeat; height: 43px;} .r {background: url(../../datadir/client/images/billinggrid/name_sidebg2.png) 100% 0 no-repeat; height: 43px;} .middle {background: url(../../datadir/client/images/billinggrid/name_sidebg.png); height: 43px;} This is the output (i can't post images?) http://i34 [.] tinypic [.] com/4hpqag [.] png The first problem I am having is that the div my gridtitle (CIBC) is in does not set its width automatically to the text width. Instaed, it spans the whole table ... Position-wise, I would like the tab with "CIBC" to be to the far left, the header and footer tabs to be right of "CIBC" but still floating left, and the + and x signs to be floating right, all on the same line. Help? Thanks in advance. Hi guys I'm having a little problem with a <table> based website Please check the following image Each circle in the image attached is a separate image file, and I must make each image to be inside design. My problem is that the images doesn't fit in the <td> area, so well... Is there a way I can make the images float over the table ? I mean, a decent way to do this without having to convert entire design form <tables> to <divs> (PS: I'm still learning tableless designs) Thanks a lot in advance Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "(URL address blocked: See forum rules)">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Styling HTML select elements</title>
<style type="text/css">
select {
width: 100%;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>Test</td>
</tr>
<tr>
<td>
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</td>
</tr>
</tbody>
</table>
</body>
This code does exactly what I want it to in Mozilla. The widest select determines the width of the column, and then every other select takes the same width. In IE, however, the width is determined by the plain text cells, and the text of the options get cut off. Without making the width fixed, which is a problem as I have a very large table with dropdowns in each cell where I don't really know what the values are or whether the user modifies the text size, is there any workaround in IE to acheive the same effect using CSS? Hi everyone, I have a problem I'm trying to overcome with displaying an image next to the text in a table cell. I've set the table cell to valign=middle and this achieves the layout I want (hopefully this demonstration will look right..) Code: PICTUREHERE PICTUREHERE PICTUREHERE The text goes here PICTUREHERE PICTUREHERE So the text and the picture are laid out along the middle of the cell. However as soon as the text gets too big for the cell (or the cell gets smaller) this happens: Code: PICTUREHERE PICTUREHERE PICTUREHERE The text goes here, but when it's longer PICTUREHERE PICTUREHERE the remainder comes here I knew this to be because the img is still an inline element in the cell. I tried to solve the problem by making the img float:left, but the following happens, even if the valign=middle property is set in the cell: Code: PICTUREHERE The text goes here, but when it's longer PICTUREHERE the remainder comes here PICTUREHERE PICTUREHERE PICTUREHERE Is it possible to achieve the top layout. If it is can someone help me please (it's probably staring me in the face) Thank you in advance Andy I'm looking for a CSS element that behaves like a table, where the size of the container will always be just big enough to surround the data inside, and will grow or shrink based on the content inside without having to specify any widths or heights. A div (with a border) with no width specified will go on forever horizontally. A table (with a border) with no width will stop as soon as the data inside ends. Is there a way to simulate this table behavior using CSS? Thanks I'm having a problem inserting two DIV columns (left and right) inside another DIV to get a result like the following image: http://www.geocities.com/simonc1204/image.htm What happens is that the DIVs extend outside of their containing block and into the footer below, rather than pushing it down, like so: http://www.geocities.com/simonc1204/bad.htm But, when I replace the two DIVs with some placeholder text, that works OK, with the footer being pushed down, as in: http://www.geocities.com/simonc1204/good.htm I would have thought that wrapping the two DIVs (which are absolute positioned) in a container DIV would make other block elements flow before and after them, but apparently not, and I need to understand CSS a bit more. I've reduced the problem to almost its simplest form, and by looking at the small amount of source, I'm wondering if anybody can tell me where I might be going wrong? Thanks in advance for any replies. Miner2049er. Hello, I am a javascript noob trying to do a javascript dropdown and this does not seem to be working at all. When ever I add in the list for the drop down, everything gets pushed to the left and where ever the list begins, every link after that just disappears. I'm pretty sure the link is being put inline instead of block like I wanted it to but i'm not sure how to correct it and I am getting completely frustrated doing it. I was wondering if anyone could tell me what I was doing wrong. Also, I used the suckerfish method for the drop down. HTML Code: Code: <div id="nav">
<ul>
<li><a href="agency.html"id="nav_agency" class="" title="Agency">AGENCY</a></li>
<li><a href="services.html"id="nav_services" class="active" title="Services">SERVICES</a></li>
<li><a href="technology.html" id="nav_technology" class="" title="Technology">TECHNOLOGY</a></li>
<li><a href="distribution.html" id="nav_distribution" class="" title="Distribution">DISTRIBUTION</a></li>
<ul id="break"><li id="first">
<li><a href="case_studies.html" id="nav_casestudies" class="casestudies" title="Case Studies">CASE STUDIES</a></li>
<li><a href="#" id="nav_blog" class="" title="Blog">BLOG</a></li>
<ul>
<li><a href="#">Search Engine Marketing</a></li>
<li><a href="#">Pay Per Click Management</a></li>
<li><a href="#">Lovcal Search Marketing</a></li>
<li><a href="#">Contextual Marketing</a></li>
<li><a href="#">Shopping Comparison</a></li>
<li><a href="#">Paid Inclusion</a></li>
<li><a href="#">Search Engine Optimizaiton</a></li>
</ul>
</li>
</ul>
</ul>
</div>
[\code]
JavaScript Code:
[code]
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("break");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
Here is the part of the css I created but i'm not sure how it's all supposed to go together since I'm a javascript noob. CSS: Code:
li#first {
border-left-width: 1em;
}
li#last {
border-right-width: 1em;
}
li ul {
display: none;
position: absolute;
top: 100%;
float:right;
font-weight: normal;
padding: 0.5em 0 1em 0;
border-right: solid 1px #7d6340;
}
li>ul {
top: auto;
left: auto;
}
li li {
display: block;
float: none;
background-color: transparent;
border: 0;
}
li:hover ul, li.over ul {
display: block;
}
#break a {
font-weight: bold;
color: green;
}
#break a {
text-decoration: none;
}
#break li li a {
display: block;
font-weight: normal;
color: #060;
padding: 0.2em 10px;
}
#break li li a:hover {
padding: 0.2em 5px;
border: 5px solid #7d6340;
border-width: 0 5px;
}
#nav{
float:left;
width:100%;
margin:0px;
padding:0px;
margin-top:-8px;
}
#nav ul{
float: right;
list-style-stype:none;
margin:0px;
padding:0px;
height:27px;
overflow:hidden;
}
#nav ul li{
display: inline;
margin: 0px;
padding: 0px;
height: 27px;
overflow:hidden;
}
#nav ul li a,
#nav ul li a:visited{
background-position: centertop;
background-repeat:no-repeat;
display:block;
float: left;
height: 0px;
margin: 0px 0px 0px 8px;
overflow: hidden;
padding: 30px 0px 0px 10px;
text-decoration:none;
}
#nav ul li a:link#nav_agency,
#nav ul li a:visited#nav_agency {
background-image:url(images/agency2.gif);
border:0px;
width:54px;
}
#nav ul li a:hover#nav_agency,
#nav ul li a:link#nav_agency.active,
#nav ul li a:visited#nav_agency.active {
background-image: url(images/agencyup2.gif);
border: 0px;
width: 54px;
}
#nav ul li a#nav_services,
#nav ul li a:visited#nav_services {
background-image: url(images/services2.gif);
border:0px;
width: 56px;
}
#nav ul li a:hover#nav_services,
#nav ul li a#nav_services.active,
#nav ul li a:visited#nav_services.active {
background-image: url(images/expandedservice2.gif);
border: 0px;
width: 56px;
}
#nav ul li a#nav_technology,
#nav ul li a:visited#nav_technology{
background-image: url(images/technology2.gif);
border:0px;
width: 76px;
}
#nav ul li a:hover#nav_technology,
#nav ul li a#nav_technology.active,
#nav ul li a:visited#nav_technology.active {
background-image: url(images/technology2up.gif);
border: 0px;
width: 76px;
}
#nav ul li a#nav_distribution,
#nav ul li a:visited#nav_distribution {
background-image:url(images/distribution2.gif);
border:0px;
width: 72px;
}
#nav ul li a:hover#nav_distribution,
#nav ul li a#nav_distribution.active,
#nav ul li a:visited#nav_distribution.active {
background-image: url(images/distributionup2.gif);
border: 0px;
width: 72px;
}
#nav ul li a#nav_casestudies,
#nav ul li a:visited#nav_casestudies {
background-image: url(images/casestudies2.gif);
border:0px;
width: 72px;
}
#nav ul li a:hover#nav_casestudies,
#nav ul li a#nav_casestudies.active,
#nav ul li a:visited#nav_casestudies.active {
background-image: url(images/casestudiesup2.gif);
border: 0px;
width: 72px;
}
#nav ul li a#nav_blog,
#nav ul li a:visited#nav_blog {
background-image: url(images/blog2.gif);
border:0px solid black;
width: 27px;
}
#nav ul li a:hover#nav_blog,
#nav ul li a#nav_blog.active,
#nav ul li a:visited#nav_blog.active {
background-image: url(images/blogup2.gif);
border: 0px;
width: 27px;
}
Hi everyone, It's been a while since I've opened up a .css file so forgive me. I have a couple of questions about this partiular site. It's a test site I'm workig on... http://www.karenwilliamson.com/joom2/ I would like if possible to fix the footer in a fixed position and not have it rise and fall according to the amount of content on each page. Click some of the random links and you'll see what I mean. Also, while I'm here I can't figure out how to adjust the spacing in the main content area to be more uniform between IE7 and FF. It seems to my novice eyes that it should be controlled by Code: table.contentpaneopen Maybe I'm being too nitpicky but I'm sure there is a way to make it more uniform among the two browsers? Thanks for any input Rob Right, so I'm very new at this CSS positioning business. All I'm trying to do is have a centered 100% tall div with some content inside it. The 100% tall div is working. Now, inside, I'm going to eventually have 3 different divs containing information. All will be centered in the large container, , be about as wide as the centered container, and they will appear one on top of the other. Right now, all I have is my title image, which is basically just a placeholder until I make the title image I want. I have it centered just fine, and its at the top obviously. The problem is, I don't want it jammed up against the top of the browser window. So, margin-top, right? When I do that, It pushed the entire page down however many pixels I make the margin. HTML: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>How To Read Basic Sheet Music ◊ Week 1: Welcome ◊ Cory Mensch</title> <link href="css.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="whiteFrame"> <div id="topTitle"></div> </div> </body> </html> CSS: html { margin: 0px; padding: 0px; height: 100%; } body { margin:0px; padding:0px; height:100%; background-image:url(Images/bg.jpg); background-repeat:repeat-x; } #whiteFrame{ background-color:#FFFFFF; margin:auto; width: 652px; min-height: 100%; } #topTitle{ width:611px; height:48px; background-image:url(Images/title.gif); background-repeat:no-repeat; margin-top: 50px; margin-left:auto; margin-right:auto; margin-bottom:auto; } Any help is greatly appreciated. Hi Folks, Does anyone know why a floated DIV would push another DIV out of the way? Or even why two floated divs would not want to sit either side-by-side or one infront of the other? Sorry this is actually the jist of a prob I had earlier, but I'm simplifying the question - hope that's okay. Thanks John subject isn't too good anyhow.. i have 4 cells __ __ |1 | |2 | --- --- __ __ |3| |4 | --- --- 2 and 4 are said to float right, such that 1 and 3 define the height of the page.. but.. when the contents of 2 go LONGER than the contents of 1, number 4 doesn't float right properly.. instead this happens __ __ |1 | |2 | --- | | --- | | |4| --- --- __ |3| --- do you see that? 4 tries to float right, but since it's called underneath 1, and 2 is extended, floating right relative to the page doesn't make it ACTUALLY float right any thoughts that will render this properly? (namely that cells 1 and 3 will inherit the height of 2 and 4 somehow?) Hi everybody Is there a way to inherit the height of a surrounding table cell? <td> <a href="..." style="display: block;">...</a> <!-- Should have the same height as the td --> </td> Thanks for help :-) Josh hi. I need some formatting help. I am using niftycorners and the linked list tabs I am building seem to rest at the bottom, pushing the bottom of the rounded corners to the right of them. I have tried clear:left, clear:right, clear:both at the div and ul levels but that doesnt work. any ideas? I have attached a picture of the problem. Here is the CSS/HTML: Code:
<style>
body {
margin:20px;
}
#toptabs {
clear:left;
}
#toptabs ul {
clear:left;
position:relative;
width:100%;
margin-bottom:0;
list-style:none;
line-height:1em;
padding:100px 0px 0px 0px;
}
#toptabs ul li {
float:left;
margin-right:5px;
padding:0;
}
#toptabs ul li.clear {
clear:right;
}
#toptabs a {
display:block;
color:#444;
text-decoration:none;
font-weight:bold;
background:#ddd;
margin:0;
padding:0.25em 1em;
border-left:1px solid #fff;
border-top:1px solid #fff;
border-right:1px solid #aaa;
}
#toptabs A:hover,
#toptabs A:active,
#toptabs A.he link,
#toptabs A.he visited {
background:#bbb;
}
#toptabs A.he link,
#toptabs A.he visited {
position:relative;
z-index:102;
}
</style>
</HEAD>
<BODY>
<div id="header">
<div id="toptabs">
<ul id="venture">
<li id="current"><a href="#"><span>Profile</span></a></li>
<li><a href="#"><span>Q&A</span></a></li>
<li><a href="#"><span>Recommendations</span></a></li>
<li><a href="#"><span>Connections</span></a></li>
</ul>
</div>
</div>
</BODY>
Hello, I'm currently in the works of converting an old HTML site of mine into CSS and have run into what seems to be a notorious problem with the page text not pushing the footer down when the text gets to a certain length. Instead the text just covers and hides the footer. I've been trying to remedy this problem for about a week, but to no avail. I've Googled this problem and tried the suggested fixes, but once again have had no such luck. I'm left to believe that every instance is unique. If you view the Style Sheet, I have the 'footerlinks' set at an "Absolute" position because it looks fine on the other pages and I do relize this will have to be changed. As to what else has to be changed I would really appreciate some input as to what I need to do to get the footer to slide down when the text gets lengthy. ------- Here's a link to the page thats having issues with the footer... *** Note: I keep getting an error message saying I can't post URLs on this forum because I have a new user account so below this line is the link to the page I'm having trouble with without the http:// ........ infoheaven.bravepages.com/Testamonials/Testimonials.htm The URL to the STYLE SHEET is located at the top of the page between the "Head" tags of the website source code I provided above. I tried listing my CSS code here, but once again I kept getting the "New user accounts are not permitted to create posts containing URLs" error message. Sorry for the inconvenience.... Dan - Hi There - Am converting another design from tables, working with a CMS (Drupal) and an existing CSS / table combination that I didn't write and have no choice about. Think of the header as having three sections. The top section has logo on the left, search box on the right. Rounded corners. I'm cool with that section. Then there's a space. Created a div for the space. Love the space. Problems with the space in IE. Will go into it later. Then there's the next section. Rounded corners. Contains the entire page. On the left is a pulldown menu, about 1 cm from the top. On the right is a tabbed menu. This menu has flexible height. It needs to be right up against the bottom with the menu below it. Call this section the tabbed menu section. Third section. Immediately below that is a bar menu like the one Apple's got. Looks like a metal bar with divisions. Call this primary links. ---------- First, the space between. In IE, when you roll over the bar menu, the space disappears. Won't come back. Initially, in the second section, floated the pulldown menu left and the tabbed menu right. That worked fine, except that the tabbed menu had a width of 100% and pushed up the pulldown menu so the section was too wide. When I put it to 65%, all hell broke loose with the bar menu in the third section below it and bits of it snuck up into the second section. If I left it alone, and left the tabbed menu at 100%, when I checked over its container with firebug, it said that it was being affected by the primary links. I figured that out also because the background for that container was a really weird color that I finally found in the background of the navigation id and changed to white. Primary was overlapping it so I couldn't see it with firebug. So after fiddling with several clearing methods, I gave up and decided to try a table. Table worked fine, and the second section looks good except that there's a one pixel space between the tabbed menu and the bar menu. --------- It is my greatest wish right now to be able to float the pulldown to the left, the tabbed menu to the right and have the primary links stay below. I wish I could get the space to work and I wish for a clear understanding of it all so I can then figure out where to put the corners. Anyone who can enlighten me on this would have my undying gratitude. I've been working on this all day and the deadline's tomorrow. Code: <div id="top part" logo and searchbox </div> <div> that pesky space that disappears in IE when roll over primary links </div> <div id=navcontainer> dropdown and tabbed menu </div> <div id="navigation" class="menu> <!-- couldn't find the menu class in the css --> <div id="primary" class="clear-block"> contains barmenu - very fussy </div> </div> Here's the relevant CSS: Code:
div#navigation {
background: #fff url(../images/blue/menu-bg.png) 100% 100% repeat-x;
}
#primary {
line-height: 30px;
}
#primary ul {
padding:0;
margin:0;
list-style:none;
}
#primary li {
display:inline;
}
#primary a {
font-weight:bold;
display:block;
float:left;
padding:0px 14px 0px 14px;
margin: 0px 1px 0px 0px;
font-size: 95%;
}
#primary a {
background-position:0% 0px;
}
#primary a:hover {
text-decoration: none;
background-position:0% -42px;
}
#primary a.active {
background-position: 0% -84px;
}
#primary a {
background: url(../images/blue/menu-div.png) 100% 0 repeat-y;
color:#666666;
font-size: 120%;
font-family:Arial,Helvetica,sans-serif;
}
#primary a:hover {
color: 666666;
background: #B8B8B8;
}
#primary a.active {
color: 666666;
background: #B8B8B8;
}
This is my first try at css and i have been at it about a week on and off. I have tried to use examples from here and the o'reilly CSS cookbook. I want to create a two column row of pictures with a caption. I selected DIV as the tool (my css is below). The container DIV looks great. I want the div.float, however, to start a second row when a third picture is added and to continue thereafter with successive two column rows. Unfortunately, each of my rows contain only one picture. here is my css style sheet. A demonstration of the problem can be seen at: http://www.yourline-online.com/demo05/?How_to_create_pages Code: div.float {
float: left;
BORDER-RIGHT: #808080 2px solid;
PADDING-RIGHT: 2px;
BORDER-TOP: #808080 2px solid;
PADDING-LEFT: 2px;
FONT-WEIGHT: lighter;
FONT-SIZE: medium;
PADDING-BOTTOM: 20px;
MARGIN: 16px 2%;
BORDER-LEFT: #808080 2px solid;
COLOR: #000000;
PADDING-TOP: 2px;
BORDER-BOTTOM: #808080 2px solid;
HEIGHT: 200px;
WIDTH: 150px;
BACKGROUND-COLOR: #ffffff;
TEXT-DECORATION: none
}
div.float p {
text-align: center;
}
div.container {
border: 2px dashed #333;
background-color: #ffe;
}
div.spacer {
clear: both;
}
MY HTML is like this: Code: H1>How to create pages</H1> <P>The headings are used for splitting up the content file. An H1, H2 or H3 heading will dynamically split the document into new pages in the table of contents. An H4-heading is used as a heading within a page. See the following pages...<BR></P> <P></P> <DIV class=container> <DIV class=spacer></DIV> <DIV class=float><IMG height=100 alt="image 1" src="image1.gif" width=100> <P>caption 1</P></DIV> <DIV class=spacer></DIV> <DIV class=float><IMG height=100 alt="image 2" src="image2.gif" width=100> <P>caption 2</P></DIV> <DIV class=spacer> <DIV class=float><IMG height=100 alt="image 3" src="http://www.yourline-online.com/demo05/image3.gif" width=100> <P>caption 3</P></DIV> <DIV class=spacer></DIV></DIV></DIV> |
|||||||