Yes. A lot of people here gave proper code to solve the problem but the “solved” code is still broken garbage that just happens to look right in that one browser.
Also all of the places that were referred to that supposedly don’t support doing it properly with separate CSS all do in fact support it.
Can I use display table, instead of inline-block?
<a href="" style="display:table; margin:0 2px;width: 50px; height: 50px; background-color:#00a0b0; color:#000000; border-top-left-radius:50px; vertical-align: bottom;"></a>
<a href="" style="display:table; margin:0 65px;width: 50px; height: 50px; background-color:#6a4a3c; color:#000000; vertical-align: bottom;"></a>
Zoom text doesn’t effect display table?
To use display table, what would the margin have to be on each of the blocks?
I tried:
margin: 2px 2px 0 2px
and I tried:
margin:0 2px;
those don’t work.
Yes, but the pieces are not “plug-n-play” interchangable, as you might wish them to be… and good luck creating the space between the boxes. Doing it the straightforward way would create a table that is 270px wide… again ( sigh ) and incur the burden of lots of additional HTML…more than just a few lines.
oh, I didn’t know that, I thought it was straight forward like the others. Like, if you get the first row, you just use that with all the others.
In part that is true, but not in entirety.
There is nothing special about display:table there. You could do the same thing with display:block. Much of the inline CSS is inappropriate or useless. However, the margin changes demonstrate that you are smart enough to make appropriate left and right margin changes to the inline code with the floated squares and make it fit within a width of 266px… just like @TechnoBear already saId. If you can just avoid being creative beyond reality.
I can’t make floated fit in 266px, everything I tried didn’t work.
Show me a row of 5 floated blocks that fit, I tried, they don’t fit.
Unless I’m doing it wrong.
No.
You can show ME everything that you have tried and I will explain to YOU why the technique does not work “as wished”.
Eventually, you will figure out what works and why.
I stated before and remind you again that I will not post any more inline CSS. I did so in the past to compare the efficiency of separate CSS and HTML to inline styles within the HTML. You didn’t buy it. That’s your choice. My choice is do disavow the practice of composing HTML with inline styles instead of separate CSS. I will not dispense inline styles.
This doesn’t work:
<a href="" style="float:left;margin:0 2px; width: 50px; height: 50px; background-color:#00a0b0; color:#000000; border-top-left-radius:50px;"></a>
<a href="" style="float:left;margin:0 2px; width: 50px; height: 50px; background-color:#6a4a3c; color:#000000;"></a>
<a href="" style="float:left;margin:0 2px; width: 50px; height: 50px; background-color:#cc333f;color:#000000;"></a>
<a href="" style="float:left;margin:0 2px; width: 50px; height: 50px; background-color:#eb6841;color:#000000;"></a>
<a href="" style="float:left;margin:0 2px ; width: 50px; height: 50px;background-color:#edc951;color:#000000; border-top-right-radius:50px"></a>
No kidding. How is that different than the code that I wrote? What does it show that you tried?
Let me repeat…
The code in the middle, when you click on the [div, audio] the bottom part drops down, what do I put in the code to prevent the bottom part from dropping? http://newtest180.blogspot.com/
first you delete all of the HTML tags and CSS you currently have and replace the HTML tags with the proper semantic tags for the content.
then you create an external CSS file that correctly displays the content across a large range of possible viewport widths - say anything from 300px to 3000px.
It happens on float, inline-block and table: look.
When you click on the div part on all of them, the bottom part drops down. How do you fix that?
The only difference is, all of them have 4px margin between the div and the box, except for the float one which says 5px.