473,809 Members | 2,703 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

text, ul, image : floating probs

On this page http://huizen.dds.nl/~ochrid/Henk/biblio_nieuw.htm I try to
have three divs: one containing justified text, one containing a ul and one
containing an image.

ul is set to float left, the div with the image in it, to float right.
But both Mozilla and IE put the image underneath the ul, instead of to the
right of it (so it is me, not IE!).

(the image is in a div so that I can write and style text underneath it).

Can someone put me on the right track?
Would be very much appreciated.
--
Groet, Adriana.
[throw rubbish out if you want to reach me by e-mail]
Jul 20 '05 #1
7 6622
Els

A.Translator wrote:
On this page http://huizen.dds.nl/~ochrid/Henk/biblio_nieuw.htm I try to
have three divs: one containing justified text, one containing a ul and one
containing an image.

ul is set to float left, the div with the image in it, to float right.
But both Mozilla and IE put the image underneath the ul, instead of to the
right of it (so it is me, not IE!).


On my pc (XP) it is IE... Firefox and NS7.1 display the
picture to the right of the ul.
I haven't looked at your code, but it might have to do with
the width of the ul. The indent makes the li's go to the
right, and apparently to much to the right to have the
picture next to it.
Add *{border:1px solid red;} to your stylesheet, to see how
wide things really are. Make sure the total width of the ul
(and it's li's) and the picture div aren't wider than the
width of the container div.
--
Els

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Jul 20 '05 #2
On Mon, 05 Apr 2004 18:06:08 +0200, Els wrote:
The indent makes the li's go to the
right, and apparently to much to the right to have the
picture next to it.
Add *{border:1px solid red;} to your stylesheet, to see how
wide things really are. Make sure the total width of the ul
(and it's li's) and the picture div aren't wider than the
width of the container div.


Thanks for your prompt and helpful reply.
Good to hear things display as intended in FireFox and NS (still not in my
Moz 1.6).
I had thought about there maybe not being enough space: IE shows no
bullets, but seems to indent and push the image to the right.
There should be just enough room, say my red lines.

If I cheat and put the imagebox-div inside the ul-div, IE clearly
illustrates the problem:
http://huizen.dds.nl/~ochrid/Henk/biblio_nieuw2.htm
The image now floats right, and the longest line in the ul oozes over the
rim of the box, so to speak.
--
Groet, Adriana.
[throw rubbish out if you want to reach me by e-mail]
Jul 20 '05 #3
Els
A.Translator wrote:
On Mon, 05 Apr 2004 18:06:08 +0200, Els wrote:

Thanks for your prompt and helpful reply.
Good to hear things display as intended in FireFox and NS (still not in my
Moz 1.6).
I had thought about there maybe not being enough space: IE shows no
bullets, but seems to indent and push the image to the right.
There should be just enough room, say my red lines.

If I cheat and put the imagebox-div inside the ul-div, IE clearly
illustrates the problem:
http://huizen.dds.nl/~ochrid/Henk/biblio_nieuw2.htm
The image now floats right, and the longest line in the ul oozes over the
rim of the box, so to speak.


So, restrict the width of the ul.
And/or use position:relati ve;left:-4em; on the ul. But that
will make it go to the left in Gecko too.
I don't know if it is possible to make the indent of the
li's equal in 'both' browsers.

--
Els

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Jul 20 '05 #4
Els
A.Translator wrote:
On Mon, 05 Apr 2004 18:06:08 +0200, Els wrote: I had thought about there maybe not being enough space: IE shows no
bullets, but seems to indent and push the image to the right.
There should be just enough room, say my red lines.


Might have to do with margins. Set all margins to 0 and see
what happens?

--
Els

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Jul 20 '05 #5
On Mon, 05 Apr 2004 18:31:53 +0200, Els wrote:
Might have to do with margins. Set all margins to 0 and see
what happens?


Thanks for all suggestions.
I will try them out and report back - just in case anyone is interested ;-)

--
Groet, Adriana.
[throw rubbish out if you want to reach me by e-mail]
Jul 20 '05 #6
On Mon, 05 Apr 2004 18:31:01 +0200, Els wrote:
And/or use position:relati ve;left:-4em; on the ul. But that
will make it go to the left in Gecko too.


trial and error made me set it to left:-2em, which has the desired effect
in both my IE 6 and Moz 1.6...

Thank you!
--
Groet, Adriana.
[throw rubbish out if you want to reach me by e-mail]
Jul 20 '05 #7
On Mon, 5 Apr 2004 18:40:36 +0200, A.Translator wrote:
And/or use position:relati ve;left:-4em; on the ul. But that
will make it go to the left in Gecko too.


trial and error made me set it to left:-2em, which has the desired effect
in both my IE 6 and Moz 1.6...


But Opera makes a mess of it (different problem, by the look of it).
I will start all over again.
--
Groet, Adriana.
[throw rubbish out if you want to reach me by e-mail]
Jul 20 '05 #8

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
38632
by: Gustav Medler | last post by:
Css only offers float:right; and float:left; Is it possible, to center an image, floated around by text? Cross browser funcionality is needed for NS4.7, IE 5.x, Op 6.x, Moz 1.x, Konqu 3.x. I did try <div style="width:120px; float:left;"> <img src="schloss.jpg" width="88" height="100"> what did work for :left and for :right margin with floating text around.
1
5869
by: Vincent | last post by:
I noticed an irritating behaviour of the text-indent property and I wonder if I'm the only one to feel this way about it: it seems that text-indent applies even to floated elements. Although this is probably correct according to the specification (text-indent is inherited), don't you think it makes no sense to apply text-indent to such elements ? Here is an example: I have a paragraph, starting with a clickable image, that's followed by...
3
7489
by: Geoff Soper | last post by:
I'm trying to get some text to lie to the right of an image. If the text is deeper than the image I want the text to continue with its left margin following the line projected down from the right of the image, not to flow underneath the image as with a float:left. I've achieved this with a table at http://alphaworks.co.uk/imagetest/test.html (top and middle image / text pairs) where I've also attempted to achieve it with CSS (bottom image /...
0
2335
by: styler | last post by:
I am having difficulty with the page located here: http://tinyurl.com/2zwa9 I am creating a number of image sets (some left-, some right-aligned; an example of the right-aligned is shown the first figure below) in which the text accompanying the image sets flows down around them. The image sets have a single image on top and two immediately below. To create the effect, I contain the image on top in a DIV and float it, and the bottom...
5
1982
by: Steel | last post by:
Hi at all, how is it possible to insert (Fuyll immersion) an image into a text so that the text is all around the image using CSS2+? Thank in advance Steel
9
38932
by: shapper | last post by:
Hello, What is the best way to place an image and a text side by side using CSS? Basicaly what I am trying to do is to make the image and the text to appear as follows: Image My Text... XXXXX ---------------
8
3539
by: DarkSaturn | last post by:
Is there a method of using the CSS float command on images to contain itself within a single paragraph? The problem I'm running into is trying to use float images on a listing page, I have an image (say 100 pixels high) that is set to float left, the text that I'm floating around it is only 2 lines high (leaving room for additional text below). Because there is room for additional text floating right of the image my next paragraph text...
1
4229
by: littlealex | last post by:
IE6 not displaying text correctly - IE 7 & Firefox 3 are fine! Need some help with this as fairly new to CSS! In IE6 the text for the following page doesn't display properly - rather than being aligned to the top, along with the slideshow and link buttons, you have to scroll down to see the text - how can I make IE6 display correctly? http://geekarama.co.uk/new_home.html here is the code for new_home.html and following that the CSS...
4
1886
by: sarika | last post by:
Hi all I want to create an online stamp making site. In my site a user select a template from number of templates for making his stamp. The template is and image with some graphics and text. Now user can change the text in template but not the graphics .My requirement is how can i determine the position of text in form of x,y coordinates using GD libraries. As there will be number of templates which will be loaded from admin panel and all...
0
9721
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9601
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
10637
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...
0
10115
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
9199
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...
0
6881
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
5687
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
4332
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
3
3014
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.