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>
Related
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;
}
I am trying to solve this issue for a few days now. I am unable to place the Child1, 2 and 3 between the 25px orange spot. The parent and child menu is a CSS based ul - li menu, where I set the <a> as an inline-block and set the width and height but it still ignores those parameters. I am out of ideas on how to solve this matter. Thank you for your help in advance.
Due to the length of the code I decided to upload the "whole" source code:
source.zip
The problem is that your <a> tags on the sub-menu have the padding:15px from the main menu. You will need to set it to 0. You can then set the line-height of the element to match the orange bar's height to center it vertically.
Add this to fix it:
#header .cssMenuA a{
padding:0;
line-height:25px;
}
It looks like the Child 1, 2, 3 a tags have padding applied to them, which is pushing them down past the orange. See screenshot:
Try removing the padding from the a tags (bodystyle.css, line 78), and reapplying it only to the parent menu items.
You have 15px of padding around all of the <a> elements in the nav list (including PARENT), but this also applies to the "Childs." Add the rule:
#header li li a {
padding-top: 0;
}
This may not look exactly like you want because the <a> is set at 25px high, but the font is smaller than that. Also add
#header li li a span {
line-height: 25px;
}
I am trying to figure out the best approach to have a link with an image floated next to it inline, that will force the link to become multi-line as needed while keeping the image inline floated next to it.
I setup an example here - http://jsfiddle.net/ubernoob/tYeGR/
If you size the result window you will see that once it hits a small enough width the image will fall below the link.
How can I code this so the link will go to multi-line and leave the image floated next to it?
Try putting <img> tag before <h3> and remove float:left from <h3>
I've edited the jsfiddle: http://jsfiddle.net/tYeGR/7/
this example works: http://jsfiddle.net/jalbertbowdenii/tYeGR/18/ but i changed your floats to absolutely positioning the img's. if that's not good enough, #mediaqueries are the way to go. i tried two in jsfiddle but to no vail. probably user error.
You can absolutely position the images in their rows and then add some padding to the <h3> elements so the links don't get covered by the images:
.list img {
position : absolute;
right : 10px;
}
.list h3 {
float : left;
font-size : 12px;
padding : 10px 60px 10px 0;/*notice the extra 50px of padding I added to padding-right*/
min-height : 50px;/*Notice this is added beacuse the image will not dictate height since it is positioned absolutely*/
}
Here is a jsfiddle to mess around with: http://jsfiddle.net/jasper/tYeGR/19/
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   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.
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