Click here to Skip to main content
Click here to Skip to main content

Internet Explorer 7 and CSS….DOH!

, 3 Apr 2009
Rate this:
Please Sign up or sign in to vote.
I wanted a cheap, simple visual indicator similar to a progress bar. Note, not the kind of dynamic progress bar used when updating AJAX pages, more of a single-bar graph. It should have been simple task. My plan was to use a Div as a container, implemented through a panel because they are more conv

I wanted a cheap, simple visual indicator similar to a progress bar. Note, not the kind of dynamic progress bar used when updating AJAX pages, more of a single-bar graph. It should have been simple task.

My plan was to use a Div as a container, implemented through a panel because they are more convenient to work with. Inside the Div I would put a Label control (which renders as a Span element) with an opaque background color, 100% height, and the width being the percentage done of the progress bar value.

I dropped the controls on the page, added a function to set the percentage and it looked good. And then I looked closer…what the heck (WTH)?

You can see the label is shifted down one pixel. Not a big deal, but…perfection is in the details.

I spent time playing with CSS settings trying to get the Label inside the Div to line up correctly. I tried using a read-only textbox instead of a label but alas, IE7 and CSS are more stubborn then I am.

I then tried using a Div inside of a Div with a Label in the inner Div to hold the text. It worked but the Asp code was ridiculous looking with its three nested elements. The code was too ugly for me to tolerate.

Finally, I got it back to simple code by putting a Label inside of a Label without using a Div.

Here is the Asp code for both versions of the ProgressBar:

    You have this much gas left in the tank:<br /> 
    <asp:Panel ID="ProgressBarContainer1" runat="server" 
        Height="18px" Width="324px" 
        Style="border-color: Black; border-width: 1px; border-style: solid;" 
        HorizontalAlign="Left">
        <asp:Label  ID="LabelProgressBar1" runat="server" 
            Text="10%"
            Height="100%" 
            Width="10%"
            BackColor="Yellow">
        </asp:Label>
    </asp:Panel>
    <br />
    Your project is this late: <br />
    <asp:Label ID="ProgressBarContainer2" runat="server" 
        Height="18px" Width="324px" 
        Style="border-color: Black; border-width: 1px; border-style: solid;">       
        <asp:Label ID="LabelProgressBar2" runat="server" 
            Text="10%" 
            Height="100%" 
            Width="10%" 
            BackColor="Yellow">
        </asp:Label>
    </asp:Label>

Here is the function that updates the Progress Bar. I left the code in the affects both implementations:

    // ---- UpdateProgressBar -------------------------------

    void UpdateProgressBar(int Percent)
    {
        if (Percent < 0)
            Percent = 0;
        if (Percent > 100)
            Percent = 100;
 
        // first implementation
        LabelProgressBar1.Width = new Unit(Percent, UnitType.Percentage);
        LabelProgressBar1.Text = String.Format("{0}%", Percent);
 
        // second implementation
        LabelProgressBar2.Width = new Unit(Percent, UnitType.Percentage);
        LabelProgressBar2.Text = String.Format("{0}%", Percent);       
    }

Here are both versions of the ProgressBar:

Of course, this would be much nicer as a user control…but I didn't want to take away from the two points of this post:

  • Sometimes easy things are hard.
  • Sometimes it's hard to find easy solutions.

I hope someone finds this helpful.

Steve Wellens

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Steve Wellens
EndWell Software, Inc.
United States United States
I am an independent contractor/consultant working in the Twin Cities area in Minnesota. I work in .Net, Asp.Net, C#, C++, XML, SQL, Windows Forms, HTML, CSS, etc., etc., etc.

Comments and Discussions

 
QuestionHow about IE8? Pinmemberf r i s c h2-Apr-09 23:04 
AnswerRe: How about IE8? PinmemberSteve Wellens3-Apr-09 4:13 
GeneralMy solution Pinmemberzlezj2-Apr-09 21:25 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140709.1 | Last Updated 3 Apr 2009
Article Copyright 2009 by Steve Wellens
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid