Web Analytics Made Easy -
StatCounter Misaligned Div - Please Help! - CodingForum


No announcement yet.

Misaligned Div - Please Help!

  • Filter
  • Time
  • Show
Clear All
new 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: [email protected]" 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



    • #3
      • 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: [email protected]. Consider mailto: to be a URI scheme like http:. Would you type http://random.the3rdhero.com/ with a space?
      Last edited by Arbitrator; Oct 3, 2006, 11:10 AM. Reason: I added an additional point and rectified a formatting issue.