Go Premium for a chance to win a PS4. Enter to Win

x

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

I have an outer div and inner div and if I do not set outer div min-height, inner div appears outside of the outer, but if I set the height of outer in my css, and the content of inner div grows larger, it overflows the outer div. How can I ensure the outer div grows with the inner div?

    <body>
		<div id="outer">
			<div id="inner">
				<div class="title">
					
					Title here
					
				</div>
				<div class="content"></div>

			</div>
		</div>

	</body>

Open in new window

Here is my css:
    #outer{
  		width:90%;
  		margin:20px auto;
	    height: 200px;
		border: 2px solid red;
        position: relative;
        padding: 0;
		}
		
		#inner{
  			width:98%;
			border: 2px solid green;
            position: absolute;
		}
		
		 #inner .title{
 			width:100%;
  			height:63px;
  			background:#80c0ff;
  			color:#FFF;
            padding-top: 5px;
            border-radius: 2px;
		}
    .clear { clear: both; }


		#inner .content{
	      width: 98%;
	      padding:1% 1%;
  		  background:#FFF;
  		  height:auto;
  		  display:block;
          border: 2px solid orange;
          position: relative;
		}

Open in new window

0
Keep up with what's happening at Experts Exchange!
LVL 11
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

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
Hello guys

I am studying html and css.

I got a code for buttons and I added in my page.

But I am having troubles to center them in horizontal form and give them certain space among them.

could you help me?

this is the link:

http://www.teachmenow.com.br/guardasol/index.html

regards
Alexandre
0
How do I remove the white vertical line to the right of the Home button?
http://pl.triolibraries.com/
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
Any idea what I am doing wrong to keep this form from correctly applying the "horizontal form" characteristics and why what should be to the right of it is below it?

Thanks in advance!
0
Have a look here (pw: paris)
Each of the boxes in the grid has a nifty little card-flip on hover which displays a description of that benefit.

... unless you're using Firefox.

My version of Firefox (52) displays the boxes OK but when you hover on them it flips the SVG icons around (and the text), displays the backside only momentarily and then goes white.

Can anyone explain what I should do to make this grid compatible with Firefox.
As far as I know, all other browsers can see it fine.

Following is the html and code for each individual box.
Many thanks
Tim

HTML
<div class="flip-cards card-shadow rMargin">
  <div class="front-card">
    <div class="frow column-center">
        <div class="aSVGIcon">
              <svg class="[types field='svgscale' output='raw'][/types]" fill="#58595B" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">[types field='svg-paths' output='raw'][/types]
              </svg>
        </div>
        <div class="cbenTitle">
                [wpv-post-title]
        </div>
    </div>
  </div>
  <div class="reverse-card" id="[wpv-post-id]">
    <p class="cbenText">[wpv-post-body view_template="None"]</p>
  </div>
</div>

Open in new window


