We Keep Coding

Apply styling only on the text inside a DIV

I'm having a div in HTML which is dynamically creating from the server side. I want to apply css in HTML(front-end) only on that div if and only if its having some-content. If it doesn't have any content then I have no need to apply the new styling.
The sample of HTML code is:
<div class="attr-marker">
Some-text-content <!-- Apply New Styling on it -->
</div>
<div class="attr-marker">
<!-- No need of new styling -->
</div>
<div class="attr-marker">
<!-- No need of new styling -->
<i class="fas fa-car" style="color:#d42424;font-size:px"></i>
</div>
And the CSS which I tried but failed is:
.attr-marker text {
display: block;
width: 12px;
height: 12px;
border-radius: 50%;
line-height: 12px;
font-size: 9px;
text-align: center;
background: #000;
color: #fff;
}
I can achieve it by using javascript but I want purely CSS solution so it'll help me to minimize the code.

You can set default style for empty div by using :empty pseudo selector. And then for regular div, just set the style as given above.
Or you can use :not(:empty) Pseudo Selector to set the style for the div that is not empty.
Here's an example:
.attr-marker:not(:empty) {
display: block;
width: 12px;
height: 12px;
border-radius: 50%;
line-height: 12px;
font-size: 9px;
text-align: center;
background: #000;
color: #fff;
}
Let me know in case you have any questions.
Regards,
AJ

You can use the :empty pseudo-class. However your server will need to output the .attr-marker div with no whitespace.
Like...
<div class="attr-marker"></div>
not
<div class="attr-marker">
</div>
And then the css would be,
.attr-marker:empty {
display: block;
width: 12px;
height: 12px;
border-radius: 50%;
line-height: 12px;
font-size: 9px;
text-align: center;
background: #000;
color: #fff;
}
Additional reading, https://developer.mozilla.org/en-US/docs/Web/CSS/:empty

Writing .attr-marker text { } means you want to access child elements with tag text of class attr-maker. No such tag exists in HTML.
There are specific CSS text and CSS font properties which work only on text. They are to be used in the text's parent element (in your case div with class name attr-marker):
.attr-marker {
/* text properties */
/* some other properties */
}
Properties like display: block;, width: 12px;, height: 12px; and so on, won't work on text.
That being said, you don't need to worry whether your CSS properties will be applied to the text or to the whole div. If you're using the right properties, you can be sure they are only applied to the text.
As for the content(text) presence, you don't need to worry about it. If there is no text, CSS won't change anything.

Either add another class to that div from the server side if it will send content or wrap content with another element and give it some styling.
Edit:
If you know exact position of your element then you can select it with nth-child pseudo-class:
.attr-marker:nth-child(1):not(:empty) {
border: 1px solid #333;
background-color: yellow;
}

If these markers are block rendered elements, the browser should not display them, unless they have content, therefore you can trust the browser to not render the elements with no content, use the max-width and max-height properties below:
.attr-marker {
display: block;
max-width: 12px;
max-height: 12px;
border-radius: 50%;
line-height: 12px;
font-size: 9px;
text-align: center;
background: #000;
color: #fff;
/*If required*/
overflow:hidden
}

Edit Google Recaptcha CSS to make it responsive

So I have this chunk of html that displays the inserted Recaptcha div wrapped with my own comment_recaptcha div:
<script src='https://www.google.com/recaptcha/api.js' async defer></script> <div class='comment_recaptcha' id='comment_recaptcha'><div class='g-recaptcha' data-sitekey='".$this->recaptcha_public_key."'></div></div>
Problem is, it looks horrible on mobile -
In the picture above it could look worse, but it's not ideal at all and even that recatpcha centering I've solved by making comment_recaptcha display: grid and making the g-recaptcha class margin: auto.
comment_recaptcha's father div is #insert_element -
#insert_comment {
margin-top: 10px;
font-family: 'Roboto', sans-serif;
color: #424242;
font-size: 14px;
background-color: #f7f7f7;
border-radius: 3px;
border: 1px solid #eaeaea;
padding: 10px 20px;
max-width: 100%;
}
But the true horror is when the window's width is less than about 365 pixels it could like that -
How do I fix that so the Recaptcha fits the full width of its container instead of staying at the same size and look like it?

How can I prevent my layout from disrupting when a Javascript function runs?

I've just added a Javascript function of changeText to make my site have the accessibility feature of making text larger in order for visually impaired users to be able to use my site with more ease. However upon clicking on the icon for 'larger text' which runs the javascript, it messes up my layout. How can I correct this? Would it be CSS? Here is the website:
[www.me14ch.leedsnewmedia.net/slate][1]
and the enlarge text icons are to the right hand side of the header. Or if this helps, this is the code:
<div id="font-size-buttons">
<img src="http://www.me14ch.leedsnewmedia.net/slate/images2/fontmin.png" width="25" height"25" alt="Switch to original text size and colours">
<img src="http://www.me14ch.leedsnewmedia.net/slate/images2/fontmax.png" width="30" height="30" alt="Switch to larger text and improved colour contrast">
</div>
And the Javascript:
function changeText(size) {
var obj = document.getElementsByTagName('html')[0];
obj.style.fontSize = size + '%';
}

