Results 1 to 9 of 9

Hybrid View

  1. #1
    Join Date
    Sep 2011
    Posts
    226
    Plugin Contributions
    0

    Default CSS Issue with h2

    Hi

    I am having an odd problem with my css that I can't quite figure out.

    Please have a look at the product description of this page:
    pcselect.co.za/index.php?main_page=product_info&products_id=1456#productDescription

    As you can see, the headings for each paragraph are pushed in each time there is a new one. They should all by aligned under each other.

    I am using a the h2 tag for those headings.

    Please take a look at my CSS to see if you can find the cause of this.

    Thanks so much
    S

  2. #2
    Join Date
    Jul 2005
    Location
    Upstate NY
    Posts
    22,010
    Plugin Contributions
    25

    Default Re: CSS Issue with h2

    Your table elements that hold the <h2>s are not being closed before the next one starts, so each one is nested inside all of the ones before it.

    <td class="adata_t12_content" valign="top">

    You have a lot of messy table layout elements, and your page code would be clearer and easier to use if you used semantic <p> elements instead.

  3. #3
    Join Date
    Dec 2009
    Location
    Amersfoort, The Netherlands
    Posts
    2,845
    Plugin Contributions
    25

    Default Re: CSS Issue with h2

    If I am understanding your question, you should remove this form your stylesheet.css on line 1356

    Code:
    #productDescription td {
        padding-left: 7px !important;
    }
    All the h2 tags will be aligned the same to the left again

  4. #4
    Join Date
    Sep 2011
    Posts
    226
    Plugin Contributions
    0

    Default Re: CSS Issue with h2

    Quote Originally Posted by Design75 View Post
    If I am understanding your question, you should remove this form your stylesheet.css on line 1356

    Code:
    #productDescription td {
        padding-left: 7px !important;
    }
    All the h2 tags will be aligned the same to the left again
    Hi

    Thanks, that fixed it (almost).

    If you look at my specifications table here (near bottom of product description):
    pcselect.co.za/index.php?main_page=product_info&products_id=1456

    You will notice that the letters are pressed up right against the border of the table, which doesn't look nice.

    Something that I should have mentioned earlier is that I use TinyMCE editor to edit my product descriptions.

    How can I resolve this while keeping all the headings in line?

    Thanks
    S

  5. #5
    Join Date
    Jun 2005
    Location
    Cumbria, UK
    Posts
    10,266
    Plugin Contributions
    3

    Default Re: CSS Issue with h2

    Have you taken in what Glenn Herbert has said? A large part of your issue is badly-formatted HTML...
    20 years a Zencart User

  6. #6
    Join Date
    Sep 2011
    Posts
    226
    Plugin Contributions
    0

    Default Re: CSS Issue with h2

    Quote Originally Posted by schoolboy View Post
    Have you taken in what Glenn Herbert has said? A large part of your issue is badly-formatted HTML...
    I mentioned part of the cause of that in my previous post.

    I use TinyMCE editor, and paste information from the manufacturers website into TinyMCE. All formatting from the manufacturers website will be pasted into my Product Description.

    Taken that I have 4000 products, it is relatively time consuming to clean up all of the HTML every time I need to add a product.

    I only started having this problem once I started using h2 tags for my paragraph headings. Before, everything seemed to align.

    So I am guessing the problem is caused by the h2 tags (with the messy HTML) in this case?

  7. #7
    Join Date
    Jun 2005
    Location
    Cumbria, UK
    Posts
    10,266
    Plugin Contributions
    3

    Default Re: CSS Issue with h2

    Copying and pasting directly from your MFG's web pages can introduce a RAFT OF PROBLEMS, ranging from CSS and design malfunctions, to invalid markup, to Google penalties...

    Try PASTING clipped stuff into a plain text editor FIRST, then copying it off that editor, then pasting it into TinyMCE.

    This will remove all the rouge formatting.
    20 years a Zencart User

 

 

Similar Threads

  1. Layout issue / css problem with IE only. Can't find the issue!
    By linnx in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 2 Apr 2011, 10:54 AM
  2. Need Help with CSS Issue
    By Globie in forum General Questions
    Replies: 3
    Last Post: 25 Nov 2008, 07:25 PM
  3. CSS issue with firefox3
    By jrod31 in forum Templates, Stylesheets, Page Layout
    Replies: 3
    Last Post: 30 Aug 2008, 06:23 AM
  4. CSS Issue with IE <UL> and <LI>
    By MCanes in forum Templates, Stylesheets, Page Layout
    Replies: 1
    Last Post: 29 May 2007, 02:25 AM
  5. CSS Issue with border
    By bradlawson in forum Templates, Stylesheets, Page Layout
    Replies: 0
    Last Post: 18 Jul 2006, 12:57 PM

Posting Permissions

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