CSS
.centerIt{
  margin: 0 auto; 
}
.rMargin{
  margin-right:5px; 
}
.flip-cards
{
    width:200px;
    

Open in new window

0
I have a ASp.Net MVC page. I want to have the text and controls (buttons) move as the screen size changes. Right now I have it all in divs. The first div contains a logo I want to stay aligned on the right. The 2nd div contains text. The 3rd contains 2 buttons. When I change the size of the browser, the text moves as expected, shrinking down or expanding. But the buttons do not move. I'd like them to stay centered under the text. I've tried different styles but I can;t seem to get it. Thanks.

<div style="float; vertical-align: top">
   <image here />
</div>
<div style="vertical-align:top">
  <p style="padding-left:300px; padding-top:50px">
       Test here
</p>
</div>
<div>
     button 1
     button 2
</div>
0
We recently replaced the middle image logo (which display on all pages but home page) with code for a logo provided by the company that ranked this site.  After doing that, we noticed that the logos are no longer evenly spaced.  See screen shot below:

Site
https://rochesterinn.com/rochester-inn-room-amenities/

Screen shot
https://screencast.com/t/6JeQKW8xVA

I tried using inspector to fix but when I did and you resized site for a phone, then the left and right logo got super tiny.

Here is code provided for middle logo:
<div id="hc-ratingRatingHotel">
<div id="hc-ratingRatingHotel__inner"><img id="hc-ratingRatingHotel__ribbon" src="https://media.datahc.com/ratinghotel/stellar2/ribbon.png" />
<span id="hc-ratingRatingHotel__year">2017</span>
<span id="hc-ratingRatingHotel__award">RECOGNITION OF EXCELLENCE</span>
<div id="hc-ratingRatingHotel__hotelink"><a id="hc-ratingRatingHotel__hotelname" target="_blank"></a>The Rochester Inn</div>
<a id="hc-ratingRatingHotel__hclink" href="https://www.hotelscombined.com/" target="_blank" rel="noopener">HotelsCombined</a>

</div>
<div id="hc-ratingRatingHotel__rating"><span id="hc-ratingRatingHotel__number">9.4</span>
<span id="hc-ratingRatingHotel__pipe"></span> <span id="hc-ratingRatingHotel__ratedby">Rated by Guests</span></div>
</div>
<div id="hc-data__hotellink" style="display: none;">The_Rochester_Inn</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"> </script> 

Open in new window

0
Free Tool: Port Scanner
LVL 11
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

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.

Hi, my LinkedIn Profile badge is misbehaving (see attached image). Almost all of it looks good, but for some reason, the LinkedIn logo is aligning to the left. Going back and forth with LinkedIn's technical support for 1month+ has brought no solutions. Everything they have tried doesn't work.

FYI this is a page hosted on Blogger. I am using a custom theme. I am not an expert, but have not found anything so far that could be a conflict in the theme settings that causes this error.

Help!

LImisalignment.jpg
0
Hi,
I can see Password button below, is enabled, but why can't I press it?

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 want to select all paragrahs on the HTML page whose title is "Contact Us".  It seems like
 
[title="Contact Us"] p {color:red; };

Open in new window

should work, but it doesn't .  Does anyone see the problem?

Thanks
0
I have written a query and currently have a job that runs and sends an email using sp_send_dbmail in a formatted table if certain conditions are met. I use style sheets to control the format and this works fine for all columns returned using the style for td but I have a need to control the format of individual columns of data only, i.e. control the text alignment, data type, color, etc. of the value column data independently of the column header. I would like to format the individual columns below to a currency if possible and right justify them. Even if I can not format to currency, if i could format to a number format with a comma separated value (XX,XXX) I can concatenate the $ sign. I have attached a snippet of the table output as well as the code.
 
FYI- there is another table below the summary table shown here but I did not send it. Much similar in nature, I just need guidance on getting the style sheet embedded to work.

I found during my search on the web a query written almost identical to mine with the same issue and the response was as follows:
Note: create a css classes for each td above.
> CAST
> (( SELECT
> [td/@class]='anyclassname1', td = [Column Name 1], "*"='',
> [td/@class]='anyclassname2', td = [Column Name 2], "*"='', etc.

I have tried this and substituted [td/@class]='text-align: right', and can not get it to work.
Any help would be greatly appreciated.

> DECLARE @bodyMsg nvarchar(max)
> DECLARE @subject nvarchar(max)
> DECLARE …
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
Hi,

I am using the following function to fade out one image and fade in another (replacement), however currently this fades out so to white before another image fade in, is it possible to fade ontop gradually so it does not fade out completely?

               
if (dataId != $('img#largeImg').attr('src').replace(/\?(.*)/, '')) {
                    $('img#largeImg').stop().animate({
                        opacity: '0'
                    }, function () {
                        $(this).attr('src', dataId + '?' + Math.floor(Math.random() * (10 * 100)));
                    }).load(function () {
                        $(this).stop().animate({
                            opacity: '1'
                        });
                    });
                }

Open in new window


Any help is appreciated.
0
I have a piece of code in this fiddle, which simulates an iphone unlock screen, and i would now like to reverse the direction of dragging to unlock such that users drag from right to left to perform the unlock actions.

and this is the fiddle:
https://jsfiddle.net/h6avtu7p/
0
datatable table aligment is not coming correctly  in IE and MOzila  but working fine in Chrome i am sending two images  please check
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <!-- ------------important-------------------- -->
  <link rel="stylesheet" type="text/css" media="screen" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
  


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 

  <script type="text/javascript">
    $(document).ready(function() {
        resizeContent();
    $('#example').DataTable( {
        "spagingType": "list-box",
        "dom": '<"top"lfi<"clear">>rt<"bottom"><"clear">',
        "scrollX": true,
        "scrollY": true,
        "searching":false,
         "ordering": true,
         "fixedColumns": true
    });
     $( ".dataTables_info" ).insertBefore( $( ".dataTables_length" ) );
     

Open in new window

0
Free Tool: Subnet Calculator
LVL 11
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

How can I add background color to my inline list group:

<ul class="list-inline">
     <li class="list-inline-item">Item 1</li>
     <li class="list-inline-item">Item 2</li>
</ul>
0
Hello Experts currently our website requires CAC or PKI to get to login screen.  Is there anyway to capture CAC Id's as users login?  Rather than having 1500 users send us their CAC Id's & manually tied to their account?
0
Hello,

I recently added code from this site (https://www.w3schools.com/howto/howto_css_modal_images.asp). Everything works great except the close function. See page: http://doeringdesign.com/ED/#!/page_AP.

Does anyone have any solutions on how to close this popup? Maybe just have it link to the original page?

Thank you!
0
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
Below codes are working except I am not able to get loop listing  like below. My goal is to just html append to <div>
so the web page will show the UI and our end user can enter information.


 <div class="col-lg-12">
            <Input Type="text" Name="licenseNo" ID="additionalInfo_licenseNo" Onchange="fnSaveSingleData('licenseNo','1')" Placeholder="Enter License No." Class="form-control" Title="License is required!" PrefillValue="No" Required="" />
          </div>



<script> 
function fnGetBondAdditionalInformation() {
    $.ajax({
        url: "http://localhost:5489/BondList.xml",
        success: function (xml) {
            parseSelectXMLBondAdditionalInformation(xml, "test", localStorage.getItem('bondState'), localStorage.getItem('bondName'))
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert("Status: " + xhr.status);
            alert("Error: " + thrownError);
        }
    });
}
function parseSelectXMLBondAdditionalInformation(xml, selectid, bondState, bondName) {
    var html = "";
    var htmlOption = "";
    var additionalInfo = "";
    var selectedBondName = "";
    $('#' + selectid).prop("disabled", false);
    $(xml).find('Bond').each(function (i, e) {
        {
            if (bondState == $(e).find('GeneralInformation').find('State').text() && bondName == $(e).find('GeneralInformation').find('Name').text()) {
                selectedBondName = $(e).find('GeneralInformation').find('Name').text();
          

Open in new window

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

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.