Re: [css-d] IE6 and 7 Bullet Positioning

[DAVOUD TOHIDY]

on Date: Tue, 15 Jan 2008 15:50:48 -0500 Tessa Wrote:> What is the best way to 
control the positioning of image bullets
>in IE6 and 7? They are rendered higher and further to the right than
>they should be...
 
That is something that I would have expected.
 
Here it is the solution which worked for me:
 
This is from my CSS file:
 
//zero out margin and padding //
 
.half4 ul {list-style-type: none;
margin: 0; padding: 0;}
 
//you can use say 50% instead of .4em if li is going to be one line
in the following css rule//
 
.half4 ul li { background:url(../images/bullet.gif) no-repeat 0 0.4em;
padding:0 0 0 15px;
}
 
And other factors which is under estimated are the line-height
and font-size.
 
Based on the size of bullet image you are using, different line heights
and font-sizes will affect the positioning of the bullet image.
 
So play with the line height and font-size as well to make it work.
 
To see it in action browse my portfolio at
 
 http://cssfreelancer.awardspace.com .
 
As a side note: You have declared your font-sizes in ems. You might want
to add a font-size to body in percentages if all the above fails.
 
regards
davoud
 
 
 
_

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE6 and 7 Bullet Positioning

[Gunlaug Sørtun]

Tessa Harmon wrote:
> What is the best way to control the positioning of image bullets in 
> IE6 and 7? They are rendered higher and further to the right than 
> they should be.

> 

You can always manipulate the relevant elements back and forth until the
image and anchor-text line up as you like.

The following example...

@media screen {
* html #info ul {overflow-x: hidden; height: 1%; }
* html #info ul li {margin-left: -8px; line-height: 1.2;}
* html #info ul li a {position: relative; top: -.3em; left: 6px;}

*:first-child+html #info ul {overflow-x: hidden; height: 1%; }
*:first-child+html #info ul li {margin-left: -8px; line-height: 1.2;}
*:first-child+html #info ul li a {position: relative; top: -.3em; left:
6px;}
}

...shows how it _can_ be done for IE6 and IE7. Other browsers will not
be affected.

Example tested for your layout, but the values may need some tuning
since I can't see what's "right" in any browser at my end. Your layout
breaks across browser-land and can't take any font-resizing.

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE6 and 7 Bullet Positioning

[Vance Lowe]

I run into this problem from time to time when I use images for my bullet
and honestly...generally I'll just give up trying to fight it and adjust the
position within the actual image itself. IE if it seems to be a pixel or two
lower than the center.IE give my self two pixels of alpha more on the
bottom of the image to lift it up. 

That probably is not the right way of doing things but I assure you, it
saves me a bunch of time and headache. 

Vance Lowe
Web Designer
Cybergate, Inc. 
www.cybergatedesigns.com
601-649-1564 

-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Tessa Harmon
Sent: Tuesday, January 15, 2008 2:51 PM
To: css-d@lists.css-discuss.org
Subject: [css-d] IE6 and 7 Bullet Positioning

What is the best way to control the positioning of image bullets in IE6 and
7? They are rendered higher and further to the right than they should be. I
have tried the background-image and padding solution, but it made the
bullets render in the center of the li. Background positioning did not seem
to affect it. It would be ideal to keep it all in the CSS, of course.

My sample page is at
  http://www.bossmanmedia.com/ie6/group-center-form.html

You can see the issue in the sidebar on the right.

Thanks!

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE6 and 7 Bullet Positioning

[Highpowered]

Tessa Harmon wrote:
> What is the best way to control the positioning of image bullets in IE6 and 
> 7? They are rendered higher and further to the right than they should be. I 
> have tried the background-image and padding solution, but it made the bullets 
> render in the center of the li. Background positioning did not seem to affect 
> it. It would be ideal to keep it all in the CSS, of course.
> 
> My sample page is at
>   http://www.bossmanmedia.com/ie6/group-center-form.html
> 

Try adjusting the margin-left property of the s in question. I have 
really been feeling your pain on this issue lately!
-HP
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] IE6 and 7 Bullet Positioning

[Tessa Harmon]

What is the best way to control the positioning of image bullets in IE6 and 7? 
They are rendered higher and further to the right than they should be. I have 
tried the background-image and padding solution, but it made the bullets render 
in the center of the li. Background positioning did not seem to affect it. It 
would be ideal to keep it all in the CSS, of course.

My sample page is at
  http://www.bossmanmedia.com/ie6/group-center-form.html

You can see the issue in the sidebar on the right.

Thanks!

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/