473,597 Members | 2,256 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

the ul/ol/li and img left

This is something that I've found, and it seems not to be a bug for IE
and moz do the same thing.

I put an image on the left with align="left" or float:left, and
want some text on its right.
The text is a list.
There is a problem : the list bullets on the left are _in_ the image.
On IE it isn't displayed, on mozilla it is displayed over the image.

Whatever, it sucks!
I tryed changing the paddings, margins, and others but... The results
change very much with the browser and the size of the text (when changed
by the user)

Do you have an idea for this problem ?

My only solution was using a margin-left: [the image width], for ul
and ol...

If you want to see how it renders, use this test:

http://tests.salagir.com/tests.php

html:

<img src="ico.png">
<ul>
<li>Where is my little dot on the left ?</li>
<li>It moved ?</li>
<li>Whatever... </li>
</ul>
<ol>
<li>I want a number!</li>
<li>My number on the left!</li>
<li>RIP</li>
<li>Oh, I think i see it</li>
<li>is it a bird, is it a plane ?</li>
<li>no, it's a number!</li>
</ol>

styles:

ul,ol { border: thin solid red; }
li { border: thin dotted blue }
img {float:left; width:9em; height:7em; border:thin dashed green;
margin: 0.2em}

--
++++++++ Zelda, Dragon Ball, Mana and my (art)work at www.salagir.com ++++++++
(Au centre de la piece, vous découvrez un énorme dragon noir. Qu'est-ce
que vous faites?) Je l'apprivoise.
-+- http://www.monpetitcoin.com - Les Carnets Noirs section Donjonologie -+-
Jul 20 '05 #1
3 6707
In article <3f************ ***********@new s.free.fr>,
Salagir <Sa*****@jeruCI TEDELESPACE.org .invalid> wrote:
I put an image on the left with align="left" or float:left, and
want some text on its right.
The text is a list.
There is a problem : the list bullets on the left are _in_ the image.
On IE it isn't displayed, on mozilla it is displayed over the image.

Whatever, it sucks!
I tryed changing the paddings, margins, and others but... The results
change very much with the browser and the size of the text (when changed
by the user)

Do you have an idea for this problem ?


Play with margin and padding for both UL and LI. Where the 'space' takes
place by default is different for browsers. One puts padding on the UL,
the other puts margin on the LI and UL.

--
Kris
kr*******@xs4al l.netherlands (nl)
Jul 20 '05 #2
Salagir wrote:
This is something that I've found, and it seems not to be a bug for IE
and moz do the same thing.

