I wanted to make a box for my website.
When I made it, some text moved down. Then I checked in Chrome dev tools and saw the box had a margin. I do not want that margin!
If I'm making any sense to you, please help!
#route{
height:300px;
width: 300px;
border: 1px solid black;
padding: 0px;
margin: 0px;
}
<div id="route"></div>
If there is a margin, then it may be inherited from a parent element. You should be able to pinpoint what CSS is causing this, by toggling the active CSS items within the developer tools you used to inspect the element. You may want to check out https://developer.chrome.com/devtools for more info since you haven't supplied enough code here for anyone to be able to help you.
Can you share more on this ?
What random margin do you get?...from my suspicion its that you are getting something like this
Browser window with margin
i.e. Your borders do completely touch the edges of your browser and when you inspect elements you get a body with an extra margin.
body {
display: block;
margin: 8px;
}
Most browsers do set a margin on the body element and you can easily remove this by using the code fragment below
body {
margin:0;
padding:0
}
Related
More frequently then not I come across this issue. Generally I use padding instead of the margin or some quick solution to fix my problem but I too know this is not the correct fix.
Without going deep into writing my issue, I like create a fiddle for better understanding. So here is my fiddle.
.container-node {
margin: 10px;
background-color: #0f0;
}
.content-node {
margin: 20px;
background-color: #f00;
padding: 5px;
color:#fff;
}
.border {
border:1px solid #00f;
}
The issue that I'm trying to point out is if I've two divs, one inside the other and the inside div is given some margin, it takes the margin value differently if the container is bordered and differently if the container does not have a border.
I appreciate any help or documentation on this. Thanks
http://www.w3.org/TR/CSS2/box.html
Read carefully 8.3.1 Collapsing margins
Two margins are adjoining if and only if:
no line boxes, no clearance, no padding and no border separate them
The best solution of this ptoblem i know is clearfix. Its not giving padding or overflow but similar to it.
Fiddle
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
As already pointed out it is a "problem" with collapsing margins. A really good read about this issue can be found here:
http://reference.sitepoint.com/css/collapsingmargins
You could just add a padding of 1px and reduce the margin by 1 like so:
.container-node {
margin: 9px;
background-color: #0f0;
padding: 1px;
}
Applied to your problem:
http://jsfiddle.net/n65bX/1/
The .content-nodes margin doesn't work properly, it doesn't have an element to push from. With the border property you define the contour of the element(Based on the border, the margin can push from there).
To easially fix this, you can add a padding to your .container-node instead of the margin on .content-node:
.container-node {
/*margin: 10px;*/
padding: 20px;
background-color: #0f0;
}
Also you are creating your yellow border with a margin. I would suggest you to use also padding for this on the proper element:
.root-node {
border: 1px solid #bababb;
background: #ff0;
margin: 10px 0;
padding: 10px;
}
with proper i mean to the relevant element. You gave an yellow background to .root-node element, so you should also define the size of that element on that element.
It's far more logic to use it this way :)
When you want to create an inline spacing use padding, if you want it to go outside use margin.
jsFiddle
This might also be usefull: When to use margin vs padding in CSS
Update
So you may ask yourself: why isn't the element(.content-node) pushed away based on the parent(.container-node) element?
Well it's fairly simple why this happens. The margin still pushes the element(.content-node) away, only it's based on the wrong element(it is pushed from the .root-node). This is why your yellow border is bigger as the one with the border.
So why is it pushed at the root element?
To debug it even more; let's only set margin to the left and right of the .content-node:
margin: 0 55px;
jsFiddle
It seems that only the top-margin didn't work. And it indeed seems that the margin is collapsing.
I found this topic about this matter: Why does this CSS margin-top style not work?
So i would suggest to use padding so margins aren't conflicting with each other (paddings can never interact in the same 'flow' with each other).
I will try to explain this the best I can.
In the element containing the "container-node", there is no 'area' for that container to give margin to.
By adding sample text before/after , you will see the margin working. Likewise, if you give the "container-node" a border or even padding, you will then provide that element with something for the "content-node" to position against.
Page:
http://www.serrupro.ca/index.php?option=com_content&view=article&id=5&Itemid=6&lang=fr
Same page but linking to the anchor
http://www.serrupro.ca/index.php?option=com_content&view=article&id=5&Itemid=6&lang=fr#opportunites
My left and right sides move up.
So i'm using the -4000 margin and 4000 padding method so that my left side has a white background all the way to the bottom no matter how long/short the right side is.
This left and right side arer within a container that is overflow:hidden;
This is the only thing i can see that could make theses elements disapear. Without it tho my page doesnt work correctly.
what can i do to fix this? Doesnt seem to be a normal behaviour for an anchor.
thanks for the help in advance
#topcontent {
position:relative; /* required for ie or 4000px padding/margin visible */
background-color: #231f20;
border-left: 1px solid #231f20;
border-right: 1px solid #231f20;
overflow:hidden;
}
#topcontent .left {
position:relative;
width:703px;
margin-bottom:-4000px;
padding-bottom:4000px;
background:#FFF;
}
#topcontent .right {
width: 245px;
float: right;
margin-bottom:-4000px;
padding-bottom:4000px;
}
Ugh, well I don't exactly have an answer for you - I tend to design my columnar layouts using the background image method, or same colored sidebars. However I did find some documentation on this particular "bug":
http://www.positioniseverything.net/articles/onetruelayout/appendix/equalheightproblems
I honestly don't know of another alternative method besides a javascript solution, which I always try to steer clear of. You would have to do some serious design refactoring for the background-image to even become an option.
Best of luck, and I hope that link helps a bit - they have some workarounds
Fastest solution is to give padding-bottom to the overflow:hidden element. In your case it will be
#topcontent { /* Any element with overflow: hidden property */
padding-bottom: 18px; /* Value in px that will work for you */
}
I'm a beginner and I have been battling to get this site to work as desired. Thanks to advice on this forum to include an IE7 specific style sheet I am almost there, but with a couple of minor issues remaining. Some of the styles just won't work and I'm starting to despair! I have three issues and if anyone can shed some light on these I'd be super happy!
Across all browsers (both stylesheets), 'main p' text padding on the right is only appearing on pages 'studios.htm' and 'contactus.htm' - I have no idea why and have tried playing around with all the styles without success.
On the 'location.htm' page I am unable to position the footer "behind" the Google Map, like the picture rows are positioned on the other pages. I have tried changing margins, padding and z-index, but nothing seems to change it - I can manage to position the footer in the right place but the Google Map stays "behind" it so that the bottom part of it can't be seen.
On IE7 ONLY: CSS text formatting doesn't seem to change the font size at all. As a result the text is too large and on pages 'studios' and 'thingstodo', this results in the very bottom part of the text to go down too low and hide behind images. If the text was the right
The site is here: http://bit.ly/gaAthc
Main CSS: http://jsfiddle.net/ykbhd/
IE7 specific CSS: http://jsfiddle.net/bdwrY/
Thanks in advance!
1) The reason this appears correct sometimes is simply how the text breaks in your paragraphs. Your p tags are taking the full width of your main div, so putting right padding isn't doing to help. Instead, just put some padding on your image.
Line 190:
#target2
{
float: right;
padding-left: 5px;
}
2) You can use negative margins the same way you do for the picture rows.
Line 178:
#googlemap
{
margin-bottom: -130px;
}
3) Remove margin-bottom: -10px; from this rule:
#container #main #rotxt
{
font-family: Georgia,"Times New Roman",Times,serif;
font-size: 0.8em;
margin-top: 35px;
padding-left: 1px;
}
Update
For the Google map footer issue in IE7, try adding this rule to a IE7 stylesheet (see here for info on conditional comments):
#footer
{
z-index: -1;
position: relative;
}
Add overflow: hidden; to #main p
So I have an element that is placed directly inside body:
<body>
<div id="header">Some stuff...</div>
Other stuff...
</body>
The following is the CSS used:
body{
text-align:center;
}
#header{
margin:auto;
}
So the #header div is set to 100% width (default) and is centered. Problem is, there's a "space" between the window border and the #header element... Like:
| |----header----| |
^window border ^window border
I tried adjusting it with javascript, and it successfully resizes the element to the exact window width, but it doesn't eliminate the "space":
$('#header').width($(window).width());
One solution seems to be to add the following CSS rules (and keep the javascript above):
#header{
margin:auto;
position:relative;
top:-8px;
left:-8px;
}
In my browser this "space" is 8px - but I'm not sure if that's the same across all browsers? I'm using Firefox on Ubuntu...
So what's the right way for getting rid of this space - and if it's what I used above, do all browsers act the same?
body has default margins on all browsers, so all you need to do is shave them off:
body {
margin: 0;
text-align: center;
}
You can then remove the negative margins from #header.
An easy way to solve this problem is by getting rid of all the margins. And you can do that by the following code:
* {
margin:0;
}
This will solve the problem and will give you finer control over the margins of all elements.
Add these to the style tag in body, like the following one:
body { margin:0px; padding:0px; }
It worked for me. Good luck!!
I found this problem continued even when setting the BODY MARGIN to zero.
However it turns out there is an easy fix. All you need to do is give your HEADER tag a 1px border, aswell as setting the BODY MARGIN to zero, as shown below.
body { margin:0px; }
header { border:1px black solid; }
Not sure why this works, but I use Chrome browser. Obviously you can also change the colour of the border to match your header colour.
I am building this mobile website.
If you check it on your mobile browser it should fit in such that there is no horizontal scrolling. (Content should only be vertically stacked).
Can someone help me in fixing the CSS of the page. Just let me know what the correct CSS should be so as to auto adjust for different mobile phones.
CSS of this page can be found here. Basically, two main components I guess. (body and content).
Also, I used this mobile website as a sample. Please refer to its inline CSS by viewing the source of that page.
Thanks
Okay, so it seems that your #content div is actually pushing the boundaries of the screen even on my large firefox browser. In your CSS you have it declared like so:
#content{
width:100%;
margin: 0;
padding: 20px;
background: white;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
I have confirmed by editing the CSS locally, that your padding is actually pushing the boundaries of the 100% width div, but the good news is that since it's a block level element it already fills all of the room available to it. Try get rid of the "width:100%;" and see if that works for you. It will still display exactly the same, but without those scroll bars.
So something like this:
#content{
padding: 20px;
background: white;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}