Can anyone look at this template and explain why only in Chrome that it adds a whole lot of extra space at the top of the page?
https://html5up.net/uploads/demos/verti
Update:
Actually, I just discovered that when I'm logged into my work Google account (in the browser as a whole), it adds the extra spacing at the top. When I'm just generally using Chrome (guest mode), it does NOT add the extra space at the top. All on the same computer at my house. Different results depending on if I'm logged in or not. Is there an explanation for this?
Padding for the #header-wrapper element, has the following CSS (main.css - line 1839). This equates to a padding-top: 66px in Chrome...
#header-wrapper {
padding: 4.5em 0 1em 0;
padding-top: 4.5em;
padding-right: 0px;
padding-bottom: 1em;
padding-left: 0px;
}
This would be simple to remove or override, if you needed to... e.g.
#header-wrapper {
padding-top: 10px !important;
}
Related
I have a site which uses CSS to create drop caps at the start of articles. This works as expected in most browsers, but Firefox (Linux and Android) displays it incorrectly, but only in certain instances.
On most pages, I get correct output, like this (the blue dashed lines at the side are the edges of the container, shown for illustrative purposes):
However, for a handful of pages, Firefox renders it thus:
Notice that there's a large gap to the right of the drop cap, and the text overflows the box by a corresponding amount.
Here's the relevant SASS:
article .first-paragraph {
text-indent: 0;
&::first-letter {
font-size: 300%;
font-weight:normal;
display: block;
float: left;
margin-right: 0.25em;
padding: 0.5em 0.3em 0.3em 0.5em;
background: $primary-color;
color: $background-color;
border-radius: 50em 5em 5em 5em;
font-family: 'Fredericka the Great', $base-font-family;
}
&::first-line {
font-variant: small-caps;
}
}
I have been unable to discover any difference which can account for this behavior. The articles are written in Kramdown-flavored Markdown and processed by Jekyll. The two articles are absolutely identical in Markdown except for the words themselves. And yet, the bug always happens on the same pages. I've tried setting the first few characters to be the same, but to no avail. I've also made the previous content follow the same structure, where there were differences in structure, but it didn't change anything.
Any ideas what might be wrong, or what I may have forgotten to test?
EDIT
I've narrowed the offending CSS down to the following rules:
article .first-paragraph::first-letter {
display: block;
float: left;
margin-right: 0.25em;
padding: 0.5em 0.3em 0.3em 0.5em;
}
If I turn them all off, the problem goes away. If I turn any one of them on, or any combination, the problem is back, except that display: block causes no issues on its own.
If you want to test it further, here's an example page with the bug (at least until I manage to fix it.
The more I think about it, the more I think that there must be something else on the affected pages beyond what I've posted here, which is causing the issue on Firefox on Linux, Windows, and Android. But for the life of me, I can't figure out what that something else is.
It would appear that that bootstrap puts a 10px margin on the top and bottom of the pager and I would like to cut that down to 2px and also make the height of the pager a bit smaller. I'm using the code from the xsnippets.openNTF as follows:
<xp:pager partialRefresh="true" id="pager1" for="repeat1"
panelPosition="left" styleClass="bootstrapPager">
<xp:pagerControl type="Previous" id="pagerControl1"
styleClass="bootstrapPagerPrevious">
<xp:this.value><![CDATA[«]]></xp:this.value>
</xp:pagerControl>
<xp:pagerControl type="Group" id="pagerControl2"
styleClass="bootstrapPagerMiddle">
</xp:pagerControl>
<xp:pagerControl type="Next" id="pagerControl3"
styleClass="bootstrapPagerNext">
<xp:this.value><![CDATA[»]]></xp:this.value>
</xp:pagerControl>
</xp:pager>
as suggested I created a new css and copied the css from the xsnippets into it and applied it to the page however I don't think that should be necessary with bootstrap built in so I removed the css. The pager works the same either way. So I want to over-ride the bootstrapPager class and change the margins.
I created a new css called it myBootstrap.css and added this block
.bootstrapPager {
display: inline-block;
padding-left: 0;
border-radius: 4px;
margin-left: 10px;
margin-bottom: 2px;
margin-top: 2px;
line-height: 1.42857;
}
and changed the top and bottom margins to 2px. added the css as a resource but the pager margins do not appear to have changed. Maybe there are some other settings that need changing. As I read it this class should override the main bootstrap.css.
EDIT
If I set disable Theme to true then it appears to remove the margins, but then it also removes all of the additional styling and that is no good either.
Here is what the pager looks like (not connected to the repeat yet but that should not matter. The major issue is the amount of vertical space that it consumes. When I inspect the element in Chrome it looks very much like it is getting the values from the main bootstrap css.
Bill,
Not sure this will work, but please try adding !important to your CSS selector. This has worked for me in the past. In my case it was OneUI, but the concept is the same. This assumes that the style is being applied, but is overwritten.
.bootstrapPager {
display: inline-block;
padding-left: 0;
border-radius: 4px;
margin-left: 10px;
margin-bottom: 2px !important;
margin-top: 2px !important;
line-height: 1.42857;
}
For more info, I wrote a blog post on this subject last year when I was having a similar problem: http://notesspeak.blogspot.com/2014/10/quick-tip-forcing-css-override.html
Note: I have never had much luck ever trying to us the "disable theme" feature.
For years I've noticed something odd about websites on a Mac, regardless of the browser used. On OS X, I frequently notice CSS responding differently.
I most often see it visually when the last button is pushed down to the next row in a menu because it's a pixel too large. Why does this happen?
Example: http://www.dynamicprint.ca/
Try to update your css with below css rules and you will see the problem is gone.
http://www.dynamicprint.ca/ (line 81)
div.ys_menu a {
color: #000000;
display: block;
float: left;
font-size: 15px;
height: 39px;
margin: 0;
padding: 22px 18px 0;
text-decoration: none;
}
SS:
I'm working on a project to upgrade a system to use the button tag rather than regular submit buttons. For the formatting of the buttons, I have the following CSS classes:
button::-moz-focus-inner {
border: none; /* overrides extra padding in Firefox */
}
button {
background: transparent url('images/greenrightbutton.png') no-repeat scroll top right;
color: #FFFFFF;
display: block;
font: normal 12px arial, sans-serif;
height: 25px;
padding-right: 8px; /* sliding doors padding */
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin: 0px;
text-decoration: none;
border: 0px;
overflow: visible;
}
#loginbox button {
float: right;
}
button span {
background: transparent url('images/greenleftbutton.png') no-repeat top left;
display: block;
line-height: 18px;
padding: 4px 5px 5px 12px;
margin: 0px;
border: 0px;
}
They work absolutely perfectly in every browser except IE8.
In IE8, the buttons work in most places, but then I find a page where the two background images don't quite line up and no amount of tweaking padding, line spacing etc fixes it.
Does anyone know why this might be the case?
Demo page: http://test6.placement.co.uk/demo/test.asp
---Update---
After some fairly extensive testing and trying things, I've now got a pretty fair idea of what's causing the problem in page 1, but no idea how to fix it, while another page with the same issue has a completely different cause (which I haven't found) but where I HAVE stumbled on a fix...
The problem on the first page appears to relate to a ul entered further up the page. Take that out and everything behaves - unfortunately, that's not an option as the ul is part of user-entered content, so I'm scratching my head about that. Particularly given...
Page 2 has no uls to cause an issue, but randomly sticking two break tags in just before my button code resolves the problem.
Naturally, THAT fix doesn't work on page 1.
I'm just about ready to give in and find some alternative way of rendering these buttons, because whatever the actual problem is, it's clearly so deep in either my CSS or my basic HTML that I'm probably never going to find it.
I don't see any difference between IE8 and other browser. Could you pleas mention bit more clear what you want to do?
Kind of a frustrating question for me.
Here's the link. Try it in IE, Chrome and Firefox. The latter two are fine and the image is aligned to the right and appears as 375x500. But in IE, the image aligns to the right, but appears as 15x500.
http://www.themoneygoround.com/2011/04/intc-intel-shows-up-strong-afterhours.html
When I look at the View Source in IE, the image width and height should be 375x500, but that's not what displays. The image is aligned to the right as expected, but shrunk to 15x500. Thanks for any thoughts...
Here is the CSS
p img {
padding: 0;
max-width: 100%;
}
img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
img.alignright {
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}
img.alignleft {
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}
.alignright {
float: right;
}
.alignleft {
float: left;
}
/* End Images */
I see the problem as well with IE 8. The trouble is your max-width property for the <img>. IE will not render a max-width correctly with the XHTML doctype (which you appear to be using). You can either remove the max-width or use a doctype which will trigger standards mode in IE. I recommend the HTML5 doctype as per this article.
First off, I see about 14 javascript errors in IE when I pull that up stating 'null' is null or not an object. Maybe start there?
EDIT: By the way, I was in IE8
Working Solution:
I removed the <p class="alignright"></p> that was wrapping the image in question, and it worked like a charm.
View in my working jsFiddle demo.