-
Dec 19th, 2014, 03:18 PM
#1
[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;
}
-
Dec 19th, 2014, 03:48 PM
#2
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
-
Dec 19th, 2014, 03:53 PM
#3
Re: [CSS] Renders Differently on FF
I was able to fix it by adding the following CSS:
Code:
#main {
display: inline-block;
}
-
Dec 19th, 2014, 05:49 PM
#4
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?
-
Dec 19th, 2014, 05:50 PM
#5
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
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|