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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Div layout different in IE7 than Firefox

    My page was designed with Firefox in mind, and looks just as I want in FF. But in IE7 the div placement is off. There should be an easy way to fix this but I'm not sure what that would be.

    Here is a link to my page:

    http://zactownsend.oxyhost.com

    As you can see, if you have IE installed, it looks a bit off. Any help would be appreciated. Thanks.

  • #2
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    You will never get IE to attempt to perform like other more modern browsers without a proper doctype. Put this on your first line and see where we stand:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

    It's not at all unusual for any version of IE to screw up properly written markup however.

  • #3
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Should I replace the current doctype info or put that before it?

  • #4
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Hmmm. I'm not seeing a doctype in your current page at all. In any case, you'll want to place your doctype ABOVE the <html> tag and there should only ever be ONE doctype within a single document.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,835 Times in 1,819 Posts
    Quote Originally Posted by zactownsend View Post
    Should I replace the current doctype info or put that before it?
    The online version has no DocType declaration. That and the character encoding should go at the top, like this
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>
    <body>
    website here
    </body>
    </html>
    See the link in my sig about DocTypes. I'm pretty sure there is also a sticky at the top of this forum on DocTypes.

    Once you get your DocType added, goto the validator and see if there are any errors in your code.

    Stuff like this should be fixed
    Code:
    body {
    background-color: #474728;
    font-family: sans; /*sans is not a font*/
    }
    
    
    div.top {
    background-color: #474728;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 160px;
    z-index: 200;
    }
    
    div.left {
    background-color: #474728;
    background-image: url("left_2.png");
    background-repeat: no-repeat;
    background-position: 5px 0px;
    position: fixed;
    top: 27%; left:0;
    width: 250;  /*250 what?*/
    height: 65%;
    z-index: 5;
    padding-top: 50px;
    padding-left: 10px;
    }
    
    div.main {
    background-color: #474728;
    position: absolute;
    top: 150; /*150 what? Your header is 160px...*/
    left: 275; /*275 what?*/
    width: 700px; height: 100%;
    z-index: 0;
    }
    
    h1 {
    font-family: "sans";
    font-weight: normal;
    }
    
    li.navigation {
    list-style-type: none;
    padding-bottom: 45px;
    font-family: "sans";
    font-size: 30px;
    text-align: center;
    }
    <li> tags are part of an unordered list (or an ordered list) and have to be enclosed with ul tags. This might work better like this:
    Code:
    <ul class="left">
    <li class="navigation"><a class="left" href="index.html">Home</a></li>
    
    <li class="navigation"><a class="left" href="portfolio.html">Portfolio</a></li>
    <li class="navigation"><a class="left" href="pricing.html">Pricing</a></li>
    <li class="navigation"><a class="left" href="contact.html">Contact</a></li>
    </ul>
    The validator may find other errors too.
    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

  • #6
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    I believe Sans is listed as a typeface on certain Linux systems, but my gratis typography is hazy at best. I think this is mapped to DejaVu Sans on Ubuntu. The typography throughout the site seems to be based on this typeface, but the author seems not to be one for cross-platforming.
    Last edited by Apostropartheid; 02-22-2009 at 12:11 AM.

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,835 Times in 1,819 Posts
    Quote Originally Posted by CyanLight View Post
    I believe Sans is listed as a typeface on certain Linux systems, but my gratis typography is hazy at best. I think this is mapped to BitStream Vera Sans on Ubuntu. The typography throughout the site seems to be based on this typeface, but the author seems not to be one for cross-platforming.
    It could very well be a font, just because I've never heard of it doesn't make it not and I should have worded that differently.
    I looked at the Font Store and found this -
    There are 13710 downloads in the Sans category. Click any sample to view font details and purchase options.
    But not one of those was named only Sans.
    It doesn't look like a lot of people are going to have this one pre-installed on there machine.
    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

  • #8
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Unless you're in Ubuntu and related flavours, no. Severe need of font stacks here.


  •  

    Posting Permissions

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