Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17







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

See the grey border around the document (circled in red)?  How can I get rid of it?

I think the border might be part of the styling for the linked google document I have embedded in the webpage.  So I need to wait to attempt the removal until AFTER the embedded page has completed loading.

Could use some help.  I am thinking about a jQuery solution and prefer that.

grey border kill
On Demand Webinar: Networking for the Cloud Era
LVL 10
On Demand Webinar: Networking for the Cloud Era

Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.

Want to switch off some HTML-Code via CSS:
      <div class="display-breaks">
      <p> </p>
      <p> </p>

Open in new window

.display-breaks { display: none !important; }

Open in new window

The display:none has no impact on the iPhone  display with Safari, but works on the iPhone with Firefox. Any idea why?
hello, our aging hotel software fidelio suite8 is running reports from an old Crystal Report ver 8.5 / 2012 runtime also (?).  I can send simple formatted email / reports made from Crystal in *.rpt format.

I would however like to use the latest (or at the very least, modern) newsletter formats with css etc. I would like to find out whether this be possible? Inline? or html?

My bottom line is to send a welcome letter / goodbye letter - the email format / structure will not change much. The email server is in-house.

Thanks for helping, Clifford
Hi all,

I've been trying to build the front end of a website using bootstap. So far the site seems to look okay in Chrome and Firefox, but not on Internet Explorer.

The site is here  -

the explorer vs chrome/firefox
The image shows how the page looks in explorer (left) against how it looks in Chrome/Firefox (right). The second row is all squashed and isn't running across all 12 columns as I specified. Also the  Bootstrap cards are not displaying properly (too much empty white space at the bottom of the cards).

The code for the initial part of the site with the row not displaying properly is displayed below:
<!-- HEADER1 --> 

 <section id="header1"><!-- header starts - this has all the information relating to the header-->
 <div class="container"><!-- section starts --> 
			<div class="row"><!-- row starts --> 
	  	    				<div class="col-sm-4 header-right float-right">
							<h4>Find a teacher</h4>
							<div class="form-group">
							  <label for="exampleSelect1">Study Language:...&nbsp;&nbsp;</label>
                              <select class="form-control" id="exampleSelect1">

Open in new window

Hi all,

I'm trying to build a website using Bootstap v4 beta.

Something seems to have happened to my float right command since I upgraded to v4 beta - it appears not to work.

I have a section ID and in it I have a form. I want to move the form to the right of that section. Currently it positioned to the left. This can be seen here:

I tried a couple of things to get it to move to the right:

In my code I have  tried the following:

<div class="col-sm-4 header-right float-right">

Open in new window

I was hoping float-right was a bootstrap class which I didn't have to define, but it didn't seem t work. So I defined a class 'header right' in my CSS file. In that class I specified:  float:right;

 background:url('../img/homepageimage.jpg') center center no-repeat;/*Image we display in the header - top part of the webapge*/
 background-size:cover; /*used to cover the entire page*/
 #header1 img{
 padding:0 0 0px;
 #header1 .header-bottom{
 #header1 .header-right{

Open in new window

None of these seemed to work. The full code for the section ID header1 is shown below.
Any suggestions / advise much appreciated.

Many thanks


Open in new window

I have this code and I need a css class to place a  red asterisk in front of label. For example *Field Rep.
The  asterisk should be bold

                  <div class="medium-3 column float left">
                            Field Rep
                        <asp:DropDownList ID="ddlFieldRep" runat="server">
                            <asp:ListItem Text="Select Field Rep" Value="0" Selected="True" />
                            <asp:ListItem Text="xxxx" Value="1" />
                            <asp:ListItem Text="llll" Value="2" />
                            <asp:ListItem Text="mmmm" Value="3" />


Open in new window

Here is the page:

I want to remove the amount of space above the <ul> lists.

Is there a setting to remove that space?
Or is the problem with the default space of the <p> tag sections?
0  the photo here slides down, revealing text. The designer wants this, a short orange line under the H3 tag:

I am not sure how to do this... a bottom border? Of course it needs to be responsive. Thanks in advance for your help
Hi ,

I am creating a simple component in Angular 4

-my-account  // angular project folder
----account  // angular component folder

//css , js , images are folders I created and put files.

Now I want to use css files from the above css folder in account.component.html.  How do I access ?

Here is my non working code

 <Link href="css/datatables.min.css" rel="stylesheet" type="text/css"/>
 I'm getting error
 zone.js:2744 GET http://localhost:4200/css/datatables.min.css 404 (Not Found)

