|
CSS - Float Drop In Firefox On Refresh
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... Similar TutorialsHi 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. Hi All, I have a problem related to float drop, my site uses a liquid layout split 15%:85%, if the browser is wide enough it will look fine, but otherwise the content drops below the nav bar. I don't have any unbreakable text in the content area.... The problem has only been introduced since I added a min-width property to my sidebar. I have read lots of tutorials on the subject, and have experimented with various clear and overflow properties and extra container divs but to no avail. Maybe I am approaching the problem in the wrong way, the reason I added min-width to the sidebar is because when the browser is made smaller the menu buttons can overlap onto the main content. The site is currently hosted on my laptop here. I will try and keep it online as much as possible for a few days. If anyone can give me some pointers I'd be very grateful. Jez Hey gang. I have a very simple layout for a software interface.I am floating a vertical menu on the left, and to the right, is a horizontal navigation bar (float left), and below that (and to the right of the menu) is the main staging area for content (also float left). So essentially everything is float left. Inside the horizontal "path" bar I have a float left, and a float right, both holding two or three words of text. No problem. I am also performing a clear:both after all of this jazz, to allow the footer of the software to show below all of the content regardless. All is well in IE. In firefox, the horizontal nav bar DROPS below the menu, ONLY WHEN I have a float:right in the bar. Im made a very primitive mockup with inline styles to show you whats up in firefox....why does this drop? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Untitled</title> </head> <body> <div style="float:left;width:100px;background:#CCCCCC;"> this is it!<br> this is it<br> this is it<br> this is it<br> this is it<br> this is it<br> this is it<br> this is it<br> this is it<br> this is it<br> </div> <!-- container --> <div style="background:#444444;padding:20px;float:left;"> <!-- mainnav --> <div style="background:#000000; padding:10px;"> <!-- subnav --> <div style="float:left; background:#FF0000;">this is the first one</div> <!-- utilnav --> <div style="float:right; background:#FFCC00;">this is another.</div> <!-- clear --> <div style="clear:both;"></div> <!-- /close mainstage --> </div> <!-- main container --> <div style="float:left; background:green;">thisis the main content</div> </div> <!-- clear --> <div style="clear:both;"></div> <!-- footer --> <div style="background:#EEEEEE;">footer</div> </body> </html> Im really starting to lose it. (my hair that is), and I know I must be missing something simple here.... thanks in advance gang! John I did some searches here to see if anyone had posted about a similar problem and didn't find any answers. What seems to be happening is when I apply the clear property to my h2 elements, I get a big float drop in my layout. When I don't use the clear property, there is no drop, but then things are floating on each other that shouldn't. Here are two versions of my page: Without the clear property on my h2s: www. shawkey.com/test/h2noclear.html and with the clear property on h2s: www. shawkey.com/test/h2clear.html Can anyone tell me what's going on here? Hopefully an easy fix and I'd appreciate any reference links I can bookmark. I have the following site with a navigation bar and content: jimspace.dreamhosters.com/whirligig The content is first in the source with a float: right and the nav bar next in the code with a float: left. In FF the items in the nav bar flow out of the DIV box as they should. When I switch to IE6, the DIV box expands to the size of the longest text causing a float drop. An overflow: hidden solves it, but then of course the nav bar items are cut off. Here's the relevant HTML: Code: <div id="content"> <h2>get whirligigged!</h2> <p>CONTENT</p> </div> <!-- content --> <div id="navcontainer"> <ul id="navlist"> <li class="a"><a href="#">Item one</a></li> <li class="b"><a href="#">Item two</a></li> <li class="c"><a href="#">Item three</a></li> <li class="d"><a href="#">Item four</a></li> <li class="e"><a href="#">Item five</a></li> <li class="f"><a href="#">Item six</a></li> <li class="g"><a href="#">Item seven</a></li> <li class="h"><a href="#">Item eight</a></li> <li class="i"><a href="#">Item nine</a></li> <li class="j"><a href="#">Item ten</a></li> </ul> </div> <!-- navcontainer --> And the relevant CSS: Code:
div#content{float: right;
margin: 90px 25px 0 0;
height: 420px;
width: 700px;
clear: right;
border: 1px solid red;
}
#navcontainer
{
float: left;
width: 200px;
border: 1px solid blue;
}
How can I get this to behave in IE6? Hey guys. I have a layout designed right now that has, in brief, a wrapper around my main content and then a left and right float(both floated left). My wrapper of the whole site is just set to a margin of 30px on the right and left, meaning it doesn't have a set width. My left float is a column, and is set to a width of 220px. Then, whenever I add content to my right side, it will stay there until it goes over a certain amount, and then it will break and go below the left float. I have used the clearfix method on the main container float, and I really don't know where to turn now. Here are the styles for my main container, left, and right floats: Code: #content {
background: #fff;
padding: 0 10px;
padding-top: 5px;
/* This division also has the .clearfix class */
}
#left {
float: left;
width: 220px;
border-right: 2px solid #ccc;
}
#right {
float: left;
padding: 0;
margin-left: 10px;
font-size: 1.2em;
/* This is the Div that drops after too much content */
}
I would like it so that the content in the right div will adjust when the window is resized, but it won't break to the line under the left float. I am using this: http://alistapart.com/articles/cssdropshadows/ for use on a gallery. Each image it is applied to is in a table cell. However, because its floated left, it floats to the left of the table cell even though I have cent the text-align to center Hi ... I'm new here. I hope someone can help me. I've taken a Dreamweaver CS3 3-column template and added a fourth column. Everything looks okay until I move the "main content" column above columns 2 and 3 in the source code (so that it will load before them, because they have external content). Then I get float drop with columns 2 and 3. Since I'm a new user, I'm not allowed to post URLs, but I think if you go to my profile you can see my home page address. Then just add the following paths: Page without float drop (before changing column order) /new/index.html Page with float drop (after changing column order) /new/about.html I tested this on the basic DW template that I started with, and it has the same problem. I ran my page through the CSS validator with only two errors that I can't figure out. However, I get 75 errors when I use the XHTML validator, and I think I'll have a nervous breakdown if I have to try to fix all that. I know it's probably something to do with margins or floats, but I've tried everything I can think of and I'm at wit's end. Thanks in advance. 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 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! 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? Can anyone fix this problem? The site looks weird in Firefox but when you refresh the browser, it looks okay. why is this http://www.spunlogic.net/Gmaac/index.htm It's totally messed up on Mac IE, but I gave up trying to fix that problem 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> 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. 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! |
|||||||