Clever Geek Handbook

Text alignment of generated content in Internet Explorer 8

I am debugging this site and trying to sort out some problems with Internet Explorer (big surprise).

I add subheading to multiple links like this:

.subtitle a:after {
    content:"The Subtitle Here";
}

In all modern browsers (and IE9), content is centered as the container uses text-align:center;

. However, in IE8, "Subtitles Here" turned red on the left.

Is there a way to control this with CSS?

Thank.

+3


source to share


3 answers


It turns out you can do it easily:

I added another style rule that targets the added content ...



.subtitle a:after {
    text-align:center;
}

I think IE9 and other browsers inherit the property text-align

for content :after

, but IE8 doesn't. IE is always interesting ...

+5


source 


text-align:center

didn't work for me. This is how I fixed it in IE8. (I have a separate stylesheet for IE8)

.printIcon:after {
    content: "Print" !important;
    text-align: center !important;
    margin-top: 25px !important;
    position:relative !important;
    left:25px !important;
}


enter image description here

Hope this helps someone.

0


source


None of the answers above worked for me due to the underlying problem I was having. Apparently IE8 doesn't support ::after

, I changed it to :after

and it worked as expected.

Worth checking out!

0


source






More articles:


All Articles