473,608 Members | 2,667 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Cross Browser Bullet Image Positioning

When I use image as a bullet within LI element I have different image
positioning results in Firefox and IE6. IE6 puts the image on top and
far from left LI's border. Firefox puts it nicely in the middle and
very close to left border.
How do I control bullet image positioning? Please advise a nice hack.
Thanks
Jun 27 '08 #1
3 3495
On 2008-04-30, vunet <vu******@gmail .comwrote:
When I use image as a bullet within LI element I have different image
positioning results in Firefox and IE6. IE6 puts the image on top and
far from left LI's border. Firefox puts it nicely in the middle and
very close to left border.
How do I control bullet image positioning?
You can't. The spec just tells browsers to put the bullet somewhere
sensible (for list-style-position: outside) outside the LI's principal
block box.

However it sounds from your description like there may be floats
involved, which is a different can of worms.
Please advise a nice hack.
I only advise nasty hacks.

Your only hope to position it precisely is not to use a list item bullet
but make it an element in its own right (either an IMG or something with
a background image).

But there are other solutions to the floats and bullets issue, if that's
what you're having.
Jun 27 '08 #2
In article <sl************ *********@bowse r.marioworld>,
Ben C <sp******@spam. eggswrote:
On 2008-04-30, vunet <vu******@gmail .comwrote:
When I use image as a bullet within LI element I have different image
positioning results in Firefox and IE6. IE6 puts the image on top and
far from left LI's border. Firefox puts it nicely in the middle and
very close to left border.
How do I control bullet image positioning?

You can't. The spec just tells browsers to put the bullet somewhere
sensible (for list-style-position: outside) outside the LI's principal
block box.

However it sounds from your description like there may be floats
involved, which is a different can of worms.
Please advise a nice hack.

I only advise nasty hacks.
<g>

How about a really friendly nice hack. A table! Bullet in one col, item
in the next, row by row, happily down.

And, guess what, some lists (perhaps all) are tables in their essential
semantics - so it is not even a hack. If you have an appropriate image
for each item, different is best, pregnant with meaning is better still,
then Bob can still be your uncle on the semantic front.

--
dorayme
Jun 27 '08 #3
On 30 Apr, 19:55, vunet <vunet...@gmail .comwrote:
When I use image as a bullet within LI element I have different image
positioning results in Firefox and IE6.
This may be as simple as the different default CSS for <libetween
browsers. Some use margin to position things, others use padding. If
you ever change one of these settings, you need to take explicit
control and set _all_ of them.
Jun 27 '08 #4

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

Similar topics

9
32044
by: Bryan R. Meyer | last post by:
Hello Everyone, The problem of browser resizing has become an issue for me. While redesigning my webpage, I set the left and right margins to be auto so that my content would be centered. However, there are images that I used absolute positioning in order to place them in the appropriate location on my page. When I do a browser resize, these images do not move (obviously). However, the rest of my content is auto centered as...
7
7104
by: Nikolaos Giannopoulos | last post by:
I have a paragraph and simply want a bullet image to appear at the start of the paragraph text. I tried the following html: <p><span class="dot"></span>some text</p> as seen here: http://solmar.ca/temp8/test1.html Observed: IE5 and Moz 1.3 works - IE 6.0 and Opera 6.05 does not work I then assumed that maybe because there is nothing in the span that this problem appears for IE6 and Opera 6.05, so I tried a kludge as an
2
2599
by: CJM | last post by:
I'm developing a site for a charity which I am aiming to make standards-compliant, accessible and cross-browser compatible. I'm doing OK so far and have the workings of a respectable site, but I still have a few little niggly problems: Site: http://www.aif-advocacy.org.uk/index.asp CSS: http://www.aif-advocacy.org.uk/aif.css
34
2655
by: Marian Aldenhövel | last post by:
Hi, I am in the process of embarking on building a large web application. I wanted to seize that opportunity to learn how to use CSS and get rid of my ad-hoc approach to HTML-coding (i.e.: add tables until either the result is OK or I decide to start over). However I do not seem to be able to get it right. Experimentation is beginning to wear me out...
7
6837
by: codeslayer | last post by:
Greetings to everyone in ‘forum-land': I have a problem that has plaguing me to no end. It is a CSS-related question, and I have not seen this question posted anywhere in forums or through Google search. So here is my problem: I want to use CSS to apply images as bullet styles. However, I want to be able to apply VARIOUS, MULTIPLE styles in the same document. For example, let's assume I have a set of categorized hyperlinks on a...
8
61490
by: Udo Marx | last post by:
Hello to ciwas! Is there a way to change the bullet form, color, etc, of the element <li> under<ul> via css? Any reply will be appreciated. -- Freundliche Gruesse, Netzteil - Udo Marx http://www.netzteil.com mailto:marx@netzteil.com
1
2013
by: manakin | last post by:
hello on my site the bullet points using custom image should look positioned as they do on firefox but in explorer they don't. how do i fix them so they are in same position in all browsers? thanks for any help.
7
1933
by: salvador | last post by:
Hi there, I've been working on a web site, and am running into a cross-browser css problem that I'm not quite sure how to solve. I have some twindows that use absolute positioning and the visibility property to display some instructions to a screen. They render properly on my page in Mozilla, but in IE they render to the side of any content that uses a relative float.
4
1320
by: celoftis | last post by:
I've got html page with has a fixed height - there are five buttons on the page. The page has a fixed, known height - but the width can change. The five buttons should be arranged on the page as follows (all buttons should always be 3px from the top): "button1" - left edge always 3px from left side of the page "button2" - left edge always be 5px to the left of "button 1:" "button3" - buttons three and four should float (relatively) in...
0
8050
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...
1
8130
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
8324
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
6805
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
5471
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
3954
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
4015
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
1574
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
1318
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.