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 6 of 6
  1. #1
    Regular Coder
    Join Date
    Apr 2005
    Posts
    315
    Thanks
    18
    Thanked 2 Times in 2 Posts

    Another IE7 problem.

    Hello,

    I have a page - http://moderntimes.com -, and the copyright statement at the bottom does not line up correctly. The symbol is out of alignment. I tried shortening it, but no matter how short I made it, it still put the first word outside of the CSS boundaries. I'm not even certain if I'm explaining it properly.

    Any suggestions. . .

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Hi michael180,
    I might put it in a separate div... or not.
    This works though:
    Code:
    <DIV id=bottom><IMG height=40 alt=bottom_strip 
    src="Moderntimes%20Classic%20Film%20Pages_files/bottom_strip.gif" width=633><A 
    href="mailto:michael180@mac.com"><br>
    © 1995-2007 moderntimes | all rights 
    reserved</A></DIV>
    "I just added a <br>"
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    ...adding to Excavator's fix (had not seen this post)

    Not just IE7, but also IE6 shows the unwanted display you describe.

    You have an inline image (bottom slice) directly followed by the inline <a> link element (starting with the copyright symbol)
    Code:
    <div id="bottom"><img src="bottom_strip.gif" alt="bottom_strip" width="633" height="40"/><a href="mailto:xxx">&copy; 1995-2007
    moderntimes | all rights reserved</a></div>
    IE and FF both correctly treat the <img...> element like any other character. But, what IE and FF don't have in common is that IE will not allow wrapping between the image and whatever character that may follow unless there is inserted a newline or space character in the source code. What is more, IE will also expand the width of your bottom div overriding your explicit width declaration of your bottom div when it finds that contents no longer fit in.

    You may simply just add a newline character like this to make it work:

    Code:
    <div id="bottom"><img src="bottom_strip.gif" alt="bottom_strip" width="633" height="40"/>
    <a href="mailto:xxx">&copy; 1995-2007
    moderntimes | all rights reserved</a></div>
    Last edited by koyama; 12-15-2006 at 05:26 AM.

  • #4
    Regular Coder
    Join Date
    Apr 2005
    Posts
    315
    Thanks
    18
    Thanked 2 Times in 2 Posts
    Hi koyama,
    I don't see the 'newline character' of which you are speaking, am I missing something? Thanks though for your prompt response.
    Michael

  • #5
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Sorry for being imprecise.

    Notice the linebreak between the the <img...> and the <a...> in the second block. (Just hit the 'enter' button on you keyboard.) It is as simple as that

  • #6
    Regular Coder
    Join Date
    Apr 2005
    Posts
    315
    Thanks
    18
    Thanked 2 Times in 2 Posts
    Hi koyama,
    Yes! It works like a charm. I'll have to remember that. Again thank you very much.
    Michael


  •  

    Posting Permissions

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