I'm sorry I cannot show you the code, it is currently on my localhost.
I am pretty sure I have correctly typed the code because Netbeans doesn't show any errors. I am making my parents website for their charity, Enough to Spare. When I load the webpage though, there is a white line on all sides (although you can't see the top line because that div is white)
Here is a screenshot.
Anyone have any suggestions?
I would recommend you use a reset.css file before your own.css, so you start with a blank slate.
You could always add -
html { width:100%; height:100%; margin:0 padding:0; }
body { width:100%; height:100%; margin:0; padding:0; }
http://www.cssreset.com/ - This is where I look to get my reset.css file
Thank you to Dan Ovidiu Boncut for reminding me to put in margin:0; and padding:0;!
Ninja edit: Have you tried using the Chrome Developer Tools? You can play with the css using that. Right click on an element and click on inspect, there you can add new css styles and edit your current ones. It is a brilliant way to find solutions to your css issues... it also shows you what line in your css file you're at, so when you come to make the changes in file you know where to look straight away! :)
In the CSS, try changing the padding of the container <div> to 0, because anything inside a <div> is also inside whatever padding it has, resulting in space between the padding and the border. Also try changing the margin to 0, because having a margin will result in space between the border and its container.
If you don't have a container <div>, or this didn't fix it, try setting the padding of the <body> tag to 0, because it's the outer-most container and might have default padding.
I also think there might be alternative ways to set background contents to ignore padding. Unfortunately, it's been a little while since I've worked in HTML and CSS, and I don't currently have time to experiment with that. But see what you can do with the above suggestions.
The fact that NetBeans doesn't show errors doesn't mean your presentation is the way you want it to be.
Check your containing divs. Check for any margins and/or paddings that could cause spacing. Borders as well.
If all fails use a CSS reset and check again.
You need to copy and paste the html and css involving your page elements, otherwise no one will be able to help you. Having your code on localhost has nothing to do with that.
The only thing that solved this problem for me was adding
body {overflow-x: hidden;}
to my CSS file. Once this works, I guess you can remove:
html { width:100%; height:100%; margin:0px padding:0; }
body { width:100%; height:100%; margin:0; padding:0; }
And also: quick tip for beginners: always use Command + Shift + R for a hard reload instead of a normal Command + R while testing solutions.
Related
I wonder how you would remove the space around text, I know this can be achieved by line-height. But space is always kept either above or below the text. Is there some dynamic way to do this? Either plain CSS or SASS works for me.
Thanks in advance :)
Your developer console tells you which property is responsible for the space.
In your case its the margin that is defined on the element. A simple
h1{
margin:0;
}
will fix this.
In case you wonder, where this margin comes from - some of the elements, like headings come with predefined margins & paddings that are applied by the browsers automatically. In this case, the source in the styles section of your webdev console states "user agent stylesheet".
write CSS
h1 {
margin: 0;
}
It will remove the default margin for h1 getting applied from browser.
I'm putting a floating picture on my friends blog real quick, but changing the margin values doesn't do anything.
#pic{
z-index:9999999999999999;
position:fixed;
width:200px;
background-color: transparent;}
And the structure:
<div style="margin-bottom:0px;" id="pic" ><img src="{image:Sidepicture}" style="width:200px;"</a></div>
When I change the margin values, the picture stays at the top left hand corner no matter what I do.
The culprit is likely position: fixed;
#pic{
z-index:9999999999999999;
position:fixed;
width:200px;
background-color: transparent;}
Is this all the code there is for pic? It seems that #pic is stuck to top: 0, left: 0
Try just removing the position: fixed line entirely and see what happens
If doesn't work out, also try adding position:relative;
Because you should be putting the margin on the <img />, not on the <div> surrounding the image (#pic).
#pic img { margin: 20px; }
... will do what you want it to.
The very least you should have done is validate that your HTML and CSS are actually valid. There are many errors in the code and style that you supplied. Unclosed Tags, Closed tags, Unmatched elements, styles without contents, invalid styles, Incorrect declarations and so on.
Its also a bit of a jumbled mess, with interwoven styles and script and parts of reset scripts towards the end, all sprinkled through with optional block and cycle contents, making helping you very difficult. Keeping your style separate from your code and grouping it into one block would help you narrow it down a bit as right now styles are all over the file, making it easy for anyone to miss the offending line.
I can only suggest that one of the later styles in your CSS after the style for img you are trying to apply. (somewhere after line 152) is overriding the margin that you are setting at 152. You can use the developer tools built into the browser and look at which styles are being applied to your element and which line in the file they come from. If your pix style is not applied then you will at least have an idea what other styles are and this will allow you to narrow down your investigation.
another way to find the offending line would be to to comment out the styles after line 152 and then comment them back in a few at a time, until you find the class causing the issue.
The quick and dirty fix is of course to put !important after your margin
You can also run your page through the CSS Validation and HTML validation to help you find any of the errors that may also be having an effect.
Okay So I made a template with some CSS & HTML. However, if you look between the menubar, there's a bunch of white space. Also the content and sidebar are weird. If you look at the top there's a bunch of padding at the top but I didn't apply any padding anywhere! Help!
Link to site http://techtubecentral.com/demo/
Try this, Hope it will work
<style type="text/css">
ul{
margin:0px;
}
</style>
Padding and margin is specified by default. It is part of what was originally generated by the W3C consortium. All you need is a CSS Reset sheet.
http://www.cssreset.com/
You can attach this to your site as a separate file, for example reset.css. Or you can jsut copy paste the reset code to the top of your styles.css file.
Naveen's solution is correct b/c there is default margin coming from the browser's style sheet. Add
* {margin:0; padding:0;}
as the first line in your style sheet - it's a simple reset of these properties on all elements, and you will have no more trouble with "phantom" paddings and margins cascading down from the browser stylesheets.
When using a tag you will find that the browser will automatically adding a margin and sometimes padding that may not be needed.
Try adding margin: 0px; and padding: 0px; just as good practice.
I have some html with js, css, etc that is fine with the exception that you cannot paste into the input boxes. There is nothing obvious to me as what is causing this. Now, I have found a semi-solution:
There is a line of code that looks like this:
*{margin:0; padding:0; overflow:hidden; }
If I remove that line OR just the overflow portion I can paste into the input boxes...However, it destroys the layout and formatting of the page.
Any suggestions would be greatly appreciated. Thank you.
You might want to think about some more specific styles. If overflow:hidden is causing this problem on your INPUTs then only use it on elements that you know for sure you want to prevent overflow. INPUTs generally need to have overflow visible to work right.
Try this?
*{margin:0; padding:0; }
DIV,HTML,BODY{overflow:hidden; }
I'm simply trying to keep the body color from spilling inside the middle of my page (between the 2 sidebars), which I want to keep white.
I'm kind of building this template from scratch and really want to do it the right way so that I can use it for other html projects as well. Could someone tell me what I'm doing wrong and what I could do better to make the css work?
Thanks!
URL here
put this style for your container:
#container {
margin:0 auto;
width:900px;
background:white
}
This is because by default background value for HTML element is transparent, so everything is see-through unless you specify otherwise