473,836 Members | 1,410 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Floating div drops with long text in Firefox (CSS Issue)

rblaettler
11 New Member
I have two div's with a float:left attribute that I've put into a list. They should align horizontally, which they do as long as the text in them does not need to be wrapped. As soon as the area for the float gets too small, IE wraps the text, but FF drops the div below the other before it starts to wrap the text. This is not exactly what I want. I could use absolute positioning, but that leads to other issues and is not really what I wanna do anyway. The simplified example page is below and core code too:

http://remy.supertext. ch/uploads/floatproblem.ht ml

You can see the effect if you narrow the Window in FF and in IE. It works in IE7 as expected.

Expand|Select|Wrap|Line Numbers
  1. <style type="text/css">
  2.  
  3. ul.GenericList
  4. {
  5.     list-style: none;
  6.     width: 100%;
  7. }
  8.  
  9. ul.GenericList li
  10. {
  11.     clear:both;
  12.     width: 100%;
  13. }
  14.  
  15.  
  16. ul.GenericList div
  17. {
  18.     float: left;
  19. }
  20.  
  21. </style>
  22.  
  23. <ul class="GenericList">
  24.     <li style="">
  25.             <div >
  26.                 <div style="background-color:Yellow;">Test</div>
  27.                 <div style="background-color:Aqua;">
  28.                     <b>Short Text</b><br />
  29.                 </div>
  30.             </div>
  31.     </li>
  32.     <li style="">
  33.             <div >
  34.                 <div style="background-color:Yellow;">Test</div>
  35.                 <div style="background-color:Aqua;">
  36.                     <b>Short Text</b><br />
  37.                 </div>
  38.             </div>
  39.     </li>
  40.     <li style="">
  41.             <div >
  42.                 <div style="background-color:Yellow;">Test</div>
  43.                 <div style="background-color:Aqua;">
  44.                     <b>Long Text and very long Text. Long Text and very long Text. Long Text and very long Text.</b><br />
  45.                 </div>
  46.             </div>
  47.     </li>
  48. </ul>
Any ideas?
Oct 15 '08 #1
8 5601
drhowarddrfine
7,435 Recognized Expert Expert
As usual, IE is wrong. Never use IE as a reference for how things should work.

You've set the <li> as 100% width. When you narrow it down, it has to make things fit inside so it drops the text to the next line. What IE is doing is a bug in IE.
Oct 15 '08 #2
David Laakso
397 Recognized Expert Contributor
http://remy.supertext.ch/uploads/floatproblem.html
You can see the effect if you narrow the Window in FF and in IE. It works in IE7 as expected.
The IEs get it wrong.Code to compliant browsers. Fix the IEs.

The construct of the division needs to be changed [1]. The list is not needed and is extraneous and unnecessary markup-- that is, unless of course, I have completely misunderstood what you're trying to accomplish.
[1] Plese see amended division construct
PS
Given the uri is provided, as yours was, it is not necessary to post the code to the forum-- anyone can open the document to view the markup and css. More important, validate your markup before posting a question about (x)html/css. Thanks.
Oct 15 '08 #3
rblaettler
11 New Member
Sorry about the validation. I just quickly put together a simplyfied example. I posted the code so that "future generation" can still get the idea. It's always unfortunate if you find the solution to a problem, but the link is not working anymore.

Anyway, what I'm trying to achive is some flexible table like structure. The app also has to work on the iPhone afterwards and most iPhone navigation examples work with lists. So I based my design on a list too.

Since it's only text and not one long character, I would have hoped that it would word wrap the text before it drops the div down.
What can I do to achive that without fixed width or absolute positioning?
Oct 15 '08 #4
drhowarddrfine
7,435 Recognized Expert Expert
It will word wrap. Just not the way you have it. Don't have time to show an example right now.
Oct 15 '08 #5
rblaettler
11 New Member
An example would help :-)
Or a hint on what I'm doing wrong?
Oct 16 '08 #6
David Laakso
397 Recognized Expert Contributor
Since it's only text and not one long character, I would have hoped that it would word wrap the text before it drops the div down.
What can I do to achive that without fixed width or absolute positioning?
Please forgive me, but this entire thread is about as clear as mud. As may be this suggestion: use a "table like" (no width specified) definition list?
Aside: My piece of garbage (personal opinion) iPhone has no difficulty rendering what I suggested a couple of days ago, or with the above suggestion for the use of a "table like" definition list where no width is specified.
Oct 18 '08 #7
rblaettler
11 New Member
Thanks for the hint about the definition list. I've created an example with that approach, which works fine in FF, but has some issues with IE. Sometimes it does it side by side and sometimes it drops all rows. Depends on the width of the window.

