Results 1 to 5 of 5

Thread: [RESOLVED] [CSS] Renders Differently on FF

  1. #1

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    9,679

    Resolved [RESOLVED] [CSS] Renders Differently on FF

    I'm creating a database management system for a local insurance guy using HTML5, CSS3, JavaScript, and PHP. Right now I'm simply creating the webpage content, but I'm having issues where it's rendering differently on FireFox(34.0.5) than it is on Internet Explorer(11).

    On Internet Explorer it's rendering how I want it to: the header is on top, the quick search table is directly below the header, and the advanced search table is directly below the quick search. However on FireFox, it is rendering it like this: the header is on top, the quick search table is directly to the right, and the advanced search table is below the quick search table, but it's vertical position is all the way to the left of the screen(where it's suppose to be).

    Why would it be rendering differently on the different browsers?

    Here is the code that I'm using:
    Code:
    <!DOCTYPE html>
    <html>
    
    	<body>
    		
    		<header>
    			<!-- Navigation -->
    			<nav id='globalNav'>
    				<a href='#'><span id='current'>Search</span></a>
    				<a href='goals.html'>Goals</a>
    				<a href='add.html'>Add New</a>
    				<a href='admin.html'>Admin</a>
    			</nav>
    		</header>
    		
    		<div id='main'> <!-- prevent using <main> due to IE -->
    		
    			<!-- Quick Search -->
    			<table id='quickSearch'>
    				<tr>
    					<th>Quick Search</th>
    				</tr>
    				<tr>
    					<td>Policy Number:</td>
    					<td><input id='txtPolicy' type='text' /></td>
    					<td><input id='btnPolicy' type='submit' value='Search' /></td>
    				</tr>
    				<tr>
    					<td>Phone  Number:</td>
    					<td><input id='txtPhone' type='text' /></td>
    					<td><input id='btnQuickPhone' type='submit' value='Search' /></td>
    				</tr>
    				<tr>
    					<td>Email Address:</td>
    					<td><input id='txtEmail' type='text' /></td>
    					<td><input id='btnEmail' type='submit' value='Search' /></td>
    				</tr>
    			</table>
    			
    			<!-- Advanced Search -->
    			<table id='quickSearch'>
    				<tr>
    					<th>Advanced Search</th>
    				</tr>
    				<tr>
    					<td>Agency:</td>
    					<td>
    						<select id='cboAgency'>
    							<option value='*'>All</option>
    						</select>
    					</td>
    				</tr>
    				<tr>
    					<td>First Name:</td>
    					<td><input id='txtFirstName' type='text' /></td>
    				</tr>
    				<tr>
    					<td>Last Name:</td>
    					<td><input id='txtLastName' type='text' /></td>
    				</tr>
    				<tr>
    					<td>Address:</td>
    					<td><input id='txtAddress' type='text' /></td>
    				</tr>
    				<tr>
    					<td>City:</td>
    					<td><input id='txtCity' type='text' /></td>
    				</tr>
    				<tr>
    					<td>State:</td>
    					<td><input id='txtState' type='text' /></td>
    				</tr>
    				<tr>
    					<td>Zip:</td>
    					<td><input id='txtCity' type='text' /></td>
    				</tr>
    				<tr>
    					<td></td>
    					<td><input id='btnSearch' type='submit' value='Search' /><input id='btnReset' type='button' value='Reset' /></td>
    				</tr>
    			</table>
    					
    		</div>
    				
    	</body>
    
    </html>
    Code:
    /* ---------- GENERAL ---------- */
    * {
    	-moz-box-sizing: border-box;
    	box-sizing: border-box;
    }
    *:before, *:after {
    	-moz-box-sizing: border-box;
    	box-sizing: border-box;
    }
    
    body {
    	background: #eaeaea;
    	color: #999;
    	font: 400 16px/1.5em sans-serif;
    	margin: 0;
    }
    
    h3 {
    	margin: 0;
    }
    
    a {
    	color: #999;
    	text-decoration: none;
    }
    
    a:hover {
    	color: #1dabb8;
    }
    
    select {
    	width: 100%;
    }
    
    input {
    	border: none;
    	font-family: inherit;
    	font-size: inherit;
    	margin: 0;
    	-webkit-appearance: none;
    }
    
    input:focus {
    	outline: none;
    }
    
    input[type="submit"],
    input[type="button"] {
    	cursor: pointer;
    }
    
    /* ---------- NAVIGATION ---------- */
    #globalNav {
        background: none repeat scroll 0px 0px transparent;
        background-color: rgb(113, 112, 112);
    	display: table;
        float: left;
        min-height: 45px;
        width: 100%;
    }
    
    #globalNav a {
        background: none repeat scroll 0px 0px transparent;
        background-color: rgb(113, 112, 112);
        color: rgb(255, 255, 255);
    	display: table-cell;
        font: 13px/1.4em arial, helvetica, sans-serif;
        line-height: 45px;
        text-align: center;
        transition: color 0.4s ease 0s;
        text-decoration: none;
        vertical-align: baseline;
        white-space: nowrap;
        width: 25%;
    }
    
    #current {
        text-decoration: underline;
    }
    
    /* ------------- MAIN ------------- */
    th {
    	color: #CC0000;
    }
    
    td {
    	margin-left: 15px;
    }

  2. #2
    PowerPoster techgnome's Avatar
    Join Date
    May 2002
    Posts
    32,956

    Re: [CSS] Renders Differently on FF

    That's one of the problems I've had with CSS as well over the years. From what I've been able to figure out - the CSS "standards" only dictate WHAT needs to be implented, but doesn't specify HOW. Which means each implementation can vary from browser to browser. That's where you get these weird variations like this. I suspect that because the globalNav is floated to the left, it's taking the next element and putting it immediately after it, causing it to land on the right. Which is actually typical. It's IE that's "out of order" ... to get "around" this, is to use an empty clearing div (goggle: css clearing floats) in between. IE and FF will render it the same way. I find it's actually easier to design against FF/Chrome/NS and then correct around IE rather than the other way around. (unless you're specifically needing to target IE first as the "standard" browser).

    Just something to think about.

    -tg
    * I don't respond to private (PM) requests for help. It's not conducive to the general learning of others.*
    * I also don't respond to friend requests. Save a few bits and don't bother. I'll just end up rejecting anyways.*
    * How to get EFFECTIVE help: The Hitchhiker's Guide to Getting Help at VBF - Removing eels from your hovercraft *
    * How to Use Parameters * Create Disconnected ADO Recordset Clones * Set your VB6 ActiveX Compatibility * Get rid of those pesky VB Line Numbers * I swear I saved my data, where'd it run off to??? *

  3. #3

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    9,679

    Re: [CSS] Renders Differently on FF

    I was able to fix it by adding the following CSS:
    Code:
    #main {
    	display: inline-block;
    }

  4. #4
    WiggleWiggle dclamp's Avatar
    Join Date
    Aug 2006
    Posts
    3,529

    Re: [RESOLVED] [CSS] Renders Differently on FF

    1) Good luck with cross browser compatibility. The web apps that I have made are all services as opposed to public sites (read: Facebook/Google/Etc) so I am able to say "you can only use Chrome". Thus I design only with Chrome in mind. Some may say this is not a good way to do web design but its my product so I am allowed to do it

    2) Can you post screenshots so I can see?

  5. #5
    WiggleWiggle dclamp's Avatar
    Join Date
    Aug 2006
    Posts
    3,529

    Re: [RESOLVED] [CSS] Renders Differently on FF

    I typed that out... walked a way for an hour. Came back. Finished typing. Posted. Now I am late to the party.

Posting Permissions

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



Click Here to Expand Forum to Full Width