Your div#font-size-buttons is inheriting your new font-size:150% rule, which pumps up its height to 48px after click.
To combat this you need to fix it height to let's say 32px, as so:
#font-size-buttons {
float: right;
clear: both;
margin-right: 5px;
font-size: 32px;
}
Hope this helps
EDIT:
You'll need these too:
.intro {
clear: both;
text-align: left;
padding: 4px;
line-height: 1.5;
}
.subgroup1 {
width: 64.54%;
float: left;
margin-bottom: 25px;
margin-top: 5px;
}
(I removed fixed height from .subgroup and decreased margin, to make div more "elastic")
#footer {
max-width: 1000px;
width: 100%;
color: black;
bottom: 0;
position: relative;
font-family: arial, palatino sans-serif;
font-size: 0.75em;
text-align: center;
background: #A3CC39;
clear: both;
border-radius: 5px;
}
(Again - removed height:20px from footer to make div adjusts itself)

Looking at the website yes you need to add css to it to draw your website and limit part of the website so the js does not affect things you dont want to.
but you would need to provide more code of your website so we can help you

I looked quickly and changing you whole css would be too long so the workaround I suggest is that your + and - only change your wrapper div as this is your main content. For this change in your js to be
<script src="accessjava.js">
function changeText(size) {
var obj = document.getElementsById('wrapper')[0];
obj.style.fontSize = size + '%';
}
</script>
and in the body change
<div class="wrapper">
to be
<div id="wrapper">
The last thing will be in your css to replace .wrapper by #wrapper to keep the same style you created.
Hope this will help

Use HTML5 to make a page with no scrolling

I want my page to be displayed in full without the need (or ability) to scroll down. I want to have a footer that will display at the bottom of the screen. I've found so many answers on here and Google that will probably work, but I am a noob and can't make too much sense of them or how to apply the information to my code.
here is my STYLE code:
<style>
#font-face {
font-family: 'gooddogregular';
src: url(GoodDog.otf)
}
html {
text-align: center;
font-family: sans-serif;
}
body {
width: 100%;
height: 50%;
margin: 0 auto 0 auto;
text-align: left;
background-image: url("border.png");
background-repeat: no-repeat;
background-size:cover;
}
header {
width: 100%;
display: table;
}
nav {
width: 950px;
border: 2px;
}
article {
width: 700px;
display: table;
font-family: gooddogregular;
}
h1 {
font-family: gooddogregular;
font-size: 50px;
}
</style>
My body tag is just a body tag, nothing added to it or anything. Essentially I want the page to not scroll, and all content just rest in the middle (or middle left and middle right).
Maybe a better question would be how do I position elements such as footer, images, articles etc with precision? Anyway to use coordinates that are not based on pixel, such as percent?
I tried adding height: to my body style, but no matter what I set the height, it has zero effect.

If you want nothing to happen when you scroll, position the elements with fixed positions like this:
position: fixed;
bottom: 0px;
left: 10%;
When you scroll, fixed position elements do not move.
To disable scrolling altogether, use this CSS:
body, html {
height:100%;
}
body {
overflow:hidden;
}

How to make css width work in firefox

I'm creating an web system, but it's not showing correctly in firefox (and probably not in IE too), but it's great in Google Chrome, the page is that: Page with errors
The problem is that my < ul> component is too large in Firefox. I'm using width: 760px; and repeating an small width image over this 760 pixels. But the firefox do it for more than 760 pixels (as you can see in the link).
This is my ul-html code:
<body id="maincontent">
<ul class="ulmenu">
<li><a href="#" >Registrar</a></li>
<li><a id="lastmenu" href="#" >Realizar login</a></li>
</ul>
</body>
And my css:
root {
display: block;
}
#maincontent
{
background-color: black;
width: 760px;
margin: auto;
}
ul.ulmenu
{
text-align: center;
margin-top:0;
display:table;
width: 760px;
max-width: 760px;
list-style-type: none;
height: 60px;
background-image: url(../image/menubg.png);
background-repeat: repeat-x;
/*
visibility: hidden;*/
}
ul.ulmenu li
{
float: left;
}
ul.ulmenu a
{
background-image: url(../image/menudiv.png);
background-repeat: no-repeat;
background-position: right;
padding-right: 32px;
padding-left: 32px;
line-height: 60px;
display: block;
color: #ffffff;
text-decoration: none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 21px;
}
ul.ulmenu a:hover
{
color: #AAAAAA;
}
In order to make the options of the menu centralized, i created some code in JS with jQuery to do that. If I remove this code, the width of green image in firefox becomes smaller, but it's still bigger than necessary (about 100px), the chrome images keeps unchanged.
I know only basics of css. Can anybody point me how can I fix that?
----EDITED-----
Fiddler URL for code (but the error is only noticed on maximized browser):
See it on Fiddler

Here is what I understand.
Seems, In firefox your are adding padding-left to your element style which makes it wider.
ul.ulmenu li
{
float: left; //remove it
display: inline-block; // add it
}
Remove this line from js code.
$(".ulmenu").css("padding-left",Math.round((larTela-menuWidth)/2)+"px");

Solution: Give width: 551px and display: block to your ul.ulmenu CSS class. That will solve the issue.
Reason: The reason for the issue is FF and Chrome treating display: table differently. For an element with display set to table, FF adds the padding to the width, whereas Chrome doesn't. The solution is to use the display: block CSS property that behaves the same in both browsers (FF as well as Chrome adds padding to the width for block elements)