StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>This problem happens when we do not specify following css attributes:</p> <ol> <li>min-width, max-width, and</li> <li>min-height, max-height</li> </ol> <p>And carefully using the following css attributes can help:</p> <pre><code>#parent_id:hover { //use borders to find space required for correct width/height } #parent_id>#child_id:hover { //use borders to find space required for correct width/height } #parent_id:hover, #child_id:hover { //use borders to find space required for correct width/height } </code></pre> <p>So make sure that you add these.</p> <p><strong>Remember this always:</strong></p> <p>Never do css without borders, always make sure that you add borders to almost all nodes, this helps to clearly understand how much space is being occupied and it is more easy to workout errors in css like this</p> <pre><code>ul#nav { list-style-type: none; margin: 0; padding: 0; text-align: center; position:absolute; height:300px; width:200px; max-height:300px; max-width:200px; border:5px solid red; overflow:hidden; } ul#nav li { border:1px solid green; font-size: 250%; line-height: 25px; max-height:200px; padding: 7px 0; margin-top: 10px; max-height:50px; } ul#nav li a { border:1px solid black; } ul#nav li a:link,ul#nav li a:visited { color: #333333; text-decoration: none; } ul#nav li a:hover,ul#nav li a:active { max-height:50px; color: #a61607; text-decoration: none; } ul#nav li img { display: none; } ul#nav a:hover#first_id+img { display: block; } ul#nav a:hover#second_id+img { display: block; } ul#nav a:hover#third_id+img { display: block; } ul#nav a:hover#fourth_id+img { display: block; } ul#nav li ul#side-menu { display: none; } ul#nav li:hover ul#side-menu { font-size: 30%; list-style-type: none; line-height: 2px; color: #a61607; text-decoration: none; display: block; position: absolute; top: 310px; left: 250px; } ul#nav li:hover ul#side-menu li { float: none; } ul#nav li:hover ul#side-menu li img { position: absolute; width:48px; height:48px; top: 400px; left: 0px; } </code></pre> <p><strong>Now it is not fluttering</strong></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