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;
}
Related
I started a new job this week and one of my duties will be fixing/updating the website.
Our front page has six floated elements with mouse behaviors wrapped in a UL. In Firefox and IE, it appears just fine.
In Chrome, the last li element is lower than the others by about 20 or so pixels (I tried removing the style that was on the "last" element which changed the top margin (-18), but it didn't change anything).
The site is at rlba.com. If anyone has any suggestions, I'd appreciate it.
To answer your question...
Set #flashContainer2 ul, line 274 in your styles.css file, to have a width of 942px and a display of block. This will correct the behavior you are experiencing.
But please listen to j08691 and alireza safian in your comments and fix your question so that other people can learn from this.
There is no reason for your ul to be display:inline, especially if you have a defined height, so remove your display attribute and let it be the default (display:block;).
Then remove the default browser padding on the ul to have it be flush with the left side of your site's content container.
#flashContainer2 ul {
width: 940px;
height: 420px;
/* display: inline; - remove this */
padding: 0; /* add this */
}
And lastly, your li tags in the ul are 155px wide with padding-right of 2px (so the li is effectively 157px) but the ul is 940px wide. 157x6 = 942px. So you could either remove the width on "#flashContainer2 ul" so it grows to the container and becomes 942px wide, or remove the 2px padding from the last element so all of the li's fit in the ul.
#flashContainer2 .lastInList {
padding-right: 0; /* add this */
}
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>
There is this weird looking dash thing in the listed elements just to the right of the image, and I can't figure it out for the life of me, but it goes away when I take out the <a> tags.
Any idea what is causing it?
That's the regular underlining of links. Specifically, it's the white space after the image tag that gets underlined.
You can add the style text-decoration: none; to the links to remove the underlining:
.team-list-item a { text-decoration: none; }
Alternatively you can write the div right after the img tag to remove the white space, or you can make the image a block element floating to the left:
.team-list.item img { float: left; }
However, the last two alternatives will change the layout somewhat as it reduces the space to the right of the image. On the other hand, you may want to do that, and adjust the space with a margin or padding, as that gives a more stable layout than using space characters for spacing.
In compatibility mode for ie7, I am noticing a weird spacing issue for internet explorer 7. I have a joomla news feed arranged as links within a series of vertical list items. For some reason, the white space height between each line of text seems to be variable. Here is the url of the page in question, www.galloplaw.com. What could I do or set to fix this issue?
Even if you don't give any padding or margin to ul, li in every browser it takes some default margin and padding.
And the amount is different in different browsers.
So you need to do one thing, i.e reset the margin and padding.
Either use
*
{
margin: 0;
padding: 0;
}
to reset the margin of every element in the page or use
ul, li
{
margin: 0;
padding: 0;
}
to reset the margin of ul and li element only.
After resetting it you can give your custom margin and padding.
Hope this will help you.
I'd highly recommend using a true CSS reset like Eric Meyer's reset or Normalize CSS, but it maybe a little bit late in your project for that.
The problem here may be that, on your news li tags, you have top and bottom margins. In recent browsers, the bottom margin of one li will merge with the top margin of the following li. Not in IE7. You could remove the top margin from your li by deleting the following on line 475 of your css :
.latestnews li {
margin-top: 10px;
}
I have dropdown menu and its made via a list and position absolute, however the dropdown links are very very very small area and do not cover the text completely.
How can I fix this?
Example http://outreviews.com/v%202/index.html (the dropdown menus)
Remove the padding from the sub menu's UL and LI and give the A element "display:block" This will make the A element take up the entire width of the menu.
You can fiddle with the padding to get it the way you want it.
If you add:
ul li a {
display: inline-block;
width: 100%;
height: 100%;
}
It should work okay, and since even IE allows display: inline-block; on natively in-line elements it should be relatively cross-browser friendly (certainly under a valid doctype).
It's worth remembering that padding on the parent li will also reduce the possible width of the child a element, and the display: inline on the same parent li is also likely to cause you a little trouble (since display: block; on the a would be so much simpler).
Edited to note that #Chris Bentley correctly noted the points in my final paragraph (above the hr) just prior to my answer.
make the following changes:
in #headermenu li change the padding:20px; to padding :0 20px;
add delete the top:55px; from #headermenu li ul
What you can do is make the li elements display:list-item and the a elements display:block. That's what's being done on the site you're linking to.