|
CSS - To Float Or Not To Float.. .. To Firefox Or To Ie That Is The Question!!!
Hi all,
I have a bit of an odd situation (prob not odd if you seen it before but I have no clue why its doing it!).... I have my webpage: http://www.houseofhawkins.com/index.html which works great in IE. the part in question is the menu tabs at the top. Within IE they keep the width I have given them.. In firefox they only go to the width of the text. They are links with the following CSS attached: div#Header #MenuSection a.MenuTab { PHP Code: filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#A8DBA8', startColorstr='#A4B7A4', gradientType='0'); font-weight: bold; text-align: center; font-size: 1.3em; background-color: #BCD6BC; border-style: solid; border-width: 1px; border-color: #A5BEA5 #BCD6BC #BCD6BC #A5BEA5; margin: 0 5px 0 2px; height: 1.5em; width: 140px; padding: 5px 1px 1px 1px; } div#Header #MenuSection { float:left; margin-top: 30px; } here is the HTML code for that part of the page. PHP Code: <div ID="MenuSection"> <a Class="SelectedMenuTab" Title="You are currently viewing the Home page">Home</a> <a Class="MenuTab" href="" title="Curriculum Vitae for Jonathan Hawkins, Author of House of Hawkins">CV</a> <a Class="MenuTab" href="http://houseofhawkins.com/projects/index.html" title="Portfolio of Work created by Jon Hawkins">Portfolio</a> <a Class="MenuTab" href="" title="Online Photo Gallery of Jon, friends and family">Photo Gallery</a> <a Class="MenuTab" href="http://houseofhawkins.com/games.html" title="Games created by House of Hawkins">Games</a> </div> <div style="clear:left"> </div> I just dont get why firefox wont be nice and give me the width I ask for... the oddest bit is if I put float:left into the menutab part they do work! I wish to understand why its like this... I have attached the CSS and the file if that helps anyone. Thanks for the help and advice. Similar Tutorialssubject 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 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> I seem to have an issue with the float parameter in Firefox. If you look at the following URL in IE, it should display fine, but in firefox the container doesn't expand to hold the div's within, as they're floated. I've seen other people use floats just fine in firefox, but it doesnt' seem to work for me.. http://www.arestaenterprise.com/enf/ Any help is appreciated Thanks! Please look at this page - http://www.eagletransmission.net/testimonials.asp In IE7 I have the main navigation alignment as I want it to be. BUt in Firefox the links do not align correctly. For example please look at the link for Affiliates. In Firefox it is pushed to the right instead of centered where it should be. Thanks. I am having an issue with a div that I am trying to float and set the width of. The page works fine in Firefox, but in IE it doesn't display correctly, Here is the pertinent code, <div id="textbar" class="sidebar" style="width:175px;"> <div id="handle"> <a href="#"><img src="http://swvtc06/swvtc/images/collapse.jpg" border="0" alt="Click to Collapse the Navigation Bar" onclick="sidebar()" /></a> </div> <div id="sbText" style="display:block;"> <!--#include virtual="/swvtc/include/nav_test.htm" --> <!--#include virtual="/swvtc/include/smweather.asp" --> </div> </div> Here is the CSS for the #handle div, #handle { float:right; width:9px; } In Firefox, the handle div is correctly inline with the background graphic. In IE, the handle div is about 9 pixels to the left of where it should be. We are in the ancient times, we still are mandated to be using IE 6, so that is where I am having the problems. Where am I going wrong? Thanks, Drew Does anyone know why the clear: left isn't working on firefox 1.0 on this page. Generic Page with floating divs and then clearing them for a new line. http://section31.us/temp/float_boxes.html Am I doing something wrong or is this a bug? The site is he http://andamu.org/main/yarn/ or "andamu.org /main /yarn" The appearance of the date, byline, comments/trackbacks and tags on the left, aligned beneath one another in IE 8 is the desired appearance. In Firefox, the date appears in the correct spot, but the rest appears to its right instead of below it. (I am modifying the Pico theme in MT5.) I'll try to get the relevant bits here, but please ask if I can provide more detail. The html part: html4strict Code: Original - html4strict Code <h2 class="date-header">September 6, 2010</h2> <div class="asset-footer"> <p class="asset-footer-info"> <span class="byline"> <span class="vcard author">Sivani</span> at <abbr class="published" title="2010-09-06T18:47:04-08:00"> 6:47 PM</abbr> </span> <span class="separator"><br /></span> <a href="http://andamu.org/main/yarn/2010/09/the-socks-of-doom---part-ii-sucked-in-again.html#comments"> No Comments</a> <span class="separator"><br /></span> <a href="http://andamu.org/main/yarn/2010/09/the-socks-of-doom---part-ii-sucked-in-again.html#trackbacks"> No TrackBacks</a> </p> </div> <!-- class="asset-footer" -->
The css part: Code: .date-header {
float: left;
text-align: right;
padding: 5px 20px 4px 0;
margin-left: 20px;
border-right: 1px solid #eee;
width: 128px;
color: #999;
}
.asset-footer {
float: left;
text-align: right;
padding: 5px 20px 4px 0;
margin-left: 20px;
border-right: 1px solid #eee;
width: 128px;
color: #999;
clear: all;
}
Note: I have tried using clear: all; in the .date-header to no effect. After hours of Google searching and working to find a solution, this is my last gasp. I'll qualify it by saying I'm a casual hobbiest, not a pro at all. In plain text, my problem is that I have a string of boxes I want to appear side-by-side...float: left. In firefox, on a hard refresh, these elements don't appear side-by-side, but on top of each other. It works just fine in IE. Example... Should be: 1 2 Is: 1 2 Below is my code. To see the problem in action, http://www.mcconaha.com Also, the code isn't great, and I know that. I'm building everything now, but can't get past this problem. Code: body{
background-color:#666666;
background-image: url(../images/header-back3.jpg);
background-repeat: repeat-x;
text-align: center;
margin-top: 0px;
}
div#header{
text-align:center;
}
div#nav {
margin-top: 20px; }
div#daybox {
width: 100px;
border: #333333;
border-style:solid;
border-width: 2px;
background: #E0E0E0;
margin-top: 35px;
margin-right: 10px;
margin-left:auto;
float:left;
height: 250px;
display:block;
}
div#daybox p {
font: Arial;
font-size:9px;
font-family:Arial, Helvetica, sans-serif;
text-align:left;
padding: 5px;
margin: 0;
display: inline;
}
div#dayboxthumb img{
margin: 0;
padding: 5px;
background: #FFFFFF;
border: none;
border-style: none;
display: inline;
}
div#featuredimage {
margin-top: 50px;
}
div#featuredimage img {
padding: 15px;
background:white;
border:1px solid black;
}
div#gallerycontainer {
margin-top: 35px; }
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="js/lightbox.js"></script> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> <link href="css/stylesheet.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="header"><img src="images/logo.jpg" /></div> <!-- yeah, it's a table to center it. I spent way too long trying to do it with css --> <table cols="1" align="center" border="0" ><tr><td align="center"> <div id="daybox"> <div id="dayboxthumb"> <a href="http://www.mcconaha.com/upload/2006/10/31/chuq1.jpg" rel="lightbox[lchuqhalloween]" title="smack" ><img src="http://www.mcconaha.com/upload/2006/10/31/chuqthumb.jpg" border="0"></a><a href="http://www.mcconaha.com/upload/2006/10/31/chuq2.jpg" rel="lightbox[lchuqhalloween]" title="smack" ></a> </div> <img src="http://www.mcconaha.com/images/dates/October.jpg" /> <img src="http://www.mcconaha.com/images/dates/31.jpg" /> <img src="http://www.mcconaha.com/images/dates/2006.jpg" /> <p>Chuq's office Halloween.</p> </div> <div id="daybox"> <div id="dayboxthumb"> <img src="http://www.mcconaha.com/photos/thumb1.jpg"> </div> <img src="http://www.mcconaha.com/images/dates/October.jpg" /> <img src="http://www.mcconaha.com/images/dates/30.jpg" /> <img src="http://www.mcconaha.com/images/dates/2006.jpg" /> <p>This is a test entry.</p> </div> </td></tr></table> </div> <div id="nav"> <img src="images/navmap.jpg" width="257" height="26" border="0" alt="" usemap="#navmap_Map"></a> <map name="navmap_Map"> <area shape="rect" alt="archives" coords="178,0,256,26" href="http://www.mcconaha.com/archives.php"> <area shape="rect" alt="contact" coords="79,0,154,26" href="mailto:contact AT mcconaha DOT com"> <area shape="rect" alt="about" coords="0,0,56,25" href="http://www.mcconaha.com/about.php"> </map> </div> </body> </html> At this point, I have no idea what to do. Given all the Googling, not many other people do either. Any suggestions on this would be helpful if I'm wrong about it being part of a well-known FF bug... Hi! Please help me again! I cannot figure this out. I have tried striping out everything out to see if I could figure out what was causing it -- I can't. This one part is not working - everything else is fine. When I take this out I have no problems. Basically, i'm trying to have an image with text next to it (without it wrapping around the image). In IE it works. In Firefox the text drops below the image. Here is the code stripped out. Unfortunately, I cannot access and FTP to upload this - but I don't think that should matter. Please, What am I doing wrong? Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>ARGH</title> </head> <body> <div style="margin-left:10px; margin-top:10px; width: 90%;"> <div style="float: left; padding-right: 10px;"> <img src="images/img.jpg" width="200px" height="100px" border="1"> </div> <div style="float: left;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tellus purus, aliquet ut, posuere vitae, ullamcorper at, sapien. Donec vel sapien a lorem vehicula imperdiet. Aliquam a nunc sed lectus rhoncus imperdiet. Maecenas commodo scelerisque nulla. </div> </div> <div style="margin-left:10px; margin-top:10px; width:90%;"> <div style="float: left; padding-right: 10px;"> <img src="images/img.jpg" width="200px" height="100px" border="1"> </div> <div style="float: left;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tellus purus, aliquet ut, posuere vitae, ullamcorper at, sapien. Donec vel sapien a lorem vehicula imperdiet. Aliquam a nunc sed lectus rhoncus imperdiet. Maecenas commodo scelerisque nulla. </div> </div> <div style="clear: both;"></div> </body> </html> HTML: Code:
<div id="title" class="title_lower_color">
<div class="title">TITLE</div>
</div>
<div id="main">
<div class="grouptitle1">Group 1
<div class="grouptext1">blah blah blah blah blah blah blah blah
</div>
</div>
<div class="grouptitle2">Group 2
<div class="grouptext2">blah blah blah blah blah blah blah blah
</div>
</div>
</div>
CSS: Code:
body {
margin-top: 10px;
margin-right: 10px;
margin-left: 10px;
}
.title {
font-family: "Times New Roman", Times, serif;
font-size: 24px;
color: #000000;
font-weight: bold;
background-color: #CCCCCC;
border-color: #000000;
border-bottom-style: solid;
border-bottom-width: thin;
width: 100%;
float: left;
position: relative;
}
.title_lower_color{
background-color: #666666;
border-color: #000000;
border-left-style: solid;
border-bottom-style: solid;
border-right-style: solid;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: solid;
border-top-width: thin;
width: 100%;
height: 40px;
float: left;
position: relative;
}
.grouptitle1{
color: #000000;
font-style: normal;
font-family: "Times New Roman", Times, serif;
font-size: 14px;
font-weight: bold;
position: relative;
background-color: #CCCCCC;
border-color: #000000;
border-style: solid;
border-width: thin;
margin-top: 10px;
width: 300px;
float: left;
}
.grouptitle2{
color: #000000;
font-style: normal;
font-family: "Times New Roman", Times, serif;
font-size: 14px;
font-weight: bold;
position: relative;
background-color: #CCCCCC;
border-color: #000000;
border-style: solid;
border-width: thin;
margin-top: 10px;
margin-left: 10px;
float: left;
}
.grouptext1 {
color: #000000;
font-style: normal;
font-family: "Times New Roman", Times, serif;
font-size: 12px;
font-weight: normal;
position: relative;
background-color: #FFFFFF;
border-color: #000000;
border-top-style: solid;
border-top-width: thin;
width: 300px;
}
.grouptext2 {
color: #000000;
font-style: normal;
font-family: "Times New Roman", Times, serif;
font-size: 12px;
font-weight: normal;
position: relative;
background-color: #FFFFFF;
border-color: #000000;
border-top-style: solid;
border-top-width: thin;
}
I've only just started using CSS rather than tables. The title bit is ok. The problem is the main <div>. In Firefox l can't seem to get the two divs (grouptitle1 & grouptitle2) to float side by side. The only way l can do it is by setting grouptitle2 to a certain width. But l want grouptitle2 to fill the remaining width of the screen whatever size the browser is and not be a set width. Is there any way so that l can make the two divs appear side by side without adding a width to the grouptitle2?? here's a working version: Clicky Hi, I have been a CSS/XHTML developer for about 6 months now and I just came accross a problem that I have had difficulty solving... I have spent about a week on this problem, and still no luck... I kind of restarted too with no luck... I am thinking this may be a bug... But it works fine in IE... In firefox, the content division background does not continue, instead a footer background is moved up... This is so weird, I dont know how this can be possible... This has been extremely frustrating... If anyone can help, that would be great! Thanks a lot! Hi, I have been beating my head against the wall here. My video position in firefox shows up over top of my other nested divs/classes. www.binaryshopper.com The site renders perfect in IE. When you spend more time on CSS than programming, something is wrong! I love CSS but it still doesn't do what it was intended to do. After years of CSS, you still have better control over layout using crappy tables!! Can someone please help me here before I start shooting Firefox developers? This is my code essentially: <div id="bottom"> <div style="float:left">store hours</div> <img src="map"> <div style="float:right">contact info</div> </div> It looks fine in Safari but it messed up in Firefox. I fixed it a bit by adding overflow:auto to the parent item (bottom div), so it actually has the red background and doesn't collapse. I haven't yet uploaded that fix yet as the problem still isn't solved. Now the div is expanding too much because the 3 items aren't being displayed inline. In firefox the image is pushing the first div beneath it. Any solutions please? Hi, I have three <div> Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<div id="container" style="width:500px;height:700px;background-color:green;">
<div id="one" style="float:left;width:100px;background-color:#ff9900; ">one<br>one<br>one<br>one<br>one<br>one<br>one<br></div>
<div id="three" style="float:right;width:100px;background-color:red;">three </div>
<div id="two" style="float:left;width:70%;background-color:#ff9988;">two jdfk hnldncf ddhf sd ohdnfc kbldhcv ohsvnskd hvjnsdhv hviopsdhv kbhopvd v onksdnv oln;sdmnv m;mv mnml;vm vm;klf kdfl'gl;v 'fg 'kdf'kvb'l ;'lfk</div>
</div>
</BODY>
</HTML>
I noticed when I increased the % width of my <div two> it goes below my <div three> I was under the impression it should just stay at the same level and text should wrap around my div three? But I guess that's not the case. Am I doing the something wrong or is this the expected behavior? arg arg arg and you all know the rest. anyway to the problem in firefox the layout is all good but in IE things are realy starting to annoy me. http://217.68.23.6/~themodem.co.uk/index.php i think its my float stuff but im not sure, could someone please take a look at it for me heres my css Code:
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color:#000000;
}
#leftcontent {
float:left;
width: 236px;
}
#mainmenu {
width: 170px;
}
#stats {
margin-top:inherit;
width: 205px;
background-color:#000000;
}
#centercontent {
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 245px;
background-image:url(images/wow/bg.gif);
background-repeat:repeat;
}
#rightcontent {
float:right;
margin-right:5px;
width: 236px;
margin-top:20px;
}
#login {
margin-top:inherit;
width: 205px;
background-color:#000000;
}
#submenu {
width: 200px;
}
#banner {
voice-family: "\"}\"";
voice-family: inherit;
}
thanks Lee Hey all, I'm wanting to create something like this: HEADER TITLE ___________________ TEXT HERE + - _______________________________ TEX HERE + - _______________________________ TEX HERE + - Ignore the underscores. Now I'm trying this code: Code: <div> <h2 style="display:inline;">HEADER TITLE</h2> <div style="float:right; padding:0; margin:0;"> TEXT HERE + - <br /> etc.. </div> </div> But no matter what I try the 'TEXT HERE' does not appear on the same inline and the floated div appears one line down like so: HEADER TITLE _______________________________ TEXT HERE + - _______________________________ TEXT HERE + - _______________________________ TEXT HERE + - Any suggestions on how to correct this? Thanks Hi, this bug is driving me nuts. I don't know why it happens. All I know is that it is not even consistent. Here's a screenshot of the problem: http://www.argsoccertours.com/float-problem.jpg And here's the code for that part: Code: <p>The bus will take you to your hotel, where you can leave your luggage and take a shower.</p> <p>This day we suggest the Buenos Aires City Tour. Discover one of the most amazing cities in the world. Buenos Aires is a thoroughly modern city with more than 400 years of history. Visit Florida street, one of the most surprising pedestrian streets in South America. You don't want to miss Palermo Soho, the trendiest neighborhood in Argentina, where you will find tourists from all over the Globe;<img src="images/caption10.jpg" alt="Caminito" width="300" height="300" class="floatright" /> visit Puerto Madero, the preferred area for luxury offices and restaurants; and also check out San Isidro, the most exclusive neighborhood in Buenos Aires.</p> <p>You will also get to see Argentina's historic buildings, the <em>Casa Rosada</em> (which means "Pink House" and is the President's office), the <em>Obelisco</em> (a huge tower with a lot of history), and some of the oldest, yet best mantained museums and theaters in the world.</p> <p>Finish the day with a short visit to Recoleta, the neighborhood of choice for expats in Buenos Aires to have a good time and eat at the best restaurants.</p> <h2>Thursday, March 4 - <span class="redsubtitle">Practice + Palermo Soho + Recoleta</span></h2> <p>Your team will have a practice in the morning. A complimentary transfer will be available for you and your Tour Manager will help you with any arrangements that you need.<img src="images/caption11.jpg" alt="Rugby practice" class="floatright" /></p> <p>In the afternoon you can have <em>Tapas</em> -a Spanish typical dish- in Palermo Soho, a place that is so cool you will never forget it.</p> The CSS for floatright is: Code:
.floatright {
float: right;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
}
As you can see in the code, in both cases I insert the image the same way, but the first one looks OK and the second one doesn't. This happens on IE7 (not sure about other versions of IE), but for sure it doesn't happen on FF. Anybody has any clue on what could cause this? |
|||||||