#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2004
    Posts
    39
    Rep Power
    0

    Firefox Creating problem


    I created a new layout for a back office design.

    My problem is that it works ok in every browser but Firefox.

    The layout is like this.
    ___
    | | |
    ___

    The top underline represents the header, which goes from the exact left of the first column to the far rights of the third, it is a SINGLE column.

    The first PIPE represents the first column, which is approximately 170px wide, it has navigation links, etc.
    The middle PIPE represents the middle column, which is where all the content goes... It is set to be 900px wide and the third column represents the third column which is also 170px wide.
    The footer is also a single column...

    Anyhow, the middle column in Firefox, was for some reason, not in the middle but was far on the right. and it created a scroll bar to have to scroll over to see it.

    I don't know what happened, it was working fine. I have no idea what I changed.

    Here is the CSS that is used for the layout:
    Code:
    #outerWrapper {
    	margin: 0 auto 20px;
    	text-align: left;
    	width: 1375px;
    } // This sets the outer rim and width of where the content all is... 190 for the left, 190 for the right 995 for the middle... some padding takes up part of the 995
    
    
    #outerWrapper #contentWrapper #leftColumn1 {
    	float: left;
    	padding: 0px;
    	width: 190px;
    }
    
    #leftColumnContent {
    	padding: 0px 0px 10px;
    	width: 170px;
    }
    #outerWrapper #contentWrapper {
    	padding-right: 10px;
    	padding-left: 10px;
    }
    #leftColumn1 ul, #rightColumn1 ul {
    	margin: 0px;
    	padding: 10px 0px 20px;
    }
    #leftColumn1 ul li, #rightColumn1 ul li {
    	list-style: none;
    	display: inline;
    }
    #leftColumn1 ul li a, #rightColumn1 ul li a {
    	display: block;
    	padding: 4px 4px 6px 20px;
    	line-height: 18px;
    	background: url(/images/2.0/sidenav-bg.jpg) no-repeat left top;
    	font-family: Arial, Helvetica, sans-serif;
    }
    #leftColumn1 ul li a:hover, #rightColumn1 ul li a:hover {
    	text-decoration: none;
    	background: url(/images/2.0/sidenav-bg-over.jpg) no-repeat left top;
    	color: #FFFFFF;
    }
    
    
    //fltlft = Float the image LEFT...
    .fltlft {
    	float: left;
    	margin-right: 10px;
    	margin-bottom: 10px;
    }
    
    
    //fltlft = Float the image RIGHT...
    .fltrt {
    	float: right;
    	margin-left: 10px;
    	margin-bottom: 10px;
    }
    #content-left ul li, #content-right ul li {
    	margin-bottom: 5px;
    }
    #content-left p, #content-right p {
    	line-height: 18px;
    }
    .sidebarlt {
    	padding: 10px;
    	border: 1px solid #C7DAC5;
    	background: #F1F8F1;
    }
    .sidebardk {
    	color: #FFFFFF;
    	background: #366D00;
    	border: 1px solid #000000;
    	padding: 10px;
    }
    .sidebardk a, .sidebardk a:hover, .sidebardk a:visited, sidebardk a:active {
    	color: #FFFFFF;
    }
    .sidebarbox {
    	background: url(/images/2.0/sidebox-fill.gif) repeat-y left;
    	margin-top: 15px;
    	margin-bottom: 15px;
    }
    .sidebarbox p {
    	margin: 0px;
    	padding: 0px;
    }
    .sidebarboxtop {
    	background: url(/images/2.0/sidebox-top.gif) no-repeat left top;
    	padding: 12px 10px 0px;
    }
    .sidebarboxbottom {
    	background: url(/images/2.0/sidebox-bottom.gif) no-repeat left bottom;
    	height: 13px;
    }
    #footer p {
    	margin: 0px;
    	padding: 0px 0px 3px;
    }
    #credit {
    	color: #CCCCCC;
    	padding-left: 10px;
    }
    #credit a, #credit a:hover, #credit a:visited, #credit a:active, #credit a:focus {
    	color: #CCCCCC;
    	font-weight: normal;
    }
    .clearFloat {
    	clear: both;
    	display: block;
    }
    
    
    
    
    //// CSS for my fieldset... which is in webform div tag...
    
    
    #webform2 ul
    {
    float:left;
    width:100%;
    padding:0;
    margin:0;
    list-style-type:none;
    }
    
    #webform2 li {
    display:inline;
    float:left;
    width:6em;
    color:darkgreen;
    background-color:white;
    padding:0.2em 0.6em;
    border-right:1px solid white;
    }
    
    #webform2 #header li {
    display:inline;
    float:left;
    width:6em;
    color:white;
    background-color:darkgreen;
    padding:0.2em 0.6em;
    border-right:1px solid white;
    }
    
    #webform2 .darkgreen {
    	font-family: Verdana, sans-serif;
    	color: #32401C;
    	font-weight: bold;
    	font-size: 14px;
    }
    
    #webform2 .darkgreensm {
    	font-family: Verdana, sans-serif;
    	color: #32401C;
    	font-weight: bold;
    	font-size: 12px;
    }
    
    #webform2 label {
    	font-family: Verdana, sans-serif;
    	font-weight: bold;
    	color: #660000;
    	font-size: 12px;
    	margin-left: 0px;
    }
    
    #webform2 p { 
    	font-family: Verdana, sans-serif;
    	font-size: 12px;
    	font-weight: bold;
    	color: #66000;
    	margin-left: 6px;
    }
    
    #webform2 fieldset {
    	width: 800px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	border: 1px solid #000000;
    	background: #c1df7d;
    	color: #000000;
    	padding: 10px 20px;
    }
    
    #webform2 legend {
    	position: absolute;
    	top: -.9em;
    	left: 1em;
    	width: 450px;
    	background: #4a6c0e;
    	color: #FFFFFF;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 13px;
    	font-weight: bold;
    	border: 1px solid #cccccc;
    	border-bottom-color: #999999;
    	border-right-color: #999999;
    	padding: 4px 8px;
    }
    The code that goes on the left is like this:

    Code:
    <!-- LEFT COLUMN HTML _ SAMPLE -->
        <div id="leftColumn1">
          <div id="leftColumnContent">
            <strong>Quick Links</strong>
          </div>
        </div>
    <!-- END LEFT COLUMN SAMPLE -->
    
    <!-- RIGHT COLUMN HTML _ SAMPLE -->
        <div id="rightColumn1">
          <div id="rightColumnContent">
            <div class="sidebarbox">
               Sample Content
            </div>
          </div>
        </div>
    <!-- END RIGHT COLUMN SAMPLE -->
    
    <!-- MAIN COLUMN HTML _ SAMPLE -->
    
        <div id="content-right"><br />
          <br /><!-- Create some space from top... -->
    						<div id="webform2">
    						<fieldset style="text-align: left;">
    							<legend>Free Tea Giveaway - System</legend><br />
    							<br />
    								<p><label>Link Sample</label><br />...
    <br />
    </fieldset><br />
    </div><!-- End webform2 --><br />
    <br />
    </div><!-- End content-right -->
    
    <!-- END MAIN COLUMN SAMPLE -->
    
    
    <!-- Footer Content - Sample HTML -->
    <!-- end the float... -->
        <br class="clearFloat" />
      <div id="footer">
      	<p align="center">
      	  	Some HTML in Footer...
      	</p>
      </div>
    <!-- End Footer Content - Sample -->
    That is how it is built, but for some reason, as I said, the middle content in Firefox, does not work.
    So, I added Position code to the css, but that made it align to the left right, but nothing I did with that, made the width work right, either it is too wide, or completely to short, etc.
    But if I don't put a position: in it, then the content is way over on the right side of the right sidebar...

    Anyone know how to fix this?
    I already have my programming detect the browser, if Firefox, it outputs code that the other browsers do not, so if I can fix it in this css, it will only affect Firefox, not the other browsers...

    Thanks for any assistance you can offer me,
    Richard
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,129
    Rep Power
    4304
    If you need browser-specific code for the latest versions of Firefox for a simple layout like that, then there's something wrong with the code.

    Which doctype are you using? Is your HTML valid? The first step in debugging should always be making sure that your code is valid (in order to rule out any errors as the cause for the problem).
    http://validator.w3.org/
    http://jigsaw.w3.org/css-validator/ (Under "more options", make sure the "Profile" is set to "CSS level 3" and set "Vendor Extensions" to "Warnings".)

    I only see the CSS rule for the first of the 3 columns. We need to see more of your HTML and CSS.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo