locked
HTML/CSS problems... RRS feed

  • Question

  • User-1200636353 posted

    HTML and CSS drives me nuts.  I have the following code:


    <table cellspacing="0px" cellpadding="0px" style="width: 100%;">
        <tr>
            <td colspan="3" style="font-size: 13px; height: 25px; border: 1px solid black; width: 100%;">
                ..........
            </td>
        </tr>
        <tr id="SearchBox" runat="server">
            <td style="width: 5px; background-color: Black;"></td>
            <td>
                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                    
                    ............
                    
                    </ContentTemplate>
                </asp:UpdatePanel>
            </td>
            <td style="width: 5px; background-color: Black;"></td>
        </tr>
    </table>


    If you notice the second row, there is three cells.  The first and last cell should be 5px in width, and have a black background.  The black background shows, but the cells are not 5px in width.  I can change the 5 px to 1, to 10, to 100, and the size of the cells do not change.  Is there something I am not seeing?  I have been looking this over off and on for days now, and I have tried tons of things, and I can't get it to work.  What I am trying to accomplish is not hard, and from what I can tell, everything looks right.


    Any help on this is greatly appreciated.

    Wednesday, July 22, 2009 9:27 PM

Answers

  • User187056398 posted

    Since you are setting the width of a cell, you must tell the cell what to do with overflow (or it will think you're not really serious about the width).

    <td style="width:5px; background-color: Black;  overflow:hidden">

    HTML and CSS drives me nuts.

    You're preaching to the choir brother.  Innocent

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, July 22, 2009 10:36 PM
  • User-158764254 posted

    I created an empty page with this and the left and right cells were 5px wide for me

        <table cellspacing="0" cellpadding="0" style="width: 100%;">
            <tr>
                <td colspan="3" style="font-size: 13px; height: 25px; border: 1px solid black;">
                    ..........
                </td>
            </tr>
            <tr id="SearchBox" runat="server">
                <td style="width: 5px; background-color: Black;">
                </td>
                <td>
                    other content
                </td>
                <td style="width: 5px; background-color: Black;">
                </td>
            </tr>
        </table>


    i only checked it in ie8 and ff3 though

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, July 22, 2009 10:58 PM

All replies

  • User-158764254 posted

     try removing the width:100%; from the first td. 

     

    Wednesday, July 22, 2009 10:32 PM
  • User187056398 posted

    Since you are setting the width of a cell, you must tell the cell what to do with overflow (or it will think you're not really serious about the width).

    <td style="width:5px; background-color: Black;  overflow:hidden">

    HTML and CSS drives me nuts.

    You're preaching to the choir brother.  Innocent

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, July 22, 2009 10:36 PM
  • User-1200636353 posted

    did both: removed the width: 100%, and added overflow:hidden to the td elements in question.


    neither change had any affect.

    Wednesday, July 22, 2009 10:45 PM
  • User-1200636353 posted

    too many long nights working on this project...


    turns out, after working on another problem, i found in my theme css file a section for "td"...


    ... and in that, was padding: 5px...


    so, that lead to my problem.


    its fixed now; sorry to waste your guy's time.

    Wednesday, July 22, 2009 10:57 PM
  • User-158764254 posted

    I created an empty page with this and the left and right cells were 5px wide for me

        <table cellspacing="0" cellpadding="0" style="width: 100%;">
            <tr>
                <td colspan="3" style="font-size: 13px; height: 25px; border: 1px solid black;">
                    ..........
                </td>
            </tr>
            <tr id="SearchBox" runat="server">
                <td style="width: 5px; background-color: Black;">
                </td>
                <td>
                    other content
                </td>
                <td style="width: 5px; background-color: Black;">
                </td>
            </tr>
        </table>


    i only checked it in ie8 and ff3 though

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, July 22, 2009 10:58 PM