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 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    compatibility issue

    It's supposed to look like this: http://i53.tinypic.com/5v826g.jpg
    but it looks like this in IE + Mozilla http://i53.tinypic.com/2akbx2e.jpg

    I used google chrome to test the layout but the links in the divider and frame div are not aligning like they should in IE + Mozilla. Ignore the banner text area. There's actually supposed to be a banner there but I will get back to that later. I verified the code and passed. There were only 2 warnings and I have no idea what either of them mean.

    1)No Character encoding declared at document level.
    2)Using Direct Input mode: UTF-8 character encoding assumed

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Site Title</title>
    <style type="text/css">
    
    body {
    background-color:#d9e0cf;
    font-family:Verdana, Geneva, sans-serif; }
    
    #banner {
    position:absolute;
    top:0px;
    left:0px;
    background-color:#6b6b6b;
    width:1024px;
    height:150px; }
    
    #divider {
    position:absolute;
    top:150px;
    left:0px;
    border-top:1px solid #757575;
    border-bottom:1px solid #757575;
    background-color:#3e3e3e;
    width:1024px;
    height:50px;
    overflow:hidden; }
    
    a.jb:link, a.jb:visited {
    display:block;
    float:left;
    color:#dfdfdf;
    font-weight:normal;
    text-decoration:none;
    font-size:20px; }
    
    a.jb:hover, a.jb:active {
    color:#909090; }
    
    a.jb:first-letter {
    font-size:35px; }
    
    #nav-align {
    display:inline-table;
    margin:0 auto;
    padding-top:2px; }
    
    #content-wrapper {
    position:absolute;
    top:201px;
    left:0px;
    width:1024px;
    overflow:auto; }
    
    #content-wrapper h1 {
    padding-left:31px;
    background-color:#839964;
    font-size:25px;
    font-weight:normal;
    text-decoration:none;
    color:#272727;
    letter-spacing:1px;
    margin-top:5px;
    margin-bottom:5px; }
    
    #left-box {
    float:left;
    width:646px;
    overflow:auto;
    font-size:11px;
    color:#000000; }
    
    #right-box {
    text-align:center;
    background-color:#eff2ec;
    border:2px solid #787e72;
    float:right;
    width:374px;
    overflow:auto;
    font-size:10px;
    color:#000000; }
    
    #frame {
    overflow:hidden;
    width:100%;
    height:420px; }
    
    .in {
    padding-left:5px;
    padding-right:5px; }
    
    .frame-box {
    width:100%;
    height:420px;
    overflow:auto; }
    
    a.just:link, a.just:visited {
    display:block;
    float:left;
    width:100px;
    text-align:center;
    line-height:20px;
    font-size:11px;
    font-weight:normal;
    text-decoration:none;
    background-color:#a3a3a3;
    border:1px solid #272727;
    color:#000000;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px; }
    
    a.just:hover, a.just:active {
    background-color:#454545;
    color:#d8decf; }
    
    .framelink-align {
    display:inline-table;
    margin:0 auto;
    padding-top:5px;
    margin-bottom:5px; }
    
    #left-box h1 {
    padding:0px;
    text-align:center;
    background-color:#787e72;
    font-size:15px;
    font-weight:bold;
    text-decoration:none;
    color:#000000;
    margin-top:5px;
    margin-bottom:5px;
    text-transform:lowercase;
    letter-spacing:0px; }
    
    #banner-text {
    padding-top:50px;
    padding-right:10px;
    font-size:95px;
    text-align:right;
    text-transform:lowercase; }
    
    #g, #l {
    margin-right:5px; }
    
    #ya, #yo, #yu, #yi, #ye, #yy, #za {
    padding-right:28px; }
    </style>
    </head>
    <body>
    <div id="banner"><div id="banner-text">banner</div></div>
    
    <div id="divider"><div id="nav-align">
    <a class="jb" id="ya" href="URL">Home</a>
    <a class="jb" id="yo" href="URL">About Me</a>
    <a class="jb" id="yu" href="URL">Premades</a>
    <a class="jb" id="yi" href="URL">Tutorials</a>
    <a class="jb" id="ye" href="URL">Pixels</a>
    <a class="jb" id="yy" href="URL">Templates</a>
    <a class="jb" id="za" href="URL">Credits</a>
    <a class="jb" href="URL">Affiliates</a>
    </div></div>
    
    <div id="content-wrapper">
    <h1>Main Header</h1>
    
    <div id="left-box">
    <h1>Left Box Header</h1>
    <div class="in">
    left box text goes here left box text goes here left box text goes here left box text goes here 
    left box text goes here left box text goes here left box text goes here left box text goes here 
    left box text goes here left box text goes here left box text goes here left box text goes here 
    left box text goes here left box text goes here left box text goes here left box text goes here 
    left box text goes here left box text goes here left box text goes here left box text goes here 
    left box text goes here left box text goes here left box text goes here left box text goes here 
    left box text goes here left box text goes here left box text goes here left box text goes here 
    left box text goes here left box text goes here left box text goes here left box text goes here 
    left box text goes here left box text goes here left box text goes here left box text goes here 
    left box text goes here left box text goes here left box text goes here left box text goes here 
    </div></div>
    
    
    
    <div id="right-box"><div id="frame">
    
    <a name="news"></a><div class="frame-box"><div class="in"><div class="framelink-align">
    <a class="just" id="g" href="#news">News</a>
    <a class="just" href="#updates">Updates</a>
    </div>
    news text goes here news text goes here news text goes here news text goes here news text goes here 
    news text goes here news text goes here news text goes here news text goes here news text goes here 
    news text goes here news text goes here news text goes here news text goes here news text goes here 
    news text goes here news text goes here news text goes here news text goes here news text goes here 
    news text goes here news text goes here news text goes here news text goes here news text goes here 
    news text goes here news text goes here news text goes here news text goes here news text goes here 
    </div></div>
    
    <a name="updates"></a><div class="frame-box"><div class="in"><div class="framelink-align">
    <a class="just" id="l" href="#news">News</a>
    <a class="just" href="#updates">Updates</a>
    </div>
    updates text goes here updates text goes here updates text goes here updates text goes here 
    updates text goes here updates text goes here updates text goes here updates text goes here 
    updates text goes here updates text goes here updates text goes here updates text goes here 
    updates text goes here updates text goes here updates text goes here updates text goes here 
    updates text goes here updates text goes here updates text goes here updates text goes here 
    updates text goes here updates text goes here updates text goes here updates text goes here 
    updates text goes here updates text goes here updates text goes here updates text goes here 
    updates text goes here updates text goes here updates text goes here updates text goes here 
    </div></div>
    
    </div></div>
    
    
    
    
    </div>
    </body>
    </html>
    Last edited by justbreathe; 04-02-2011 at 01:11 AM.

  • #2
    Regular Coder
    Join Date
    May 2010
    Location
    Bathurst, Australia
    Posts
    180
    Thanks
    1
    Thanked 22 Times in 22 Posts
    Not really a compatibility issue, that second pic is how it should be. <a> is an inline element.
    Couple of options:
    Surround those anchors with a div (block level element)
    .just{display:block;} to turn to turn them into block level elements (although this will put them under each other)
    Surround the text in it's own div (it should be inside <p> anyway, which will also probably fix it.
    As for the scroll bars it means something has fallen outside the window so either fiddle around re-sizing, or quick fix overflow:hidden; on the offending element.

    Also google to double check what I just said on block and inline elements, i may be wrong but am too lazy to do it myself. It's stuff you still need to learn about anyway.

  • #3
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I was able to fix the links in the little box but I'm still having an issue with the top links. I added a div around it and set it to display:block; and that din't seem work. Any ides on what else I can do to fix them?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Site Title</title>
    <style type="text/css">
    
    body {
    background-color:#d9e0cf;
    font-family:Verdana, Geneva, sans-serif; }
    
    #banner {
    position:absolute;
    top:0px;
    left:0px;
    background-color:#6b6b6b;
    width:1024px;
    height:150px; }
    
    #divider {
    position:absolute;
    top:150px;
    left:0px;
    border-top:1px solid #757575;
    border-bottom:1px solid #757575;
    background-color:#3e3e3e;
    width:1024px;
    height:50px;
    overflow:hidden; }
    
    a.jb:link, a.jb:visited {
    float:left;
    color:#dfdfdf;
    font-weight:normal;
    text-decoration:none;
    font-size:20px; }
    
    a.jb:hover, a.jb:active {
    color:#909090; }
    
    a.jb:first-letter {
    font-size:35px; }
    
    #nav-align {
    margin:0 auto;
    padding-top:2px; }
    
    #content-wrapper {
    position:absolute;
    top:201px;
    left:0px;
    width:1024px;
    overflow:auto; }
    
    #content-wrapper h1 {
    padding-left:31px;
    background-color:#839964;
    font-size:25px;
    font-weight:normal;
    text-decoration:none;
    color:#272727;
    letter-spacing:1px;
    margin-top:5px;
    margin-bottom:5px; }
    
    #left-box {
    float:left;
    width:646px;
    overflow:auto;
    font-size:11px;
    color:#000000; }
    
    #right-box {
    text-align:center;
    background-color:#eff2ec;
    border:2px solid #787e72;
    float:right;
    width:374px;
    overflow:auto;
    font-size:10px;
    color:#000000; }
    
    #frame {
    overflow:hidden;
    width:100%;
    height:420px; }
    
    .in {
    padding-left:5px;
    padding-right:5px; }
    
    .frame-box {
    width:100%;
    height:420px;
    overflow:auto; }
    
    a.just:link, a.just:visited {
    float:left;
    width:100px;
    text-align:center;
    line-height:20px;
    font-size:11px;
    font-weight:normal;
    text-decoration:none;
    background-color:#a3a3a3;
    border:1px solid #272727;
    color:#000000;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px; }
    
    a.just:hover, a.just:active {
    background-color:#454545;
    color:#d8decf; }
    
    .framelink-align {
    display:inline-block;
    margin:0 auto;
    padding-top:5px;
    margin-bottom:5px; }
    
    #left-box h1 {
    padding:0px;
    text-align:center;
    background-color:#787e72;
    font-size:15px;
    font-weight:bold;
    text-decoration:none;
    color:#000000;
    margin-top:5px;
    margin-bottom:5px;
    text-transform:lowercase;
    letter-spacing:0px; }
    
    #banner-text {
    padding-top:50px;
    padding-right:10px;
    font-size:95px;
    text-align:right;
    text-transform:lowercase; }
    
    #g, #l {
    margin-right:5px; }
    
    #ya, #yo, #yu, #yi, #ye, #yy, #za {
    padding-right:28px; }
    
    p {
    margin-top:0px; }
    
    .wrap {
    display:block; }
    </style>
    </head>
    <body>
    <div id="banner"><div id="banner-text">banner</div></div>
    
    <div id="divider"><div id="nav-align"><div class="wrap">
    <a class="jb" id="ya" href="URL">Home</a>
    <a class="jb" id="yo" href="URL">About Me</a>
    <a class="jb" id="yu" href="URL">Premades</a>
    <a class="jb" id="yi" href="URL">Tutorials</a>
    <a class="jb" id="ye" href="URL">Pixels</a>
    <a class="jb" id="yy" href="URL">Templates</a>
    <a class="jb" id="za" href="URL">Credits</a>
    <a class="jb" href="URL">Affiliates</a>
    </div></div></div>
    
    <div id="content-wrapper">
    <h1>Main Header</h1>
    
    <div id="left-box">
    <h1>Left Box Header</h1>
    <div class="in"><div class="wrap"><p>
    left box text goes here left box text goes here left box text goes here left box text goes here 
    left box text goes here left box text goes here left box text goes here left box text goes here 
    left box text goes here left box text goes here left box text goes here left box text goes here 
    left box text goes here left box text goes here left box text goes here left box text goes here 
    left box text goes here left box text goes here left box text goes here left box text goes here 
    left box text goes here left box text goes here left box text goes here left box text goes here 
    left box text goes here left box text goes here left box text goes here left box text goes here 
    left box text goes here left box text goes here left box text goes here left box text goes here 
    left box text goes here left box text goes here left box text goes here left box text goes here 
    left box text goes here left box text goes here left box text goes here left box text goes here 
    </p></div></div></div>
    
    
    
    <div id="right-box"><div id="frame">
    
    <a name="news"></a><div class="frame-box"><div class="in"><div class="framelink-align">
    <a class="just" id="g" href="#news">News</a>
    <a class="just" href="#updates">Updates</a>
    </div>
    <div class="wrap"><p>
    news text goes here news text goes here news text goes here news text goes here news text goes here 
    news text goes here news text goes here news text goes here news text goes here news text goes here 
    news text goes here news text goes here news text goes here news text goes here news text goes here 
    news text goes here news text goes here news text goes here news text goes here news text goes here 
    news text goes here news text goes here news text goes here news text goes here news text goes here 
    news text goes here news text goes here news text goes here news text goes here news text goes here 
    </p></div></div></div>
    
    <a name="updates"></a><div class="frame-box"><div class="in"><div class="framelink-align">
    <a class="just" id="l" href="#news">News</a>
    <a class="just" href="#updates">Updates</a>
    </div>
    <div class="wrap"><p>
    updates text goes here updates text goes here updates text goes here updates text goes here 
    updates text goes here updates text goes here updates text goes here updates text goes here 
    updates text goes here updates text goes here updates text goes here updates text goes here 
    updates text goes here updates text goes here updates text goes here updates text goes here 
    updates text goes here updates text goes here updates text goes here updates text goes here 
    updates text goes here updates text goes here updates text goes here updates text goes here 
    updates text goes here updates text goes here updates text goes here updates text goes here 
    updates text goes here updates text goes here updates text goes here updates text goes here 
    </p></div></div></div>
    
    </div></div>
    
    
    
    
    </div>
    </body>
    </html>

  • #4
    Regular Coder
    Join Date
    May 2010
    Location
    Bathurst, Australia
    Posts
    180
    Thanks
    1
    Thanked 22 Times in 22 Posts
    Ah, right, my bad, you had a div around the anchors but they're floated. Floating can mess things up when you don't know it very well. Add a height to your "framelink-align" div. When an element is floated it will not "fill" a div. When rendering that divs height will be 0. Add a height of 30px or something like that.
    Disclaimer: I'm hungover 70% of the time i'm on here, any information given may not be correct, or even legible.

  • #5
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I am so confused. Okay, I added the height to framelink-align. There is still a problem with the top links inside the #divider. I also used the float property on the links jb so I added a height to the div around it (nav-align) and it din't really fix anything. Also, should I have put the links in an unordered list instead?

    So anytime I use the float property, I need to set a height?

  • #6
    Regular Coder
    Join Date
    May 2010
    Location
    Bathurst, Australia
    Posts
    180
    Thanks
    1
    Thanked 22 Times in 22 Posts
    Again, my bad :P I didn't even notice a problem with those top links. Have you got this site uploaded anywhere? Is it just that they are too far apart? I can't spot where that is coming from 28px for the padding isn't a lot :/ so i'm not sure.
    Oh and for your character encoding add this
    Code:
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    inside your <head>. Character encoding is important, look into it some time. But really that's all you'll need.
    Disclaimer: I'm hungover 70% of the time i'm on here, any information given may not be correct, or even legible.

  • Users who have thanked BulletTimeBill for this post:

    justbreathe (04-02-2011)

  • #7
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    by the way thanks for taking the time to help me

    I uploaded the site here:
    http://obsidianskies.webs.com/hghgghg.htm

    It looks fine in google chrome. In Mozilla/IE the top links are spread out way too much (past the 28 pixels) and I have no idea what's causing it (like in the 2nd screenshot).

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,854
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    I'd recommend you to check http://bonrouge.com/2c-hf-fluid%28r%29.php to see how to make a good 2 column layout.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #9
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    Seems to me like the spacing issue is related to the :first-letter pseudo-class. OK for me in IE8 but not in FF3.6.16.

    Try assigning a width, centering the text and removing the right margin:

    Code:
    #ya, #yo, #yu, #yi, #ye, #yy, #za {
        /*margin-right: 28px;*/
    }
    hghgghg.htm (line 149)
    a.jb:link, a.jb:visited {
        color: #DFDFDF;
        float: left;
        font-size: 20px;
        font-weight: normal;
        text-align: center;
        text-decoration: none;
        width: 120px;
    }
    That's probably a little better cross-browser anyway. I agree with abduraooft about your layout - you'll find it more flexible if you remove all that absolute positioning. Your menu also might be better expressed as an unordered list. I don't think any of this is relevant to your menu spacing issue though.

    It seems, by experimentation, that the combination of an increased font-size for the first letter in combination with a floated element without a set width causes FF to give additional space to the element. I haven't tested this exhaustively, but this doesn't seem to happen in IE8 or Chrome or Opera. Googling doesn't find anything relevant either.
    Last edited by SB65; 04-02-2011 at 10:17 AM.

  • Users who have thanked SB65 for this post:

    justbreathe (04-02-2011)

  • #10
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I removed the absolute positioning and set the body margin and padding to 0 and then added the width to the links and that solved the problem. I will look into the site you mentioned

    Thanks again


  •  

    Posting Permissions

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