CSS

41K

Solutions

15K

Contributors

Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.

Share tech news, updates, or what's on your mind.

Sign up to Post

Hi.  I want to print only the results portion of this page, not the list of races, etc.

http://www.gopherstateevents.com/results/cc_rslts/combined_scores.asp?meet_id=403

I think I should know this but here we are...

Thanks in advance.
0
Free Tool: Site Down Detector
LVL 11
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

On a tablet, IN BLACK FOOTER by the bottom navigation, the phone number appears.  It isn't supposed to show up there.  It isn't in the widget.  It does not show up on desktop.  Wondering how/why it is there since the footer bottom navigation is displayed by going to appearances/menus.  I do not have anything that calls for a phone number.
0
I'm using jquery addclass function to add a css class to an element to change the background color while the div or anchor element is clicked and default to former background color when the next element div or anchor is clicked. But I noticed that when I click the first anchor, the background actually changed to black according to my addClass, but it turned back to the original color just about few seconds after the click. I want it to stay as black color according to my addClass until I click the next div. I'm using this for header tabs. Please how can I achieve this?

HTML
<div id="menu1">
<a id="logoutid" href="logout.php"><img src="images/out1.png" alt="logout" title="Logout"></a>
<div id="notify"></div>
<a id="friendid" href="follow_page.php?u=myname><img src="images/follow.png" alt="follow" title="Follow"></a>
<a id="settingsid" href="profile_page.php?u=myname><img src="images/settings.png" alt="rss" title="Profile Setting"></a>
<a id="homeid" href="user_audio.php?u=myname><img style="margin-top:3px;" src="images/home.png" alt="home" title="Home Feed" width="27" height="26"></a>
</div>

Open in new window


CSS
.icon-selection {
    background-color: black;
}

Open in new window


JQuery
$(document).ready(function() {
    $("#homeid").on('click', function() {
        $(this).addClass('icon-selection');
    });
});

Open in new window

0
I am using bootstrap on my site and I generally like it a lot but I would like to make some of the objects a little smaller.  Lists, form objects, nav, tables, etc.  

My question is two-fold:
1) Is there a way to do that "across the board" by adjusting a css file associated with my bootstrap?

2) How much can I do with css on an item-by-item basis without "ruining" the mobile friendliness that bootstrap brings.  For instance, if I use class="img-responsive" for an image and then apply style="width:200px;" will that style make the image not adjust it's size based on whether it is on a mobile device or a desktop?

Thank you!
0
I have this json output.
var jsonstr = "{\"formattedResults\":{\"ruleResults\":{\"MinimizeRenderBlockingResources\":{\"localizedRuleName\":\"Eliminate render-blocking JavaScript and CSS in above-the-fold content\",\"ruleImpact\":12.0,\"groups\":[\"SPEED\"],\"summary\":{\"format\":\"Your page has {{NUM_SCRIPTS}} blocking script resources and {{NUM_CSS}} blocking CSS resources. This causes a delay in rendering your page.\",\"args\":[{\"type\":\"INT_LITERAL\",\"key\":\"NUM_SCRIPTS\",\"value\":\"1\"},{\"type\":\"INT_LITERAL\",\"key\":\"NUM_CSS\",\"value\":\"3\"}]},\"urlBlocks\":[{\"header\":{\"format\":\"None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.\"}},{\"header\":{\"format\":\"{{BEGIN_LINK}}Remove render-blocking JavaScript{{END_LINK}}:\",\"args\":[{\"type\":\"HYPERLINK\",\"key\":\"LINK\",\"value\":\"https://developers.google.com/speed/docs/insights/BlockingJS\"}]},\"urls\":[{\"result\":{\"format\":\"{{URL}}\",\"args\":[{\"type\":\"URL\",\"key\":\"URL\",\"value\":\"value 1 output\"}]}}]},{\"header\":{\"format\":\"{{BEGIN_LINK}}Optimize CSS Delivery{{END_LINK}} of the 

Open in new window

0
how to change chrome check box  like internet explorer because it looks fine so i want to change the chrome check box like internet explorer checkbox
0
Hi All:

How does areas in pages expand. The rest of the areas/div/class adjust accordingly.

Let me know any property or attribute that allows this.

Best Regards

Sunnybrad
0
Hi all,

Looking for two enhancement for DOB textbox on my webpage.

1. onclick pop up calendar for birthday that show giant year/month. I try to avoid the user to keep click back to their birthday year. It is not user friendly. So I hope to pop up many years as possible so he/she can select the birthday easier.

2.  also look for javascript or jquery codes to convert mm/dd/yyyy to the age that show on <p id="exactAge"></p>

Thank you for all your helps.

<div class="ui-input">
  <input type="date" required tabindex="3" maxlength="10" name="dob" id="dob" onkeydown="return DateFormat(this, event.keyCode)" placeholder="Enter DOB" value="<%= GetDOB(Request.QueryString["Primary DOB"]) %>" class="form-control" />
  <label class="ui-icon"><i class="fa fa-birthday-cake"></i></label>
  <p id="exactAge"></p>