I put an image on the left with align="left" or float:left, and
want some text on its right.
The text is a list.
There is a problem : the list bullets on the left are _in_ the image.
On IE it isn't displayed, on mozilla it is displayed over the image.
The problem is that floating elements only affect line boxes (and floating
elements, but that's irrelevent in this case). The list markers aren't
inside the line boxes, but outside it. So what happens is that the line
boxes are moved so they butt up against the edge of the floated element,
and then the list markers are placed before the line boxes.

Whatever, it sucks!
I tryed changing the paddings, margins, and others but... The results
change very much with the browser and the size of the text (when changed
by the user)

Do you have an idea for this problem ?

My only solution was using a margin-left: [the image width], for ul
and ol...


That seems fairly reasonable. More information:

<URL:http://www.alistapart. com/stories/taminglists/>

PS: There is a separate newsgroup for stylesheets,
<URL:news:comp. infosystems.www .authoring.styl esheets>.
--
Jim Dabell

Jul 20 '05 #3
On 26 Sep 2003 08:29:49 GMT, Salagir
<Sa*****@jeruCI TEDELESPACE.org .invalid> wrote:
This is something that I've found, and it seems not to be a bug for IE
and moz do the same thing.

I put an image on the left with align="left" or float:left, and
want some text on its right.
The text is a list.
There is a problem : the list bullets on the left are _in_ the image.
On IE it isn't displayed, on mozilla it is displayed over the image.

Whatever, it sucks!
I tryed changing the paddings, margins, and others but... The results
change very much with the browser and the size of the text (when changed
by the user)

Do you have an idea for this problem ?

My only solution was using a margin-left: [the image width], for ul
and ol...

If you want to see how it renders, use this test:

http://tests.salagir.com/tests.php


[...]

You can get the markers to display if you give the lists the
declaration:

list-style-position: inside;

If the line wraps, you will get a different effect, but you an
probably get around that by playing with a negative text-indent and
setting the appropriate values for the marginsand paddings.

Nick
--
Nick Theodorakis
ni************* *@hotmail.com
nicholas_theodo rakis [at] urmc [dot] rochester [dot] edu
Jul 20 '05 #4

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

Similar topics

7
8414
by: Wayne Wengert | last post by:
I use statements like LEFT(textstring,6) in my app. I have "Imports Microsoft.VisualBasic" at the top of the code but to use LEFT I have to code : Microsoft.VisualBasic.Left(sting, integer) If I code just "Left" it is flagged as an error with the message "Public Overloads Property Left() As Integer has no parameters and its return type cannot be indexed"
4
8393
by: Harlan Messinger | last post by:
What is *supposed* to be the way to specify the horizontal offset of (a) the list item's marker and (b) the list item's content? In particular, see http://mywebpages.comcast.net/hmessinger/default.html which validates under Strict. Under IE6, Opera, and Firebird, the markers are indented as one would expect the default to be. What if I want them moved over to the left edge of the list? On the above page, there is no margin-left for...
4
4098
by: jbm05 | last post by:
Hi, I'm curious about the computational complexity of a query I have. The query contains multiple nested self left joins, starting with a simple select, then doing a self left join with the results, then doing a self left join with those results, etc. What puzzles me is that the time required for the query seems to grow exponentially as I add additional left joins, which I didn't expect. I expected the inner select to return about 25...
1
2316
by: fleemo17 | last post by:
For increased accessibility, I've replaced "display:none" with the Off-Left method of hiding my CSS drop-down menus because the Jaws screen reader doesn't see any of the menus hidden with "display:none". The Off-Left method (placing elements way over to the left beyond the browser window) seems to work well in everything except IE 6 for the PC, where it displays the drop-downs about an inch to the right of where they should be. (View...
17
760
by: Nathan Given | last post by:
Hello All, I am trying to debug a broken query. The query uses Left$(,4) instead of Left(,4). What is the difference between the Left() and Left$() functions in Microsoft Access? Thanks! --
0
2044
by: jonipony | last post by:
HELP: Float Left box is drifting to the right in ie! -------------------------- I need som HELP with my CSS coding! On the following web page my design falls apart at screen size 800 x 600 (looks fine at larger screen sizes) when the left menu box that should float left is drifting to the right in Internet Explorer 6.0 (it doesn't drift to the right in Netscape 7.1).
8
2371
by: marco | last post by:
Hi ! I have this part of code and i can not find out why the scroller is starting from left to right instead RIGHT to LEFT. This is the main part and the scroller is working fine but from the wrong side. //------------------------------------------ function start(){if(document.getElementById){tdiv6=document.getElementById('slider'); firstns6();}
6
2014
by: Samuel Rhodes | last post by:
Hi I am trying to write a code snippet that would display a '?' sign on the top left of a control. I do not want to hard code the positioning of the DIV which will contain that '?'. Is it possible to somehow know the top, left position of the content rendered by a User Control in a asp page. For eg, assume the figure below as a web page and A and B as user controls
6
6745
by: =?Utf-8?B?R3JlZw==?= | last post by:
I have two questions with regards to the LEFT function. I ran into a problem with the LEFT function today. I knew it was a valid Function, but when I tried to use it, it was getting interpreted as the LEFT location of a control or something like that, instead of the LEFT function. (I want to extract the left portion of a string). Anyway, I knew what I needed was to find out what IMPORTS I was missing. After finding a posting on MSDN that...
4
10085
by: moondaddy | last post by:
I have a wpf project where I use a canvas to drag shapes around. when I drag a shape beyond the right or bottom side I get scrollbars which is good. I also get scrollbars when I zoom in and a shape goes beyond the right or bottom side. However, I don't get scrollbars when shapes move beyond the left or top side of the canvas. This is bad. I need the behavior similar to Visio where you can drag an object past the left or top and you will...
0
7962
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
7884
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
8267
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
8380
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
8024
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
8258
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
5423
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();...
1
1493
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
1229
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.