CSS – pantalla: ninguno; no funciona

Estoy tratando de desarrollar una hoja de estilo móvil y en esta hoja de estilo quiero eliminar un div en particular.

En el código HTML del div, coloco una identificación llamada “tfl”, como se muestra a continuación:

<div id="tfl" style="display: block; width: 187px; height: 260px; font-family: Verdana, Arial, Helvetica, sans-serif !important; background: url(http://www.tfl.gov.uk/tfl/gettingaround/journeyplanner/banners/images/widget-panel.gif) #fff no-repeat; font-size: 11px; border: 1px solid #103994; border-radius: 4px; box-shadow: 2px 2px 3px 1px #ccc;">
            <div style="display: block; padding: 30px 0 15px 0;">
                <h2 style="color: rgb(36, 66, 102); text-align: center; display: block; font-size: 15px; font-family: arial; border: 0; margin-bottom: 1em; margin-top: 0; font-weight: bold !important; background: 0; padding: 0">Journey Planner</h2>
                <form action="http://journeyplanner.tfl.gov.uk/user/XSLT_TRIP_REQUEST2" id="jpForm" method="post" target="tfl" style="margin: 5px 0 0 0 !important; padding: 0 !important;">
                    <input type="hidden" name="language" value="en" />
                    <!-- in language = english -->
                    <input type="hidden" name="execInst" value="" /><input type="hidden" name="sessionID" value="0" />
                    <!-- to start a new session on JP the sessionID has to be 0 -->
                    <input type="hidden" name="ptOptionsActive" value="-1" />
                    <!-- all pt options are active -->
                    <input type="hidden" name="place_origin" value="London" />
                    <!-- London is a hidden parameter for the origin location -->
                    <input type="hidden" name="place_destination" value="London" /><div style="padding-right: 15px; padding-left: 15px">
                        <input type="text" name="name_origin" style="width: 155px !important; padding: 1px" value="From" /><select style="width: 155px !important; margin: 0 !important;" name="type_origin"><option value="stop">Station or stop</option>
                            <option value="locator">Postcode</option>
                            <option value="address">Address</option>
                            <option value="poi">Place of interest</option>
                        </select>
                    </div>
                    <div style="margin-top: 10px; margin-bottom: 4px; padding-right: 15px; padding-left: 15px; padding-bottom: 15px; background: url(http://www.tfl.gov.uk/tfl/gettingaround/journeyplanner/banners/images/panel-separator.gif) no-repeat bottom;">
                        <input type="text" name="name_destination" style="width: 100% !important; padding: 1px" value="232 Kingsbury Road (NW9)" /><select style="width: 155px !important; margin-top: 0 !important;" name="type_destination"><option value="stop">Station or stop</option>
                            <option value="locator">Postcode</option>
                            <option value="address" selected="selected">Address</option>
                            <option value="poi">Place of interest</option>
                        </select>
                    </div>
                    <div style="background: url(http://www.tfl.gov.uk/tfl/gettingaround/journeyplanner/banners/images/panel-separator.gif) no-repeat bottom; padding-bottom: 2px; padding-top: 2px; overflow: hidden; margin-bottom: 8px">
                        <div style="clear: both; background: url(http://www.tfl.gov.uk/tfl-global/images/options-icons.gif) no-repeat 9.5em 0; height: 30px; padding-right: 15px; padding-left: 15px"><a style="text-decoration: none; color: #113B92; font-size: 11px; white-space: nowrap; display: inline-block; padding: 4px 0 5px 0; width: 155px" target="tfl" href="http://journeyplanner.tfl.gov.uk/user/XSLT_TRIP_REQUEST2?language=en&amp;ptOptionsActive=1" onclick="javascript:document.getElementById('jpForm').ptOptionsActive.value="1";document.getElementById('jpForm').execInst.value="readOnly";document.getElementById('jpForm').submit(); return false">More options</a></div>
                    </div>
                    <div style="text-align: center;">
                        <input type="submit" title="Leave now" value="Leave now" style="border-style: none; background-color: #157DB9; display: inline-block; padding: 4px 11px; color: #fff; text-decoration: none; border-radius: 3px; border-radius: 3px; border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,0.25); box-shadow: 0 1px 3px rgba(0,0,0,0.25); box-shadow: 0 1px 3px rgba(0,0,0,0.25); text-shadow: 0 -1px 1px rgba(0,0,0,0.25); border-bottom: 1px solid rgba(0,0,0,0.25); position: relative; cursor: pointer; font: bold  13px/1 Arial,Helvetica,sans-serif; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4); line-height: 1;" />
                    </div>
                </form>
            </div>
        </div>

Este código no es mío, ya que es un código incrustado proporcionado por el sitio web de TFL.

Quiero ocultar este div para que sea más amigable para un usuario móvil, lo hice:

#tfl {
display: none;
}

Sin embargo, este código no me funciona, e incluso lo apliqué al encabezado correspondiente antes y eso no funcionó, como se muestra nuevamente:

h3.tfl {
display: none;
}

¿Cuál es el problema aquí? Este código funcionó en otra página en una imagen asignada. (No puedo usar jQuery ni JavaScript (asignación uni mirando CSS)).

Esto se debe a que el estilo en línea display:block está anulando tu CSS. Deberá eliminar este estilo en línea o usar:

#tfl {
  display: none !important;
}

Esto anula los estilos en línea. Tenga en cuenta que usando !important generalmente no se recomienda a menos que sea un último recurso.

