Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Does it work if you position the images?</p> <pre><code>.widgetMainLeft { background: url('/Content/Images/Title_Bar_Left.png') 0 0 no-repeat; /* 0px/0% in X dimension, 0px/0% in Y dimension */ width:6px; min-height:100%; } .widgetMain { background: url('/Content/Images/Title_Bar_Middle.png') repeat-x; text-align:left; margin-top:auto; min-height:100%; } .widgetMainRight { background: url('/Content/Images/Title_Bar_Right.png') top right no-repeat; width:6px; min-height:100%; } </code></pre> <p>Okay, I made it work with the following:</p> <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;link rel="stylesheet" type="text/css" href="css/stylesheet.css" /&gt; &lt;style&gt; #container { margin: 1em auto; height: auto; width: 18.5em; font-weight: bold; } div.widgetBody { background-color: #0f0; } div.widgetMainLeft { background: transparent url(img/top-left-c.png) 0 0 no-repeat; } div.widgetMain { background: transparent url(img/bottom-left-c.png) bottom left no-repeat; } div.widgetTitle { background: transparent url(img/top-right-c.png) 100% 0 no-repeat; padding: 0.5em 1em 0 1em; border-bottom: 1px solid #000; } div.widgetDisplayedArea { background: transparent url(img/bottom-right-c.png) 100% 100% no-repeat; } ol.display { display: block; margin: 0 auto; list-style-type: none; } ol.display li { float: left; width: 8em; margin: 0.5em; background-color: rgba(220,220,220,0.5); } ol.display li:hover { background-color: rgba(250,250,100,0.9); } ol.display li img { display: inline; vertical-align: middle; margin: 0 0.4em; } p { clear: both; padding: 0 1em 0.5em 1em; border-top: 1px solid #000; font-size: 80%; text-align: right; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="container"&gt; &lt;div class="widgetBody"&gt; &lt;div class="widgetMainLeft" /&gt; &lt;div class="widgetMain"&gt; &lt;div class="widgetTitle"&gt;Messages&lt;/div&gt; &lt;div class="widgetDisplayedArea"&gt; &lt;ol class="display"&gt; &lt;li&gt;&lt;img src="img/inbox.png" alt="inbox" /&gt;inbox&lt;/li&gt; &lt;li&gt;&lt;img src="img/drafts.png" alt="drafts" /&gt;drafts&lt;/li&gt; &lt;li&gt;&lt;img src="img/outbox.png" alt="outbox" /&gt;outbox&lt;/li&gt; &lt;li&gt;&lt;img src="img/pending.png" alt="pending" /&gt;pending&lt;/li&gt; &lt;/ol&gt; &lt;p&gt;&lt;a href="#more" title="more..."&gt;more&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="widgetMainRight" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>There's a demo over at: <a href="http://davidrhysthomas.co.uk/so/widgetcorners.html" rel="nofollow noreferrer"><a href="http://davidrhysthomas.co.uk/so/widgetcorners.html" rel="nofollow noreferrer">http://davidrhysthomas.co.uk/so/widgetcorners.html</a></a></p> <p>As noted, it seems to be that you hadn't ordered your images properly, the background should go on the outermost div, the top image should go on the inner-most, and the others ordered as appropriate.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload