CSS - display: none; not working

Question

I'm trying to develop a mobile stylesheet and in this stylesheet I want to remove a particular div.

In the HTML code of the div, I place an id called "tfl", as shown below:

<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>

This code is not mines as this an embedded code given by the TFL website.

I want to hide this div to make it more friendly for a mobile user, I did:

#tfl {
display: none;
}

This code doesn't work me though, and I even applied to the corresponding header before it and that didn't work, as shown again:

h3.tfl {
display: none;
}

What's the issue here? This code worked on another page on a mapped image. (I can't use jQuery nor JavaScript (uni assingment looking at CSS)).

is that in a media query? Have you tried using a more specific selector or adding !important to display:none? By the way, h3.tfl is looking for an h3 with the class tfl on it. You may mean h3 .tfl — Kai Qing
– Kai Qing, Commented Dec 18, 2013 at 16:45
Have you tried adding visibility:hidden to your class? I usually use both...maybe change the color to make sure your style is actually being applied. — Tim
– Tim, Commented Dec 18, 2013 at 16:46

Bob Kaufman · Accepted Answer · 2021-11-24 18:44:33Z

53

This is because the inline style display:block is overriding your CSS. You'll need to either remove this inline style or use:

#tfl {
  display: none !important;
}

This overrides inline styles. Note that using !important is generally not recommended unless it's a last resort.

edited Nov 24, 2021 at 18:44

Bob Kaufman

12.9k16 gold badges83 silver badges112 bronze badges

answered Dec 18, 2013 at 16:48

Brian Phillips

4,4412 gold badges29 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

TylerH · Accepted Answer · 2021-11-24 19:07:03Z

30

Remove display: block; in the div #tfl style property

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

Inline styles take priority over an external CSS file.

edited Nov 24, 2021 at 19:07

TylerH

21.3k84 gold badges84 silver badges121 bronze badges

answered Dec 18, 2013 at 16:46

Vinay Pratap Singh Bhadauria

9,9873 gold badges30 silver badges50 bronze badges

Comments

Godinall · Accepted Answer · 2013-12-18 16:48:28Z

11

Try add this to your css

#tfl {
display: none !important;
}

answered Dec 18, 2013 at 16:48

Godinall

2,2901 gold badge15 silver badges18 bronze badges

Comments

Sᴀᴍ Onᴇᴌᴀ · Accepted Answer · 2017-09-10 04:18:40Z

9

Another trick is to use

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

This is not likely to mess up your flow (because it takes it out of flow) and makes sure that the user can't see it, and then if display:none works later on it will be working. Keep in mind that visibility:hidden may not remove it from screen readers.

edited Sep 10, 2017 at 4:18

Sᴀᴍ Onᴇᴌᴀ

8,3028 gold badges38 silver badges61 bronze badges

answered Sep 10, 2017 at 3:34

Quibble

1731 silver badge7 bronze badges

Comments

EstevaoLuis · Accepted Answer · 2020-01-31 15:31:23Z

4

In the HTML source provided, the element #tfl has an inline style "display:block". Inline style will always override stylesheets styles…

Then, you have some options (while as you said you can't modify the html code nor using javascript):

force display:none with !important rule (not recommended)

put the div offscreen with theses rules :

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

edited Jan 31, 2020 at 15:31

EstevaoLuis

2,5887 gold badges36 silver badges43 bronze badges

answered Dec 18, 2013 at 16:52

Akaryatrh

5312 silver badges10 bronze badges

Comments

Kamlesh · Accepted Answer · 2013-12-18 16:59:50Z

Check following html I removed 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

Please remember to make your answer something useful to folks who stumble across this question in the future. Consider formatting this code or pointing out the specific fix in a few lines

Collectives™ on Stack Overflow

CSS - display: none; not working

6 Answers 6

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related