Is there really no solution with my initial list approach? We do have the iPhone as the standard phone in my company, so it's not really my decision.
Oct 22 '08 #8
David Laakso
397 Recognized Expert Contributor
Is there really no solution with my initial list approach? We do have the iPhone as the standard phone in my company, so it's not really my decision.
Nothing is impossible: depending whether or not "your company" can live with the consequences-- in this case, widths are needed, a lot of code is necessary, and hacks from here to Havana are required to get the right column to come even close to holding in the IEs. This [1] is a modification, I took the liberty to make, on a test case example somewhat similar to yours by Alex Robinson . Further modification is on you. Incidentally, Alex makes it clear on his site that he does not provide answers or solutions to problems.
[1] float drop in Internet Explorer with long text
Oct 22 '08 #9

Sign in to post your reply or Sign up for a free account.

Similar topics

3
10771
by: JHR | last post by:
Hey all, I'm trying to make a sidebar box float to the right of various items, and for those items to wrap if a user shrinks his browser window. Instead, in every browser I've tried except for Internet Explorer (in Safari, Firefox, and other Mozilla-types), the box ends up overlapping with the second and third rows of the text (which are in an ordered list with some 'display: table-cell' formats defined in order to allow specific...
5
1338
by: tomasio | last post by:
Dear Group, The Site under the following link (http://tomasio.laudatio.com/temp/schiepek/index.html) displays as I want it to in IE 6 (under Win XP) but does not render correctly in Firefox 1.0. As usually Firefox does HTML and CSS better than IE, I would like to know what kind of mistake I made in coding the site. I think it has to do with the "float"-property in the text selectors (copy, h1, h2). the width of the text seems to be...
18
5734
by: day | last post by:
I know I've seen this issue described before, but I can't find it, or the solution now that I need it. I have some css-specified floating divs that contain images or text. The text divs have a background color and text color that differ from the rest of the page, and I'd like them to be positioned from the right edge of the rightmost image div, to the right edge of the browser window. In other words, if the browser window is 800 pixels...
1
6283
by: bryanrite | last post by:
I have two floating divs within a 100% width container div. In IE when you resize the window to the point where the text should wrap, it wraps and extends the height of the container div. In Firefox, the div doesn't wrap but drops below the container div. I can't seem to figure out what i'm missing or what IE is automatically adding for me?? check it out: http://frontstreet.realclip.ca/index.php?pg=local_info * resize the window around...
1
2007
by: Lee K. Seitz | last post by:
I created this page (http://home.hiwaay.net/~lkseitz/comics/newu/publishing.shtml; CSS at http://home.hiwaay.net/~lkseitz/comics/newu/newu.css) while looking at it in Firefox 1.05 (Win 9x) and it looked like I wanted. Then I pulled it up in IE 6 and found all my images floating off the right-hand side of the page, regardless of how the browser is sized. I've put floating images in my DD tags of a definition list (<DL>). Is this a known...
2
1479
by: deja | last post by:
I'm trying to get to grips with CSS and finding it a bit of a nghtmare with cross-browser problems. I am only testing IE6 and Firefox 1.5 so I've hardly touched the surface of what problems I could come across with other browsers and older versions but maybe you can help me with this to get me started. My markup is: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">...
0
1918
by: ltlpeepl | last post by:
I'm having the issue where I have floating spans that overlap in IE6 when wrapping should occur. If you make the browser window small enough so that wrapping will occur, they will overlap, making the text unreadable. Is this a known IE issue, or is there a fix for this? Here's a simple example: <html> <head> <style type="text/css">
4
2920
by: Ivor Somerset | last post by:
Dear CSS community, The code below shows my problem. I have a containing DIV box into which I place floating boxes. As the background-color shows, the size of the containing box is not extended by the inner floating boxes. Without the float, it works as expected. Why? What is it I am missing here about the CSS box model? Thanks in advance for your help.
5
2330
by: jemcgui | last post by:
I've been building a site that has a quirk in it. It will display just as intended in IE but not firefox. The left "nav" div which is floating left will be forced down to the bottom of the page. The main content area on the right is floating right and stays fine. The weird part is that a refresh will always correct this problem. and the problem will not occur on all the pages though they have identical set-ups. The site is at...
0
9671
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10845
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
1
10592
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
10254
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
9376
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
7792
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
6979
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5650
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
5828
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.