Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Exclamation Pages not showing up right in IE or Chrome

    I re-built my office's website. Everything looks good in Firefox. However, one page looks bad in Chrome, and the other looks really bad in Internet Explorer. I have for the most part taught myself the HTML that I know, but not so good at figuring out bugs (especially browser specific).

    The website is www.baileytax.com

    The page that looks bad in Chrome, which has weird spacing, is http://www.baileytax.com/new/services.html

    The page that looks bad in IE is http://www.baileytax.com/new/ea.html
    I am assuming that the issue with IE is something to do with the video.

    Can someone take a look and tell me what the issues with the HTML are? Thank you very very much!

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by vbgamer89 View Post
    The page that looks bad in Chrome, which has weird spacing, is http://www.baileytax.com/new/services.html

    The page that looks bad in IE is http://www.baileytax.com/new/ea.html
    I am assuming that the issue with IE is something to do with the video.

    Can someone take a look and tell me what the issues with the HTML are?
    I think you need to be more specific; "looks bad" is not particularly descriptive.

    I see at least six spacing/alignment issues in the design of the first page.

    I don't see any issues with the video in IE11.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    vbgamer89 (08-11-2013)

  • #3
    New Coder
    Join Date
    Jul 2013
    Posts
    39
    Thanks
    0
    Thanked 2 Times in 2 Posts
    did you put reset.css?

  • #4
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Arbitrator View Post
    I think you need to be more specific; "looks bad" is not particularly descriptive.

    I see at least six spacing/alignment issues in the design of the first page.

    I don't see any issues with the video in IE11.
    The first page (services), when opened with Chrome has issues with large gaps between paragraphs, which is not present in FF or IE.

    What I just noticed is that the bullets are not aligned in IE or FF though, so that is a separate issue (or maybe stems from the same thing. The bullets appear to line up in Chrome though.

    The second page (ea), is showing as the text only taking up about half of the width it should be. I am wondering if it is just my IE being out of date or something.

  • #5
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by blogfreakz View Post
    did you put reset.css?

    I am not sure what you are talking about by reset.css

  • #6
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Maybe this will help to show how it is showing up in the different browsers, to see what my issues are.

    IE ea page - top (text column too narrow)


    IE ea page - bottom (stacking logos, offset video)


    IE services page (bullets not in line)


    Chrome services page (large gaps between paragraphs)


    I appreciate your help!

  • #7
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by vbgamer89 View Post
    The first page (services), when opened with Chrome has issues with large gaps between paragraphs, which is not present in FF or IE.
    I am not sure of the exact cause of this issue, but I have an idea as to the cause: invalid code.

    Below is the section of code at issue:
    Code:
    <div class="art-content-layout">
        <div class="art-content-layout-row">
        <div class="art-layout-cell layout-item-2" style="width: 100%;">
    
    <!--Start Body-->
    <p><b><img width="300" height="200" alt="" src="./images/accountingimages.jpg" style="float: right;" /><font size="+1">Services</b></font>
    </p>
    <p>We provide a number of financial services to meet all of our clients needs. 
    
    <a href="./taxprep.html"></p><p><b>Tax</b></a>
    
    <ul>
        <li>    <a href="./services/taxprep.html">Individual</a></li>
        <li>    <a href="./services/taxprep.html">Business</a></li>
        <li>    <a href="./services/payroll.html">Payroll</a></li>
        <li>    <a href="./services/taxprep.html">Estates and Trusts</a></li>
    </ul>
    
    </p><p><b><a href="./services/taxdebt.html">Representation</a></b>
    
    <ul>
        <li>    <a href="./services/audit.html">IRS Audits</a></li>
        <li>    <a href="./services/taxdebt.html">Tax Liability Resolution</a></li>
    </ul> 
    
    
    </p><p><b><img width="300" height="220" alt="" src="./images/fountainpen.jpg" style="float: right;" /><a href="./services/accounting.html">Accounting</a></b>
    
    <ul>
        <li>	<a href="./services/accounting.html">Financial Statements</a></li>
        <li>    <a href="./services/accounting.html">Record Keeping</a></li>
        <li>    <a href="./services/quickbooks.html">Quickbooks ProAdvisor</a></li>
        <li>    <a href="./services/quickbooks.html">Software Support</a></li>
    </ul> 
    
    
    </p><p><b><a href="./services/payroll.html">Payroll</a></b>
    
    <ul>
        <li>    <a href="./services/payroll.html">Regular Payroll Preparation</a></li>
        <li>    <a href="./services/payroll.html">Payroll Tax</a></li>
        <li>    <a href="./services/payroll.html">W-2's</a></li>
    	<li>	<a href="./services/coadvantage.html">CoAdvantage Strategic Partner</a></li>
    </ul> 
    
    
    </p><p><b>Business Services</b>
    
    <ul>
        <li>    <a href="./services/payroll.html">Weekly, we prepare payroll</a></li>
        <li>    <a href="./services/accounting.html">Monthly, we prepare accounting, financial statements, sales tax, and payroll tax for businesses and not-for profits.</a></li>
        <li>    <a href="./services/taxprep.html">Annually, we prepare Corporate and Partnership income tax returns for businesses and the annual 990 not-for-profit IRS filing.</a></li>
        <li>    <a href="./services/quickbooks.html">As Needed, we provide QuickBooks and software support.</a></li>
    </ul> 
    
    </p><p><b>Consulting</b>
    
    <ul>
        <li>    Personal Financial Planning</li>
        <li>    Business Development</li>
    	<li>    Entity Structuring for Tax Minimization and Asset Protection</li>
    </ul> 
    </p>
    <br>
    <div align="center"><img width="600" height="220" alt="" src="./images/financial-services.jpg" /></div>
    	
    <!--End Body-->
        </div>
        </div>
    </div>
    
                    </div>
                    <div class="cleared"></div>
                    </div>
    
    		<div class="cleared"></div>
        </div>
    </div>
    You should notice a number of issues:
    • You have many mis-nested tags. You cannot use structures like <p><a></p><b>Tax</b></a>. The correct structure in a case like that is <p><a><b>Tax</b></a></p>. (Do note, however, that you are misusing tags here. The semantically correct structure is <h1><a>Tax</a></h1> since this link represents a heading, not a paragraph.)
    • You have an invalid document structure. For example, in HTML, p elements cannot contain "flow content" such as ul elements.
    • You're using obsolete elements such as font.
    • You're using obsolete clearing techniques. You should never need to create a "clearing div". All of those clearing elements should be removed; clearing can be done entirely through CSS.
    • As alluded to in the first bullet point, you're not marking up elements based on their meanings. "Tax", "Representation", "Accounting", etc. are headings and should be marked up using h1-h6 elements.

    Additionally, you need to fix your broken document type declaration which has two stray brackets at the end ([]). Frankly, I would just change the whole thing to the much simpler <!doctype html> of HTML5.

    That stuff needs to be fixed (particularly the first two items and the doctype issue) before troubleshooting further. You can verify that your code is fixed by running it through the W3C Markup Validator.

    Quote Originally Posted by vbgamer89 View Post
    The second page (ea), is showing as the text only taking up about half of the width it should be. I am wondering if it is just my IE being out of date or something.
    What version of IE are using? I'd update to the latest version available on your system. In IE11, which is part of the Windows 8.1 Developer Preview I have installed, I don't see any issue similar to what you describe.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    vbgamer89 (08-11-2013)

  • #8
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I believe that I corrected the items that you said, other than the header vs. paragraph. It is also passing everything on http://validator.w3.org/ ... it still is not showing up right.

    Chrome, Safari, and Opera - there are large gaps after "Tax" and "Accounting"

    IE & FF - the bullets next to the pictures are not aligned with the ones that are not

    (and as a side note, it shows up perfect in the previewer on CoffeeCup)

    I tried the following resets, and none of them fixed the issues:
    -Eric Meyer’s “Reset CSS” 2.0
    -HTML5 Doctor CSS Reset
    -Yahoo! (YUI 3) Reset CSS
    -Universal Selector ‘*’ Reset
    -Normalize.css 1.0

    I am not so worried about the other page. I think that the computer I was looking at it on just wasn't up to date.

  • #9
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by vbgamer89 View Post
    I believe that I corrected the items that you said, other than the header vs. paragraph. It is also passing everything on http://validator.w3.org/ ... it still is not showing up right.
    There are still incorrect uses of elements, but at least you've cleaned up the basic syntax issues.

    Quote Originally Posted by vbgamer89 View Post
    Chrome, Safari, and Opera - there are large gaps after "Tax" and "Accounting"

    IE & FF - the bullets next to the pictures are not aligned with the ones that are not
    What a strange issue. Apparently, all of these issues are related to a -15px left margin applied to your li elements.

    They seem to be triggered by overflow-y: hidden. overflow-y: hidden turns your elements into a containing block which causes one of two scenarios:
    • In Gecko/Trident browsers (Firefox/IE), the overflow-y: hidden elements are shortened to accommodate the float and their negative margins are suppressed.
    • In Blink/WebKit browsers (Chrome/Opera/Safari), the elements with overflow-y: hidden clear the floats as if they had float: right specified. The negative margin is maintained.

    The only spec explanation I can come up with is:
    Quote Originally Posted by CSS2.1
    Negative values for margin properties are allowed, but there may be implementation-specific limits.
    That's not particularly helpful.

    Solution 1 is to remove the overflow-y declaration, which isn't serving any purpose anyway. You may as well remove the purposeless overflow-x declaration while you're at it.

    Solution 2 is to remove the -15px left margin from your li elements. I have never seen any good reason to use negative margins in the first place and you can accomplish the same thing by reducing the left margin applied to the ul element. At your current font size of 14px, 0.929em would be the new margin-left value to apply to the ul element. Or, if you want to make an exact substitution, this code will do the trick:

    Code:
    .art-postcontent ul { margin: 1em 0 1em -webkit-calc(2em - 15px); margin: 1em 0 1em calc(2em - 15px); }
    Solution 3 is to combine Solutions 1 and 2.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    vbgamer89 (08-11-2013)

  • #10
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Smile

    Quote Originally Posted by Arbitrator View Post
    Solution 1 is to remove the overflow-y declaration, which isn't serving any purpose anyway. You may as well remove the purposeless overflow-x declaration while you're at it.

    Solution 2 is to remove the -15px left margin from your li elements. I have never seen any good reason to use negative margins in the first place and you can accomplish the same thing by reducing the left margin applied to the ul element. At your current font size of 14px, 0.929em would be the new margin-left value to apply to the ul element. Or, if you want to make an exact substitution, this code will do the trick:

    Code:
    .art-postcontent ul { margin: 1em 0 1em -webkit-calc(2em - 15px); margin: 1em 0 1em calc(2em - 15px); }
    Solution 3 is to combine Solutions 1 and 2.
    THANK YOU SO MUCH! I would have never figured that out. It took me a second to realize you were talking about the CSS file. I took out the negative margin and dropped in that code, and voilà!

    I am not very familiar with CSS, so it was easier to use a template than rebuild the whole thing in (outdated) html. I never would have touched the style.css file otherwise.


  •  

    Posting Permissions

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