Zymic Webmaster Forums > Website To Work With Both Internet Explorer And Firefox

Full Version: Website To Work With Both Internet Explorer And Firefox

Zymic Webmaster Forums > Zymic.com Support > Zymic Free Web Templates

thegamersfront

Nov 20 2007, 03:47 AM

Hi guys, i recently have been working with this template: http://www.zymic.com/free-templates/130/live-preview/

But my question to you is, How would i get the site to work the same way with IE and Firefox?

If you go open that link in Firefox, you'll notice that its centered, how it should be. However, in IE, the background is white and its aligned to the left.

Is there anyone who has worked with this problem before and if there is a way to make it work equally with both browsers? Most websites work the same way with both, but why not this?

Any help greatly appreciated,
thank you!

MrTouz

Nov 20 2007, 08:34 AM

yep i see what you see... BIG PROBLEM i watched this site before... and it didnt look like this...

i suggest looking around the css and see what is FF centering it. (look for a center / align / padings / margins...)
once you know how FF centers it see why IE doesnt... sometimes some codes don't apply to both browsers...
if you found the problem than use an other code other than the one that is made.

if you have NO knowledge on coding thats gonna be kinda hard:/

Alex

Nov 20 2007, 11:16 AM

The problem likely to be this: "", delete it or move it down. The first line SHOULD be the DocType Declaration.

IamShipon1988

Nov 25 2007, 06:16 AM

Hmm...I see what you mean. I would just create a new <div> callout and use it as the outer div/master layer. Something like this

CODE

#mastercontainer1 {
width: 100%;
height: 100%;
background-color: #1f1f1f;
text-align: center;
}

#mastercontainer2 {
width: 770px;
height: auto;
text-align: left;
background-color: #fff;
}

HTML

<div id="mastercontainer1">
<div id="mastercontainer2">

PUT ALL CODES FROM TEMPLATE HERE!!!!

</div>
</div>

EDIT**
Well I just tested it out. It will fix it for IE but it will screw it up for FF. I checked out Tom's codes and started scratching my head as to the reason for the error. Normally when CSS designers code, they start with the BODY tag in their CSS but Tom started with the HTML. You can use either but HTML causes a lot of conflicts between FF and IE and that's just a pain in the butt. I will see what I can do to fix it to for both, but Its already almost 3 in the morning here and I need some sleep. Will look at it tomorrow.

EDIT #2
AH here you go fixed it. I kinda re-coded some of the stuff.

CSS

CODE

html {
    font: 0.8em/1.3 Verdana, Helvetica, Arial, Sans-serif;
    background-color: #1f1f1f;
    color: #38494e;
    text-align: center;
}

body {
    width: 770px;
    background: #fff url(../images/main_bg.gif) repeat-y;
    color: #38494e;
    margin: 0 auto;
    padding: 0;
    text-align: left;
}

a:link, a:visited {
    color: #869ea8;
    background-color: inherit;
    text-decoration: none;
}

a:hover, a:active {
    color: #1f1f1f;
    background-color: inherit;
    text-decoration: none;
}

img, a img {
    border: 0;
}

ul, ol {
    position: relative;
}

h1 {
    text-indent: -10000px;
    width: 770px;
    height: 150px;
    margin: 0;
    padding: 0;
    background: transparent url(../images/head.gif) no-repeat;
}

#headblank {
    text-indent: -10000px;
    width: 770px;
    height: 150px;
    margin: 0;
    padding: 0;
    background: transparent url(../blank-image-files/head_blank.gif) no-repeat;
}

ul {
    margin: 10px 0 0 40px;
    padding: 0;
}

    ul li {
        margin: 2px 0 0 0;
        padding: 0 0 0 17px;
        list-style-type: none;
        background: transparent url(../images/li.gif) no-repeat left;
    }

dl, dt, dd {
    margin: 0;
    padding: 0;
}

ul#none {
    display: none;
}

div#maincol {
    width: 535px;
    padding: 0 0 20px 0;
    float: left;
}

    div#maincol h2 {
        margin: 15px 0 7px 13px;
        padding: 0 0 0 7px;
        background: #fff url(../images/heading_ul.gif) repeat-x bottom left;
        font: 1.8em Georgia, "Times New Roman", Times, Serif;
        color: #38494e;
        width: 300px;
    }

    div#maincol h3 {
        margin: 10px 0 3px 23px;
        padding: 0 0 0 2px;

        background: #fff url(../images/heading_ul.gif) repeat-x bottom left;
        font: 1.5em Arial, Helvetica, Verdana, Sans-serif;
        color: #666;
    }

    div#maincol p {
        margin: 7px 20px 21px 20px;
        padding: 0;
        color: #38494e;
        background-color: inherit;
    }

ul#nav {
    width: 535px;
    height: 33px;
    background: transparent url(../images/nav_bg.gif) repeat-x top left;
    margin: 0;
    padding: 0;
}

    ul#nav li {
        margin: 0;
        padding: 0;
        float: left;
        list-style-type: none;
        display: block;
        height: 35px;
        background: transparent url(../images/nav_sep.gif) no-repeat right;
    }

        ul#nav li a:link, ul#nav li a:visited {
            color: #38494e;
            background-color: inherit;
            text-decoration: none;
            line-height: 29px;
            padding: 5px 24px 7px 20px;
        }

        ul#nav li a:hover, ul#nav li a:focus, ul#nav li a:active {
            color: #38494e;
            text-decoration: none;
            line-height: 29px;
            margin: 0;
            padding: 5px 24px 9px 20px;
            background-color: inherit;
            background: url(../images/nav_hover.gif) no-repeat bottom;
        }

        ul#nav > li > a:hover, ul#nav > li > a:focus, ul#nav > li > a:active {
            padding: 5px 24px 10px 20px;
        }

#rightcol {
    width: 200px;

    padding: 0 10px 20px 10px;
    background: transparent url(../images/side_bg.gif) no-repeat bottom;
        position: relative;
    bottom: 30px;
    right: 3px;
    font-size: 0.9em;
    float: right;
}

    div#rightcol p {
        margin: 0px;
    }

    div#rightcol > p {
        margin: 0px;
    }

    div#rightcol dl {
        margin: 0 0 0 0;
        padding: 0 0 50px 0;
    }

    div#rightcol > dl {
        margin: 10px 0 0 -10px;
        padding: 0 0 50px 0;
    }

    div#rightcol h3, div#rightcol dt {
        margin: 20px 0 8px 8px;
        padding: 0 0 0 7px;
        background: #fff url(../images/heading_ul.gif) repeat-x bottom left;
        font: 1.8em Georgia, "Times New Roman", Times, Serif;
        color: #666;
        width: 190px;
    }

    div#rightcol > h3, div#rightcol > dt {
        margin: 20px 0 10px 2px;
    }

div#rightcol dl dd {
            margin: 2px 0 0 0px;
            padding: 0 0 0 17px;
            list-style-type: none;
            background: transparent url(../images/li.gif) no-repeat left;
        }

        div#rightcol > dd {
            margin: 2px 0 0 0;
            padding: 0 0 0 17px;
            list-style-type: none;
            background: transparent url(../images/li.gif) no-repeat left;
        }

            div#rightcol form#searchform h3 {
                margin-left: 10px;
            }

            div#rightcol form#searchform > h3 {
                margin-left: 0;
            }

            div#rightcol form#searchform input {
                margin: 10px 0 0 10px;
            }

            div#rightcol form#searchform input#searchinput {
                border: 1px solid #ddd;
                width: 120px;
                height: 20px;
                padding: 4px 5px 0 5px;
                color: #666;
                background-color: inherit;
            }

            div#rightcol form#searchform input#searchsubmit {
                margin: 0 0 0 10px;
                width: 40px;
            }

pre {
    border: 1px solid #ddd;
    background-color: #f7f7f7;
    margin: 20px;
    padding: 10px;
    color: #38494e;
}

code {
    font: 12px/1.5 "Courier New", Courier, Monospace;
}

h4 {
    clear: both;
    margin: 0;
    padding: 0 10px 0 0;
    width: 760px;
    height: 20px;
    color: #b1bebb;
    text-align: right;
    background: #363636 url(../images/foot_bg.gif) bottom repeat-x;
    font-size: 0.8em;
    font-weight: normal;
    line-height: 20px;
}
/************FOR IE FIX***************/
#mastercontainer1 {
width: 100%;
height: 100%;
background-color: #1f1f1f;
text-align: center;
}

#mastercontainer2 {
width: 770px;
text-align: left;
background-color: #fff;
}

HTML

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" xml:lang="en" lang="en">

<head>
<title>YourSite</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="author" content="Thomas Smit" />
<link rel="stylesheet" type="text/css" href="files/css/style.css" />
</head>

<body>

<div id="mastercontainer1">
<div id="mastercontainer2">
<ul id="none">
<li><a href="#content" title="Skip to content">Skip to content</a></li>
</ul>

<h1>YourSite.com</h1>

<div id="maincol">

<ul id="nav">
<li><a href="#" title="Return to the homepage">Home</a></li>
<li><a href="#" title="Link Description For Link 2">Link 2 </a></li>
<li><a href="#" title="Link Description For Link 3">Link 3 </a></li>
<li><a href="#" title="Link Description For Link 4">Link 4 </a></li>
<li><a href="#" title="Link Description For Link 5">Link 5 </a></li>
</ul>

<h2 id="content">Zymic Free Templates </h2>

<p>Thanks for downloading one of our <a href="http://www.zymic.com" href="#">zymic.com</a> <a href="http://www.zymic.com/free-templates/" href="#">free web templates</a>. <br /><br />Please find the folder "Read Me, Instructions, License, etc" for information and help on how to edit this template.</p>

<h3>Zymic Copyright / Free Hosting</h3>

<p>Each and every <a href="http://www.zymic.com">zymic.com</a> <a href="http://www.zymic.com/free-templates/" >free web template</a> has copyright information (usually found in the footer) which leads back to our site, an example being "<em>Free Template By Zymic</em>". It is illegal to remove this without our permission, by doing so you are breaking various <strong>copyright laws</strong>.</p>
<p><a href="http://www.zymic.com/free-templates/copyright-removal/1130/">Click here to remove copyright!</a></p>
<p>In order to get your website online you will require web hosting. We highly recommend you use our <a href="http://www.zymic.com/free-web-hosting/">free web hosting</a> service. You will be able to publish your website and design online in a matter of minutes, thanks to our feature-packed service. To learn more about our <a href="http://www.zymic.com/free-web-hosting/">free web hosting</a> please visit: <a href="http://www.zymic.com/free-web-hosting/">http://www.zymic.com/free-web-hosting/</a></p>

<h3>Template Customization / Premium Templates</h3>

<p>If you are struggling or simply don't have the time to customize a template, let us do it for you! We are able to modify our templates, such as change colours, add your logo, content, new links, etc for you at a low cost. You may get a free quote by visiting: <a href="http://www.zymic.com/template-customization/">http://www.zymic.com/template-customization/</a></p>
<p>Want a design that hasn't been used by loads of people? We have a premium template shop with high-quality designs from a range of categories. <a href="http://www.zymic.com/premium-templates/">http://www.zymic.com/premium-templates/</a></p>

<h3>Code Box Example </h3>

<pre>
<code>
This is code, please okay thank you.
This is code, please okay thank you.
This is code, please okay thank you.
This is code, please okay thank you.
This is code, please okay thank you.
</code>
</pre>

<h3>List Example </h3>

<ul>
<li>Item 1 </li>
<li>Item 2 </li>
<li>Item 3 </li>
<li>Item 4 </li>
<li>Item 5 </li>
</ul>

</div>

<div id="rightcol">

<form action="#" method="get" id="searchform">
<h3><label for="searchinput">Search</label></h3>
<div>
<input type="text" name="search" id="searchinput" /><input type="submit" name="searchsubmit" id="searchsubmit" value="Go" />
</div>
</form>

<dl>

<dt>Recent content</dt>
<dd><a href="#" title="Link Description">Some link</a></dd>
<dd><a href="#" title="Link Description">Another link</a></dd>
<dd><a href="#" title="Link Description">Another Link</a></dd>

<dt>Recent news</dt>
<dd><a href="#" title="Link Description">Another Link</a></dd>
<dd><a href="#" title="Link Description">Another Link</a></dd>

<dt>Links</dt>
<dd><a href="http://www.zymic.com/" title="Zymic - Web resources">Zymic - Web resources</a></dd>
<dd><a href="http://www.zymic.com/free-web-hosting/" title="Zymic - Free Web Hosting">Free Web Hosting</a></dd>
<dd><a href="#" title="Some link">Put a link here</a></dd>
<dd><a href="#" title="Some link">Put a link here</a></dd>

</dl>

</div>

<h4>Copyright © 2007 <a href="http://www.zymic.com/free-templates/">Free Templates</a> by <a href="http://www.zymic.com">Zymic</a> - <a href="http://www.zymic.com/free-web-hosting/">Free Web Hosting</a> - Best Viewed in <a href="http://www.mozillafirefox.us">Mozilla Firefox</a> - Design by <a href="http://www.psyrens.com">Tom</a></h4>
</div></div>
</body>

</html>

Alex

Nov 25 2007, 10:57 AM

Or you could have read my post, after moving that comment it works in IE6 here.

EMOruffino

Nov 25 2007, 11:38 PM

QUOTE(Alex @ Nov 25 2007, 04:57 AM)

Or you could have read my post, after moving that comment it works in IE6 here.

lol

if i have problems, i usually just have two different CSS's. lol

IamShipon1988

Nov 28 2007, 07:31 AM

QUOTE(Alex @ Nov 25 2007, 10:57 AM)

Or you could have read my post, after moving that comment it works in IE6 here.

Oh sorry, I didn't get the chance to read your post...I read the first one and answered.

iamandy

Dec 3 2007, 05:29 PM

Alex > ALL.

IamShipon1988

Dec 5 2007, 12:00 AM

Hey Alex, is it possible for someone to upload a new zip file with that portion removed?

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.