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

    layout works in IE, but not in Mozilla?

    Hey there, I'm completely new to CSS, I'v worked with HTML before but just for the fun of it. I tried to make a layout for my weblog with CSS and it pretty much turned out the way I wanted it at least when I try to look at it with Internet Explorer. But with Mozilla Firefox it's completely wrong, nothing is where it should be and some stuff just doesn't work. I have no idea what's wrong about that and just thought someone might help me out? I'd really appreciate that.
    It should be a page with two headres, several boxes with links and that kinda stuff on the right and on the left side and a box which goes over the complete width of the page at the bottom, surrounding the main part with my entries.
    I took out most of the stuff which goes in the boxes so not to make this post any longer than it already is.
    The stuff with the $ is just codes provided by Xanga, the place where I have my weblog... it will insert the posts I write everyday and that stuff.


    So this is the html file:

    <html>

    <head>

    <title>
    My Weblog
    </title>

    <link rel="stylesheet" type="text/css" href="weblog.css" />

    </head>

    <body>

    <div class="top">
    <h1>
    big Header
    </h1>

    <h3>
    small Header
    </h3>
    </div>


    <div class="top2">
    <div class="left">
    <p>
    last updated:
    </p>
    </div>

    <div class="right">
    <p>
    <a href="http://www.xanga.com">Xanga</a>
    - <$Private_Site_Tagline$> -
    <a href="<$Signout_Link$>">Logout</a>
    </p>
    </div>
    </div>



    <div class="left">

    <div class="box">
    <div class="head">
    <h2>
    That's me...
    </h2>
    </div>
    <p>
    <img src="<$Profile_Pic$>"><br>
    <$Profile_Info$><br>
    <a href="<$Profile_Link$>"></a>
    </p>
    </div>

    <div class="box">
    <div class="head">
    <h2>
    Inside Links...
    </h2>
    </div>
    <p>
    Links
    </p>
    </div>

    <div class="box">
    <div class="head">
    <h2>
    Outside Links...
    </h2>
    </div>
    <p>
    Links
    </p>
    </div>

    </div>



    <div class="right">

    <div class="box">
    <div class="head">
    <h2>
    Latest News...
    </h2>
    </div>
    <p>
    News
    </p>
    </div>

    <div class="box">
    <div class="head">
    <h2>
    Daily Thoughts...
    </h2>
    </div>
    <p>
    whatever
    </p>
    </div>

    <div class="box">
    <div class="head">
    <h2>
    Currently...
    </h2>
    </div>
    <p>
    whatever
    </p>
    </div>

    </div>



    <div class="center">

    <Xanga>
    <p>
    <Xanga_Date_Header>
    <$Xanga_Date$>
    </Xanga_Date_Header>
    </p>

    <p>
    <$Xanga_Posts$>
    </p>
    </Xanga>

    <div class="left">
    <p>
    <a href="<$Previous_Link$>" align="left"><< was war davor?</a>
    </p>
    </div>
    <div class="right">
    <p>
    <a href="<$Next_Link$>" align="right">was kommt danach? >></a>
    </p>
    </div>

    </div>



    <div class="bottom">
    <p>
    some other links
    </p>
    </div>


    </body>
    </html>


    And the external css file:

    body {
    background-color: #D7DFE7;
    font-family: Verdana, Tahoma, Arial;
    font-size: small;
    color: #525252;
    }

    h1 {
    font-family: Impact, Verdana, Tahoma, Arial;
    font-size: 4em;
    margin: 10px;
    display: inline;
    }

    h2 {
    font-weight: bold;
    font-size: small;
    padding: 5px;
    margin: 0px;
    }

    h3 {
    font-weight: bold;
    font-size: 2em;
    display: inline;
    }

    p {
    margin: 5px;
    }

    a:link {
    color: #666699;
    text-decoration: underline;
    }
    a:visited {
    color: #666699;
    text-decoration: underline;
    }
    a:hover {
    color: #666699;
    text-decoration: none;
    }
    a:active {
    color: #666699;
    text-decoration: underline;
    }


    div.top {
    width: 100%;
    top: 5%;
    margin-bottom: 10px;
    background-color: #879FB7;
    border: #525252 solid 2px;
    }

    div.top2 {
    width: 100%;
    margin-bottom: 10px;
    background-color: #AFBFCF;
    border: #525252 solid 1px;
    }

    div.left {
    float: left;
    background-color: transparent;
    }

    div.right {
    float: right;
    background-color: transparent;
    }


    div.box {
    width: 180px;
    margin-bottom: 10px;
    background-color: #AFBFCF;
    border: #525252 solid 1px;
    }

    div.center {
    margin-left: 190px;
    margin-right: 190px;
    margin-bottom: 20px;
    padding: 0px;
    background-color: #AFBFCF;
    border: #525252 solid 1px;
    }

    div.bottom {
    width: 100%;
    clear: both;
    bottom: 5%;
    background-color: #879FB7;
    border: #525252 solid 1px;
    text-align: center;
    }

    div.head {
    background-color: #879FB7;
    }
    Last edited by Tanea; 10-23-2006 at 07:48 PM.

  • #2
    New Coder
    Join Date
    Aug 2006
    Posts
    97
    Thanks
    0
    Thanked 0 Times in 0 Posts
    in the css classes you dont need the div.class, you just need .class

    example

    html
    <div class="container">blah blah</div>

    css

    .container {
    width:120px;
    }


    so just change your css to this

    Code:
    body {
    background-color: #D7DFE7;
    font-family: Verdana, Tahoma, Arial;
    font-size: small;
    color: #525252;
    }
    
    h1 {
    font-family: Impact, Verdana, Tahoma, Arial;
    font-size: 4em;
    margin: 10px;
    display: inline;
    }
    
    h2 {
    font-weight: bold;
    font-size: small;
    padding: 5px;
    margin: 0px;
    }
    
    h3 {
    font-weight: bold;
    font-size: 2em;
    display: inline;
    }
    
    p {
    margin: 5px;
    }
    
    a:link {
    color: #666699;
    text-decoration: underline;
    }
    a:visited {
    color: #666699;
    text-decoration: underline;
    }
    a:hover {
    color: #666699;
    text-decoration: none;
    }
    a:active {
    color: #666699;
    text-decoration: underline;
    }
    
    
    .top {
    width: 100%;
    top: 5%;
    margin-bottom: 10px;
    background-color: #879FB7;
    border: #525252 solid 2px;
    }
    
    .top2 {
    width: 100%;
    margin-bottom: 10px;
    background-color: #AFBFCF;
    border: #525252 solid 1px;
    }
    
    .left {
    float: left;
    background-color: transparent;
    }
    
    .right {
    float: right;
    background-color: transparent;
    }
    
    
    .box {
    width: 180px;
    margin-bottom: 10px;
    background-color: #AFBFCF;
    border: #525252 solid 1px;
    }
    
    .center {
    margin-left: 190px;
    margin-right: 190px;
    margin-bottom: 20px;
    padding: 0px;
    background-color: #AFBFCF;
    border: #525252 solid 1px;
    }
    
    .bottom {
    width: 100%;
    clear: both;
    bottom: 5%;
    background-color: #879FB7;
    border: #525252 solid 1px;
    text-align: center;
    }
    
    .head {
    background-color: #879FB7;
    }
    Last edited by haveacigar; 10-23-2006 at 08:26 PM.

  • #3
    New to the CF scene
    Join Date
    Oct 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the fast reply but that doesn't change anything in Mozilla...

  • #4
    Regular Coder croatiankid's Avatar
    Join Date
    Jan 2006
    Posts
    665
    Thanks
    1
    Thanked 12 Times in 12 Posts
    it's a ton easier coding for firefox first, then fixing IE bugs (if your code works in firefox, it will almost definately work in all browsers except IE)


  •  

    Posting Permissions

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