Why are there gaps in this website I'm working on? I've tried setting margins, padding etc. to 0px but nothing seems to affect it.
Edit - apologies; I screwed up the link to the website. This is now fixed.
You may have inserted some styles you have forgotten about. Judging from the pic I would assume your html would look something like this like this
<ul id="nav">
<li>Home</li>
<li>Blog</li>
<li>Gallery</li>
</ul>
<div id="something">
</div>
your nav links or list items look as if they have a margin of 5px, and your div looks like it has top and bottom margin of 20px. Try to add this to your elements your are trying to fix to troubleshoot.
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
This should override any css styles preceding that may be conflicting. If it doesn't work then we need to see code to help troubleshoot further.
[UPDATE]
You should declare a DOCTYPE instead of simply putting html tags. center tags are deprecated.
To fix your spacing try this:
#nav ul{
list-style-type:none;
margin:0;
padding:0;
/* REMOVE
padding-top:6px;
padding-bottom:6px;
*/
}
/***********************************
-- ADD
***********************************/
hr {
margin: 0;
}
h2 {
margin: 0;
}
You changed the padding and margin to 0 but added it again in your ul. The hr tag was causing some of your spacing, and the heading tag was causing the rest.
Give border zero width
style="border:0px"
or give color to check if it is border
style="border-color:red"
HR (the line) and H2 (the home title) are Block elements by default and they have a line break and margins. You should modify the margins to those elements or set the display to inline (display:inline).
Also try:
border-collapse: collapse;
border: 0;
Related
I've been trying to get rid of the thin gray strip that's in the middle of this page:
http://redesign.emdintegration.com/index.html
It seems to be related to the wrapper but I can't get it to disappear. Please help!
Delete this line from your CSS...
#Content{
background: url(../images/content.gif) 0 100% repeat-x; /*Delete this line*/
}
I believe it is line 129 in style-v1.css
Look at the CSS for #content. It has a background image of a gray bar and a child <div> element within has a padding of 10px.
You have a padding of 10px on the following:
<div class="container_24" style="padding-top:10px">
Remove the style, and the gray stripe will disappear.
If you can't edit the HTML, you can add the following CSS rule:
.container_24 {padding-top: 0 !important;}
On your #content you have background: url(../images/content.gif) 0 100% repeat-x;
If you get rid of it, that should take care of your issue.
look at your debugger. in class .container_24, add padding-top:0px;, and delete the inline styling. That should get rid of all top padding in that class.Best practices indicate to use seperate stylesheet for all your styling, instead of dirty, messy inline styling.
The background url for #content is the gray line. You might think it's an element, but it's an image being directed by CSS for a background image for the id="content" on the page. I imagine the section element is for the product boxes and #content is in relation to that.
You could alter the CSS to not load this (../images/content.gif) by simply adding display: none to that line on the style sheet [Line 129]
Try copying this in its place.
#content {
padding:0px 0px 0px 0px;
display: none;
}
This has probably been asked a million and one times, but I would appreciate it if someone could explain the behavior of the divs to me..
I have a container div which I am aligning in the center of the page, which has a gap between the top and the top of the page. I want it to be flush against the top of the page. I am assuming that there is some sort of margin or padding that I need to remove but I can't think what it could be. Even with nothing in the div there is still a gap.
<body>
<div id='mainContent'>
</div>
</body>
body
{
background-color:black;
background-image:url("img/background.jpg");
background-repeat:repeat;
}
#mainContent
{
width:1200px;
height:500px;
background-color:#FFFFFF;
margin-left:auto;
margin-right:auto;
margin-top:0px;
}
Here is a JSFiddle to give you an idea of what I mean.
Can someone please explain why the div is pushed down as it is? Is there a robust solution that doesn't affect any content that is put in the div??
NOTE: If the screen width is smaller than the div width, there will be a gap on the left hand side aswell.
You need to reset the default margin of the body that is 8px aprox.
body,html {
margin:0;
padding:0;
}
The Demo http://jsfiddle.net/H76bq/3/
For default all elements has some properties:
http://www.w3.org/TR/CSS21/sample.html
You can reset this in your own css.
You could use a star selector and reset everything so that you can set everything yourself:
* { margin: 0; padding: 0; border: none; }
Or if you wanted to use a master reset stylesheet you could use Jonathan Neal's Normalize CSS via Google CDN.
Normalize.css is a customisable CSS file that makes browsers render all
elements more consistently and in line with modern standards. We researched
the differences between default browser styles in order to precisely target
only the styles that need normalizing.
Just put this in your head:
<link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />
Add margin: 0px; to body like below. The reason is because body by default introduces a margin.
body{
background-color:black;
background-image:url("img/background.jpg");
background-repeat:repeat;
margin: 0;
}
Demo Fiddle
It can also been caused by line-height property.
So set the line-height to as you wish!
I had similar problem and I solved it by setting negative margin. You could test the below setting.
#mainContent {... margin-top:-25px;}
I've been searching around for a while (for the answer) with no success, so I guess I did "my homework"...
So basically I've a gap between 2 divs.
You can see it here.
on your content class
.content {
background: url("panel.png");
padding: 0;
margin: 0;
float: left; /*new style*/
width: 100%; /*new style*/
}
Give overflow:hidden to your .bigtext, like this:
.bigtext{
overflow:hidden;
}
This problem is called "collapsing margins".
Check this http://reference.sitepoint.com/css/collapsingmargins
http://www.w3.org/TR/CSS2/box.html
The gap is caused by the p element.
You need to take the margins off - browsers default behaviour is to add 1em before and after the paragraph.
If you use google chrome, you can right click and goto inspect element. From there you can see what default behaviours have been applied to certain elements on the page. You can even see visually what space has been created by margins. Your gap was one of them. =)
See screenshot below - this is showing the margin applied to another p element.
Try margin: 0; for those divs.
you can hack it by applying margin-top:-23px to the .content div
The site is appearing fine in Mozilla, Chrome, and IE6. But IE7 onwards, the menu background image was not appearing at all.
In the file moo.menu.css, I made the following changes in li:
.ry-cssmnu ul li {
margin: 0; /* all list items */
padding: 0;
float: left;
display: block;
background: url(../images/mainnav-bg.gif) repeat-x center top blue;/*added this line*/
cursor: pointer;}
After this, the background repeat is appearing only where the menu text is present.
http://bit.ly/ie8issue
The site is at: www.agmrcet.com/cons
Thanks in advance.
You have to declare a height to that container. Your floating list items are not giving their parent container height because float removes them from the document flow. Your <ul> has a current height of nothing, and the background image won't remedy that.
#mainnav { height:44px; ... }
First of all, I would change the CSS background property according to the CSS syntax:
background: blue url(../images/mainnav-bg.gif) repeat-x center top;
Looks like the problem is with your
<div class="clearfix" id="mainnav">
tag. Have you tried adding a pink border or something (to debug it) to the mainnav element and then setting a fixed width on it to make sure it goes the full width?
I have a weird li issue I just can't figure out. I have an image set for the li on this page's content, but it's not against the text but behind the image! Confused on how to solve this. Any help would be greatly appreciated.
http://staging.liquor.com/wind-at-your-back/
Add
overflow: hidden;
to the #single_content ul. (overflow: auto will also work). If it needs to work in IE6 too, make sure the list has layout (e.g. by adding zoom: 1).
The lines inside a block box following a float are pushed aside by the floated element. But the block box itself doesn't move, keeping the background images at its left edge, covered by the floating element.
You can stop the block box from overlapping a float by having it establish a new block formatting context. One way to do that is to set the overflow property. That forces the entire list next to the float, instead of just pushing its text aside.
See the CSS2 specification section about floats for more details.
The background images of your list are behind the cocktail image. You could either make the list floating right like this
#single_content ul {
float:right;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
width:280px;
}
or give the lis a margin-left of your image's width+margin like so
#single_content ul li {
background:transparent url(images/ulliarrow.png) no-repeat scroll 0 0;
margin:0 0 0 310px;
padding:0 0 3px 15px;
}
to make the reappear behind the floating image.
To get the background images to show up from outside of the image you can add a margin to the style
add
margin:0 0 0 ~300px;
to
#single_content ul li
Immediate solution is to add the following rule to #single_content ul
margin: 0 0 0 295px;
I don't like that because it's fairly absolute, though your site looks glued together well and it shouldn't hurt. I'll look for something more elegant, and if I find it, post it here.
EDIT 1: Not much better, but you could add the following rule to the li elements instead:
background-position: 295px 0;