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
Related
So I've been fighting with this for maybe a week off and on and every time I end up eventually giving up. There's a "search bar" input at the top right of this website I'm working on here. There's lots of information on text-aligning the placeholder text for inputs like this right here on StackOverflow and I've built out lots of these without ever having an issue with this. But for some reason on this site, I can't just apply something like 'text-align: left;', the text remains centered. I know this is a dumb question but I'm really confused on what's causing this. I can't seem to recreate this in a CodePen at all, it always behaves as expected everywhere except for on this production site.
Does anyone know why this specific input seems to not respond to "text-align: left;"? I'm using Chrome but every browser I've tested displays this the same way - centered placeholder text no matter what I do. I think I'm missing something simple here but I don't have a clue what it is.
That is not text. That is placeholder.
please add below to css
input.form-control.search::placeholder {
float: left;
}
I've looked into the code and I honestly have no idea what is causing this but I have a solution :)
<style>
.search::-webkit-input-placeholder{
text-align: left !important;
}
</style>
Set the important tag to tell the browser that that thingie maginie is important and set the property to the placeholder of the '.search'
Probably, he know what is a placeholder. The problem is text-align: center from your placeholder. If you want to see it with developer tools:
The trick is to enable 'Show user agent shadow DOM' in the Settings
panel of Chrome Developer Tools. Thank to Sean Anderson for the
answer
Also you can edit your placeholder using vendor-prefixed selectors
There is a setting in the style.css file:
.header-main .search-wrapper .search::-webkit-input-placeholder {
text-align: center;
}
It's got quite a high specificity so worth copying the lot and simply doing:
.header-main .search-wrapper .search::-webkit-input-placeholder {
text-align: left;
}
After 3 hours digging I finally found the cause of a weird issue I'm having with a Wordpress theme.
Whenever I add a tag to an article that contains the word "span" (e.g Espana), it breaks the layout.
Wordpress adds the class to the article "tag-espana" as expected, although Bootstrap stylesheet applies some rules to it, ruining the layout.
This should be caused by the following selector which is extensively used in Bootstrap 2:
[class*="span"]
Is this a known bug? I couldn't find any info about this so I have some doubts. Any idea on how could I fix this without editing bootstrap source files?
Thanks
Nobody expects the spanish inquisition
Yes, that seems like a bug with this selector. You could modify it by adding a restriction:
[class*="span"]:not([class*="tag-"])
or
[class*="span"]:not([class*="espana"])
but that won't be understood by IE7 and IE8 (if TB2 is compatible with IE7 in the first place, can't remember)
It would be better to override systematically:
[class*="span"] {
property: value-in-TB2;
}
[class*="espana"] {
property: nope-override;
}
but as you wrote, it may be used too much by TB2 to be possible to do that...
Or see how your tag-espana elements are styled and override everything that isn't wanted.
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;">
Can ayone explain why my form is broken in Firefox? I have tried various ways to correct it, but keep getting the same result. I would be grateful if someone could tell me where I am going wrong with it. I have included grabs so you can see the problem. I have also posted the code at fiddle. I also note that at fiddle i am using IE8 and the layout is broken there also but not in my broswer. Many thanks.
Grabs:
http://img20.imageshack.us/i/ffformincorrect.png/
http://img195.imageshack.us/i/ie8formcorrect.png/
Fiddle: http://jsfiddle.net/tdfLQ/
I tested your jsfiddle link in Firefox,Safari,Chrome and IE 8 and they all render it the same way, and Aziz' solution just require some tweaks, try looking at: http://jsfiddle.net/tdfLQ/1/
In addition to removing the width like Aziz suggested, I have just added margins to the fields and send button.
A quick google came up with this page, which looks helpful (maybe a little old): http://www.websiteoptimization.com/speed/tweak/forms/
Remove width: 350px; from .fb-input-right-con
Here is a working example of what you wanted: http://jsfiddle.net/tdfLQ/8/
I have this page at
http://kornar.co.uk/example.html
But it doesnt render HTML. I know its there because when I check view source the HTML code is there, on my localhost it works perfectly, thanks for your help!!
Well to start, js/jquery.js is missing so none of your js is going to run... all the tabs are hidden so without the js the code in the tabs won't be come visible...
Its works correctly for me.
There is possibily two explanation why it do not works for you :
- Your Browser cache need to be cleared
- Your DNS cache need to be cleared.
Try both and let us now if it works
Line 90 in your layout.css file says:
.tab {
padding: 16px;
display: none;
}
If you remove the "display:none" bit, you'll see more.
Try to use Firebug when debugging stuff like this, it's awesome!
You have .colorpicker set to display:none in the css file.