Forum Moderators: not2easy
I have tried basically everything I can think of to resolve this issue, and yet it persists. I have an image height and width set in the HTML (I’ve tried with CSS too). Every containing DIV has an explicit width. I even tried cutting off a number of pixels off everything to allow wiggle room for these floated elements… in case it was randomly applying some extra margins or growing somehow.
I have tried using just one float and left-margin to separate elements. (The left and right columns were still floated).
I have even tried to not use CSS floats at all, and instead use align=”left” on the images, and I STILL got this issue to repeat. (The left and right columns were still floated).
I used to have a very similar problem plaguing IE6. The page would often load with some CSS or float problem. However, it would be fine on page refresh. I believe I solved that by adding a clearing element. The IE problem I could replicate locally on my machine, so it obviously wasn’t a server issue.
This FF issue however, I can’t seem to replicate locally (or on my personal Apache). Everything loads so fast there doesn’t seem to be time for the page load to mess up. Right now I only have access to 1and1 (linux) servers. However, I do recall seeing this random float not loading issue on a completely different server. At the time I ignored it.
If this is a server issue, how on earth could I remedy it? It’s not like random parts of the CSS aren’t loading, it is very specific in nature. In fact, the first product item to mess up on a page is usually (but not always) the third item down. Why the 3rd item down so often? There is nothing special about it. Most of the time, if anything doesn’t render correctly on the page, the right column is pushed below the left column. If the right column is floated right, it is still aligned to the right, it’s just all the way below the left column. This bug is very consistent in the effects it has on the page.
I commented out a bunch of my changes so that the pages are loading completely normal most the time. It’s just sometimes in Firefox on the first load that any problem is happening.
The URL of the site is: <snip>
The problematic pages are the product overview pages:
<snip>
If you would really like an idea of what I mean by “floats not rendering” and this consistent bug that I speak of, I have a couple screenshots to show. I added the red arrows to point to issues or areas of interest. Here are the screenshots:
<snip>
Any explanation or thoughts on this matter will be much appreciated. I am all out of ideas.
-Alan
[edited by: Robin_reala at 4:04 pm (utc) on April 1, 2007]
[edit reason] Removed URLs as per TOS #13 [webmasterworld.com] [/edit]
Just a quick note, this site requires posting your (X)HTML / CSS code and not posting personal/business related links (and thus expect to have your post modded according to the TOS).
With that out of the way Firefox has a couple odd bugs still floating (pun not intended) around one of which is a spotty reload bug. I've noticed sometimes reloading the page after making changes does not actually rerender the page! Clicking on the Go button sometimes ails this problem.
I've never encountered your float bug before and would recommend rebuilding the basic page structure from scratch and then comparing and contrasting your structural code. I'm not really sure where to begin with such an odd bug!
I'd also make a copy of the bugged page(s) and post them someplace for review by the Mozilla team. They are actively working on the late alpha stages of Gecko 1.9 and they may be able to fix this bug before Firefox 3 is release. In Firefox click the Help menu, then click Report Broken Web Site... and report the bug while including your email address. I'd also post about it on Mozilla's bug reporting site. A few Google searches did not bring up anything that suggests this is a widely known bug (at least with the terms I used).
- John
I will say that it looks just a wee bit tight. Did you try deliberately making the container too wide, and floating left and right in it? This reminds me of the IE Box model problems I used to have, where I'd have to specify the sum of my elements to 99%, or they'd overflow and break the float.
.product_small {
/*width: 349px;*/
width:353px;
background:#000 url(../images/product_sm_bg.gif) repeat-x top left;
border:1px solid #555;
margin:5px 0;
padding:5px;
display:table;
float: left;
/*position: relative;*/
}
Well it seems you've set a static value for width (though your page has a static layout (set widths)).
I don't like the W3C's "valid" CSS that it spits out...
Change...
margin:5px 0;
...to this...
margin:5px 0px 0px 0px;
While I use shorthand CSS all the time I never use incomplete CSS; to me it's invalid as are a few other odd things the W3C allows (or disallows such as tabindex on divisible elements).
Let us know once you've gone through your code if the behavior still exists.
- John
*Edit - Firefox did not recognize shift being pressed for the J in my name. Gah! ;)
[edited by: JAB_Creations at 3:33 am (utc) on April 1, 2007]
[edited by: Robin_reala at 10:03 pm (utc) on April 1, 2007]
[edit reason] Removing URL as per TOS #13 [webmasterworld.com] [/edit]
The bug WAS resolved by getting rid of “display:table”. However, the major culprit wasn’t the product classes, it was the content div wrapper which was also set to display:table. Removing it, caused the layout to mess up, but it was remedied by an added clearing element before the closing tag of the content DIV. Of course IE6 and IE7 did different things with this added clearing element on the individual product pages. So I had to make different classes of clearing elements… BUT the good thing is that it is finally working!
Lessons learned:
-Do NOT use display:table unless absolutely necessary
-Be VERY careful about where and how to clear floats
Thanks for replying guys =)
Do NOT use display:table unless absolutely necessary
This one always puzzles me. Why mutate a <div> to act like a bad <table>?
If you want the behavior of a <table>, then use a <table>. It is one of the oldest, most well-supported and robust elements in the lexicon, despite all the mud thrown at it by the zeldmanites.
<table> elements aren't radioactive. They have just been used in a manner inconsistent with their original intent. We are currently doing exactly the same thing these days, when we mutate <ul>, <ol>, <dl>, <li>, <dt> and <dd> elements into things like tabbed navigation block-level elements. One day, a Jeffrey Zeldman will come along and preach the evils of mutating lists, and the industry will abandon this practice wholesale.
That being said, there wasn't really anything in that layout that really needed the behavior of a <table>, as far as I could see.
just for future info (like when it's fully supported ;)), when using display:table you should probably still build the whole construct as if it were a table in order for it to work properly (see: anonymous table objects [w3.org]) , which in CSS terms is nothing more than a series of wrapper divs.
<div style="display: table;">...
<div style="display: table-row;">...
<div style="display: table-cell;">...</div>
<div style="display: table-cell;">...</div>
</div>
</div>
as for when/if it should be used think of display:table-cell like the inline blocks that they are - Say, for example, you have a list and you would like each <li> to display side by side as a block (in a separate table cell) - is that a list or tabular data.. do you want to markup your list as a list or as a table, which offers the greater flexibility?
The theory/reason for building the CSS construct in the same way that the HTML table element is constructed is that the <table> is a wrapper for the <tr>'s and the <tr> is a wrapper for the <td>'s which is the same as using floated/inline-block <divs> for td's and wrapping them in a container to produce the <tr>. In the HTML table model the missing elements are assumed, but they're not assumed in CSS so specify them for expected compatibility would be my guess
IMO the advantage that
display: table;Yes use a table if it's tabular by all means - rows and columns intersect at reference points - but if it's simply a method of displaying a list or 2 or 3 bullet points side by side is that a style/display issue or tabular data?
Suzy
PS: no longer relevant to Q - but a small correction if you don't mind JAB -
that margin property
Change...
margin:5px 0;...to this...
margin:5px 0px 0px 0px;While I use shorthand CSS all the time I never use incomplete CSS;
That first(red) margin property is NOT incomplete it is perfectly fine it means:
top and bottom margin = 5px ¦¦ left and right margin = 0px
so the 'longer shorthand' would be
margin:5px 0px 5px 0px; (T, R, B, L)
you could even use 3 values
margin: 5px 0 5px;
which means top = 5px ¦¦ right and left = 0px ¦¦ bottom = 5px
HTH
Suzy
