Grow your CSS skills. Land your dream job.

Float Drop / 3 Pixel Text Jog Issue

  • # August 7, 2010 at 11:02 am

    I am having a problem with a float drop caused by the 3 px text jog. I have applied the Holly Hack as well as applied Zoom: 1 – but am still having 3px text jog browser issue on my Contact page. The right content for the Contact information is shifted down.

    Could you please visit http://www.creativeeyedia.com and see where / how I can fix this issue (The right content on the Contact page)?

    Thank you in advance -
    Brian

    # August 7, 2010 at 5:04 pm

    Brian,
    I am very sorry to read of your predicament, I had not heard about this at all. It must be absolutely awful.

    As for your problem which browser are you using? I am not seeing the problem, except for the Safari and Firefox problem on Mac posted previously.

    There are also some other issues which you should address. You are not making use of CSS correctly, you should be styling your p elements with padding not using <br> tags to go to another line. You should also not be using &nbsp to make space below certain elements, but styling those elements with a class and adding padding to make the space you need below them. Span tags are inline elements, meant to stay on the same line and just change a few words of the text. You can style each li with a different class to give the same effect and then you will not need the <br> tags.
    E.g.

    Code:
    <ul id="drywall">
    <li class="bold"></li>
    <li class="italics"></li>
    <li class="bold"></li>
    <li class="italics"></li>
    </ul>

    On the health page, the symptoms should be written as lists, you can give each ul a width and float them side by side. Anything that lists a set of items should be treated as a list.

    On all pages you have closed the header tag (as per your comment) but not the logo tag inside it. The logo tag is effectively being closed by that closing (header) div, but the actual header tag remains open and includes all the content.

    Stylewise, you should make more use of the <p> tag to separate your main text. It makes it easier to read and the flow and visuals are improved by breaking it up into logical chunks.

    # August 9, 2010 at 9:04 am

    Thanks Virtual. It is a tough situation right now and with no assistance for any of us – that is why I came up with this site.

    The content that is dropped is the contact information on the Contact page and is affecting IE6. In DW it is stating I have a 3px text jog and can cause a float drop. I have added the Holly Hack and the zoom:1 with no luck.

    Thank you for the tips you have provided me. I will jump into DW and put them to use…

    Thank you
    Brian

    # August 9, 2010 at 12:09 pm

    Try doing an IE6 only CC and making the width for #rhtContent 340px.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".