I am working on adding a menu to a map. The menu is working fine except I noticed there is always a padding to the left no matter what CSS applied to the menu. The padding seems to be originated from (-webkit-padding-start: 40px;) and it does not want to go away. I tried to override it with 0 !important; that didn't do anything.
After Googling found this:
-webkit-padding-start: 40px; What it should be for IE and Firefox?
However could not find anything else on how to override or make this go away. I need to have items in the menu all the way to the left.
Attached is a screenshot, green area is what I am talking about and under styles you can see -webkit-padding-start: 40px;
It's because of the user-agent stylesheets of every browser.
You should always reset all attributes in your css as your first step.
Short solution:
* {
margin: 0;
padding: 0;
}
/* your styling */
Longer solution:
http://meyerweb.com/eric/tools/css/reset/
for firefox:
-moz-padding-start: 0px;
I had this issue for a menu aswell and tried to correct it in the ul .navigation {} style I was using but didn't work until I reset it in the ul {} itself - incase anyone else has the same trouble.
Related
Go to this link to get the code
http://jsfiddle.net/o3rh4oeb/
Go to this link for actual design I want.
http://www.bbc.com/news/
See here my problem is the white spaces,between the boxes.How to get rid of it,I tried both margin and padding 0px but never worked for top one not the below one :(
help me please...
The ul in the #topicmenu section has a margin-top applied by the browser. You just need to remove it:
#topicmenu ul {
margin-top: 0;
}
I'm trying to remove the margin in the screenshot attached (see http://goo.gl/tbw4V), but I can't for the life of me see where it is in my WordPress stylesheet to remove it! I was hoping someone on hear could possibly help me? I have checked the H1, H2 tags, .bylines DIV and paragraph tags but nothing seems to be pushing the entry information approximately 15 pixels below the header. My website is at http://gracefulpostcards.com
Thanks for any help,
Steven.
To adjust these styles is highly recommended that you use the Firebug extension for Chrome or Firefox. So you can debug the html page and styles.
In your case, simply set the property margin-bottom of selector .singular .entry-title with 0:
.singular .entry-title {
margin-bottom: 0;
}
in style.css line 753
.hentry .entry-title {
margin: 0 0 0.6em 0;
}
Look in style.css, the style starting at line 753.
How I found it? Google Chrome -> Right click -> Inspect element.
The margin is defined under the selector .hentry .entry-title. It's margin: 0 0 0.6em 0. Just make it 0.
.featured {
margin-bottom: 20px;
}
Is the CSS rule you have to change.
If this is the page you are talking about : http://gracefulpostcards.com/why-start-a-personal-blog/#.UKGMi4csDng
then removing this CSS rule deletes the margin-bottom perfectly.
After inspecting your page, it seems that h2.entry-title has a margin-bottom
To fix this, add the following to your css:
h2 {
margin-bottom: 0px !important;
}
I want the vertical menu completely at the top-left corner but right now there still about 2px top and left margin and I can not figure out why, all margin set to 0 already. Some one have any idea?
Thank so much!
The body tag has a margin set on it, try:
body { margin:0; padding:0; }
add margin: 0px; to your pages body tag.
You need to set margin: 0 on the body (live editing via Developer Tools solves it for me).
And learn to use Developer Tools ;)
Using Chrome, it showed me you had something like this:
body {
display: block;
margin: 8px;
}
from the user agent stylesheet.
You used some CSS Reset? If not, use this: http://meyerweb.com/eric/tools/css/reset/. Or if you want a quicker solution, use body {margin: 0; padding: 0;}
I'm guessing that there are still default margins on the page. Try using a CSS reset file. This will make sure that the margin and padding are all 0 when you start (along with some other nice resets).
I've got a puzzling problem in that a certain bit of HTML displays fine in all modern browsers and IE7, but completely fails in IE8. I've racked my mind as to which CSS could remedy this problem but I've come up short every time.
If you look at this link in chrome, near the bottom you'll notice FB/Twitter share buttons, but if you look at the corresponding space in IE8, there's nothing. Could someone please check it out and let me know, I'm stumped...
The CSS code is:
body div.mr_social_sharing_wrapper {
clear: both !important;
overflow: hidden !important;
height: 40px !important;
width: 960px !important;
z-index: 2000 !important;
line-height: 30px !important;
float: left;
}
span.mr_social_sharing,
span.mr_social_sharing_top {
float: left;
}
And yes, I know using !important is poor form; it was inherited and not by choice :)
Seems to be solved by removing the display styles (you had both display: inline-block and display:block) and float: left from span.mr_social_sharing_top.
If there was a good reason for needing the display styles (trouble in other browsers?) you could also add fixed widths to these spans to solve the problem.
I've styled some unordered HTML lists and their heading to look like this in Firefox:
alt text http://img24.imageshack.us/img24/711/screenshot001nij.png
Unfortunately, in IE7, they look like this:
alt text http://img11.imageshack.us/img11/8343/screenshot002e.png
The relevant HTML is
<div class="list-column">
<h4>Types de pêche</h4>
<ul>
<li>Pêche en lac</li>
<li>Pêche en Rivière</li>
</ul>
</div>
And the CSS is:
.list-column {
float: left;
margin-right: 20px;
width: 20em;
}
div.list-column h4 {
background-color: #FDD041;
padding: 5px !important;
}
ul li {
background-image: url(images/arrow.gif);
background-position: 0 11px;
background-repeat: no-repeat;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin-bottom: 6px;
margin-left: -20px;
margin-top: 2px;
padding: 2px 0 2px 18px;
}
I suspect the fact that the div containing the list is floated left is probably the root of my problems, but I'm not sure how to workaround the poor display in IE7?
Update:
I tried adding a 'zoom: 1' property to the 'ul' elements to see if giving the elements 'layout' would fix the problem in IE, but it didn't.
The problem is definitely not related to the rounded corners. I turned them off temporarily but it didn't change anything in IE (apart from the appearance of the corners).
Thanks,
Don
IE and the other browsers have a different default style sheet.
IE indents list items by putting a ‘margin-left’ on the <ul>. The other browsers put a ‘padding-left’ on the <ul>.
So if you want to look the same in all browsers, set both ‘margin-left’ and ‘padding-left’ explicitly on <ul>. In your case, you would want to add something like “margin: 0; padding: 24px” on your “div.list-column ul, ul.round” rule.
(The default list ‘margin-left’ in IE is, to be precise, ‘30pt’.)
A common solution for this is setting the width of the element. This will make IE everything inside the bounds of that width.
I think this is a case of IE-7 auto indending the li's
the easiest way to debug this is to install IE-8; switch to compatible ie-7 mode.
then launch the developer tools from the tools menu
You can then inspect the individual elements and check if there are hidden padding or margins being applied
I think that it can depend from different default padding on ie and firefox. Try to use reset.css in your code if you haven't already done it.
P.s. in ie8 you have developer tools which are similar to firebug. Try to use them and see if you can't understand the issue...