We help IT Professionals succeed at work.

CSS

42K

Solutions

16K

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.

I've been unable to find where the white space is coming from under the header on this page: https://shop.netherbymeats.co.nz/about-us/

Other pages in the site don't have the gap, and the dev tools in Chrome and Firefox don't appear to shed any light on why it's there, as far as I can tell.

This site is built with the Elementor plugin in WordPress.
white-space-under-header.jpg
0
Hi Experts,

How can I resize an image dynamically based on their original width or height, without distorting them?

Let me elaborate...

The images are logos that are uploaded by users, so their dimensions are unknown. Some squares, some vertical rectangles, others horizontal. In other words there are 3 possible shapes.

I'm only in the planning phase for this, but i'll have a container (div) for these images, with a fixed size, let's say 190 x 60px.

So based on the 3 shapes and on the known 190 x 60 container, I'd want to end up with the following if the shape is

  • Square
  • , then the display size would be
  • 60 x 60

  • Horizontal
  • , then the display size would be
  • 190 x calc

  • Vertical
  • , then the display size would be
  • calc x 60

In each scenario, the img would remain its original size if it is less than 190x60 I think

Now, I know calc would be proportional. For example, for vertical, calc (or width) would be 60/[orig_height]x[orig_width]

So, my first question is how to obtain the original dimensions of a given image file?

Secondly, what is the easiest way to do this, considering that I'm using PHP/jQuery/SCSS? I'm leaning towards doing it all on the  PHP side.

Thank you.
0
CSS Text area.   Is it possible to add css to the actual text area rows?  Meaning, if I have a text area in a form that has three rows, can I underline each row so all three have an underline?
0
I have some css over riding my themes CSS, but it doesn't exist anywhere, yet I can see it in the web inspector

paula.darkstarmedia.net:1 is not a style sheet, also I did a search of entire theme and code does not exist. This is also a widget so it has no inline CSS

I need to be able to overwrite this, please help.
http://paula.darkstarmedia.net

It is the comment section at the bottom, the links, not author  

View from web inspector
paula.darkstarmedia.net:1

.recentcomments a {
display: inline !important;
padding: 0 !important;
margin: 0 !important;
}

Open in new window

0
Hey there,  Trying to get a content box to show/hide when you hover over an image.  

I have 3 images, and 3 bio box's.  Want to show zero boxes, until you hover over an image, and then on hover, the associated box shows up.  

Been trying to get this to work with CSS but not working so far.

https://buildertrend.flywheelstaging.com/company/about-2/
0
Hi,
I've been doing work in Javascript this week, and I don't want to end up using inferior packages.

I'm using CSS and HTML to put up a chess board now. Are the javascript primitives for drawing not quite as solid as Phaser?
I've also been watching the Udemy javascript lectures. I'd like to use its apparent effectiveness (made by gamers for gamers?)

I like the preload, create, update .. interface for the various components of the project.
It does sound, in addition.

Any insights or experience concerning this assessment? Do all devices support Phaser?

Thanks
0
Hello experts,

I have attached the following svg image.

20200322_145606-screenshot.png
I was wondering which approach can I adopt to change the color of image from black to grey.

I tried ifranview tool but the output quality is not as expected.

I would like to know if I can directly modify the code or using another tool.

Thank you in advance for your help.

Regards,
Luis.
battery1_test.svg
0
Hi Experts,

I have a primary domain with WordPress, that is mainly content. Now I am building a custom PHP application in a subdomain, and I need to show a form from the subdomain in the primary one, with all includes, etc.

Is it possible to have a iFrame in WP (or anywhere for that matter), so it does not have scroll bars, but actually have a natural flow, sort of  overflow visible?

Any help will be appreciated.
0
Hi Folks,

When printing an EE article, code snippets are jumbled up...they look like this:

print-bad
Gustav Brock submitted a bug report on this more than two years ago:
Code blocks of article print view are unreadable

The EE Mod at the time, Modalot, said this:
Ouch. That renders the printout almost useless. I've filed this internally as a major bug.
Not being aware of Gustav's bug report, I submitted one about two months ago:
Print feature at articles does not format code snippets properly

In response to my bug report, the same Mod (Modalot) informed me that it is an old bug and is "still unresolved". Being more than 2-1/4 years old and filed as a "major bug" by a Mod who has been an EE member for more than 10 years, it seems to me that EE is either incapable of, or not interested in, fixing the bug. As a result, I'm looking to the experts here for a workaround. I want to use the workaround to "print-to-PDF" my 63 EE articles and the Steps at my 47 EE video Micro Tutorials. Although that's 110 publications, only some of them have code snippets, so while I would prefer as automated a solution as possible, having to do some manual effort on each one is fine. I'm also fine with a solution that requires other products, such as Microsoft Word, or other commercial software. Thanks for your ideas! Regards, Joe
0
I have a need to have HTML select options display on more than one line so the width is not super wide on smaller devices.

I have a great solution, a sample of it's usage is illustrated in the attached html.

I need a slight variation on this, in that the "real" program has several selects, I only want the one that limits the width to apply to ONE of the <select> elements in a specific html page.

I'm guessing I could somehow define the whole mechanism that wraps as a class & apply that class ONLY to the <select> element I need to use it on.

I'm not sure how to do that. Can someone advise?

Thank you
test_mline_select.htm
0
What would be 5 REALLY GOOD contrasting colors for a dark background.

212934

Good in contrast & readability.

Somehow I was hoping there was a web tool that one could put in a background color, and a range of suitable contrasting colors would get generated.

Couldn't find anything for a SINGLE color as a starting point.

So, for the color

212934

if you can offer a solid set of 5 colors with great contrast and readability, that's what I need.

If there's a formula for that, please share.

If there's a tool where one can enter a background color and a range of text colors is generated even better!

Sincerely,

OT
0
hi am geting observalble error
observalble
0
Simple question, but I'm having a hard time finding the correct code to adjust.

https://www.wovenpatches.com/webster/patch-borders.html

In the section with the thumbnail images, when you roll over them, a little icon appears that you need to click on to make the image bigger. But it's in a weird spot. I'd like it to be in the center of the thumbnail, or better yet, not exist at all so that you can click anywhere on the thumbnail image.

Thanks!
0
Dear expert

Please read the code below, now I would like to do this: when the property show on 'TotalRecovered' I would CSS to change the color of that column header to green background.
Is there a way to do?

Thanks again

$credential = Import-CliXml -Path 'C:\test\cred.xml'
$attachment = 'C:\test\corona.html'
$smtp = 'smtp.office365.com'
$url = "https://www.worldometers.info/coronavirus/#countries"
$countries = 'Sweden', 'China', 'Iran','USA', 'Italy', 'Finland', 'Norway', 'Denmark', 'Russia'
# Available properties: 'Country,Other', 'TotalCases', 'NewCases', 'TotalDeaths', 'NewDeaths', 'TotalRecovered', 'ActiveCases', 'Serious,Critical', 'Tot Cases/1M pop'
$properties = 'Country,Other', 'TotalCases', 'Tot Cases/1M pop', 'TotalDeaths' , 'TotalRecovered'

