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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    May 2007
    Location
    Los Angeles
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help with content aligning to bkgrd img w/CSS

    I have a site that I'm working on that I'm trying to do with CSS, but I seem to have problems with it when viewing it on Mozilla Firefox.

    I'm not really sure how to get the content to always center on a Mozilla Firefox web page and have it automatically center to any monitor size. it works fine on IE.

    I have the background image (on which the content should rest) centered, but the content shifts around with different monitor sizes when Mozilla is used. The web page is http://www.tokkisom.com/site/haeeun_index.html

    I apologize if this is a dumb question. Any help you can offer would be greatly appreciated.

    Below is the CSS page that gets called that I created with help from another person:

    FOR IE:

    #top {text-align: center;
    }

    #level2 {margin-top: -470px; margin-left: -420px;
    align: center;}

    #level3 {margin-top: 50px; margin-left: -470px;
    align: center;}

    #level4 {margin-top: 39px; margin-left: 0px;
    align: center;}

    #level5 {margin-top: -382px; margin-left: 157px;
    width: 455px; height: 345px;
    align: center;}

    #text { text-align: left;
    width: 445px; height: 330px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10pt;
    overflow: auto;
    }

    FOR MOZILLA:

    #top {text-align: center;
    }

    #level2 {margin-top: -470px; margin-left: -420px;
    align: center;}

    #level3 {margin-top: 50px; margin-left: -470px;
    align: center;}

    #level4 {margin-top: 39px; margin-left: 0px;
    align: center;}

    #level5 {margin-top: -382px; margin-left: 157px;
    width: 455px; height: 345px;
    align: center;}

    #text { text-align: left;
    width: 445px; height: 330px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10pt;
    overflow: auto;
    }

    }
    .text {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000000;
    text-align: justify;

    }
    a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #000000;

    }
    a:hover {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #f04e7e;
    text-decoration: none;

    }

    AND FINALLY, the actual code on the Index page:


    <html>
    <title>Hae Eun Park Portfolio - Main</title>
    <head><script type="text/javascript">

    <!--
    if ((navigator.appName).indexOf("Microsoft")!=-1)
    {
    document.write('<link rel="stylesheet" href="css/index_ie.css" type="text/css" />');
    }
    else
    {
    document.write('<link rel="stylesheet" href="css/index_moz.css" type="text/css" />');
    }
    -->
    </script>
    </head>
    <body background="images/pattern.gif" repeat=x,y>
    <center><IMG SRC="images/HaeEun_template.gif"></center>

    <div id="top">
    <div id="level2">
    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="175" height="40" id="Logo_topbanner" align="middle">
    <param name="allowScriptAccess" value="sameDomain" />
    <param name="movie" value="Logo_topbanner.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /><embed src="Logo_topbanner.swf" quality="high" bgcolor="#ffffff" width="175" height="40" name="Logo_topbanner" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
    </object>
    </div>


    <div id="level3">
    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="120" height="315" id="haeeun_navlinks" align="middle">
    <param name="allowScriptAccess" value="sameDomain" />
    <param name="movie" value="haeeun_navlinks.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#a993c0" /><embed src="haeeun_navlinks.swf" quality="high" bgcolor="#a993c0" width="120" height="315" name="haeeun_navlinks" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
    </object>
    </div>

    <div id="level4">
    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="620" height="22" id="bottom_navlinkss" align="middle">
    <param name="allowScriptAccess" value="sameDomain" />
    <param name="movie" value="bottom_navlinkss.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#996946" /><embed src="bottom_navlinkss.swf" quality="high" bgcolor="#996946" width="620" height="22" name="bottom_navlinkss" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
    </object>
    </div>

    <div id="level5">
    <div id="text">
    <center><b><font size="1">Welcome to the Portfolio of Hae Eun Park</font></b><br />
    <br />
    <img src="images/octopus_walking.gif"></center>
    </div>
    </div>
    </div>
    </body>
    </html>

    Again, the home page can be found at: http://www.tokkisom.com/site/haeeun_index.html

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    I really wouldn't use flash for a whole website. You are just asking for trouble. This should work for you though. No need to feed a separate stylesheet to each browser. I really suggest you go do some more html tutorials as you have quite a bit to learn.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    margin:0;
    padding:0;
    background:url(images/pattern.gif);
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:13px;
    }
    
    #container {
    width:640px;
    height:480px;
    margin:auto; /*this centers the layout*/
    background:url(images/HaeEun_template.gif) no-repeat;
    }
    
    #left {
    width:175px;
    float:left; /*allows other divs to be next to this*/
    }
    
    #topbanner {
    display:block;
    margin-top:10px;
    margin:10px 0 22px 5px;
    }
    
    #leftnav {
    display:block;
    margin-left:5px;
    }
    
    #main {
    float:left;
    width:440px;
    padding-top:90px;
    text-align:center;
    }
    
    #main h1 {
    font-size:15px;
    margin:0;
    padding:0 0 3px 0;
    }
    
    #main img {
    display:block;
    margin:auto;
    }
    
    .clearfix:after { /*used to clear floats*/
        content: "."; 
        display: block; 
        height: 0; 
        clear: both; 
        visibility: hidden;
    }
    
    /* Hides from IE-mac \*/
    * html .clearfix {height: 1%;}
    /* End hide from IE-mac */
    
    #footer {
    width:640px;
    margin:auto;
    clear:both;
    }
    </style>
    </head>
    <body>
    <div id="container" class="clearfix">
    	<div id="left">
    		<object type="application/x-shockwave-flash" data="Logo_topbanner.swf" width="175" height="40" id="topbanner">
    			<param name="movie" value="Logo_topbanner.swf">
    		</object>
    		<object type="application/x-shockwave-flash" data="haeeun_navlinks.swf" width="120" height="315" id="leftnav">
    			<param name="movie" value="haeeun_navlinks.swf">
    		</object>
    	</div>
    	<div id="main">
    		<h1>Welcome to the Portfolio of Hae Eun Park</h1>
    		<img src="images/octopus_walking.gif" width="400" height="300" alt=""> </div>
    </div>
    <div id="footer">
    	<object type="application/x-shockwave-flash" data="bottom_navlinkss.swf" width="640" height="22">
    		<param name="movie" value="bottom_navlinkss.swf">
    		<param name="scale" value="exactfit">
    	</object>
    </div>
    </body>
    </html>
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

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