SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Text causing entire content to move left

    I've spent an hour drilling down what's causing this misalignment. If I take out the following section, all is good...meaning the entire content is centered as it should be.

    Code:
                        <!-- Birthday -->
                        <div class="extraPadding-Top-10">
                            <div class="rewards-BirthDayWrapper">
                                <p class="rewards-BirthdayHeader">
                                    <span class="bold_black_12">Celebrate your birthday all month long!</span>
                                    Receive a special birthday coupon code to enjoy as often as you want during the entire month of your birthday!
                                </p>
                                <p><img src="images/rewardsprogram/birthdayCake.png" alt="Personalized Rewards Program - Update Your Birthday"/></p>
                            </div>
                            
                            <p style="clear: both;">
                                <span>
                                    <asp:CustomValidator ID="CustomValidator3" runat="server" ControlToValidate="ddlBirthMonth" Display="Dynamic" ClientValidationFunction="ValidateBirthMonth" EnableClientScript="true" ErrorMessage="Please sepecify your birth month" Text="*" ValidateEmptyText="true" />
                                    <asp:Label ID="lblBirthMonth" runat="server" class="S11 LogoColor Bold" Text="Month:" />
                                    <asp:DropDownList ID="ddlBirthMonth" OnChange="SetBirthDayByMonth();" runat="server" />
                                </span>
                                <span >
                                    <asp:CustomValidator ID="CustomValidator5" runat="server" ClientValidationFunction="ValidateBirthDay" ControlToValidate="ddlBirthDay" Display="Dynamic" EnableClientScript="true" ErrorMessage="Please sepecify your birth day" OnServerValidate="ValidateBirthDay" Text="*" ValidateEmptyText="true" />
                                    <label id="lblBirthDay" class="S11 LogoColor Bold">Day</label>
                                    <asp:DropDownList ID="ddlBirthDay" runat="server" />                                   
                                </span>
                                <span>
                                    <label id="lblBirthYear" class="bold_black_12">Year</label>
                                    <asp:DropDownList ID="ddlBirthYear" runat="server" />
                                    <label id="yearHelpText" class="S10">(optional)</label>
                                </span>
                            </p>
                        </div>
    Meaning if I take out specifically above the following, the problem goes away:

    Code:
                                <p class="rewards-BirthdayHeader">
                                    <span class="bold_black_12">Celebrate your birthday all month long!</span>
                                    Receive a special birthday coupon code to enjoy as often as you want during the entire month of your birthday!
                                </p>
    What do I mean?

    Here it is with the text section still there:



    And here is the page with that text taken out:



    this style doesn't make a difference. I can take it out and it's not causing any of the effects you see

    .rewards-BirthdayHeader
    {
    float: left;
    width: 400px;
    margin: 60px 20px 20px 0px;
    }

    So not sure why that particular section is causing my entire content to move left on me.

    If you need more info than this let me know.

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,724
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Hi, is there any chance we could get a live page where this is going on? You only give us a snippet of HTML which doesn't really help us out

    If there isn't a live page, then please provide us with full HTML and CSS so we can recreate the problem (though we wouldn't have images so the live link would be best )
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, is there any chance we could get a live page where this is going on?
    actually I can...I'll send you a private link tomorrow.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,724
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Ok if you only feel safe giving out to private message, please have it to me no later then 9:00 Eastern time (I can help you then)

    If it's anytime after that (until 10 eastern) then you run the risk of me not doing it..until 5:30 or so when I get home from work

    Just giving you my work schedule for tomorrow lol
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,724
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Hi, the pagei s correct while having that code block there because the <td> that you are wrapping it in is wide because the text is st retching all the way across. Nothing else on that page stretches from one end to the other. Table cells are shrink to fit

    Since the text is removed, and nothing else is that wide, the <td> gets smaller in size, and thus screws up the alignment of hte page.

    You really just need to remove the tables there and just setup regular <div>'s to layout hte page, that way you don't have to always be worried. That's the best solution
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  6. #6
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, I no longer use many tables (all tableless) so I forget that <td> tags can cause pain like this if you don't have a width set in them. As far as removing them, I'd love to, but the boss still uses a crapload of tables.

  7. #7
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And actually I have no tables in my code...the part where this problem is happening so not sure why you say it's a table problem. Everything in that section is contained in a <td> but everything in that <td> are either <p> or <div>.

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,724
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    <td>'s are table cells thus part of a table, I didn't specifically look up in the markup to see tables..I just saw the <td>'s there and assumed.

    I assume you also know that <td>'s are only valid when contained within a <tr>? And also only when it's contained iwthin a <table> tag

    Table cells are generating the problem behavior.

    If you didn't know that <td>'s can't be freely used, then I'd consider a validation and get all that sorted out (whatever else you missed )(the validator would be screaming)
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  9. #9
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I hope the last comment was not an attempt to insult my intelligence

    problem still there, it's not the <td> that's the issue... so I'm abandoning this for now.

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,724
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    It wasn't an insult at all, I just assumed it was common knowledge, no offense was meant in that .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •