Rick Strahl's Weblog
Wind, waves, code and everything in between...
Ad-free experience sponsored by:
- the market leader of .NET and Java APIs for file formats – natively work with DOCX, XLSX, PPT, PDF, images and more
WebLog Posts in Category CSS
January, 2021 (2)
November, 2020 (2)
October, 2020 (3)
September, 2020 (2)
August, 2020 (1)
July, 2020 (4)
June, 2020 (3)
May, 2020 (5)
April, 2020 (2)
March, 2020 (3)
February, 2020 (3)
January, 2020 (1)
December, 2019 (2)
ASP.NET Core (53)
Visual Studio (52)
Web Services (19)
.NET Core (18)
Web Api (16)
Sql Server (9)
Microsoft AJAX (8)
West Wind Ajax Toolkit (7)
Web Connection (7)
Entity Framework (6)
Internet Explorer (6)
Html Help Builder (5)
Live Writer (5)
Source Control (4)
Markdown Monster (4)
Help Builder (3)
Web Browser Control (3)
Software Development (3)
Visual Studio Code (2)
ASP.NET vNext (2)
.NET Standard (2)
Visual Studio (1)
ASP.NET Markdown (1)
Control Development (1)
Credit Card Processing (1)
Dynamic Types (1)
VS Code (1)
Web Assembly (1)
Web Deployment Projects (1)
Web Design (1)
Using the brightness() CSS Filter to generically highlight Content
July 28, 2020 - Maui, Hawaii
Filters are not new in CSS, but their often overlooked for providing some useful generic behaviors for things like hover styling or nice background effects. In this post I discuss how to use the brightness() filter to create a generic button hover behavior and also briefly discuss the newish `backdrop-filter` property.
Bootstrap Modal Dialog showing under Modal Background
September 14, 2016 - Hood River, Oregon
On more than a few occasions I've run into issues with Bootstrap's Modal dialog rendering incorrectly with the dialog showing underneath the overlay. There are a number of ways around this problem, but none of them are universal that depend on how your pages are laid out. It's especially problematic for applications that dynamically render components where there's no good control on where the elements are placed outside of the components DOM containership. In this post, I describe a few of the workarounds and their limitations.
Code Magazine Article: Flexing your HTML Layout Muscles with Flexbox
March 03, 2016 - Maui, HI
Flexbox is a relatively new CSS based technology that makes it much easier to create structured layouts with HTML and CSS. Based on a containership hierarchy, Flexbox combines the structured features of tables with the free form layout capabilities of arbitrary HTML elements that make it possible to create complex , yet flexible HTML designs much more easily that was otherwise possible. My article in CoDe Magazine describes the reasons for Flexbox, the basics of operation and few practical examples you can use today to put flexbox to use.
Flexbox Containers, PRE tags and managing Overflow
February 15, 2016 - Maui, HI
I ran into nasty problem with PRE tag overflow behavior, which caused content of PRE tags to not respect the boundaries of the container even when overflow rules were set. It turns out the problem was due to Flexbox and the min-width setting that is set differently than standard DOM Block mode rendering.
FontAwesome Fonts and Mime Types in IIS and other Web Servers
January 25, 2016 - Maui, HI
When using Font-Awesome on IIS (and other Web Servers) you might find that the server is not serving the .WOFF2 or .WOFF file that is requested by Chrome for the FontAwesome font files. Although Fontawesome works fine regardless, you'll want to address the 404 error by serving the preferred file. Here's how.
Styling all Text Elements with the CSS :not Filter
January 19, 2016 - Maui, HI
HTML5 has a proliferation of INPUT types and when you need to style these types in an application the list can get quite long. You can cut down on the size of the list and simplify remembering which INPUT types you don't want styled as text, by using the CSS :not() selector. This post shows how.
IPad Scroll Issues with Fixed Content
June 05, 2015 - Hood River, OR
Ran into some issues with fixed headers again in one of my mobile applications where on an iPad it appeared the content wouldn't scroll properly. I've run into this issue a few times and it turns out it's related to positional layout and specifically problematic on iPad Safari browsers. In this post I'll discuss the problem and the relatively simple workarounds.
Using FontAwesome Fonts for HTML Radio Buttons and Checkboxes
February 26, 2015 - Maui, HI
Spruce up your boring checkboxes and radio buttons with custom FontAwesome symbols using a little bit of CSS. If you're tired of boring checkboxes and radio buttons, or you simply want a more consistent look of these controls across browsers and controls check out FontAwesome to provide you with customizable checks and boxes to use for selection boxes. In this post I'll show how to use pure CSS to set up FontAwesome checkboxes and radios and talk about a few gotchas I ran into along the way.
AngularJs ng-cloak Problems on large Pages
June 02, 2014 - Hood River, OR
Angular supports the ng-cloak directive to address hiding initially unrendered template content. I found out the hard way that sometimes with very large pages this mechanism doesn't quite work and still results in slight page flicker of the unrendered template content. In this post I describe the problem and several easy solutions to get around it the edge case scenario.
Using CSS Transitions to SlideUp and SlideDown
February 22, 2014 - Maui, HI
CSS Transitions are a nice way to replace jQuery animations with smoother counterparts. Some transitions however, like height and width transitions can be tricky to handle with pure CSS code due to container sizing issues. In this post I show how create create transitions to mimic most of jQuery's slideUp() and slideDown() functions using CSS and small jQuery plug-in.
Rounded Corners and Shadows – Dialogs with CSS
April 11, 2011 - Maui, Hawaii
CSS 3 provides for box-radius and box-shadow, two features that make it really easy to create attractive floating windows easily with native CSS. Here's what you need to know to create rounded corners and box shadows effectively.
Rounded Corner Rendering in newer Browsers
July 08, 2009 - Hood River, Oregon
An annoying IE position: Relative and OverFlow-Y Bug
May 11, 2009 - Maui, Hawaii
Ran into a real sneaky but that only shows up in pre-IE 8 standards mode versiosn of Internet Explorer. Any parent elements that contain child elements that have position: relative set cannot be contained in the parent container via overflow settings or even a fixed height, resulting in elements spilling out of the bottom of the container. It appears there's no direct workaround short of using a different approach to element positioning.
Unwanted Padding in IE Image Rendering in div Tag
June 05, 2008 - Zurich, Switzerland
I've repeatedly run into an issue where putting an image inside of a div tag as its only content causes IE to render a bit of padding that shouldn't be there. No problem in other browsers, but definitely an issue in IE.
:hover behavior in IE 7
May 13, 2008 - Geneva, Switzerland
Ran into an odd problem today with :hover CSS styling that wouldn't work in IE 7. It turns out that I accidentally wiped out my doctype, but even after restoring the doc type I still ended up with problems in large lists.
Absolute Positioning inside of a Relative Element with CSS
March 28, 2008 - Maui, Hawaii
Getting elements positioned absolutely inside of a container is not terribly obvious and not very discoverable using CSS. But it can make for a cool effect and is a useful feature for many overlay type operations in Html markup. Here's an example of a hover over delete button that pops up on focus of an element.
Creating a scrollable and grouped Repeater Layout
August 23, 2007 - Hood River, Oregon
A couple of people asked me today about a layout I put together for an application. The layout is bascially a scrollable and grouped repeater that looks a little like a ListView control in WinForms. This sort of layout can be great for longer lists when paging is not really the right choice - a common scenario in AJAX applications actually. Here's a quick walk through on how this layout is put together.
Images as Style Attributes
June 29, 2007 - Hood River, Oregon
Here's a little tip that I started using more frequently recently that involves images. When embedding images into pages you're often inclined to use an IMG tag or an ASP.NET image control. In some situations though - especially if the same image repeats on the page - it can be much more efficient...
Some great practical CSS Links
January 22, 2007 - Maui, Hawaii
Ran into a cool collage of CSS formatting related links that show a number of cool practical examples for CSS.