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 10 of 10
  1. #1
    New Coder
    Join Date
    Feb 2005
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question First CSS site, works in IE, not in FF?

    Ok this is my first try, me and a couple of guys are going to start this weblog, and I've been busy CSSing it and stuff, and now I almost have it right, except for one thing: in Firefox the 2 "nav" and "main" div boxes I created inside my "outer" containing div box, are placed outside of the "outer" box.

    Check this site with Firefox and note the difference with IE.

    http://www.panzerfaust.org/weblog/

    *oh yeah, the site name is panzerfaust, but only after registering it I found out that the .com version was taken my some neonazi record label. Just in case anyone thinks I'm a nazi: I'm not.

    Any ideas? This is the CSS code, theres some stuff from the default pivot CSS file I left in cause I dont want to mess up, any of you guys see something?
    ----------------------------------


    a:link { color: #000000; text-decoration: none }
    a:visited { color: #8D746E; text-decoration: none }
    a:hover { text-decoration: none; color: #E8270F }
    a:active { text-decoration: none; color: #ff0000 }





    body {
    margin: 0px;
    padding: 0px;
    background-color:#8D746E;
    font-size:12px;
    font-family:Palatino Linotype;
    }

    body, p, html, table, td {
    font-family:Palatino Linotype;
    font-size: 12px;
    }

    .pivot-image {
    /* style for images in entries */
    }

    .pivot-popupimage {
    /* style for popup-images in entries (thumbnails) */
    }

    .pivot-popuptext {
    /* style for popup-images in entries (textual links) */
    }

    .registered {
    background-color: #ff9;
    }

    #outer {
    width: 760px;
    background-color:#F8EEDF;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    border: thin solid #000000;
    }

    #header {
    width: 760px;
    padding: 20px;
    font-size: 12px;
    text-align: center;

    }

    #main {
    right: 0px;
    float: right;
    width: 500px;
    font-size: 14px;
    padding: 20px;
    }

    #nav {
    width: 150px;
    padding: 20px;
    font-size: 10px;
    left: 0px;
    float: left;
    }





    .entrycontent {
    padding: 12px;
    }

    .entryheader {
    padding: 12px;
    }

    .archiveheader {
    padding: 12px;
    }

    .content p {
    margin: 4px 2px 4px 2px;
    }

    h1 {
    font-size: 11px;
    margin: 4px;
    display: inline;
    }

    h2 {
    font-size: 12px;
    border-bottom:1px dashed #999;
    margin:0px;
    padding: 2px;
    }

    h3 {
    font-size: 14px;
    }

    h4, .subtitle {
    font-size: 16px;
    margin: 4px;
    display: inline;
    font-style: italic;
    }

    .date {
    color: #666;
    font-family: tahoma, verdana, geneva, arial, helvetica, sans-serif;
    font-size: 10px;
    line-height: 16px;
    font-weight: normal;
    float: right;
    }

    .date_linkdump {
    color: #666;
    font-family: tahoma, verdana, geneva, arial, helvetica, sans-serif;
    font-size: 10px;
    line-height: 16px;
    font-weight: normal;
    float: right;
    }

    .entryfooter {
    color: #666;
    font-family: tahoma, verdana, geneva, arial, helvetica, sans-serif;
    font-size: 11px;
    line-height: 16px;
    font-weight: normal;
    text-align:right;
    margin: 0px;
    padding: 6px 0px;
    clear: both;
    }

    .entryfooter_linkdump {
    color: #666;
    font-family: tahoma, verdana, geneva, arial, helvetica, sans-serif;
    font-size: 10px;
    line-height: 16px;
    font-weight: normal;
    text-align:right;
    margin: 0px;
    padding: 6px 0px;
    border-bottom: 1px dashed #666;
    }

    .entryfooter a, .date a, .entryfooter_linkdump a, .date_linkdump a {
    text-decoration: none;
    font-weight: bold;
    }

    .entryfooter a:hover, .date a:hover {
    text-decoration: underline;
    font-weight: bold;
    }

    a {
    color: #253a69;
    }

    .prevnext_links {
    float: right;
    }

    h1 a, .prevnext_links a {
    font-weight: bold;
    text-decoration: none;
    }

    h1 a:hover, .prevnext_links a:hover {
    font-weight: bold;
    text-decoration: underline;
    }

    /* these styles are for the search boxes */
    .searchbox {
    width: 10em;
    font-size: 9px;
    }

    .searchbutton {
    border: 1px solid #000;
    font-size: 10px;
    }

    /* ACCESSIBILITY CHANGES - JM 2004/11/26 */
    /* these hide the accessibility tags to stop the layout from changing */

    .pivot-search label { visibility:hidden; display:none; }
    .pivot-search legend { visibility:hidden; display:none; }
    .pivot-search fieldset { border:0; padding:0; margin:0; }

    .pivot-search-result label { visibility:hidden; display:none; }
    .pivot-search-result legend { visibility:hidden; display:none; }
    .pivot-search-result fieldset { border:0; padding:0; margin:0; }

    /* this replaces inline style tags */
    img.badge { border:0; margin-bottom:2px; }

    /* this is a bonus */
    a img.badge:hover { border-bottom:1px #314e8c solid; margin-bottom:1px; }

  • #2
    Regular Coder
    Join Date
    Aug 2004
    Location
    Nashville
    Posts
    202
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've posted about a similar problem... if I get anywhere I'll let you know... Things look fine in IE and Safari but FF isn't coming through...

  • #3
    New Coder
    Join Date
    Feb 2005
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    yeah ive been fooling a bit atound, cant seem to help

    but it does seem to be a problem with the whole floating thing: IE stretches out the "outer" div block so that everything is inside, whether floating or not. FF doesnt seem to consider the fact that the floating blocks are found inside the "outer" div, and just places them like they were found AFTER the outer div, in stead of in it...

    still no one?

  • #4
    New Coder
    Join Date
    Feb 2005
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hmm either way its wrong, if i let go of the double floating properties and only let the left nav bar float, like i read everywhere, it still aint working in FF. Ok, all the text is inside the outer container box this time, but...

    Now FF places the "main" content div to the lower right bottom of the "outer" containing div, while there is plenty of space to place it immediately to the right of the nav bar, which it does in IE.

  • #5
    Regular Coder
    Join Date
    Aug 2004
    Location
    Nashville
    Posts
    202
    Thanks
    0
    Thanked 0 Times in 0 Posts
    haha... I miss tables...

  • #6
    New Coder
    Join Date
    Feb 2005
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    yeah and I miss frames...

  • #7
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I sympathize, the transition can be painful but the benefits are worth the effort.

    Whatever problems you run into, try searching the forums. It's likely someone else has run into the same issue.

    And if you don't find the answers there keep posting for help. Good luck.
    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.

  • #8
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    First of all, IE is all that's wrong with the web. When you're coding, try coding to standards first (read: code for Mozilla), then fix all the little hacks here and there to get it working in IE, rather than the other way around.

    Next, when you float an object, you take it "out of flow." So the "main" div, when it has been told to clear (you have "clear: both" on your <h2> tags in the "main" div) will wrap to where it would have been normally. It'll essentially ignore the float at that point. If you're trying to do a column layout, it might be easier to use relative positioning.

    I know you're not after a three column layout per se, but here's a good link to see how others are positioning their layouts:

    http://css-discuss.incutio.com/?page=ThreeColumnLayouts

    And a nice tutorial on floats:

    http://css.maxdesign.com.au/floatutorial/

    Hope this helps,

  • #9
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Odoaker
    Check this site with Firefox and note the difference with IE.

    http://www.panzerfaust.org/weblog/
    I tried, but i get a 404-error unfortunately.

    Couldn't resist to peek in the source code of the main page though and i noticed the following:

    Code:
    <link rel="stylesheet" type="text/css" href="panzerfaust_site_styles.css" />
    I guess you are not aware of this, but some browsers don't like the fact that the css file name is written with underscores. Try using " - " instead of " _ "
    Same goes for class or id names. Example: body._classname is being ignored by some browsers.

  • #10
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up Ok, here goes.........

    Not sure if this is the solution you want, but anyways its nice to see how i made it alltogether

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    	<title>Homepage</title>
    <style type="text/css">
    body {
    	padding-right:0px;
    	padding-left:0px;
    	padding-top:20px;
    	padding-bottom:20px;
    	margin:0px;
    
    }
    div#outer {
    position:relative;
    width: 760px;
    height:700px; /* if you dont set a height, it won't work */
    background-color:#F8EEDF;
    margin-right:auto;
    margin-left:auto;
    padding: 0px;
    border: solid 1px #000000;
    }
    
    div#outer div#header {
    position:relative;
    background-color:Silver;
    width: 720px;
    padding: 20px; 
    font-size: 12px;
    text-align: center;
    top:0px;
    }
    
    div#outer div#content {
    position:relative;
    background-color:#c2c2c2;
    }
    
    div#content div#main {
    background-color:maroon;
    color:Silver;
    position:absolute;
    top:10px;
    left: 260px;
    width: 460px;
    font-size: 14px;
    padding: 20px;
    }
    
    div#content div#nav {
    background-color:maroon;
    color:Silver;
    position:absolute;
    width: 110px;
    padding: 20px;
    font-size: 10px;
    left: 0px;
    top:10px;
    }
    </style>
    </head>
    <body>
    
    <div id="outer">
    	<div id="header"><strong>HEADER</strong><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ut neque. Ut a erat eu lacus sodales feugiat. Etiam euismod ipsum ut erat. Morbi odio tellus, pretium non, porta eu, convallis eu, risus.</div>
    	<div id="content">
    		<div id="main"><strong>MAIN</strong><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ut neque. Ut a erat eu lacus sodales feugiat. Etiam euismod ipsum ut erat. Morbi odio tellus, pretium non, porta eu, convallis eu, risus. Nam bibendum lectus ut metus. Aliquam id ipsum. Pellentesque turpis eros, cursus commodo, porttitor eu, dignissim in, dolor. Suspendisse accumsan, pede ac pellentesque aliquet, nibh enim commodo orci, nec volutpat neque justo vitae velit. Sed vehicula. Aenean urna neque, sollicitudin sit amet, nonummy nec, facilisis in, sem. In eget ipsum quis ligula interdum porttitor. Suspendisse rhoncus pulvinar felis. Donec eu est.
    		<br><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ut neque. Ut a erat eu lacus sodales feugiat. Etiam euismod ipsum ut erat. Morbi odio tellus, pretium non, porta eu, convallis eu, risus. Nam bibendum lectus ut metus. Aliquam id ipsum. Pellentesque turpis eros, cursus commodo, porttitor eu, dignissim in, dolor. Suspendisse accumsan, pede ac pellentesque aliquet, nibh enim commodo orci, nec volutpat neque justo vitae velit. Sed vehicula. Aenean urna neque, sollicitudin sit amet, nonummy nec, facilisis in, sem. In eget ipsum quis ligula interdum porttitor. Suspendisse rhoncus pulvinar felis. Donec eu est.
    		
    		</div>
    		<div id="nav"><strong>NAVIGATION</strong><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ut neque.</div>
    	</div>
    </div>
    
    </body>
    </html>

    Have fun
    Veel plezier ermee

    Greetz,
    Crewcut


  •  

    Posting Permissions

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