css - attribute - title color html

AddThis botones problema de CSS

Question

He hecho esta pregunta en el foro AddThis pero no he recibido ninguna respuesta hasta el momento. Espero que alguien pueda ayudarme en esto.

La página en cuestión está en http://preview.ami.co.nz/products , en la esquina inferior derecha.

• Si se ve en Chrome o Firefox, la palabra "Compartir" está a la izquierda del botón naranja "+" AddThis.

• Sin embargo, en IE (al menos IE8 y 6), la palabra "Compartir" está a la derecha. Se supone que se ve como lo hace en Chrome y FF, pero no puedo entender lo que IE le está haciendo.

Para hacer las cosas aún más peculiares, ¡el mismo código en una página diferente parece correcto en todos los navegadores! Consulte http://preview.ami.co.nz

Cualquier sugerencia sería muy apreciada.

PD. Aquí está el marcado que puse en esas páginas:

<!-- AddThis Button BEGIN -->
  <div class="addthis_toolbox addthis_default_style" style="display: <%= SocialMediaVisibility %>">
    <a class="addthis_button_compact">Share</a>
    <a class="addthis_button_facebook"></a>
    <a class="addthis_button_twitter"></a>
    <a class="addthis_button_email"></a>
  </div>
  <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e0a5ac2480330c8"></script>
<!-- AddThis Button END -->

Answer 1

Es un viejo problema con flotadores. En realidad, incluso ie9 lo tiene. Puede agregar algunos estilos para arreglarlo:

.addthis_button_compact{
    position: relative;
    padding:0 23px 0 0;
}
.addthis_button_compact span{
    position:absolute;
    right:0;
}

Answer 2

simplemente cambie el HTML de su sitio web de

<a class="...">
<span class="the_icon_class"></span>
share
</a>

a

<a class="...">
<span>share</span>
<span class="the_icon_class"></span>
</a>

Answer 3

@DanyW, vi su código de sitio web puede ser que haya un problema con class especificaciones de su class . En su página de producto, especifique float:right in .addthis_default_style .at15t_compact & float:left .addthis_default_style .at300bs . Entonces, en Firefox & Chrome, toma float:right y en IE, es float:left y funciona bien en otras páginas, porque especificas tu clase mucho más clara que la razón de la página de productos, especificas float:right en #pageBottom .footerPanel .addthis_default_style .at15t_compact ahora la prioridad de float:right se aumenta.

solución: escribe esto

#pageBottom .footerPanel .addthis_default_style .at15t_compact{float:right}

en la página del producto

o haces esto

.addthis_default_style .at15t_compact{float:right !important}

Answer 4

Esto debería funcionar. Simplemente agregue esta regla al final de su hoja de estilos:

.addthis_default_style.addthis_toolbox span{
    line-height: 16px;
    float: right; /* this will move the span back over to the right */
}

Answer 5

Prueba esto

.at300bs.at15nc.at15t_compact { float:right; }

Por alguna razón, IE está bloqueando con el selector y flotando hacia la izquierda, en lugar de hacia la derecha.

Answer 6

Tiene el siguiente estilo en el archivo http://preview.ami.co.nz/styles/ami.css

.addthis_default_style .at15t_compact
{
    float: right;
    margin-left: 4px;
    margin-right: 0;
}

en FF, el tramo del enlace de compartir toma float: right pero en IE, el tramo no está tomando la flotación, debido a esto, está viendo compartir el texto en el lado derecho del botón de agregar.

Creo que agregar algo importante para flotar bien te ayudará.

  float: right !important;

de lo contrario, use estilos específicos de IE. Compruebe http://css-tricks.com/132-how-to-create-an-ie-only-stylesheet/ y http://webdesignerwall.com/tutorials/css-specific-for-internet-explorer

Answer 7

.addthis_default_style .at15t_compact
{
    float: right !Important;

}

La parte importante es el "! Importante"

Debería solucionar este extraño error de IE.

Answer 8

Las soluciones de Matthew y Pavel funcionarán si agrega "! Important" al CSS.

O puede mover la palabra "Compartir" a un botón separado:

<div class="addthis_toolbox addthis_default_style">
  <a class="addthis_button" style="float: left">Share</a>
  <a class="addthis_button_compact"></a>
  <a class="addthis_button_facebook"></a>
  <a class="addthis_button_twitter"></a>
  <a class="addthis_button_email"></a>
</div>

También puede considerar eliminar el nombre de clase "addthis_default_style" y definir los estilos usted mismo (para evitar problemas en el futuro si AddThis cambia su CSS). Esto es lo que podría parecer:

<div class="addthis_toolbox">
  <a class="addthis_button">Share</a>
  <a class="addthis_button_compact"></a>
  <a class="addthis_button_facebook"></a>
  <a class="addthis_button_twitter"></a>
  <a class="addthis_button_email"></a>
</div>

<style>
  .addthis_toolbox {
    margin-top: -27px;
    float: right;
  }
  .addthis_toolbox a {
    display: block;
    float: left;
    margin-left: 5px;
  }
</style>