$htmlHead = @' 
<style>
	BODY {background-color:white;font-family:verdana;font-size:12px;} 
	TABLE {border-width: 1px;border-style: solid;border-color: black;border-collapse: collapse;} 
	TH {border-width: 1px;padding: 0px;border-style: solid;border-color: black;padding:3px;background-color:#FF0000} 
	TD {border-width: 1px;padding: 0px;border-style: solid;border-color: black;padding:3px} 
	tr:nth-child(odd) {background-color:#d3d3d3;} 
	tr:nth-child(even) {background-color:white;} 
</style>
'@

Add-Type -Path C:\Test\HtmlAgilityPack.dll
$web = New-Object -TypeName HtmlAgilityPack.HtmlWeb
$doc = $web.Load($url)
$header = $doc.DocumentNode.SelectNodes('//th') | Select-Object -ExpandProperty InnerText | 

Open in new window

0
Dear expert, I could make the code work as I wanted. Now the below script, if I run it in powershell as a not saved operation just open the powershell ISE and copy it to a untitle powershell window and run, this work perfectly, the output also works, however when I save this as a name: like corona.ps1 and put this in a task schedule plan, this is not showing correct the css seems not applied when I did it, I wonder why?

Thx

$credential = Import-CliXml -Path 'C:\test\cred.xml'
$attachment = 'C:\test\corona.html'
$htmlout = @()
$smtp = 'smtp.office365.com'
$url = "https://www.worldometers.info/coronavirus/#countries"
$countries = 'Sweden', 'China', 'Iran','USA', 'Italy', 'Finland', 'Norway', 'Denmark', 'Russia', 'Country,Other', 'TotalCases', 'NewCases', 'TotalDeaths', 'NewDeaths', 'TotalRecovered', 'ActiveCases', 'Serious,Critical', 'Tot Cases/1M pop'
$properties = 'Country,Other', 'TotalCases', 'Tot Cases/1M pop', 'TotalDeaths'
Add-Type -Path C:\Test\HtmlAgilityPack.dll
$web = New-Object -TypeName HtmlAgilityPack.HtmlWeb
$doc = $web.Load($url)
$header = $doc.DocumentNode.SelectNodes('//th') | Select-Object -ExpandProperty InnerText | ForEach-Object {($_ -replace '&nbsp;', ' ').Trim()}
$htmlout = $doc.DocumentNode.SelectNodes('//tr') | Select-Object -Skip 1 | 
ForEach-Object { $i = 0 
$out = [ordered]@{} 
$_.SelectNodes('td') | ForEach-Object { $out[$header[$i++]] = $_.InnerText.Trim() } 
$htmlHead = 
@' 
<style> 
BODY 

Open in new window

0
Trying to find a way to allow a <select> element to have <option> items span multiple lines.

Found this & it looks great: http://jsfiddle.net/ZTs42/2/

Can't get it to work on my situation.

In head section, I have these:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.3.0/jquery.selectBoxIt.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.3.0/jquery.selectBoxIt.min.js"></script>

and this css:

.selectboxit-container .selectboxit, .selectboxit-container .selectboxit-options {
                  width: 400px; /* Width of the dropdown button */
                  border-radius:0;
                  max-height:100px;
            }

            .selectboxit-options .selectboxit-option .selectboxit-option-anchor {
                  white-space: normal;
                  min-height: 30px;
                  height: auto;
            }

This in HTML: (first few options only shown)

<select name="sprop">
                        <option value="">--- Select a Property ---</option>
                                                      <option value="10644" >2300 East Valley Parkway, Space 152, Escondido, 92027-SN: 76018345, test date 02/22/2020</option>
                                                      <option value="10645" >2300 East Valley Parkway, Space 152, Escondido, 92027-SN: AB7593, test date 02/22/2020</option>
                                                      <option value="10647" >2300 East Valley Parkway, Space 152, Escondido, 92027-SN: 98765432, test date 02/22/2020</option>
                                                      <option value="10648" >2300 East Valley Parkway, Space 152, Escondido, 92027-SN: 123ABC465, test date 02/22/2020</option>
                                                      <option value="10646" …
0
I have a select element where options are built from parts of a database table rows. The content is typically up to 100 characters in length.

We are trying to build a responsive interface using bootstrap. On the phone version (class="col-xs-n"), the select pulldown extends FAR to the right of the viewable area; to see items requires moving to the right on the phone, a messy and non-professional look.

The customer requires that most of the content (at least 80%) needs to be in each <option>xxx</option> element.

I have tried inserting a line break (<br>) in the middle of the string, doing that only shows the portion AFTER the <br> in the option pulldown.

There must be a way to do this or another technique for showing a pulldown list with VERY lengthy option content.

Suggestions?
0
Hi everybody.
So I have the website1.com which links some resources from the website2.com/static (both have SSL active): resources are images, css, javascript and fonts. All resources are correctly loaded but fonts. For fonts I get a CORS issue:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.webintenerife.com/static/fonts/Chandstate.otf. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

downloadable font: download failed (font-family: "ChandState" style:normal weight:400 stretch:100 src index:0): bad URI or cross-site access not allowed source: https://www.website2.com/static/fonts/Chandstate.otf

Open in new window


I have set the header in my .htaccess both in website2.com/static and in website2.com:

<FilesMatch "\.(ttf|otf|eot|woff|woff2)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "https://website1.com"
  </IfModule>
</FilesMatch>

Open in new window


Any idea?
Thank you in advance
0
Why does the CSS in the 2nd row of this simple code get ignored?

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css">

    <title>Backflow Assembly & Test Report Form</title>
    <style>
        .nopadding {
            padding: 0 !important;
            margin: 0 !important;
        }
       
        .wrapper {
            max-width: 767px;
            min-width: 480px;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <form method="POST" name="st" action="chk_login.php" onSubmit="return chk_vals();">
            <div class="container-fluid" style="background-color: #DFDFDF;" >
                  <div class="row" style="background-color: black;">
                        <div class="col-xs-2 col-sm-2 col-md-2" …
0
Here is the current live version of the page I want to change.

http://www.fobgfc.org/?page=team&side=1&season=2019

When viewed on a phone the fixtures CSS shows them like image01.

mobile emulator of current live version.
My problem is that each fixture takes up too much space.  So for narrow widths (<600px) I have changed the PHP/HTML and CSS via media queries to show only Date, Opposition and Competition so it all fits on one line.  This is image02 from my test site http://www.col-b.uk/?page=team&side=1&season=2019

phone emulation image from my test site
So far so good.

The end goal is to toggle each fixture to show a popup with the detail of scores etc.  What is the easiest way to do this?  JQuery toggle or javascript alert box? Or another way?

In either case do I need a separate button to tap to toggle, or can I use the fixture row itself?

All help appreciated.

PS I still don't know how to preview a question before asking it, so hope this turns out well!
0
I'm trying to get the buttons on my home page to be the same size and centered.  This clearly isn't my strong point.

How do i modify the css so these buttons will be forced to the same width (why is one so wide when the text isn't that wide?) and centered on the page?

Page is at https://nyackboatcharter.com/.

Thanks.
0
The following page: http://web.sonoma.edu/exed/excel/ displays fine on a computer and tablet but does not render well on a phone for some reason. I am not sure what is causing the problem. I am hoping that someone can help me fix the problem. index.html
0
I have a SSRS report where in one text box I want to only display part of the FIELD that populates the textbox.
For example, if the text in the field is "LASTNAME, FI - ID", I want to display only "LASTNAME, FI". So in the query I have Select LASTNAME + ', ' + LEFT(FIRSTNAME,1) + ' - ' + ID.
I can't just change the SELECT statement to leave off ID because I need that for grouping and sorting.
I changed the placeholder properties to recognize HTML tags
Something like:
Select LASTNAME + ', ' + LEFT(FIRSTNAME,1) +<font size= "3">' + ' - ' + ID + '</font>'
works, but I can't find a way to hide the ID
I tried:
Select LASTNAME + ', ' + LEFT(FIRSTNAME,1) +<div style="visibility:hidden">' + ' - ' + ID + '</div>'
References say that only certain inline CSS attributes are supported, so visibility must be one that isn't.
Any ideas, other than using one field for sorting and another for display.
0
My Wordpress banner at www.barnwellmd.com overlaps when the page is full size in a desk top (see below). How do I fix that?
banner
0
Hi Experts


Could you point how to configure this Bootstrap buttons to be correctly distributed accordingly with this layout?

img010

<div class='row'>

      <div class="panel panel-primary">
      
          <div class='row'>
          
            <div class='col-md-8 pull-right'>
              <div class="btn-group" role="group">
                <button type="button" class="btn btn-primary" onclick="hotsite.vitrine.novo();">
                  <i class="fas fa-video" aria-hidden="true"></i> Minhas Fotos
                </button>
              </div>
            </div>
            
            <div class='col-md-6 pull-right'>
              <div class="btn-group" role="group">
                <button type="button" class="btn btn-primary" onclick="hotsite.vitrine.novo();">
                  <i class="fas fa-video" aria-hidden="true"></i> Todas as Fotos
                </button>
              </div>
            </div>
              
            <div class='col-md-4 pull-right'>
              <div class="btn-group" role="group">
                <button type="button" class="btn btn-primary" onclick="hotsite.vitrine.novo();">
                  <i class="fas fa-video" aria-hidden="true"></i> Enviar Foto
                </button>
              </div>
            </div>
              
          </div>  
       
    </div>
</div>

Open in new window


Thanks in advance!
0

CSS

42K

Solutions

16K

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.