really strange problem. I got a very basic layout (You can see it here: https://geardev.de/test/test.html), but there is a 16px space above the logo that shouldn't be there.
I have absolutely no idea what would cause this. For your reference: https://geardev.de/test/style.css is the stylesheet, the definitions begin at line 350, before it's only resetting stuff with Normalize.css.
Dismounting the HTML didn't really lead to a result - maybe I'm just missing something stupid. The only thing I noticed was that removing the Doctype is solving the problem - But then it's technically wrong. Btw, it's passing the W3C validator: http://validator.w3.org/check?uri=https%3A%2F%2Fgeardev.de%2Ftest%2Ftest.html
Do you have any ideas?
Well if you use a web dev tool, you will see that the ul element has a 16px margin on top of it. You set that to zero, you should be good to go.
This will fix it:
<ul style="margin-top: 0px;">
Related
I'm building a Wordpress website by customizing and editing an existing theme called 'onetone'. It's an one-pager theme. The problem I'm having is that neither the homepage (the one-pager landing page) nor the individual posts/pages will extend to full height.
Under the footer, there's a thin black line 23 pixels in height, that extends 100% of the width.
Here's the quirky thing: while I'm logged into the site as an admin, the line disappears. When I'm visiting as an unlogged, regular user the line is there. All major browsers (FF, Opera, IE, Chrome). Also, on my sister's computer with FF installed the line didn't show even when unlogged.
I've searched StackOverflow, and the usual answer to have <body> and <html> set to height:100%; (including min-height:100%;) isn't working. I've also added height/min-height to containers and wrappers to test the setting. (Not all, though, only the ones I thought were relevant to the issue I was trying to solve) I've also tried the margin: 0; & padding: 0;, but NOTHING works.
I suspected it's the footer's fault, but using the inspect element function in my browser (and some further tests) I found the footer has nothing to do with it.
In the original, untouched theme, the line doesn't appear. So it must be some of my edits causing it, though even by comparing the original and my edited CSS file line by line, I couldn't find something that should've caused this error. And the CSS is the only thing I've edited.
I'm not a coding expert, and I've about exhausted my wits and available knowledge trying to figure this out. Does anyone have any idea what may be causing this glitch?
This is my site. The glitch is best seen on posts / pages. If any specific code samples are needed, just say and I'll post them.
Your code has this weird image just before the <body> tag ends, after all javascript calls:
<img src="http://pixel.wp.com/g.gif?v=ext&j=1%3A3.4.1&blog=50532064&post=651&tz=1&host=firstinkstudios.com&ref=http%3A%2F%2Ffirstinkstudios.com%2F&rand=0.7281985701993108" id="wpstats">
Remove it and you're golden
There's a background color on body. Getting rid of that fixes the "border".
body.custom-background {
background-color: #000000;
}
Also there's a smiley on the bottom
It looks like this
<img src="http://pixel.wp.com/g.gif?v=ext&j=1%3A3.4.1&blog=50532064&post=444&tz=1&host=firstinkstudios.com&ref=http%3A%2F%2Ffirstinkstudios.com%2Fblog%2F&rand=0.1907386933453381" id="wpstats" scale="0">
I have this JSFiddle
http://jsfiddle.net/ThYBS/
and when I run it on the JSFiddle site everything is displaying fine, but when I display it on my local machine there is a random indentation before the left word.
The word part where it should be where I can't find any issues is with the
#menu ul {}
but I can't seem to find anything.
I have no idea why, can you guys check on your side too? and let me know if you know a reason?
Thanks!
Regards
Matthew
I ran into this problem as well - the default browser behavior seems to be to indent items within a <menu> tag. Removing the padding with {padding: 0px;} or using a CSS reset/CSS normalize should do it.
Adjusting the UL's Padding to 0 helped.
I just noticed that on my website I have lots of unexpected space, and I don't know where it is coming from.
Here is my web: http://freshbeer.lv/new/latvian/index.php
As I am unsure where problem comes from I can't post code (if I post all code it would be to damn long)
So if someone can suggest are that's causing a problem, I'll post code here for you.
Remove the height:1511px from style.css line 287
See below image
This is creating pretty much space from your CSS file (style.css):
#slideshow-right {
height: 1511px
}
It's working fine if you simply remove the height attribute from that CSS rule.
here is the issue, it was a TYPO only 1 ruined this
#slideshow-right {
height: 1511px
}
it was supposed to be 151px only ; :)
one suggestion use Firebug to such issue they detect problems easily.
hope this will help you in future also.
in-case you don't know : what is firebug and how to use this
Lately, I've been running into more and more poorly designed websites that do things like this Hudson Website The page is some 1600 pixels wide on my 90 degree rotated monitor, it means you have to scroll left<->right a LOT. Having firebug installed, I figured I'd just go fix it on the fly for reading, but that is proving harder than imagined.
I can't seem to locate what is causing it to be so wide. There is a <table width='100%'>, but that should be 100% of the container, and I can't find a container that says "BE UNREASONABLY WIDE". So, I'm asking what tricks you use in firebug to figure out what is causing an element to have the size it has, specifically the width.
Edit:
Well, I'm still picking at it, and it turns out that
.wiki-content p {
margin: 10px 0;
padding: 0;
width: 850px; // I had to add this to make it readable, width was NOT defined
}
will make it readable, so something about the <p> tag is causing it, but I don't see anything in the css that should make it this wide. What am I missing?
The page is wide because of the <pre> elements.
At least on Firefox, you can fix it by adding the CSS rule:
pre {white-space:normal;}
You could run the page through a validator as a first step. E.g. http://validator.w3.org/
As an aside, I ran the master CSS of the linked site through the Flumpcakes optimizer, and got this result:
Before 64064
After 53832
Saving 10232
Percentage: 16%
Okay so this is sort of a double question so I'll split it into two.
First part
In modern browsers the main bold labels sit above their corresponding form elements, and align to the left as is expected. However in ie7, they randomly site 10-15px inset. I went through the developer tools and could find nothing to fix it. I've made sure all my margins and padding is reset so I don't really understand =S
Here's the page demo - link
Maybe some of you ie bug fixing genius's know what the problem is? =D
Second part
Again with labels, this time the in-line ones resident next to the check boxes and radio buttons. In modern browsers again, the side beside the form elements as expected, but not so in ie7 where they take a new line. I've tried floating, changing margins and everything but to no effect in sitting it in-line with the div.checker or div.radio that is created by the uniform Jquery plugin.
Here's the page demo - link
Sorry for troubling you with my ie7 problems, I know they arent the most fun to solve. Hopefully someone has the patience to help.
Matt
Part 1:
ol,ul{
list-style-type:circle; list-style-position:inside;
}
If you change that to this:
ol,ul{
list-style-type:circle;
}
Or just remove the definition entirely, that seems to do it for me.
I think that's a reasonable thing to do, as I don't see anything actually using the bullet lists.
Edit for Part 2:
IE doesn't like this:
input{
background:#FFFFFF url(../images/input_bg.png) repeat-x;
border:1px solid #CCCCCC;
margin-bottom:20px;
-moz-border-radius:3px;
padding:7px;
-webkit-border-radius:2px;
}
If you remove the margin-bottom:20px; from that, your radio button won't be messed up.
Sorry I'm not really providing IE7 specific solutions, but at least you've got the spots that need fixing.
here's a point to where the problem lies
http://www.alistapart.com/articles/beyonddoctype
here's some points about doctype right here in SO
Which doctype do you use when writing webpages?
:)