Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Sep 2006
    Thanked 0 Times in 0 Posts

    Misaligned Div - Please Help!


    The design for my site is just using one image, with image mapping over the top for the links, then for the content, i'm using iframes to display the pages.

    A problem i have is, with different resolution, or if you make your web browser smaller, the text/iframe gets misaligned. I'm not actually sure where i'm going wrong, i asked my web development tutor but he just drew me a diagram, which was completely useless.
    Below is the actual index page, everything is ran off that.
    Is there anything i can do to make the div or the iframe stay aligned regardless the resolution and/or browser size?

    My site's temporary URL, to help you understand what i'm on about is: http://random.the3rdhero.com/

    The index file is:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>The Randomizer</title>
    <style type="text/css">
    body {
    	background-color: #cccccc;
    <link rel=stylesheet href="css.css" type="text/css" />
    <div align="center"><img name="bg" src="layout.jpg" width="716" height="515" border="0" usemap="#bg" />
      <map name="bg">
        <area shape="rect" coords="492,132,618,152" href="mailto: the3rdhero@msn.com" target="center" alt="Contact Us" />
        <area shape="rect" coords="358,131,484,152" href="forum.html" target="center" alt="Forums" />
        <area shape="rect" coords="226,130,353,151" href="gen.html" target="center" alt="Random Generators" />
        <area shape="rect" coords="94,129,220,150" href="home.html" target="center" alt="Home" />
    <div style="position: absolute; overflow: visible; top:171px; left:86px; width: 809px; height: 340px;">
    <iframe src="home.html" name="center" width="630" height="340" scrolling="no" frameborder="0" allowtransparency="true"></iframe></div>

  • #2
    New Coder
    Join Date
    Sep 2006
    Thanked 0 Times in 0 Posts


  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Splendora, Texas, United States of America
    Thanked 292 Times in 286 Posts
    • Use a valid DTD; “XHTML 1.1 Transitional” does not exist. While XHTML 1.1 (without the appended “Strict”/“Transitional”/“Frameset”) is a valid DTD, unless you understand the significance and use of application/xhtml+xml, you shouldn't be using XHTML 1.1; stick with one of the HTML 4.01 or XHTML 1.0 DTDs. A list of document type declarations can be found at the W3C's website.
    • Once you have a valid DTD, make sure that it doesn't trigger quirks mode and then validate your code against it. Validation should catch most of the remaining errors in your code.
    • Don't comment out your CSS with comment tags (<!-- -->) in XHTML. If your page were to be displayed as real XHTML, your CSS would actually be commented out and meaningless.
    • Don't use inline CSS.
    • If you want to center a block-level element, use a margin: 0 auto declaration, not absolute positioning. Note that to make that work in Internet Explorer, IE must not be in quirks mode.
    • Remove the space in mailto: the3rdhero@msn.com. Consider mailto: to be a URI scheme like http:. Would you type http://random.the3rdhero.com/ with a space?
    Last edited by Arbitrator; 10-03-2006 at 04:10 PM. Reason: I added an additional point and rectified a formatting issue.
    For every complex problem, there is an answer that is clear, simple, and wrong.


    Posting Permissions

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