How come this code doesn't require display:block with <div style="

[asasass]

What makes this code different from the blocks?

Edit fiddle - JSFiddle - Code Playground

<div style="width:266px;" onmouseover="myObject=document.getElementById('myObj5h'); 
myObject.style.display='block'; this.style.display='none'">

<div style=" cursor: pointer; width: 89px; height:24px; background-color:#00ffff; border-top-left-radius:50px;border-bottom-left-radius:50px;margin: 0px 0px 0 0px;text-align:center">
</div>

<div style=" cursor: pointer; width: 88px;height:24px;background-color:#ffffff;margin: -24px 0px 0 89px; ">
</div>

<div style="cursor: pointer; width: 89px; height:24px; background-color:#ff00ff; border-top-right-radius:50px;border-bottom-right-radius:50px; margin: -24px 0px 0 177px;text-align:center">
</div></div>

<div id="myObj5h" style="display: none;">

<div style="width: 89px; height:24px; background-color:#00ffff; border-top-left-radius:50px;border-bottom-left-radius:50px;margin: 0px 0px 0 0px;text-align:center">

<button style="cursor: pointer; font-family:Tahoma; font-weight: bold;font-size:14px; border:none;background-color:#00ffff;color:blue;padding: 0px 0px 0px 0px;"
onclick="document.getElementById('player').play()">Play</button>
</div>

<div style="width: 88px;height:24px; background-color:#ffffff;margin: -24px 0px 0 89px;text-align:center;">

          
<button style="cursor: pointer; background-color:#ffffff;color:blue;font-family:Tahoma; font-weight: bold;font-size:14px; border:none;padding: 0px 0px 0px 0px;"    
onclick="document.getElementById('player').pause()">Pause</button>
</div>

<div style=" width: 89px; height:24px; background-color:#ff00ff; border-top-right-radius:50px;border-bottom-right-radius:50px; margin: -24px 0px 0 177px;text-align:center;">
          
<button style="cursor: pointer;	background-color:#ff00ff;border:none;color:blue;padding: 0px 0px 0px 0px;font-family:Tahoma ;font-weight: bold;font-size:14px; padding: 0px 0px 0px 0px;"    
onclick="document.getElementById('player').pause() ;document.getElementById('player').currentTime=0;">Stop</button>
</div>   
      
<audio id="player" style="display:none;">
<source src='http://hi5.1980s.fm/;' type='audio/mpeg'/>
</audio>
</div>

[TechnoBear]

How come this code doesn’t require display:block with <div style=”

See

Does and should [display values] be put on every style tag?

Good question (for a change) Assuming you are talking about the ‘display’ property then there are a few things to understand first which relate to html and css. For simplicity sake in html elements are usually defined as block elements or inline elements. This dictates how the elements may be used (e.g. inline elements can’t contain block elements). Only block elements can contain other block elements and also contain inline elements. Inline elements can contain other inline el…

[chrisofarabia]

As you’re using Firefox, this should answer all your questions - http://www.iecss.com/gecko-9ae44c5b57ac.css

[asasass]

It works without it on internet explorer 11. Should I have it in there regardless?

[asasass]

Remember I said, if it works without a display property, then it probably doesn’t need one. Is this not always the case?

[TechnoBear]

@asasass

It works without it on internet explorer 11. Should I have it in there regardless?

Once again:

@PaulOB

Back to your question and there is indeed no need to add the display property to any html elements unless you are changing their default display properties. The user agent (UA / browser) sets all the display:values via its own stylesheet to the appropriate values for the elements concerned. Therefore there is no need for you to do this unless you need a different type of display for that element.

[asasass]

But he said this:

How come this code doesn't require display:block with <div style="

As you’re using Firefox, this should answer all your questions - http://www.iecss.com/gecko-9ae44c5b57ac.css

Does this mean it might work on some but not all?

[TechnoBear]

@asasass

Does this mean it might work on some but not all?

No. What @chrisofarabia linked to is a reference for the specific default rendering for elements in Firefox. PaulOB gave you the general answer to your question.

[asasass]

But what about for other browsers? Not everyone uses firefox?

[TechnoBear]

@asasass

But what about for other browsers?

All browsers follow this behaviour:

@PaulOB

Back to your question and there is indeed no need to add the display property to any html elements unless you are changing their default display properties. The user agent (UA / browser) sets all the display:values via its own stylesheet to the appropriate values for the elements concerned. Therefore there is no need for you to do this unless you need a different type of display for that element.