Skip navigation
samantha.m
Currently Being Moderated

Text overlapping issue - IE

Apr 5, 2013 8:01 AM

Tags: #ie #cs6 #dw #layout_view

On this page of my website (http://static.macksrecycling.com/non_ferrous.html) the text at the very bottom overlaps the green footer, but ONLY in IE. It looks fine in Modzilla. If I move the footer down it fixes it in IE, but then there is a huge gap in Modzilla. Any suggestions how to fix this?? I'd think it'd be an easy fix, but it hasn't turned out that way for me.

 
Replies
  • Currently Being Moderated
    Apr 5, 2013 8:36 AM   in reply to samantha.m

    Hi Samantha,

     

      Your HTML/CSS is a mess! I would recommend something like this   http://www.projectseven.com/products/tools/composer/index.htm to built

    the page structure you want.

     

    And start all over again!

     

    David

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Apr 5, 2013 11:14 PM   in reply to samantha.m

    The results that come from W3 are very self-explanatory. The ones in 'red' are the ones that make browsers choke. Read the 'description' that is shown along with the faulty code and you can easily fix those errors.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 5, 2013 11:34 PM   in reply to samantha.m

    http://static.macksrecycling.com/non_ferrous.html looks ok to me in IE8 and IE9, maybe you fixed it?

     

    Oh ok I see your problem now, although I personally dont see the issue in IE others could be because their browser text size may be different. YOU CANNOT use absolutely positioned <divs> the way you have. The very nature of the term absolute position means the <div> stays exactly where you instruct them to be and WILL NOT move with the natural html flow. Therfore this means the construction is flawed because different browsers show text slightly differently. If you use absolute positioning this allows for no flexiblity if the text in one browser or the other is slightly bigger.

     

    Again this has nothing to do with validation. Please stop putting so much emphasis on validation. A page DOES NOT have to validate 100%. Infact as I've said for years validation is no guarantee a page will show correctly anyway. Infact a page can validate and render incorrectly. You need to be broader in your approach to validation.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 6, 2013 5:34 AM   in reply to osgood_

    Therfore this means the construction is flawed because different browsers show text slightly differently. If you use absolute positioning this allows for no flexiblity if the text in one browser or the other is slightly bigger.

     

    While all of your points are valid, the real problem is this: in a static text container, if the visitor's browser is set to display text larger than your browser, the container will likely need to expand vertically. Well designed pages anticipate that vertical expansion and can accommodate it by allowing that expansion to push other elements down on the screen so that the net effect preserves the layout. When those containers happen to be absolutely positioned, each container behaves as if nothing else were on the page. The vertical expansion of one of those containers simply ignores subsequent layout elements, and spills over their boundaries. The net result is an overlapping mess. That's the threat, and it's the reason that absolute positioning has never been suitable as a general layout tool.

     

    Please stop putting so much emphasis on validation. A page DOES NOT have to validate 100%. Infact as I've said for years validation is no guarantee a page will show correctly anyway.

     

    Each person has their style. This well-known option of yours has been amply documented on these boards for many years now. So, we could say the same back to you - please stop diminishing the value of validation. My opinion which has also been amply documented on these boards is that I'm not willing to debug layout problems on a page that is known to contain invalid code. I am willing to look at the kinds of validation errors and make a decision based on them, but you have to start that process by validating the code. For example, a page that contains nothing but missing alt attributes, or type="text/javascript" attribute/value pairs, is essentially 'layout' valid. But one that contains unclosed or missing tags needs attention before any troubleshooting effort. That's my style and my opinion. It is as valid for me, as yours is for you. And my opinion has served me well for lo these many years!

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 6, 2013 6:22 AM   in reply to MurraySummers

    MurraySummers wrote:

     

    Therfore this means the construction is flawed because different browsers show text slightly differently. If you use absolute positioning this allows for no flexiblity if the text in one browser or the other is slightly bigger.

     

    While all of your points are valid, the real problem is this: in a static text container, if the visitor's browser is set to display text larger than your browser, the container will likely need to expand vertically. Well designed pages anticipate that vertical expansion and can accommodate it by allowing that expansion to push other elements down on the screen so that the net effect preserves the layout. When those containers happen to be absolutely positioned, each container behaves as if nothing else were on the page. The vertical expansion of one of those containers simply ignores subsequent layout elements, and spills over their boundaries. The net result is an overlapping mess. That's the threat, and it's the reason that absolute positioning has never been suitable as a general layout tool.

     

     

    Correct, you're just echoing what I'm saying, about absolutely positioning in this construction, being flawed.

     

     

     

    MurraySummers wrote:

     

    Please stop putting so much emphasis on validation. A page DOES NOT have to validate 100%. Infact as I've said for years validation is no guarantee a page will show correctly anyway.

     

    Each person has their style. This well-known option of yours has been amply documented on these boards for many years now. So, we could say the same back to you - please stop diminishing the value of validation. My opinion which has also been amply documented on these boards is that I'm not willing to debug layout problems on a page that is known to contain invalid code. I am willing to look at the kinds of validation errors and make a decision based on them, but you have to start that process by validating the code. For example, a page that contains nothing but missing alt attributes, or type="text/javascript" attribute/value pairs, is essentially 'layout' valid. But one that contains unclosed or missing tags needs attention before any troubleshooting effort. That's my style and my opinion. It is as valid for me, as yours is for you. And my opinion has served me well for lo these many years!

     

    What is the point in informing people to validate their code before assessing the real issue, in this case a flaw with the basic construction of the website. They waste a lot of time validating and it still won't improve the problem, makes no sense to me at all wasting their time, especiallly when they don't understand the results thrown back at them by the validator service.

    I do respect your opinion but think sometimes helping people isnt about forcing your own expectations on them. For sure if you don't want to help that's your choice but negative suggestions isn't very helpful either. As you say persoanally I've never found validation to be that helpful. I do however tell people they MUST write code that is of a standard that works, that doesnt mean it needs to 100% validate. My approach has also served me well too.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 6, 2013 9:53 AM   in reply to osgood_

    Come on guys relax!

     

    Both approaches will not learn someone with no code knowledge how to fix this page.

     

    This: http://www.projectseven.com/products/tools/composer/index.htm will help someone with no code experience to build

    complex pages. And as a a bonus it validates a 100%! And is responsive!

     

    So everybody is happy!

     

    David

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 6, 2013 10:59 AM   in reply to BITESBITER

    There is a basic conflict here.

     

    Firstly, lots of us come to this forum to learn something. Purchasing something from Project 7 (which is a great company) may not necessarily cause the OP to learn anything.

     

    Thw W3C does have validation tools and a complete school that will teach someone how to write good code for the Internet. And not all code will validate with the W3C validation tool (I made a number of websites with Flash on them that never did, but they did display correctly in all web browsers I tried them out on).

     

    So are we solving the problem for samantha.m or are we creating further problems by talking above her head?

     

    I have a few suggestions:

     

    1. samantha.m can purchase a pre-designed website from Project 7.
    2. She can also use Dreamweaver's own web page templates (File>New>Blank Page>HTML, then pick what she wants from the list) that will create a basic page that will work (and validate).
    3. She can also have us make suggestions here.

    One thing she does need to do is to stay away from apdivs. They mess up normal HTML page flow and they will also cause things to show up differently in different browsers, mobile devices and with different viewports (the size of the open browser window).

     

    Based on what I see there, she needs to learn how to float objects (like her photographs) so that text will flow around them.

     

    And she should feel free to ask and get advice here that doesn't start an argument.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 6, 2013 11:51 AM   in reply to mhollis55

    Of course you learn a lot from this P7 Tool! It's no prefab template.

     

    Column Composer Magic is a "Professional  Website Builders Tool" that comes with a clear explanation of the CSS rules/styles that are produced by the extension.

     

    Project Seven also provides very good tutorials with this tool that explain how to create your own styles for the designs you make. (Creating Custom Class Rules)

     

    This makes you understand very quickly how to make a solid validating complex  webpage.

     

    I don't think a Dreamweaver template or other will benefit to any extra knowledge about how to create a complex website structure with so many rows!

     

    The only difference with this tool is that this can be done in minutes instead of hours or even day's!

     

    The time you have left over now can be used to study a book about HTML and CSS.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 6, 2013 12:02 PM   in reply to mhollis55

    @ David & Mark,

    I sometimes feel like these forums are in a medically induced coma.  A little bickering is like defibrillation.  It sparks some much needed life back into this community.

     

    @ Murray & Osgood,  while I see both your points, I'm more inclined to side with Murray on this.  If people want free advice on these forums, the very least they can do is clean up their deprecated & major code errors first.  Clean code is much simpler to trouble shoot. Anything less is presumptuous and it wastes everyone's time. 

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 6, 2013 12:32 PM   in reply to Nancy O.

    "Get the paddles!" CLEAR!!!!

     

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 6, 2013 1:13 PM   in reply to mhollis55

    W3C has no association with w3schools - just sayin....

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 6, 2013 1:21 PM   in reply to Nancy O.

    Nancy O. wrote:

     

    @ Murray & Osgood,  while I see both your points, I'm more inclined to side with Murray on this.

     

     

    Thats fine but people should practice what they preach, I'll say no more because it just makes people look ridiculously stupid.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 6, 2013 1:56 PM   in reply to osgood_

    people should practice what they preach...

    Whenever possible, I try to use clean code -- professionally and in the examples I post  .  AFAIK, Murray does too.

     

     

    N

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 6, 2013 1:58 PM   in reply to Nancy O.

    Nancy O. wrote:

     

    people should practice what they preach...

    Whenever possible, I try to use clean code -- professionally and in the examples I post  .  AFAIK, Murray does too.

     

     

    N

     

    Clean or validate, there is a difference and the post wasn't directed specifically at you.

     

    I always advocate using clean code, that's good practice.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points