Eliminar display: block; en el div #tfl propiedad de estilo

<div id="tfl" style="display: block; width: 187px; height: 260px;

Los estilos en línea tienen prioridad sobre un archivo CSS externo.

Intenta agregar esto a tu css

#tfl {
display: none !important;
}

Otro truco es usar

.class {
position: absolute;
visibility:hidden;
display:none;
}

No es probable que esto arruine su flujo (porque lo saca del flujo) y se asegura de que el usuario no pueda verlo, y luego, si display:none funciona más adelante estará funcionando. Manten eso en mente visibility:hidden no puede eliminarlo de los lectores de pantalla.

En la fuente HTML provista, el elemento #tfl tiene un estilo en línea “display:block“. El estilo en línea siempre anulará los estilos de las hojas de estilo…

Luego, tiene algunas opciones (mientras que, como dijo, no puede modificar el código html ni usar javascript):

• fuerza display:none con !important regla (no recomendado)

• poner el div fuera de la pantalla con estas reglas:

  #tfl {
      position: absolute;
      left: -9999px;
  }
  

Verifique el siguiente html que eliminé display: block from style

<div id="tfl" style="width: 187px; height: 260px; font-family: Verdana, Arial, Helvetica, sans-serif !important; background: url(http://www.tfl.gov.uk/tfl/gettingaround/journeyplanner/banners/images/widget-panel.gif) #fff no-repeat; font-size: 11px; border: 1px solid #103994; border-radius: 4px; box-shadow: 2px 2px 3px 1px #ccc;">
        <div style="display: block; padding: 30px 0 15px 0;">
            <h2 style="color: rgb(36, 66, 102); text-align: center; display: block; font-size: 15px; font-family: arial; border: 0; margin-bottom: 1em; margin-top: 0; font-weight: bold !important; background: 0; padding: 0">Journey Planner</h2>
            <form action="http://journeyplanner.tfl.gov.uk/user/XSLT_TRIP_REQUEST2" id="jpForm" method="post" target="tfl" style="margin: 5px 0 0 0 !important; padding: 0 !important;">
                <input type="hidden" name="language" value="en" />
                <!-- in language = english -->
                <input type="hidden" name="execInst" value="" /><input type="hidden" name="sessionID" value="0" />
                <!-- to start a new session on JP the sessionID has to be 0 -->
                <input type="hidden" name="ptOptionsActive" value="-1" />
                <!-- all pt options are active -->
                <input type="hidden" name="place_origin" value="London" />
                <!-- London is a hidden parameter for the origin location -->
                <input type="hidden" name="place_destination" value="London" /><div style="padding-right: 15px; padding-left: 15px">
                    <input type="text" name="name_origin" style="width: 155px !important; padding: 1px" value="From" /><select style="width: 155px !important; margin: 0 !important;" name="type_origin"><option value="stop">Station or stop</option>
                        <option value="locator">Postcode</option>
                        <option value="address">Address</option>
                        <option value="poi">Place of interest</option>
                    </select>
                </div>
                <div style="margin-top: 10px; margin-bottom: 4px; padding-right: 15px; padding-left: 15px; padding-bottom: 15px; background: url(http://www.tfl.gov.uk/tfl/gettingaround/journeyplanner/banners/images/panel-separator.gif) no-repeat bottom;">
                    <input type="text" name="name_destination" style="width: 100% !important; padding: 1px" value="232 Kingsbury Road (NW9)" /><select style="width: 155px !important; margin-top: 0 !important;" name="type_destination"><option value="stop">Station or stop</option>
                        <option value="locator">Postcode</option>
                        <option value="address" selected="selected">Address</option>
                        <option value="poi">Place of interest</option>
                    </select>
                </div>
                <div style="background: url(http://www.tfl.gov.uk/tfl/gettingaround/journeyplanner/banners/images/panel-separator.gif) no-repeat bottom; padding-bottom: 2px; padding-top: 2px; overflow: hidden; margin-bottom: 8px">
                    <div style="clear: both; background: url(http://www.tfl.gov.uk/tfl-global/images/options-icons.gif) no-repeat 9.5em 0; height: 30px; padding-right: 15px; padding-left: 15px"><a style="text-decoration: none; color: #113B92; font-size: 11px; white-space: nowrap; display: inline-block; padding: 4px 0 5px 0; width: 155px" target="tfl" href="http://journeyplanner.tfl.gov.uk/user/XSLT_TRIP_REQUEST2?language=en&amp;ptOptionsActive=1" onclick="javascript:document.getElementById('jpForm').ptOptionsActive.value="1";document.getElementById('jpForm').execInst.value="readOnly";document.getElementById('jpForm').submit(); return false">More options</a></div>
                </div>
                <div style="text-align: center;">
                    <input type="submit" title="Leave now" value="Leave now" style="border-style: none; background-color: #157DB9; display: inline-block; padding: 4px 11px; color: #fff; text-decoration: none; border-radius: 3px; border-radius: 3px; border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,0.25); box-shadow: 0 1px 3px rgba(0,0,0,0.25); box-shadow: 0 1px 3px rgba(0,0,0,0.25); text-shadow: 0 -1px 1px rgba(0,0,0,0.25); border-bottom: 1px solid rgba(0,0,0,0.25); position: relative; cursor: pointer; font: bold  13px/1 Arial,Helvetica,sans-serif; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4); line-height: 1;" />
                </div>
            </form>
        </div>
    </div