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 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Firefox CSS Style Width Issue

    Hello Everyone -

    I cant seem to figure out this issue, maybe i'm missing something.

    In all browser except for firefox, I set the width for my child element "div.servicesbox" inside of my parent "div.container" - and the multiple "div.servicesbox" will show up as expected. In firefox the width get's reset to the parent element.

    Additionally when viewing the page source in firebug I see that there is no style applied to my "div.servicesbox" ? What the heck

    Here is my css sheet

    [CODE]
    @charset "utf-8";
    /* CSS Document */

    html {
    }

    body {
    background:#000000 url(../images/background.jpg);
    background-position:center;
    background-position:top;
    background-repeat:no-repeat;
    padding: 0px;
    margin: 0px;
    font-family: 'Tahoma';
    font-size : 11px;
    color : #000000;
    }

    /* Header */

    div.header {
    width:1028px;
    height:auto;
    margin:auto;
    }

    /* Nav */

    div.nav_container {
    width:1028px;
    height:auto;
    margin: auto;
    }

    div.nav_left {
    width:auto;
    float: left;
    }

    div.nav_links {
    width:auto;
    height:auto;
    float: left;
    }

    div.nav_links#services {
    width:93px;
    height:62px;
    background-image:url(../images/index_06.jpg)
    }

    div.nav_links#contact {
    width:82px;
    height:62px;
    background-image:url(../images/index_07.jpg)
    }

    div.nav_links#right {
    width:48px;
    height:62px;
    background-image:url(../images/index_08.jpg)
    }

    div.nav_links#services:hover {
    background-image:url(../images/index_links_06.jpg);
    }

    div.nav_links#contact:hover {
    background-image:url(../images/index_links_07.jpg)
    }

    /* Body Top */

    div.container {
    width:1008px;
    margin: auto;
    background-color: #4188BC;
    padding: 10px;
    height: 100%;
    }

    div.content_border {
    width:988px;
    background-color:fff;
    border: 10px solid #CCC;
    margin: auto;
    height: auto;
    }

    div.content_1 {
    width:988;
    background-image:url(../images/index_11.jpg);
    clear: both;
    height: 285px;
    padding-right: 10px;
    padding-left: 10px;
    }

    div.mediaplayer {
    height:auto;
    float: left;
    }

    div.welcome {
    margin:auto;
    padding-top: 25px;
    float: left;
    }

    /* Content 2 */

    div.content_2 {
    height: 600px;
    }

    div.content_2_top {
    margin:auto;
    height:68px;
    width: 988px;
    clear: both;
    }

    div.content_2_title {
    width:500px;
    float: left;
    }

    div.content_2_bubble {
    float:right;
    width: 300px;
    }

    div.horizontal_bar {
    width:100%;
    heigh:2px;
    background-image:url(../images/horizontal_border.jpg;
    background-repeat:repeat-x;
    clear:both;
    height: 10px;
    }

    /* Content 3 */

    div.servicesbox_container {
    float: left;
    height: 400px;
    width: 900px;
    margin-right: 42px;
    margin-left: 42px;
    }

    div.services#row1 {
    background-color:#093;
    float:none;
    width: 200px;
    }

    div.services#row2 {
    background-color:307cb6;
    float:left;
    }

    [CODE]

    and my html:

    [CODE]
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Testing Document (Firefox Float Bug)</title>
    <link type="text/css" rel="stylesheet" href="style/style.css">

    </head>

    <body>

    <div class="container">
    <div class="services" id="row2">I want to display 2 divs (#left_container and #right_container) next to each other. It works perfect in IE7, but in firefox the right container sometimes shows below the left container. But it doesn’t happen all the time, only like 1 out of 10 reloads. The page content does not change. I’ll post the code below.</div>
    <div class="services" id="row2">I want to display 2 divs (#left_container and #right_container) next to each other. It works perfect in IE7, but in firefox the right container sometimes shows below the left container. But it doesn’t happen all the time, only like 1 out of 10 reloads. The page content does not change. I’ll post the code below.</div>
    <div class="services" id="row2">I want to display 2 divs (#left_container and #right_container) next to each other. It works perfect in IE7, but in firefox the right container sometimes shows below the left container. But it doesn’t happen all the time, only like 1 out of 10 reloads. The page content does not change. I’ll post the code below.</div>
    </div>
    </body>
    </html>
    [CODE]

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello cupcakedream,
    If you strip out all the CSS that's not doing anything you end up with a very basic layout example that is just executed wrong.

    Run this through the validator and you can see a few mistakes that will change your layout once corrected -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Testing Document (Firefox Float Bug)</title>
    <style type="text/css">
    body {
    	background: #000000 url(../images/background.jpg) no-repeat center top;
    	padding: 0px;
    	margin: 0px;
    	color : #000000;
    	font: 11px Tahoma;
    }
    div.container {
    width:1008px;
    margin: auto;
    background: #4188BC;
    padding: 10px;
    height: 100%;
    }
    div.services#row2 {
    background-color:307cb6;
    float:left;
    }
    </style>
    </head>
    <body>
        <div class="container">
                <div class="services" id="row2">
                    <p>
                        I want to display 2 divs (#left_container and #right_container) next to each other. It works perfect in IE7, 
                        but in firefox the right container sometimes shows below the left container. But it doesn’t happen all the 
                        time, only like 1 out of 10 reloads. The page content does not change. I’ll post the code below.
                    </p>
                </div>
                    <div class="services" id="row2">
                        <p>
                            I want to display 2 divs (#left_container and #right_container) next to each other. It works perfect in IE7, 
                            but in firefox the right container sometimes shows below the left container. But it doesn’t happen all the 
                            time, only like 1 out of 10 reloads. The page content does not change. I’ll post the code below.
                        </p>
                    </div>
            <div class="services" id="row2">
                    <p>
                        I want to display 2 divs (#left_container and #right_container) next to each other. It works perfect in IE7, 
                        but in firefox the right container sometimes shows below the left container. But it doesn’t happen all the 
                        time, only like 1 out of 10 reloads. The page content does not change. I’ll post the code below.
                    </p>
            </div>
        <!--end container--></div>
    </body>
    </html>
    To point out a few, look at the CSS for div.services#row2. You need to give your floats a width or else they don't work.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the response! I ran my code through a validator - and I found some issues, and fixed them.

    I found the when i take out "background-image:url(../images/horizontal_border.jpg;" from the css, my div.servicebox elements float like a champ! Is the markup wrong on that line?

    [CODE]
    div.horizontal_bar {
    background-image:url(../images/horizontal_border.jpg;
    background-repeat:repeat-x;
    clear:both;
    height:10px;
    }
    [CODE]

  • #4
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ugghhh - got it! I need the single quotes in there. So this one little thing has been killing me for hours. I got to get these details, agh!

    Are there any code editors that will highlight errors like these while editing?

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by cupcakedream View Post
    Are there any code editors that will highlight errors like these while editing?
    DreamWeaver does, to some extent. Can't beat the validator though.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I use dreamweaver and if you're using dreamweaver's auto-complete for writing css - it doesnt use the single quotes. Although it does mark it differently (wrong if you know what to look for) - you'd think to trust the auto complete in the first place!

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Thanks for the response! I ran my code through a validator - and I found some issues, and fixed them.

    I found the when i take out "background-image:url(../images/horizontal_border.jpg;" from the css, my div.servicebox elements float like a champ! Is the markup wrong on that line?

    [CODE]
    div.horizontal_bar {
    background-image:url(../images/horizontal_border.jpg;
    background-repeat:repeat-x;
    clear:both;
    height:10px;
    }
    [CODE]
    I never use single quotes on anything.
    In that code you provided in your first post there is no <div class="horizontal_bar>
    It's kind of hard to see what's going on when you don't provide all the information. We don't even know if you're using a DocType. It would be best if you could just link us to the test site, especially since there are images involved.

    Whenever posting code, please use the code tags, &#91;code&#93;&#91;/code&#93; - available with the # button in the post edit window.
    This will wrap your code in a scroll box which greatly helps the readability of your post.
    Last edited by Excavator; 01-12-2010 at 11:07 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Have you used that css property without single quotes? It was causing major issues for me!

    I'm new to posting website code, so thanks for the advice.

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    I never use single quotes on anything.
    .....
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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