My main issue is that my CSS does not load with the elements. I'm placing my CSS/HTML insde the HTML boxes as a lot of styling is not allowed directly in the HTML. There are a bunch of other frustrating things with Google Sites but this is what I need help with right now.
I'll navigate/refresh my page and all of my elements will display without CSS. Then after a few seconds the CSS is applied and things look how I want.
How do I get the CSS to load correctly? I can't have my menus and object load looking all crazy.
Here is a random example of code that does this (anything I've put into these boxes does this)
<style type="text/css">
span
{
float:left;
width:0.7em;
font-size:400%;
font-family:algerian,courier;
line-height:80%;
}
</style>
<p>
<span>T</span>he first letter in ths paragraph is styled
with CSS to be 400% larger than the rest of the text.
</p>
UPDATE: I've spoken with a Google Apps rep and they opened a ticket as the css not loading is a bug. No word on the time frame but they are working on it.
I have the same problem and a workaround can be
<style type="text/css">
.show-on-load {
display: block !important;
}
span
{
float:left;
width:0.7em;
font-size:400%;
font-family:algerian,courier;
line-height:80%;
}
</style>
<p class="show-on-load" style="display: none;">
<span>T</span>he first letter in ths paragraph is styled
with CSS to be 400% larger than the rest of the text.
</p>
This way the content doesn't display until the CSS is loaded. Unfortunately, I can't use this workaround myself because I have to support IE8 and style tags don't load at all there.
Edit: use opacity instead so IE8 is supported
Related
here's a common thing we do all the time: export from Google docs as 'html' but the end result is a mass of CSS definitions that have a fixed width and is not centered.
I've tried several common HTML fixes and nothing seems to work such as
P.blocktext {
margin-left: auto;
margin-right: auto;
width: 8em
}
...
<P class="blocktext">
even the good old fashioned table does nothing
<table><tr><td align='center'>
and
<table align='center'><tr><td>
For some reason, everything still seems to have the same left-justified text when exported from google doc.
What I'm looking for is CSS code that will perhaps make it more !important than the rest of the CSS so that my document can at least be in the middle of the page.
The actual body content of the Google Doc starts like this:
<body class="c29" >
<p class="c14"><span class="c8">
I do not want to go into the class definitions because there are hundreds of them. What we want is a snippet of code that simply aligns the whole thing in the horizontal middle of the screen.
Ideas?
Place this BEFORE the (or whatever number it happens to be) and your Google Doc export will be perfectly centered. Thanks to Junaid on my dev team for figuring this out!
<style>
body{
margin:0 auto;
}
</style>
I have an HTML webpage with both English and Portuguese languages, that are swapped when I press a flag at the top of the page. This is done through a class in a span. Typical usage:
<div>
<span class="por1">Portuguese text 1</span>
<span class="eng1">English text 2</span>
Some text 3 that is correct in both languages
</div>
By default, I have in CSS (English is the default language):
.por1 { display: none }
.eng1 { display: inline-block }
When I press the flag, the languages are swapped using obvious javascript.
This works perfect in a desktop, no errors in W3C, but in mobile devices (only) the texts 1 and 2 inside both spans is smaller than text 3. I erased all the #media, and the thing still gives problems.
However, if I erase the two CSS lines .por1 and .eng1 above, of course both texts 1 and 2 appear simultaneously, but now with the correct size. Hence, it seems to have something to do with the display tag...?
Hence, the behaviour is as I have two spans .por1 and .eng1 CSS for mobile devices, but I have not. In fact, debugging the page in Chrome shows that the two spans have no special formatting.
This is the page. Take a look at it in a smartphone and you will see two different sizes in the title already.
EDIT I simplified the page to the maximum. Look at the page now, whose complete code is this, including CSS:
<!DOCTYPE html>
<html>
<head>
<title>Crazy</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style type="text/css">
body { font-size: 24px; }
.por1 { display: none }
.eng1 { display: inline-block }
h2 { font-size: 2em; }
h3 { font-size: 1.7em; }
</style>
</head>
<body>
<h2> <span class="por1">Borboletas e Mariposas</span><span class="eng1">Butterflies and Moths</span> <br> (Rhopalocera, Heterocera) </h2>
<h3> oplus <span class="por1">Borboletas </span><span class="eng1">Butterflies </span> (Papilionoidea) </h3>
<div class="inner"><span class="por1">asa-de-vidro </span><span class="eng1">Glasswing </span> (Greta sp.)</div>
<div class="inner"><span class="por1">mariposa-walker</span><span class="eng1">Walker's moth</span> (Lepidoptera, Erebidae: Sosxetra grata)</div>
<div class="inner"><span class="por1">mariposa </span><span class="eng1">herilia moth </span> (Erebidae: Letis sp. (herilia?))</div>
</body></html>
If I remove the fist <div class="inner">, the page is still rendered with crazy font sizes. But if I remove the second, or the third, the page is rendered correctly (??!!). In fact, if I remove (herilia?) from the third <div class="inner">, it is also rendered correctly!! Actually, if I remove the ? it is also rendered correctly. Same happens if I remove the oplus. No idea what is happening!
EDIT 2
Screenshot of the wrong rendering:
Screenshot of the correct rendering (same HTML code with the (herilia?) removed):
EDIT 3 If I change h3 { font-size: 1.7em; } to h3 { font-size: 1.5em; }, the problem is gone!
I think you are experiencing a problem that I experiment in the past. It's the autoadjusting of the font size setted by webkit mobile browsers.
I usually use this trick to avoid autosizing
div { max-height: 9999px; }
You can apply to the div or the spans, try and tell me what is the result.
Edit
You need to make this kind of tricks too avoid the effect. The problem seems to be something about the bad viewport configuration and texts below 18 pixels. The browser thinks that is a text that the user can't read and apply autosizing to allow user to read it.
Try to specify the font-size for your span tags
If I understand you well, you know you can play with the font size in CSS, but you don't want to, as I understood from one of your comments.
I suggest controlling the font size through javascript dynamically to fit your multiple contexts, if you need any help with that just let us know.
<style type="text/css"> span:hover { } span[title]:hover:after { color: yellow; } </style> <span title ="this is text"> Testing </span>
In the browser I am using (Google Chrome), the code above displays two tooltips, one that looks like expanded text, and one that seems to be generated by the browser. How do I fix this so that there is only one tooltip showing when I scroll over the word "Testing"? I want to keep the yellow one.
You can't change the appearance of the tooltip since its browser-dependent.
However if you want to style your tooltips, you can use JS libraries like JS Toolip.
I have the following HTML markup:
<h1>
<div class="sponsor">
<span>Hello</span>
</div>
World
</h1>
When I use the CSS selector h1 I get Hello World.
I can't unfortunately change the markup and I have to use only CSS selectors because I work with the system that aggregates RSS feeds.
Is there any CSS selector which I can take only the text node? Specifically the World in this example?
The current state of CSS can't do this, check this link: W3C
The problem here is that the content you write to the screen doesn't show up in the DOM :P.
Also ::outside doesn't seem to work yet (at least for me in Safari 6.0.3) or it simply doesn't generate the desired result yet.
Check my fiddle and then check the DOM source: JSfiddle
Finally there are attribute selectors a { content: attr(href);}, making CSS able to read DOM-node attributes. There doesn't seem to be a innerHTML equivalent of this yet. It would be great tho if that was possible, whereas you might be able to manipulate the inner markup of a tag.
Bit of a workaround:
h1 {
color: red;
}
h1 * {
color: lime;
}
<h1>
<div class="sponsor">
<span>Hello</span>
</div>
World
</h1>
This is almost the opposite of a question I asked last week: Is it possible to select the very first element within a container that's otherwise pure text without using classes or identifiers in pure CSS?
The short answer is no. "World" in this example isn't an element of its own - therefore there isn't a way to select it.
What you would have to do here is style the h1 then override that styling with div.sponsor. For instance, if you wanted "World" here to have a black background with white text you woud use something similar to:
h1 {
background:black;
color:white;
}
h1 div.sponsor {
background:white;
color:black;
}
Unfortunately, however, this wouldn't work if you were only wanting the word "World" styled and your markup had more than just that within <div>Hello</div> World Foo, for instance.
I don't believe it would be possible with pure CSS to style just "World" in this situation.
I also met same problem, where I can't touch the markup and have no control with js.
I needed to hide a text nodes in a div element, but the element to remain visible.
So here is my solution:
markup:
<div id="settings_signout_and_help">
<a id="ctl00_btnHelpDocs" class="ico icoHelp" href="http://" Help Guide</a>
Signed in as: <a id="ctl00_lUsr" href="Profile.aspx">some</a>
Home
Sign out
</div>
css:
#settings_signout_and_help {
font-size: 1px !important;
}
#settings_signout_and_help a {
font-size: 13px !important;
}
Hope this helps guys!
I had a similar problem where I had to remove the "World" text from html generated by a C# function.
I set the font-size to 0 on the 'h1' element and then applied my css to div class. Basically hiding the extra text, but keeping content in the div.
I don't know how to do it with just CSS, but...
Using JQuery, you could select all the elements inside except the stuff inside its child element
$("h1:not(h1 > div)").css()
and put whatever CSS effect you want inside there.
I'm talking about the <html> element itself, seems to work in most browsers, but IE7/8 doesn't want to play. The reason I'm even doing this is because my chore is to theme a RoboHelp web output which uses a million frames - I need to set the topmost frameset's background image otherwise background-positions don't line up when a nested frame invokes a vertical scrollbar.
I tried applying height:100%; on the <html> element also. Solution must work in IE6+. Javascript should be avoided.
EDIT:
Clarification: I'm applying style="background: transparent url(image.gif) left top no-repeat;" to the html element via a style block in the header (everything is dynamic, this is my only available method of accessing the html element).
Good heavens, just tested this on a basic page - fine. Replace the body tag with a frameset, like in my situation, and now the images don't show up. This looks to be IE-frameset specific, any suggestions?
Not sure I completely understand your problem. But applying height to an HTML element is a definite no-no. You can apply a background directly to the entire page using the HTML selector
html {
background-image: url("../images/background_image.png");
}
Hint: the '..' in the above example moves to the previous web directory. Be cognizant of your file structure.
I think you should be using CSS instead of HTML background image tag. Background image in HTML is now deprecated (outdated and not recommended) by the W3C.
Something like this:
<html class="imageBox">
<style type="text/css">
.imageBox {
width:300;
height:100;
background: url("/foobar.gif") #ff9900 90% 30% no-repeat fixed
}
</style>
<p>This div element has a background-image.</p>
</html>