How to remove spacing between superfish menu ul and parent div - html

I have menu made with Superfish jquery plugin http://users.tpg.com.au/j_birch/plugins/superfish
But i have some problems with that, it is added padding when i view my page in Firefox, Chrome and IE:
Here is the jsfiddle sample http://jsfiddle.net/YsG97/2/
May be some one may suggest how to remove this spacing between Superfish menu ul and header div?
and there is strange thing i indecently find out, if i put &nbsp after menu closing tag: </ul> it is fixed spacing in Firefox, don't know why. May be some one may explain?

Here you go:
#menucontainer {
...
vertical-align: top;
}
Live demo: http://jsfiddle.net/YsG97/5/
The #menucontainer DIV has display: inline-block set, which effectively makes it an inline element. Inline elements are by default aligned to the baseline, which means that there will be space below them (between the baseline and the descender):
http://vidasp.net/media/CSS-vertical-align.gif

If you add a clearing element after the closing ul tag, it matches up to the bottom. there is a problem with the floats, not sure what the problem is but this fixes it (although with increased height in the #menucontainer div.
See here.

Related

HTML / CSS - Unexplained margins

I have the following page with some HTML / CSS : http://jsfiddle.net/Hf6dB/1/
For some reason the buttons of the toolbar at the top of the screen have a margin right. Margin left, top and bottom is ok because the container has a padding, but where is the margin right from ?
Also in the real version of the page, which you can't see on the fiddle bbecause there are no icons, i have a similar problem in each of the menu entries :
<li>
<div class="draggable">
<input id="tb-btn-search" title="Search" type="button">
<p>Search</p>
</div>
</li>
When the mouse is out of the button, the <p> has a width that gets animated from 0 to something like 2 using CSS transitions. For some reason, when the width of the <p> is zero, the icon is not centered anymore because, here too, there is an extra margin that comes from nowhere.
Would this be related to the usage of inline block display property ?
Thanks for yor help !
display: inline-block creates a gap between elements. Further reading here.
Edit:
bjb568 mentioned in the comments re 4px gap:
NO! 4px gap depends on the font and size. You cannot use negative margins to solve this, since you don't know how big the gap is. -4px is a magic number, and thus should be avoided. Use font-size: 0, instead
You can delete inline-block in the <ul> and add float: left; to the li
#toolbar ul,
#toolbar li
{
display: inline-block; /* delete this
}
#toolbar ul,
#toolbar .tb-separator,
#toolbar li
{
float:left;
}
Updated JsFiddle
The line breaks between the elements are treated as whitespace, because the elements are inline-block, so they are part of a line of text. You can solve this by removing spaces and line breaks between the elements. If you want to keep the indenting in your document, you can choose to add a line break inside the element itself:
<outer
><inner
></outer>

Centering css dropdown menu

I have a little problem with centering my dropdown menu. I've tried everything said on Google and this forum, but nothing helps and therefore i hope that some of you guys will help me!
My page can be seen here testpage. Here you can see how misplaced my dropdown menu are. I wan't it to be centered.
You can do it by:
Removing float: left from li elements.
Adding display: inline-block to li elements.
Adding text-align: center to ul element.

How to remove padding from a li element?

I have a Popular post widget whose css is modified by me at the blogger-template. When I save the template, My website shows a .7em padding on top and bottom of each li element of the Popular Post Widget,(Seen by Inspect Element). But in the css I have not given any. Even the whole template does not contain any padding of .7em. I have forcefully removed the gaping by negative margin in the li tag. But that makes a little problem in the hover effect. and as there is no provision of negative padding, what to do in such situation. Any idea?
Try the obvious:
li {
padding: 0;
}

How come there is 4px of extra padding appearing under my <a> element?

H3LLO,
For some reason there is 4px of extra padding appearing under the a element. I am seeing this manifest in both Firefox and Chrome. I remember seeing this phenomenon on Flickr in its early days except it was a blue bar that appeared under s wrapped in elements.
Here is a link to the example code that illustrates my problem. The background: of a has been colored red and the border: of img has been colored gray. As you can see, the a element is extending around 4px below the img.
To see the code just press the "Edit using JSBIN" link that appears at the top right corner when you hover over the window.
Any ideas on how to get rid of a element's extra bottom padding?
Thanks
Adam
add vertical-align:bottom; to your img css properties.
a {display: inline-block}
img {display: block}
Images are rendered inline by default and you need to add display: block or vertical-align: bottom to fix the issue.
The only working way for me is to "remove" the margin is wrapping the image with div and set the size of div exactly the same as the image.
<div style="width:64px; height:64px">
<img src ='image.png' style="width:64px; height:64px" />
</div>
I'm not positive why it occurs, but you could try YUI Reset to fix it.

CSS: UL's/OL's vs. Div floating left in IE

The scenario is that the client wants a floating div (the gray box) with text that wraps around it. However some of that text includes ul's and ol's, which hide behind the floating div in IE6.
I tried wrapping the ul's/ol's in a div to see if that would help, but have been unsuccessful. Has anyone experienced this problem before and found a suitable solution?
(note: This is an old site with limited ability to be able to modify much else within the layout)
I think you can modify the li's to display their bullets inside instead of outside and that should help you...
ul {
list-style-position: inside;
}
However some of that text includes ul's and ol's, which hide behind the floating div in IE6.
If we're talking something as simple as this:
<div style="border: dotted red 1px; float: left; width: 100px; height: 100px">foo</div>
<p>bar</p>
<ol style="border: dotted blue 1px;">
<li>potato</li>
<li>yoghurt</li>
</ol>
Then what happens here happens on all browsers, not just IE. You can see it from the borders on this example: the left-padding of the list occurs behind the float, not pushing the list content further to the right. This is because floats only repel items in a line box, not block elements.
If you want a quick hack workaround, wrap the <ul> in a <div> with style ‘display: inline-block’.
Floating + IE6 is always a causes some unintentional pain and suffering. Some simple fixes:
Add more margin to the floating box
Add some left margin to your ul/ol