I'm designing a site with a fixed repeated background but can't work out why it has one problem.
If you load the site in a small window, then scroll right, the background doesn't carry on and the background colour show's instead.
Any ideas?
Site is: http://new.focalpix.co.uk/
CSS for the background is:
body {
background: url(http://media.focalpix.co.uk/img/gradbackground.png) repeat-x fixed;
}
Try the following CSS:
body, html {
color:#fff;
background: #000 url(http://media.focalpix.co.uk/img/gradbackground.png) fixed repeat-x;
text-align:center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans serif;
}
body {
font-size: 70%;
}
It looks like (in both Opera and Chrome) the browser is treating the area outside the browser's initial viewport as part of the HTML tag but not part of the BODY. You can verify this by putting the background-image on the HTML but not the BODY tag - and then see how it appears only in the scroll-to-view area of the document. I have no idea why this is happening - anyone?
CSS above appears to fix the problem, though.
you have defined body background: url in style.css line 13, but also defined rules for body background in the rule starting on line 17.
The rule on line 17 is for body, html, but the one starting on line 11 is just for body. You could probably condense these into one rule, defining exactly what you want the background to be -- a colour or an image from a url
This is due to the fact that the <body> tag is set by default to 100% of the width of browser window - not the site. This means when the width of the window is less than 960px - the width of your site, the body block ends. To fix this, simply set:
body {min-width: 960px}
Unfortunately, min-width does not work in old versions of Internet Explorer without a JavaScript hack called minmax. I would suggest enclosing the javascript embed code for it inside some conditional comments to prevent an unnecessary HTTP request and potential compatibility errors in new browsers. So embed minmax like so:
<!--[if lte IE 7]>
<script type="text/javascript" src="minmax.js"></script>
<![endif]-->
Also, a general tip - these issues are fairly easy to resolve by playing with firebug.
Related
I'm using a custom font for Shopify which I've added to my css file. I used another font on this site as well and every place that I've inserted this font has worked just fine on desktop and mobile. The only place I want to use this second font (Arial Black) is in the section header.
I inserted this in my CSS but it doesn't appear on mobile, only on desktop:
#font-face {
font-family: 'Arial Black', sans-serif;
src: url({{'Arial_Black.ttf'| asset_url }});
url({{'Arial-Black.woff'| asset_url }});
url({{'Arial-Black.woff2'| asset_url }});
url({{'Arial_Black.otf'| asset_url }});
font-weight: normal;
.section-header h2 {
font-family: "Arial Black", sans-serif !important;
font-weight: 900 !important;
font-size: 30px ;
}
Any idea on how I can make this font work for just this one section of my site for mobile?
Is that path for the font right? I would try using an absolute path just in case. If you aren't sure of the path check another pages' sources tab in the developer tools (one where it is working) and you'll find the path.
Edit:
Just checked, when in mobile there's a style rule that sets the headers to
.h1, .h2, h1, h2 {
margin: 0 0 17.5px;
font-family: var(--font-stack-header);
font-style: var(--font-style-header);
font-weight: var(--font-weight-header);
line-height: 1.2;
overflow-wrap: break-word;
word-wrap: break-word;
}
you need to add the following to your css to override this (I'm applying it only to h2 but if you want you can add h1):
h2, .h2 {
font-family: 'Arial Black', Gadget, sans-serif !important;
}
This should fix it
I have this problem:
body{
font-family: 'MyFontFace-font', 'Lucida Grande', Tahoma, Verdana, Arial, etc.
}
H1 {
font-family: 'MyFontFace-font2'
}
And my question is: If the second font ('MyFontFace-font2') is not loaded, will H1 have the font inherited from body, or from default of browser?
Thanks a lot.
The default fallback fonts of the browser will be applied, and any setting on body is ignored.
When you assign a value to a property of an element, like font-family to h1 here, then inheritance will never apply to that property on that element (except, trivially, if you assign the value inherit and the browser supports that). This is not changed by casual things like the value specifying a nonexistent font.
I also tested this with the following simpler document (on a system that has no font named MyFontFace-font2 but has a font named Tahoma):
<!doctype html>
<title>Test5</title>
<style>
body{
font-family: Tahoma;
}
H1 {
font-family: 'MyFontFace-font2'
}
</style>
<h1>Hello world</h1>
In Chrome, Firefox, IE the result is that the browser’s default font is used, not Tahoma. This is the expected result, by the specifications.
If the rule on H1 is omitted, then Tahoma is used, due to inheritance – then the h1 element will inherit the font-family property from its parent.
I have created a couple of ASP.Net (aspx) pages which are supposed to run with existing ASP pages in a website.
Both ASP and ASP.Net pages use the same css file. In both the pages, there are headings which are styled using tag from css file.
The problem is that headings in .asp and .aspx pages are rendering in different size in Internet Explorer. It works fine in FF and Chrome.
Please suggest some workaround for this, as I have to make my .aspx pages similar in look and feel to the existing .asp pages.
Thanks in advance!
Updated:
I can paste a part of css file here, since it is a large file:
TH, FONT, TD, P, B, I, STRONG, U, EM, BLOCKQUOTE, LI, OL, CAPTION, DL, DT, DD,select,pre {font-size:11px;font-family:Arial, Helvetica, sans-serif;}
body{
font-family: Arial, Helvetica, sans-serif;
color: #000000;
line-height: 1.166;
margin: 0px;
padding: 0px;
}
h2{
font: bold 150% Arial, Helvetica, sans-serif;
color: #000000;
margin: 0px;
padding: 0px;
}
The aspx page (heading part) looks like this:
<table style="left: 35px; position: static; top: 231px">
<tr>
<td style="height: 85px; width: 2087px;">
<h2><asp:Localize id="lblHeading" runat="server" Text="Welcome to XYZ" meta:resourcekey="lblHeading"></asp:Localize>
</h2>
</td>
</tr></table>
ASP page has a simple tag:
<h2>Welcome to XYZ</h2>
Updated:
The weirdest thing happened. I tried stripping down the css file and started adding each style one by one, and refreshing the page to check which styles are getting applied to the heading. I noticed that if I remove the first line of css (keeping all the other styles intact):
<STYLE type="text/css">
then the headings look same in both asp and aspx pages. As soon as I add the above line in css file, the heading in aspx page becomes bigger.
Any comments as to why this is happening?
Make sure you are using the proper and the same Doctype at the top of the ASP and ASPX pages. You can also use the developer tools in FF and in IE to make sure that the same styles are applied to headings on ASP and ASPX pages in both browsers. What version of IE are you using?
You might be interested in section about w3schools recommendation for font-size
The suggested way, as I understand is to declare in body:
body{
font-size: 100%; // which default is 16px
}
and everywhere else use em (instead of % or px), as explained in the link.
So in your header you should not have 150%, but instead DesiredSizeInPx divded by 16, for example if you want to have 24px you write 24/16em, which is 1.5em
The problem could be that two different styles are being applied.
The ASP page is getting the straight h2 style
h2{
font: bold 150% Arial, Helvetica, sans-serif; etc.
Whereas the ASPX might be getting another style
id="lblHeading"
Check to see if #lblHeading is giving a different size.
We have a heading element styled as:
<div class="sidebarHeadingFont">Operation</div>
.sidebarHeadingFont {font-family: Arial, Helvetica, sans serif; font-size:10pt; font-weight:bold; color: #003366; }
In Chrome when you put your mouse over this element the font size increases (making the width of the element bigger) and the color changes to white. Why is this?? Doesn't do this in IE or Firefox.
Are you really, really sure you don't have any other css and/or html? Cause it sounds really, really strange..
I have a page that is using a non-standard font and arial as a fail safe. Does anyone know if there is a way to set the font-size conditionally to the font?
<style type="text/css">
body {
font-family: Calibri, arial, sans-serif;
font-size: 1em, .9em, .9em;
/* Where 1em would be for Calibri and .9 would be for arial and sans-serif */
}
</style>
Good question but currently you can't do this until the 'font-size-adjust' property is more widely supported. It normalises fonts that have very different native sizes. This is the simplest definition and example I could find:
http://www.w3schools.com/CSS/pr_font_font-size-adjust.asp
I'd say there's no harm in using it even now and then it'll be ready when browser support improves.
The solution would be to use font-size-adjust. The problem is that it has poor support (IMHO).