</div>

Open in new window

0
What is a better practice, the H-Tag inside of the link or the Link inside of the H-Tag?
0
when it is onload
      if the dob is date type
            show age inside of exactAge <p></p>

How can I make do that using IE 11?

Thanks
<div class="ui-input">											<input type="date" tabindex="3" maxlength="10" name="dob" id="dob" onkeydown="return DateFormat(this, event.keyCode)" placeholder="Enter DOB" value="<%= GetDOB(Request.QueryString["Primary DOB"]) %>" class="form-control" />
											<label class="ui-icon"><i class="fa fa-birthday-cake"></i></label>
                                             <p id="exactAge"></p>
 										</div>

Open in new window

0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE
LVL 5
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Hi,

we need to Load external web site and show it as a live website tile in our application where x-frame-options set to same origin for the external website.

We followed below approaches but nothing is working.

Please help us to know any framework/approach to achieve this.

Iframe : < iFrame src="www.xyz.com">

Ajax Approach : Ajax HttpGet Call to the external web siteand get the html and render on our website.But replacing the image, css and html links from html is not working properly.


Web Request Approach : Server side HttpGet Call to the external web siteand get the html and render on our website.But replacing the image, css and html links from html is not working properly.
0
I am using html5lightbox on a website.  It works fine when the lightbox pops up on a laptop or desktop but a mobile device, the lightbox opens but it won't scroll.

If you go here: https://www.coherent (DOT) com/company/press_release/press-releases and scroll down half way and click on a few of the Press Releases, you will see them open on your mobile device but they won't scroll. It works on an emulator but not on an actual device.

Any suggestions?
https://html5box.com/html5lightbox/
0
http://hakutah.com/

Take a look at mobile menu. The text is white. The CSS is set to have the text as a dark brown color but something seems to be overriding it.

Here is the CSS that I believe SHOULD be working. In firebug, I see no other CSS that is taking priority, but something certainly is.
.et_mobile_nav_menu a {
  color:#31180D !important;
}

I'm no CSS genius, and I'm sure I'm overlooking something obvious, but it escapes me. Lastly, I didn't design or build this site, so while I'm familiar with the tools, I don't know what else could be causing this issue.
0
Hi! I'm having a problem with a simple box within it's layout, here's de HTML code (I'm using bootstrap):

<div class="bolsa">
	<div class="info-top pull-right">
		<div class="nombre pull-left">MERVAL</div>
		<div class="valor pull-right">21594.70</div>
	</div>
	<div class="info-bottom subida">
		<div class="subida-bajada pull-left"><i class="fa fa-angle-up flecha"></i>&nbsp;0.57%</div>
		<div class="resumen pull-right">122.49</div>
	</div>
</div>

Open in new window


And here's the CSS code:

section.informacion-financiera .info-bolsa .bolsa
{
	width: 165px;
	display: inline-block;
}

section.informacion-financiera .info-bolsa .bolsa .info-top
{
	font-size: 10px;
	color: #545560;
	width: 161px;
	margin-bottom: 13px;
}

section.informacion-financiera .info-bolsa .bolsa .info-bottom
{
	position: relative;
}

section.informacion-financiera .info-bolsa .info-bottom .subida-bajada
{
	font-size: 17px;
}

section.informacion-financiera .info-bolsa .info-bottom .resumen
{
	font-size: 10px;
	margin-left: 11px;
	/*TODO*/
	/*position: absolute;
	bottom: 3px;*/
}


section.informacion-financiera .info-bolsa .info-bottom .i
{
	margin-right: 9px;
}

section.informacion-financiera .info-bolsa .subida
{
	color: #00b48c;
}

Open in new window


Now, it actually looks like this:

Captura-de-pantalla-2017-11-25-a-la-.png
And it should look like this:

como_debe_quedar.jpg
I've tried to uncomment the line commented in the CSS code, but it places the DIV on a weird place, please help me out since it's URGENT!
0
Navigation extends full width of nav bar in  Chrome  but not in Firefox.  How do I modify navigation so it extends full length for all browsers?  I have modified the css but when I make it work in one browser it fails in the other.

Chrome screenshot
https://screencast.com/t/ClkmvqYqmH

Firefox screenshot
https://screencast.com/t/Q6n7svVyp

Beta site
http://pl.triolibraries.com/

.main-navigation-menu a {
    display: block;
  padding: 14px 1.9em;}
  
#navi-wrap {
    border-top: 0px solid #004488;
    border-bottom: 0px solid #004488;
}
  
.main-navigation-menu li:last-child { border: none; }

Open in new window

0
I can get my forms to fill up the shell but the shell doesn't keep it's size.  How do I display a form so application shell doesn't appear in the background but the form size is constant?
0
Hi,
To the prompt, after having pressed Password button below. I expect the password strength to be shown, exactly after having input two password (but before Submit button is pressed). What to adjust?
http://my-friend.co/UserMaintenance2/Default.aspx?userid=mc23&readonly=n
0
I am having an issue with Microsoft Edge.

