All geek questions in one place

IE css bug: does it add "padding-left" to the end of the "background-image"?

I have a strange mistake.
In my .css file, I have the following rule:

.conf-view a { padding-left: 10px; background-image: url("images/bullet-green.gif"); background-position: center left; background-repeat: no-repeat; }

The problem is that IE somehow interprets this as follows:

 .conf-view A /* NOTE - this is copied from the IE-Developer tools css tab. */ background-image : url(images/bullet-green.gif); PADDING-LEFT: 10px background-repeat : no-repeat background-position : left center

See registration - on the left?
Now the browser simply ignores the fill rule, which leads to a layout failure.

Is this a known bug? can anyone find a way around this?

Many thanks
Kfir

+4
source share
3 answers

Apparently, this is a great way to apply background images ... When saving code and playing back using the style sheet, indents of up to 50 moved the image and text so that indents did not ignore it, this deals with positioning the background image in different ways.

FaileN's rather strange suggestion was not far off for what I did to fix it. If you put "display: inline-block"; then this seems to work in IE7 and FF. Of course, you'll want to check that it has no side effects elsewhere before using it.

+2
source

This seems to be a bug in IE Developer Tools, where the display code simply absorbs the following non-phon definition (sorted alphabetically, obviously) if you have a background image specified separately. Your text does not overlap your background image on this page with any of the links, so it seems to me that CSS is interpreted correctly independently; can you explain why you think this is not so?

I have no idea how they managed to create this error, but if you want it to go away, defining the background definitions in the abbreviation does not seem to demonstrate this behavior:

background:transparent url("images/bullet-green.gif") scroll no-repeat left center;

+3
source

Perhaps this is because the element a usually an inline element. For these elements, background images and gaskets / fields are not often found, even if this is allowed. Put display: block; in your definition of style. Perhaps this will help you in this situation.

EDIT

Waiting for your sample code :)

0
source

Source: https://habr.com/ru/post/1313755/

More articles:


All Articles