please note this file is already present in css folder.
Do you have any suggestion how to access css files in component html   ?  what is the proper way to fix ths issue ?
Need help
I want to have the effect to disable further update (like to show gray background color), to whole page, when it's being idle for a while, by these

        .overlay {
            background: #e9e9e9;
            display: none;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            opacity: 0.5;
$(function () {
    // 1000ms=1s, here test use 10s, you could modify. 
    var time = 5000;
    var set = setInterval(function () {
    }, time);
    <div class="overlay">
        <div id="loading-img">

Open in new window

but I cannot get what I want, below

what to adjust?
What does it mean to be "Always On"?
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

I have a slider and some text on my website.  There is a background image behind the slider and text.  I am having trouble making the elements scale correctly in mobile layouts.  I was wondering what is the best way to achieve this without having to make tons on media queries for each size?

Thanks!  Any help would be greatly appreciated.
say, I have an XML response file from a third party web service.

This contains a result of some operation which, I need to display it to a client. this third party has also provided me with  css and javascript files, which I use to display the response XML in a web browser.

my question is how can i write back a XML file to a web browser?
Is it possible to declare in a CSS file that all 2nd and 3rd level bullet (<ul>) lists have no margin at their top? I want 2nd and 3rd level lists to appear close to its parent list above it.

Note, this would be the default style and not require a class designation.

Thanks in advance.
I need a responsive theme for the now unsupported Magento Professional ver.

There are many themes out there but I can't find anything that says it supports Magento ver.  Ideally, I'd like something that is free.

If this does not exist, is there a reasonably easy way to adapt other designs to 1.10?
Hi Experts

I am trying to use the css function @media print to print the content in <div class="test"></div>. With this code it works.

<style type="text/css">
@media print {
body * {
.test {

I placed that code in the <head> section. When I tried to code it into an external CSS, it doesn't work. I have this link to my external CSS:
<link rel="stylesheet" type="text/css" media="screen" href="test.css">

Does it mean that @media print has to be coded into <head> section while using the external CSS link will not work? Thanks
I am currently in the process of creating my online portfolio and I am having difficulties with my burger menu icon toggling the off canvas menu.  I've managed to set it to open but when I click it again to close it doesn't work.
The problem i am having in alignment of input and select fields. html and css code is attached. I am having hard time for resolving this as i am beginner in css learning.

Select fields for choosing time       from    [hour] [minutes]              to     [hour][minutes]  should be easily understood by user. right now it is not so.
Page is divided into two parts  - > left and right side.  left side's width is 60% and right side's is 40 %.

Form is in the left side. (which is to be consider)
I do not know why event cannot be fired below, after having clicked the button.

<input type="submit" name="LoginButton" value="登录" id="LoginButton" class="LoginButton" onclick="LoginButton_Click" style="font-weight: bold; position:fixed; top:30%;left:50%; z-index:1000"/>

Open in new window

I need to stylize the sidebars for some pages one way and for others another way.  Can't figure out a way to modify css so text is white on green box without making text white on contact page.

Here is css for green box
/*  Locations pages green box in sidebar
--------------------------------------------- */
.greenbox-locations { 
  background-color: #016633; 
  padding:20px 10px 20px 30px;

.greenbox-locations p h2 { 

Open in new window

On location pages, I need to have a green box with white text.
beta link:

On this Contact page, I need to have black text with white background.
beta link:

here is css for contact page:
/* ........SIDEBAR ........... */

.sidebar .widget {    /* SIDEBAR IMAGES */
    padding: 0px 30px 10px 0px;

.sidebar {

.sidebar-primary {
    background-color: #fff;

.sidebar p {
    margin-bottom: 16px;

.sidebar .widget h2 {
font-size: 1.6em;}

Open in new window

Industry Leaders: We Want Your Opinion!
Industry Leaders: 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!

Why do my navigation buttons flash a white color immediately before the mouseover color (dark green) appears?
Hi, Please see the dark footer at, user name pepe and pw: BobTheBuilder45!!

I need to add a div in front of the words DON'T MISS OUR LATEST PROMOS AND NEWS, aligned left, with social icons in it.

So it will look like:
With the social icons in a separate div from the text.

Here's the social icons code: <a href=""><i class="fa fa-facebook" aria-hidden="true"></i></a>&nbsp;&nbsp;<a href=""><i class="fa fa-pinterest" aria-hidden="true"></i></a>&nbsp;&nbsp;<a href=""><i class="fa fa-twitter" aria-hidden="true"></i></a>&nbsp;&nbsp;

With or without the non-breaking spaces, I just need a way to create that extra div and can't figure that part out. Thanks.
How to I modify the google map in the left sidebar so that it fits in widget better.  If I change the width of the map, then it won't resize properly.

beta site

I am trying to have the sidebar area have a green background and white text like this wireframe.


Beta page

Why does the green box appear above all text?

I am using a widget for the sidebar.  Here is the code in the widget

<span class="greenbox-locations">
<h2>CCS Sioux City Plant 1</h2>
2900 Murray Street
Sioux City, IA 51111
(712) 279-0918

Plant Manager
(712) 279-0918 xXXX

Regional Director
(712) 279-8000 xXXX</span>

<strong>MAP GOES HERE</strong>

Open in new window

Here is css
.greenbox-locations { 
    background-color: #016633; 
  padding:5px 30px;

Open in new window

trying to get map to resize as page viewport gets smaller.
Any idea why this two column page is not responsive?






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.