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    lt 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   gt               lt div style  display  block  padding  30px 0 15px 0   gt                   lt 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  gt Journey Planner lt  h2 gt                   lt 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   gt                       lt input type  hidden  name  language  value  en    gt                       lt  -- in language   english -- gt                       lt input type  hidden  name  execInst  value      gt  lt input type  hidden  name  sessionID  value  0    gt                       lt  -- to start a new session on JP the sessionID has to be 0 -- gt                       lt input type  hidden  name  ptOptionsActive  value  -1    gt                       lt  -- all pt options are active -- gt                       lt input type  hidden  name  place origin  value  London    gt                       lt  -- London is a hidden parameter for the origin location -- gt                       lt input type  hidden  name  place destination  value  London    gt  lt div style  padding-right  15px  padding-left  15px  gt                           lt input type  text  name  name origin  style  width  155px  important  padding  1px  value  From    gt  lt select style  width  155px  important  margin  0  important   name  type origin  gt  lt option value  stop  gt Station or stop lt  option gt                               lt option value  locator  gt Postcode lt  option gt                               lt option value  address  gt Address lt  option gt                               lt option value  poi  gt Place of interest lt  option gt                           lt  select gt                       lt  div gt                       lt 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   gt                           lt input type  text  name  name destination  style  width  100   important  padding  1px  value  232 Kingsbury Road  NW9     gt  lt select style  width  155px  important  margin-top  0  important   name  type destination  gt  lt option value  stop  gt Station or stop lt  option gt                               lt option value  locator  gt Postcode lt  option gt                               lt option value  address  selected  selected  gt Address lt  option gt                               lt option value  poi  gt Place of interest lt  option gt                           lt  select gt                       lt  div gt                       lt 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  gt                           lt 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  gt  lt 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 amp ptOptionsActive 1  onclick  javascript document getElementById  jpForm   ptOptionsActive value  1  document getElementById  jpForm   execInst value  readOnly  document getElementById  jpForm   submit    return false  gt More options lt  a gt  lt  div gt                       lt  div gt                       lt div style  text-align  center   gt                           lt 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     gt                       lt  div gt                   lt  form gt               lt  div gt           lt  div gt    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

User · Answer

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

User · Answer

Remove display  block  in the div  tfl style property   lt div id  tfl  style  display  block  width  187px  height  260px    Inline style take priority then css file

User · Answer

Try add this to your css   tfl   display  none  important

User · Answer

This is because the inline style display block is overwriting 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

User · Answer

Check following html I removed display block from style    lt 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   gt           lt div style  display  block  padding  30px 0 15px 0   gt               lt 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  gt Journey Planner lt  h2 gt               lt 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   gt                   lt input type  hidden  name  language  value  en    gt                   lt  -- in language   english -- gt                   lt input type  hidden  name  execInst  value      gt  lt input type  hidden  name  sessionID  value  0    gt                   lt  -- to start a new session on JP the sessionID has to be 0 -- gt                   lt input type  hidden  name  ptOptionsActive  value  -1    gt                   lt  -- all pt options are active -- gt                   lt input type  hidden  name  place origin  value  London    gt                   lt  -- London is a hidden parameter for the origin location -- gt                   lt input type  hidden  name  place destination  value  London    gt  lt div style  padding-right  15px  padding-left  15px  gt                       lt input type  text  name  name origin  style  width  155px  important  padding  1px  value  From    gt  lt select style  width  155px  important  margin  0  important   name  type origin  gt  lt option value  stop  gt Station or stop lt  option gt                           lt option value  locator  gt Postcode lt  option gt                           lt option value  address  gt Address lt  option gt                           lt option value  poi  gt Place of interest lt  option gt                       lt  select gt                   lt  div gt                   lt 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   gt                       lt input type  text  name  name destination  style  width  100   important  padding  1px  value  232 Kingsbury Road  NW9     gt  lt select style  width  155px  important  margin-top  0  important   name  type destination  gt  lt option value  stop  gt Station or stop lt  option gt                           lt option value  locator  gt Postcode lt  option gt                           lt option value  address  selected  selected  gt Address lt  option gt                           lt option value  poi  gt Place of interest lt  option gt                       lt  select gt                   lt  div gt                   lt 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  gt                       lt 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  gt  lt 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 amp ptOptionsActive 1  onclick  javascript document getElementById  jpForm   ptOptionsActive value  1  document getElementById  jpForm   execInst value  readOnly  document getElementById  jpForm   submit    return false  gt More options lt  a gt  lt  div gt                   lt  div gt                   lt div style  text-align  center   gt                       lt 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     gt                   lt  div gt               lt  form gt           lt  div gt       lt  div

User · Answer

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

[html] CSS - display: none; not working

Examples related to html

Examples related to css