Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 8 of 8
  1. #1
    Junior Member
    Join Date
    Apr 2003
    Posts
    8
    Member #
    1029
    I've been coding a page for IE (works fine) but on testing it with Mozilla 1.4a on win2k, the layout (and other formatting) is depressingly and completely wrong.

    Main content should be placed in "div#main". This is static and positioned with float:right, allowing text outside the main div to wrap around. #main's container is another static div 'cos in the real site, stuff goes above and below.

    Heights for both divs are "auto". In IE, #main sizes according to content and #middle (the container) resizes to fit main inside it (great: this is what I want to happen).

    In Mozilla, the main div resizes correctly, but the container (#middle) ignores #main completely, causing #main to overflow. Strangely, you can see this overflow. Shouldn't any overflow be hidden if the container won't resize?!

    HELP!!

    Here's the css:

    body {
    margin:0px;
    padding:0px;
    }

    #middle {
    position:static;
    width:100%;
    height:auto;
    border-color:#ff0000;
    border-style:solid;
    border-width:2px;
    border-right-style:none;
    border-left-style:none;
    overflow:visible
    }

    #main {
    position:static;
    float:right;
    width:50%;
    height:auto;
    border-color:#000;
    border-style:solid;
    border-width:2px;
    overflow:visible;
    }

    ...and heres the HTML...

    <html>
    <head>
    <title>Bug driving me to suicide</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
    <div id="middle">
    <div id="main">
    <p>Main Content</p>
    </div>
    <p>Middle</p>
    </div>
    </body>
    </html>

    substitute "Main content" in the main div for a multi-line passage to see the difference.

    If anyone can tell me of a workaround, that would be fantastic. If not, how important is it to make Mozilla/Netscape compatible pages: does anyone know what percentage of the Internet community use such browsers?

    Thanks!

  2.  

  3. #2
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    What I usually do in cases like this is generate two stylesheets: one for Mozilla and one for IE (and pretty much everyone else). I then use a server side programming language such as ASP to detect the browser type and use the appropriate stylesheet. There is also a way, I believe, to do this with Javascript but it's a lot more complicated. If you have any server-side programming knowledge, try this route.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  4. #3
    Senior Member skrlin's Avatar
    Join Date
    Apr 2003
    Location
    Illinois
    Posts
    562
    Member #
    1063
    The JavaScript route isn't that complicated. Either route you take you will have help if you need.
    - Brian

  5. #4
    Junior Member BetaOP9's Avatar
    Join Date
    Aug 2003
    Posts
    19
    Member #
    2627
    This is the javascript route, i got this from Brak (thanks!) to help me load CSS stylesheet through javascript for specific monitor resolutions. just change the window.screen.width to the browser check.

    if(parseInt(window.screen.width) > 1152) {
    document.write('<link rel=stylesheet href="gameNS.css" type="text/css">');
    } else {
    document.write('<link rel=stylesheet href="game.css" type="text/css">');
    }

  6. #5
    Senior Member skrlin's Avatar
    Join Date
    Apr 2003
    Location
    Illinois
    Posts
    562
    Member #
    1063
    That works if you're looking to use a different style sheet for different screen resolutions. It's a little different for browser detection.

    EXAMPLE:
    Code:
    <script type="text/javascript">
    
    if (navigator.appName.indexOf("Netscape") != -1) {
     document.write('<link rel="stylesheet" href="NSstyle.css" type="text/css">');
    } else {
     document.write('<link rel="stylesheet" href="OTHERstyle.css" type="text/css">');
    }
    
    </script>
    The server-side method via PHP or ASP shouldn't be too lengthy either, its really up to you and your abilities as far as what your host allows.
    - Brian

  7. #6
    Junior Member
    Join Date
    Apr 2003
    Posts
    8
    Member #
    1029
    Thanks everyone! PHP is out of the question unfortunately as the host is a budget server (I've asked about this before!). Javascript looks relatively easy, and I'm slightly more familiar with JS than PHP (well, I got a book from the library once!).

    Anyway, I need to press ahead with the IE design as my client wants some results and doesn't understand about other browsers. Anyone know how important NS is? Also, any ideas on a workaround to make the divs work in Netscape? If no, thanks for your help anyway! ;-)

  8. #7
    Junior Member BetaOP9's Avatar
    Join Date
    Aug 2003
    Posts
    19
    Member #
    2627
    Shoot me an email, can try to help ya out. If ya could show me what your working on or whatever, can better help you to see exactly what isnt working.

    Shawn

    Edit: And i knew it was different for browser check, was letting him do the dirty work of researching it, helps him/her to better understand the code and how it goes.

  9. #8
    Senior Member skrlin's Avatar
    Join Date
    Apr 2003
    Location
    Illinois
    Posts
    562
    Member #
    1063
    to help me load CSS stylesheet through javascript for specific monitor resolutions. just change the window.screen.width to the browser check.
    I totally didn't read that part of your post.

    I see what you did now.
    - Brian


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 04:28 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com