SitePoint Sponsor

User Tag List

Results 1 to 13 of 13

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2001
    Location
    Saginaw, MI
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    need help w/ browsers and css

    Hello all!

    I'm beginning to become pretty stressed over all the different browsers out there. I have been tickering with rebuilding my site using or rather converting much of my code to css. I found wonderful examples on http://www.glish.com/. I finally got it to work...well it only works with IE55...
    If your using IE5, my logo is covered up with the navbar jpg. And if you view the page with Nav4 and up... the whole page is wacked up.

    At this point i'm open to any suggestions...

    My css page is located at http://www.cmtonline.com/index1.html

    My stylesheet is located at
    http://www.cmtonline.com/template1.css

    Thanks in advance.

  2. #2
    SitePoint Enthusiast
    Join Date
    Jul 2001
    Location
    Saginaw, MI
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok...after validating my css page through WC. I was able to fix several problems. I was also able to narrow my problems down to just one problem...

    My I view my page in IE 5.0 my leftcontent is covered up by the centercontent. I've tried just about everything I know to fix this problem.. I need help, if anyone is welling. My code for the Leftcontent and centercontent is as follows:

    #leftcontent {
    position: absolute;
    margin: 0%;
    width: 17%;
    height: 85%;
    background-color: #dcdcdc;
    background-image: none;
    border-right:2px solid #000099;
    }

    #centercontent {
    position: absolute;
    margin-left: 26%;
    background: url("pics/cmt_mark.jpg")#fff no-repeat center center;
    height: 70%;
    }

    You can view my problem page at: http://www.cmtonline.com/index1.html

    I welcome any suggestions... Thanks everyone!

  3. #3
    pg for mild peril cow's Avatar
    Join Date
    Mar 2000
    Location
    nevada, usa
    Posts
    636
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you haven't defined a LEFT position for your centercontent. i just put LEFT: 20%; at the end of your centercontent style definition...
    "There's no justice like angry mob justice!" --Seymour Skinner

  4. #4
    SitePoint Enthusiast
    Join Date
    Jul 2001
    Location
    Saginaw, MI
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Cow,

    That solved that problem. Now I have other problems to solve. Nav6 and the new Nav7 is being buggy. It won't show the background colors, borders or border-colors, font colors or font-family. I-yah-yih, my head hurts .

    Well, if you or anyone else has any suggestions...i'm all eyes. Thanks everyone...and thank you Cow for your help.

    Here's my code if anyone would like to take a peek:

    body {
    margin:0px;
    padding:0px;
    color: #000099;
    font-family: Arial, Verdana, Helvetica, Non-serif;
    }

    #leftcontent {
    position: absolute;
    margin: 0%;
    width: 160px;
    height: 110%;
    background-color: #dcdcdc;
    background-image: none;
    border-right:2px solid #000099;
    }

    #centercontent {
    position: absolute;
    background: url("pics/cmt_mark.jpg") #fff no-repeat center center;
    height: 70%;
    left: 24%;
    }

    #banner {
    background: #000099 url("pics/cmtbanner1.jpg") no-repeat;
    height: 100px;
    border-top:1px solid #000099;
    border-right:1px solid #000099;
    border-left:1px solid #000099;
    }

    I {text-align: right;
    float: right;
    }

    P {
    margin-top: 20px;
    margin-left: 30px;
    margin-right: 30px;
    font-size: 16pt
    }

  5. #5
    pg for mild peril cow's Avatar
    Join Date
    Mar 2000
    Location
    nevada, usa
    Posts
    636
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i'm using ie5, so i can't help you with your other bg probs
    "There's no justice like angry mob justice!" --Seymour Skinner

  6. #6
    SitePoint Enthusiast
    Join Date
    Jul 2001
    Location
    Saginaw, MI
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks anyways Cow...you have been a big help. I stressed over the first problem for a day. I was confussing Left: 20%; with Margin-left: 20%. I relize now that they are two seperate things.

    Thanks

  7. #7
    .net install meltdown
    Join Date
    May 2001
    Location
    View Ridge
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sundari,

    I can take a look on NN6 after work (~5 hrs).

    I've noticed a few CSS/HTML problems, I'll work on at lunch and let you now.

    Using CSS positioning in NN4 won't work. If you want the page to be backwards compatible w/ NN4, you'll need to use tables. Sounds like you may be redoing an existing site, you could use a browser detection script and direct NN4 & IE4 users to the old site and newer browsers to the CSS-P site.

  8. #8
    SitePoint Enthusiast
    Join Date
    Jul 2001
    Location
    Saginaw, MI
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks isotope235,

    Any help would be just too cool... I'm killing myself over here trying find workarounds. And thanks for the suggestion on the browser detection script..I am actually redoing my company's site (or at least attempting ). I was also thinking of somehow putting in somewhere a place to have visitors who are still using older browsers a place to upgrade to a newer version while other visitors can go and view the new page. It was a thought, still working on how to make that happen.

    Whoa...I'm tired...but haggin' in there.

    Thanks soo much.

    Sundari

  9. #9
    .net install meltdown
    Join Date
    May 2001
    Location
    View Ridge
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, here goes. This is a little different direction. I've only tested it in IE 5.5. I'll check it out in NN 6 & IE 5.0 for problems when I get home:

    <html>

    <head>
    <META NAME="keywords" CONTENT="CIMS Software, Custom Software, CMT, Computer Management Technologies, as400, palmpilot resellers, D&W Associates">
    <META NAME="description" CONTENT="NCS Cims Software, as400 support, PalmPilot Reseller, Custom Software Packages">
    <TITLE>CMT Home Page</TITLE>

    <style>
    body
    {
    background:#dcdcdc;
    margin:0px;
    padding:0px;
    color: #000099;
    font-family: Arial, Verdana, Helvetica, san-serif; /*changed non-serif to san-serif*/
    }
    #banner
    {
    background: #000099 url("http://www.cmtonline.com/pics/cmtbanner1.jpg") no-repeat;
    height: 100px;
    border-top:1px solid #000099;
    border-right:1px solid #000099;
    border-left:1px solid #000099;
    }
    #centercontent
    {
    background: url("http://www.cmtonline.com/pics/cmt_mark.jpg") #fff no-repeat center center;
    border-left:2px solid #000099;
    height:100%;
    margin-left:160px;
    margin-right:0px;
    margin-top:0px;
    }
    img.right
    {
    float: right;
    }
    img.leftnav
    {
    position:absolute;
    top:120px;
    left:15px;
    }
    .shrinkit
    {
    font-size:75%;
    }
    .mainnav
    {
    margin-top: 20px;
    margin-left: 30px;
    margin-right: 30px;
    font-size: 16pt;
    font-family: Arial, Verdana, Helvetica, san-serif; /*changed non-serif to san-serif*/
    }
    </style>

    </head>

    <body>

    <div id="banner">
    <img class="right" src="http://www.cmtonline.com/pics/cmt_nav1.jpg" usemap="#cmt_nav1" border="0" />
    </div>

    <img class="leftnav" src="http://www.cmtonline.com/pics/cmt_btns.jpg" usemap="#cmt_btns" border="0" />

    <div id="centercontent">
    <br />
    <br />
    <table align="center">
    <tr>
    <td>
    <!--Used classes so regular text on other pages doesn't inherit the properties-->
    <p class="mainnav">Management Consulting</p>
    <p class="mainnav">System Design</p>
    <p class="mainnav">Installation Support</p>
    <p class="mainnav">Training</p>
    <p class="mainnav">Disaster Recovery</p>
    </td>
    <td>
    <p class="mainnav">Planning</p>
    <p class="mainnav">Custom Programming</p>
    <p class="mainnav">Feasibility Studies</p>
    <p class="mainnav">Data Processing Audits</p>
    <p class="mainnav">&nbsp;</p>
    </td>
    </tr>
    <tr>
    <td align="center" colspan="2">
    <br /><br /><br /><br /><br />
    We welcome any comments or suggestions. Send us a note at <a href="mailto:webmaster@cmtonline.com">cmtonline.com</a>.<br /> To view our <B>Privacy Policy</B>, click <a href="javascript:Start('lev2/privacy.html')">here</a>.
    <br /><br />
    <span class="shrinkit">&copy; 2001 Computer Management Technologies, Inc.</span>
    </td>
    </tr>
    </table>
    </div>

    <map name="cmt_nav1">
    <area shape="rect" alt="Company Information" coords="11,70,82,90" href="http://www.cmtonline.com/backgroun.html" title="Company Information">
    <area shape="rect" alt="Contact Us" coords="95,70,180,90" href="http://www.cmtonline.com/staff.html" title="Contact Us">
    <area shape="rect" alt="Software" coords="192,71,263,89" href="http://www.cmtonline.com/cims3.html" title="Software">
    <area shape="rect" alt="Support links" coords="278,73,343,89" href="http://www.cmtonline.com/technical.html" title="Support links">
    <area shape="default" nohref>
    </map>

    <map name="cmt_btns">
    <area shape="rect" alt="Company Information" coords="3,2,122,23" href="http://www.cmtonline.com/backgroun.html" title="Company Information">
    <area shape="rect" alt="Meet the Team" coords="1,28,123,52" href="http://www.cmtonline.com/staff.html" title="Meet the Team">
    <area shape="rect" alt="CIMS G/T Software" coords="1,57,124,79" href="http://www.cmtonline.com/cims3.html" title="CIMS G/T Software">
    <area shape="rect" alt="Custom Software" coords="1,84,124,108" href="http://www.cmtonline.com/as400cus.html" title="Custom Software">
    <area shape="rect" alt="Curriculum Software" coords="2,112,123,136" href="http://www.cmtonline.com/cims3.html" title="Curriculum Software">
    <area shape="rect" alt="Service/Support" coords="1,142,122,162" href="http://www.cmtonline.com/technical.html" title="Service/Support">
    <area shape="rect" alt="Technical Links" coords="3,169,123,190" href="http://www.cmtonline.com/technical.html" title="Technical Links">
    <area shape="rect" alt="Business Partners" coords="1,197,123,218" href="http://www.cmtonline.com/bus.html" title="Business Partners">
    <area shape="rect" alt="D&W Associates L.L.C." coords="0,225,125,249" href="http://www.cmtonline.com/dw/index.html" title="D&W Associates L.L.C.">
    <area shape="rect" alt="Client Area" coords="0,252,124,276" href="http://www.cmtonline.com/client.html" title="Client Area">
    <area shape="default" nohref>
    </map>

    </body>

    </html>
    Last edited by isotope235; Oct 11, 2001 at 14:16.

  10. #10
    SitePoint Enthusiast
    Join Date
    Jul 2001
    Location
    Saginaw, MI
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Isotope,

    Thank you soo much for your help! My script is a lot easier to understand and you fixed some of my html problems...thank you soo much. The page looks great in IE5.0 and IE5.5, but sadly it does not look as it should in Nav6. If you've got any ideas please let me know. Meanwhile I'll be looking for a good browser detection script... Your help has been fabulous Isotope...thank you again .

    Sundari

  11. #11
    .net install meltdown
    Join Date
    May 2001
    Location
    View Ridge
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Glad to help. I found one minor problem, the last <p class="mainnav"></p> is missing a non-breaking space.

    Other than that it looks OK in NN6 from what I can see, although I don't think I've got the latest version. What specifically is wrong?

  12. #12
    SitePoint Enthusiast
    Join Date
    Jul 2001
    Location
    Saginaw, MI
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Isotope,

    I caught the non-breaking space and added one were needed. When you view it in Nav6 the lastest version or later the graphics are all pushed together to the left-top corner, the main content of the page is droped to the lower-right and the background colors are pretty funky along with the text color that is completely ignored.

    Lots of problems . I've been looking at some browser detection and redirection scripts to direct anyone with a Navx browser to the old home page(index.html), but i've been having problems with an infinite loop acurring. So, that's something else i'll be working on.

    Again, Isotope...you've been great, and I appreciate any further help or advise you can give.

    Thank you,

    Sundari

  13. #13
    .net install meltdown
    Join Date
    May 2001
    Location
    View Ridge
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I downloaded NN6.1 and noticed a few things.

    Depending on resolution, the #centercontent is not filling the available screen area.

    After playing with it a bit in NN6.1 & IE5.0, I can only find one workaround. Set the height value of #centercontent to a higher % value. 190% seemed to work in both browsers at resolutions up to 1152*864 for the index page. If your other pages have more content you may have to set the height value even higher. The trade off is excessive v-scroll in some resolutions.

    At 640*480, the image map overlaps the background image in the navbar. To support 640*480, you'll need to make the images a little smaller. Have you considered using text navigation, spiced up with some CSS/DHTML?

    You can download a resizer tool at Left Corner Design's design tools page for (simulated) testing at different resolutions.

    HTH, post again if you need some more help.


Bookmarks

Posting Permissions

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