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..
Related
I have some rather complicated CSS, but the gist is that I have this:
font-family: Arial, Sans-serif;
font-size: 12px;
font-weight: bold;
There are no other font-weight modifiers in my CSS except normal and bold. Chrome works just fine.
IE11 -sometimes- renders this as Arial, but other times as Arial Black. This is on the same page. I tested this on our test Windows 8 box, and it is always the same text that ends up in Arial Black.
Is there any way to prevent this from happening?
OK, this is really silly, but I found out why it is happening.
My element was contained in a html B element, which gets it's own font-weight in IE, overriding the font-weight I set.
IE somehow changes the font in the B element by default. Manually setting font-weight:bold fixed the issue.
It looked like this:
<span style="font-family:Arial; font-weight:bold"><b>text</b></span>
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.
Please see the attached image
This CSS is not producing the text to be lined up the same way in Safari and Firefox, and IE. Safari (on the right) is displaying about 2px higher.
h2{
font-size:18px;
color:#000;
display:inline-block;
font-family:Arial, Helvetica, sans-serif;
background-image:url(bkg.gif);
background-repeat:no-repeat;
padding-left:14px;
padding-top:4px;
height:28px;
}
It's how the browser renders text. If you're that concerned with it, serve up a stylesheet specifically for Safari and make the appropriate adjustments.
Consider the following example
editor css:
.heading{
font-size: 20pt;
font-weight: bold;
font-style: italic;
}
HTML:
<div class="heading"> This is main heading </div>
When I try to remove the bold from whole whole text inside the heading div it won't convert it to normal text. This might be because of the font-weight defined in heading class. Is there a way to toggle the font-weight for such cases?
Are you just trying to change the font-weight back to normal? If so, just delete that line of CSS, or set the property to font-weight:normal;
To get ride of this issue we moved font styling (bold, italic) out from CSS and used the <strong> and <i> tags directly into the content. This seems to be only proper way to do this.
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.