Just a quick question - I was unable to find this when I searched, but I'm sorry if it's a repeat.
I have paragraph tags enclosing the title of my website:
<div class = "title">
<p>Welcome to homepage!</p>
</div>
<div class = "subtext">
<p> Subtext goes here </p>
</div>
<div class = "formthing">
<form method = "GET" action = "/form">
<input type = "submit" name = "submitted" class = "btn-large" value = "Click button" />
</form>
</div>
and everything is working fine. However, when I zoom in on the page, the words of the title overlap themselves. Is there anything I can add to CSS to prevent this from happening?
i dont see any overlap in your code, but a quick fix would be to can add margins to your classes via css to prevent overlaping.
eg:
<style>
.formthing {
margin: 0.25em;
}
</style>
You need to use em font-sizing in your CSS. If you don't know what this is, this is a really good article on it: http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/
Essentially em is just another way of expressing a percentage but some browsers falter at higher and lower levels of zoom when using pt, px and % values. Using em mitigates this issue the best.
font-size: 16px;
font-size: 100%;
font-size: 1em;
Most modern browsers will default to 16px font-size as the control and adjust off of that, making the above 3 font-sizes equal to each other (give or take some decimals in Firefox and IE). This isn't fool-proof but for the most part will get you through these situations. It's a very widely practiced and proven method of preventing unexpected text and element overlapping.
Also - might wanna look into the font you're using and whether there is any kerning applied and maybe utilize letter-spacing: 1px; and adjust accordingly.
Don't forget to use a CSS reset like Normalize.css.
Related
I use Google Open Sans font (https://fonts.google.com/specimen/Open+Sans) with cyrillic. And if I have stressed word ( ́ — accent symbol is missing in font-set), Google Chrome renders only the part after accent. But another browsers haven't same problem.
Rendering comparison:
I understand that every browser has own render-engine, but I very want to solve or avoid this trouble. What should I do?
.open-sans-font {
font-family: "Open Sans";
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700&subset=cyrillic" rel="stylesheet">
<div class="open-sans-font">
<p> філігра́нний — несамови́тий </p>
<p> філігранний — несамовитий </p>
</div>
I simply added “text=...чшщьюя́” to my Google Web Fonts API request.
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700&text=АБВГҐДЕЄЖЗИІЇЙКЛМНОПРСТУФХЦЧШЩЬЮЯабвгґдеєжзиіїйклмнопрстуфхцчшщьюя́" rel="stylesheet">
It turns out that the accent symbol belonged to latin-ext charset
Taking it as you want to make sure the width is the same for that line. I would ass a class to that <p> for example
<p class="RenderTrouble">філігра́нний — несамови́тий</p>
And in your css put
.RenderTrouble {
max-width: 200px; /* Or how ever many pixels it is long */
}
And that should do it. the only problem is finding how many pixels long the edge render is.
I'll do the math;
1398 -19 = 1379
The length of the sentence is 1379px so make the css
.RenderTrouble {
max-width: 1379px; /* Or how ever many pixels it is long */
}
Well in theory anyway. it isn't working for me so I'm afraid you're out of luck. I will keep trying to see if I can get it
I give up here
<img src="./Untitled.png" style="max-width: 210px; height: 120;">
I am building the following site:
http://www.verbum.xtrweb.com/soon.php
But as you can see, everything is zoomed. Not if you adjust it, but I dont want users to have to adjust their view for my site. I want my site to always appear with the same zoom, as in the picture I uploaded here:
ctrl + 0 is not a solution I am looking for. If not something in the code, probably a style property or something of the kind. See code in your browser to check. Thanks!!
Apart from all the small errors and mistakes found on your page by previous users, I would advise you to wrap your header content into a container with a percantege width. This way it will keep the same width according to the browser window width in all browsers. The font size of your paragraphs should be em also to adjust itself easily. Keeping all this in mind and cleaning up your code, you should be able to deliver the same experience to most of the users
Looks like you made a typing-error. Change the font-size of your paragraphs into px or em. So font-size: 37px (instead of 37pt).
Here, the file did not exist:
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
Maybe you should fix this first.
Also, I don't think it's a good idea to include multiple versions of jQuery on the same page.
Update:
<div id="facebook" style="display: inline; opacity: 1.0999999999999999;">
<input style=" " id="fb-button" type="submit" value=" " onclick="window.location.href='http://www.facebook.com/sharer.php?u=<http://verbum.xtrweb.com/>&t=<Verbum, the new dictionary>'" <="" input="">
</div>
The HTML above (copied from your page) is wrong; the input tag does not close properly.
I am trying to access only the ELEMENT for toc-chapter number (1 in this case). The element is in nested classes. I've used this approach on toc-section and was able to produce the wanted result.
Css:
.book .toc {
& > .title{
font-size: x-large;
font-weight: bold;
padding-bottom: .25em;
margin-bottom:.50em;
border-bottom: 1px solid #tuscany;
}
& a.target-chapter{
.cnx-gentext-n{
&:before{content: "testing";}
}
color:red ;
}
}
HTML:
<div class="toc">
<div class="title">
Table of Contents
</div>
<ul>
<li xmlns:d="http://docbook.org/ns/docbook" xmlns:db=
"http://docbook.org/ns/docbook" xmlns:pmml2svg=
"https://sourceforge.net/projects/pmml2svg/" xmlns:c="http://cnx.rice.edu/cnxml"
xmlns:ext="http://cnx.org/ns/docbook+" xmlns:svg="http://www.w3.org/2000/svg"
xmlns:mml="http://www.w3.org/1998/Math/MathML" class="toc-chapter">
<a href="#idm3792312" class="target-chapter"><span class=
"cnx-gentext-chapter cnx-gentext-autogenerated">Chapter</span> <span class=
"cnx-gentext-chapter cnx-gentext-n">1</span><span class=
"cnx-gentext-chapter cnx-gentext-autogenerated">.</span> <span class=
"cnx-gentext-chapter cnx-gentext-t">Aging and the Elderly</span></a>
Based on your provided info, I would assume that LESS is producing the following css selector (I have not actually recoded your problem in LESS, this is just my interpretation):
.book .toc a.target-chapter .cnx-gentext-n:before {content: "testing";}
Which should work based on this fiddle. I will assume you are testing in a browser that supports :before (not some old version of IE). So to trouble shoot this, you need to:
Verify that such a selector is in fact being produced.
If NOT, determine what selector string is in fact being produced by your code (if any), and that may lead you to solving your issue.
If such a correct selector string is being produced, then you need to look at other css (which you have not posted, so I am merely speculating here):
Is some more specific (which seems unlikely) selector string targeting the same thing and overriding it?
Do you elsewhere set the display or color or visibility or some other property on that :before pseudo-element that in fact "hides" the added "testing" from view?
Is your actual use case putting an image as content and are you seeing it not show up in printing (that would be a whole different issue)?
Basically, if your selector string is coming out correct, there are numerous other things that could be happening, and we would need more details to resolve it. If it is not coming out as above, then I would be interested in know what it is producing.
I created a new web application in visual web developer. I saw that the title of "Site.Master" (in code) is:
<div class="title">
<h1>
My ASP.NET Application
</h1>
</div>
So I opened "Site.css" and added:
h1
{
font-size: 1.6em;
padding-bottom: 0px;
margin-bottom: 0px;
color:Blue;
}
Showing "Default.aspx", though, doesn't show the text ("My ASP.NET Application
") in blue. Why?
EDIT: From the source code:
<body>
<form runat="server">
<div class="page">
<div class="header">
<div class="title">
<h1>
My ASP.NET Application
</h1>
So I added color: Blue; in the css under body, page, header, title, and h1. I rebuilt, and pressed Ctrl + F5. Doesn't help. I'm trying this in IE and Firefox.
The stylesheet is probably cached on the browser. Clear your browser cache, and you should see the change.
Also, You probably did this for emphasis, but you don't need to surround the css in asterisks.
You can prevent this from occurring in the future by appending a query string to the css link:
<link rel="stylesheet" type="text/css" href='site.css?v=<%= DateTime.Now.Ticks %>' />
Something like this will cause the browser to download the css file every time the page is requested.
Update your css like below.
.title h1
{
font-size: 1.6em !important;
padding-bottom: 0px !important;
margin-bottom: 0px !important;
color:Blue !important;
}
from: http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/
Specificity is calculated by counting various components of your css
and expressing them in a form (a,b,c,d). This will be clearer with an
example, but first the components.
Element, Pseudo Element: d = 1 – (0,0,0,1)
Class, Pseudo class, Attribute: c = 1 – (0,0,1,0)
Id: b = 1 – (0,1,0,0)
Inline Style: a = 1 – (1,0,0,0)
So, the class of div is over-riding the element setting of h1.
Try
color: blue;
instead of
**color:Blue;**
Two things:
It's possible you just need to do a "hard refresh" of the page. Try pressing Ctrl + F5 and see if that helps.
You may need a more specific selector to control that element if another CSS rule is affecting it. Try changing "h1" to ".title h1"
i dont know why it happens but u need to clean firefox cache and cookie then it works.
This cases are common and almost no solution to this issue (sadly, little can be done) if and only if your web page content was sourced from a template online. To confirm this, create two web forms with different templates and both web forms share the same 'sitemaster' page. it kind of inherits content design.
div.task_finished { background-color:#6b86a6; }
div.task_pending_execute { background-color:#93b8e2; }
div.task_cancelled { background-color:#ff9966; }
div.task { background-color:#ffffcc; }
Now I want to print this
<div class="legend-container">
<div class="legend">
<div class="task_pending_execute"></div>
<div class="legend-text">Executing</div>
</div>
<div class="legend">
<div class="task_cancelled"></div>
<div class="legend-text">Finished</div>
</div>
...
</div>
For IE graph is rendered as image.
User browser set not to print background-color by default, but that's inacceptable in this concrete situation
I still don't want to subsitute 'color' div's here by images.
What css property should I use instead?
You can try using a colored border, something like this:
div.task_finished { border-left:#6b86a6 solid 100px; height: 1em; }
However, I'm not sure if IE considers borders as background or foreground when printing.
[EDIT: another idea]
Another solution would be to use Unicode Block Elements and then set the foreground (text) color.
<div>█████</div>
<div>█████</div>
However, this will fail on systems without proper unicode support, or without correct fonts.
Also, it will give you little control about what is the width of the legend, because different fonts have different widths. (maybe CSS #font can help you solve this, but I'm not sure)
Finally, maybe there are visible "seams" between each character, depending on the font. (this might be "fixed" by setting a negative letter-spacing)
Not something you can really do anything about. Background colour/image printing is a printer option and not something you should really count on - http://css-tricks.com/dont-rely-on-background-colors-printing/