Blog

My blog serves as a way for me to post solutions to problems I solve at work or during the long hours of freelance work.


Media Screen Only for Standard Devices

by Ezekiel 3. October 2014 03:18

 

 /* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Tags:

CSS

CSS @Media Types

by Ezekiel 17. January 2014 04:20

‚Äč

All
Suitable for all devices.

Braille
Intended for braille tactile feedback devices.

Embossed
Intended for paged braille printers.

Handheld
Intended for handheld devices (typically small screen, limited bandwidth).

Print
Intended for paged material and for documents viewed on screen in print preview mode. Please consult the section on paged media, and the media section of the Getting Started tutorial for information about formatting issues that are specific to paged media.

Projection
Intended for projected presentations, for example projectors. Please consult the section on paged media for information about formatting issues that are specific to paged media.

Screen
Intended primarily for color computer screens.

Speech
Intended for speech synthesizers. Note: CSS2 had a similar media type called 'aural' for this purpose. See the appendix on aural style sheets for details.

TTY
Intended for media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited display capabilities). Authors should not use pixel units with the "tty" media type.

TV
Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).

Tags:

CSS | Design

Radio Buttons not Showing in IE

by Ezekiel 24. November 2010 06:51

 

I was using this CSS class and my radio buttons wouldn't show in IE only.  Worked fine in Firefox.

table.data input
{
    margin: 0;
    color: #781351;
    background: #fffff;
    border-left: 1px solid #bdd3a5;
    border-right: 1px solid #bdd3a5;
    border-top: 0 none;
    border-bottom: 0 none;
    height: 100%;
}

 

You need to give height a value other then a percent.  Modified version.

table.data input
{
    margin: 0;
    color: #781351;
    background: #fffff;
    border-left: 1px solid #bdd3a5;
    border-right: 1px solid #bdd3a5;
    border-top: 0 none;
    border-bottom: 0 none;
    height: 20px;
}

Tags: , ,

ASP.NET | CSS

Find Control in Nested DataList, Repeater, ListView

by Ezekiel 10. December 2009 08:48

 

Have you ever had to deal with finding controls in nested Repeaters or any nested data list control?  If you haven't you will one day.  It's impossible to find the controls in the nested data list controls.  This Class and method will find any control. 

Class -

     public class MyUtility
    {
        public static Control FindControl(string id, ControlCollection col)
        {
            foreach (Control c in col)
            {
                Control child = FindControlRecursive(c, id);
                if (child != null)
                    return child;
            }
            return null;
        }

        private static Control FindControlRecursive(Control root, string id)
        {
            if (root.ID != null && root.ID == id)
                return root;

            foreach (Control c in root.Controls)
            {
                Control rc = FindControlRecursive(c, id);
                if (rc != null)
                    return rc;
            }
            return null;
        }
    }

 

Method -

        // FindControl override
        public override Control FindControl(string id)
        {
            Control bc = null;
            try
            {
                bc = base.FindControl(id);
            }
            catch (HttpException)
            {
                bc = null;
            }
            return (bc != null) ? bc : MyUtility.FindControl(id, this.Controls);
        }

Use -

      HyperLink hyperLink = (HyperLink)FindControl("controlName");

 

Tags: ,

CSS

Fixed Position Background Image Using CSS

by Ezekiel 26. November 2009 05:17

 

CSS -

body
{
    background: #fff url('images/imagename.jpg') 0px 0px no-repeat-y fixed;
    font-family: arial, sans-serif
}

.wrapper {
    background: #fff url('images/imagename.jpg') 0 0 no-repeat fixed;
}

 

HTML -

<body>

    <div class="wrapper">


    </div>

</body>

Tags: , ,

CSS | HTML

Wrap Text Around Image Using CSS

by Ezekiel 22. October 2009 10:54

 

HTML -

<asp:Image ID="Image1" runat="server" CssClass="featuredPic" />
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text


CSS -

.featuredPic{
 border: double rgb(183,183,183);
 border-width: 1px;
 padding-left: 2px;
 padding-right: 2px;
 padding-top: 2px;
 padding-bottom: 2px;
 margin-right: 11px;
 float: left;
}

 

Tags: ,

CSS | HTML

RecentPosts