This page will load fine when I go to it directly.
http://www.wcmilk.co.uk/Journey

If I go to the same page, with an anchor link, then scroll to the top the header is mashed with navigation obscured.
http://www.wcmilk.co.uk/Journey#processor

When at the top if I F5 to refresh the page it is back to normal.

This only seems to happen with Edge and only seems to happen with Anchor links.

Any thoughts as to the problem?
0
I have csv file like below.  It has 50 states in USA. all counties.

I have a simple html text box, and i want to do the following:

1. I already have "State" e.g. CA. already stored in local storage in browser.
2. I want the auto complete list first filter by the selected state from local storage.
3. Then query and list the auto complete when cursor is on focus/on press down or something like that.

Is it possible to do t hat in jquery/ajax on MVC project? I have MVC project, but the front end is just HTML.

Thanks,

County Name,State Abbr,Geographic Name,State Full Name
Autauga,AL,Autauga County, Alabama
Baldwin,AL,Baldwin County, Alabama
Barbour,AL,Barbour County, Alabama
Bibb,AL,Bibb County, Alabama
Blount,AL,Blount County, Alabama
Bullock,AL,Bullock County, Alabama
Butler,AL,Butler County, Alabama
Calhoun,AL,Calhoun County, Alabama
Chambers,AL,Chambers County, Alabama

Open in new window

0
Technology Partners: We Want Your Opinion!
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Hi ,

I have added the following code to my website so that it redirects to a mobile version when viewing from a mobile, and works just fine, However I've got a button in the mobile version that will allow visitors to go to a desktop view in case they want to go back on their mobile device. How do I allow this.? or what shoukd I add to the button to allow this.

https://racingnsw-test.mystagingwebsite.com


<script type="text/javascript">
<!--
if (screen.width <= 699) {
document.location = "http://t.m.racingnsw.com.au/";
}
//-->
</script>

Open in new window



Also, I use the following URL https://racingnsw-test.mystagingwebsite.com/wp-json/wp/v2/posts fro a web service to fetch the articles to display in the mobile version. If I redirect to mobile, I believe I will get redirected to  http://t.m.racingnsw.com.au/ . how Can I force this specific URL to not redirect.
0
Hello i am new to gulp and i am trying to cache bootstrap css.
Gulp documentation is not very good, so any help would be appreciated !
0
Hi,
I want to adjust the following codes
            $(".btnDelete").click(function () { 
                var houseIdToDelete = $(this).data("house-id");
                $.confirm({
                    title: 'Confirm!',
                    content: 'Are you sure you want to delete current record?',
                    buttons: {
                        Yes: {
                            text: 'Yes',
                            btnClass: 'btn-red',
                            keys: ['enter'],
                            action: function () {
                                DeleteHouseRecord(houseIdToDelete);
                                //-- do ajax call here to delete the record
                            }
                        },
                        No: {
                            text: 'No',
                            btnClass: 'btn-green',
                            keys: ['esc'],
                            action: function () {
                                //$.alert('You clicked No!');
                            }
                        },

                    }
                });
                return false;
            });

Open in new window

to instead show with the details to input the password 2 times (one time to re-confirm it). How?
0
We tried to come up with a PHP routine to automatically print our membership cards that we send out to several thousand members but the background will not print unless we tell each user to modify their individual browser's printer properties to include background printing.  The member's variable information that comes from our database looks and prints okay but the background image is missing when they go to print.
This is a pain especially for those that are not as computer literate.  Is there a way to force their browsers to print the background image?  
Our PHP routine is attached.
Thank you.
MembershipCardPrintRoutine.txt
0
Hi,

I have the following page with some options in a dropdown, however i will need to display the selected option on top and witha a bred background and white text, so the user knows its been selected.

How can I do that with Jquery/Javascript  or CSS

http://nixnine.com.au/janome/ourproducts/

please see the attached picture - this is how it should look
Selected-option.png
0
Hi,

Please tell me how to fix Render blocking javascript,

Optimize CSS Delivery of the following:

Am tried below code to fix above Optimize css ,

<noscript id="deferred-styles">
      <link rel="stylesheet" type="text/css" href="small.css"/>
    </noscript>
    <script>
      var loadDeferredStyles = function() {
        var addStylesNode = document.getElementById("deferred-styles");
        var replacement = document.createElement("div");
        replacement.innerHTML = addStylesNode.textContent;
        document.body.appendChild(replacement)
        addStylesNode.parentElement.removeChild(addStylesNode);
      };
      var raf = requestAnimationFrame || mozRequestAnimationFrame ||
          webkitRequestAnimationFrame || msRequestAnimationFrame;
      if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
      else window.addEventListener('load', loadDeferredStyles);

But the above code fixed page speed Optimize issue but it take time to load css,at that time site look like broken.

IS there any Other option to fix Optimize Css issue?
0

CSS

41K

Solutions

15K

Contributors

Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.