|
CSS - Css Broken In Firefox
I am working on a template that looks great in IE and Chrome but Firefox makes it look really ugly so I was curious if anyone would mind looking at my site and telling what they think I need. centextechs is the site
Any help is greatly appreciated Randy Similar TutorialsHey, I had a website which ran for about an year on most browsers with no probs. Now when Firefox v4 struck my site css is broken and im struggling to make it work on all sites properly. I know its shameless of me to ask to look trough the whole site but i just cant pick out where the problem exactly lies. the site is www . alterum . ee in firefox v4 main menu just breaks and seems like drags the content-wrapper with it. other browsers work fine atm. i would really appriciate if someone heped me with that problem. Or ill have to redo whole css from scratch which would be a bummer. I am having a problem displaying text under images in IE, it looks fine on FF though. In IE the text runs down the side of the images and looks really bad. Can someone tell me why it does not display properly in IE? Here is an example page product_info.php?products_id=209 And this is the stylesheet stylesheet.css Any help would be much appreciated. Thanks Peter PS. Looks like I am not allowed to post links yet, I can send them to you if you like? the menu at the site I am building myself at: http://sphinxgaming.ath.cx/ Works perfectly in firefox, all links are missing on the menu in IE And the validator gives me some very strange errors (document type does not allow element "BODY", for example) http://validator.w3.org/check?uri=h...lidator%2F1.654 Any ideas? By the way, I have tried 3 different DOCTYPES, with no better results Hello Everybody, I had this site working in opera and IE and it works beautifully. When it comes to firefox, the box form extends for a hundred pixels and I don't know why. The sheet is set at a specific width and i can't change anything with the form in css. can anyone please help me with this, thank you. here is the site Firefox not working for form Hi I have done two pages and they seem to work fine in IE8 but when I view it in firefox there are a couple of issues: link On the home page i have a lightbox set up for the polaroids with specific width and height. In IE the div is exact in size but in firefox the div seems to expand beyond the dimensions of the div (a red dotted border is displayed on click) On the Products page, the right hand side of the book has products listed in which you hover over and the polaroids will reflect different angled shots of the product that the cursor is over. Each product line is a hyperlink but in Firefox some of these lines are unlinkable whereas in IE there is no problem here! It is the same instance with the sub menu on the left hand page too Can anyone point me in the right direction of solving these issues please? Hi all, I have a small problem with the new design for my website and after trying things for like 30 minuts and asking some other people I decided to give up and try here. It's probably going to be something very simple but I just can't figure out what Website: URL CSS: URL Explaination pictu URL The first part is how it shows in Internet Explorer, the second shows Firefox and the third how it is supposed to be. I hope somebody can help me with this. Thx in advance. Greetings, Sjoerd Hi guys. For some reason, this page's layout is broken.. I'm suspecting that it's a problem with css. Page is mtvicdojo.org.nz/2008/03/20/thanks/ Here is my css. mtvicdojo.org.nz/wp-content/themes/theme_mtvicdojo/style (dot) css Any ideas why it is broken..? Thanks. Hi everyone, Help please. I'm relatively new to CSS. I've coded the following application form and when opened in Chrome and IE9 the formatting and layout is shown as expected. IE8 doesnt seem as friendly and the 2nd page 'Questionnaire' has broken borders. Can anyone help? Here is the CSS behind the 'Job Application Form' @charset "UTF-8"; /* CSS Document */ body{ background-image: url(xxxxxx); background-repeat: no-repeat; background-position: top left; background-color: #CBCBCB} form{ background-color:#FFFFFF; width:800px; margin:90px auto; border:2px solid #A9A9A9; padding: 20px; } #header_content * {font-family:Arial,Helvetica,sans-serif!important} #content {margin-bottom:20px;} #sectionCandInf, .sectionContent, #content div *{background-color:#FFF} #aq523 {width:650px;} #aq515 {width:650px;} #aq516 {width:650px;} #aq517 {width:650px;} #aq519 {width:650px;} #aq522 {width:650px;} #aq524 {width:650px;} #aq521 {width:650px;} #aq525 {width:650px;} #aq518 {width:650px;} #aq520 {width:650px;} #aq2922 {width:650px;margin-bottom:10px;} #aq2924 {width:650px;margin-bottom:10px;} #aq2916 {width:650px;margin-bottom:10px;} #aq2917 {width:650px;margin-bottom:10px;} #aq2918 {width:650px;margin-bottom:10px;} #aq2919 {width:650px;margin-bottom:10px;} #aq2920 {width:650px;margin-bottom:10px;} #aq2923 {width:650px;margin-bottom:10px;} #aq2926 {width:650px;margin-bottom:10px;} #aq2925 {width:650px;margin-bottom:10px;} #chpLoginSection{margin-top:20px; border:2px dotted #0092B5} #chpCreateSection {margin-top:20px;border:2px dotted #0092B5} h5 { font-size: 110%; font-weight: bold; margin: 0; padding: 20 20px; background-color: #fff!important; color: #FFFFFF; width: 25em; float: left; color: #000; } #reqstar{margin-bottom: 20px; margin-right: 80px} .section fieldset { clear: left; width:100%; padding: 5px 0; color: inherit; background-color: #CCCCFF; border:1px solid #A9A9A9; } #sectionDocument {padding-right:0px;padding-top:8px;margin-left: 30px;margin-right:30px; border:1px solid #A9A9A9}} #sectionDocument, .sectionContent #sectionDocument select, #sectionDocument input {margin-bottom:10px;} #sectionDocument #aq2822, #sectionDocument #aq2824 {width:400px;} #sectionDocument #aq2822 label, #sectionDocument #aq2824 label {width:40px;} .submit input, #footersubmitbav div input, input.chpbutton, input.footerbutton {font-size:12px; font-family:Arial,Helvetica,sans-serif; border: 1px solid #7F7F7F!important; background-color:#547EA8!important; text-align:center; cursorointer; text-decoration:bold !important; font-weight:normal; color:#ffffff;padding:4px 6px 4px 6px !important; } /*Job summary headers*/ .headerlabel1, .headerlabel2, .headerlabel3 {font-weight:bold;color:#A32425;} .headerlabel1, .headerlabel2 {padding-left:0px;} .headervalue1, .headervalue2, .headervalue3, .headerlabel1, .headerlabel2, .headerlabel3 {font-size: 14px;} .headerlabel3 {padding-left:0px;} .bodyAppProc h4 {font-size: 17px; font-weight:bold; color:#A32425;} .bodyAppProc h5, .bodyAppProc h6 {font-size: 14px; font-weight:bold;color:#A32425;} .bodyAppProc input, .bodyAppProc textarea, .bodyAppProc select{font-size: 11px;} #saveApp {margin-top:20px; margin-bottom: 20px;} #step_navigation_content, #content h4{margin-left:00px;} #headertable{padding: 10px 0px 10px 0px; line-height:1.7em; } .section h5{padding-left:0;} #chpCreateSection {border-left:1px dotted #C8B08BF!important} #step1input input, #step2input input,#step2input input,#step3input input, a.currentStep {font-size: 14px!important} /* migration 28B -> 28C */ #sMobilePhoneNumber {width:220px;} #tem {border:none;} #sectionWelcome {background-color: #fff} /*MedusaTech Additions*/ #aq6783 {margin-bottom:10px} #aq6696 {margin-bottom:10px} #aq6700 {margin-bottom:10px} #navbarValue a, #navbarValue input {font-size:14px;color:#4F6DB6;text-decoration:none;padding-top:1px;} #navbarValue a:hover, #navbarValue input:hover {text-decoration:underline;} #navbarValue .disabledLink a, #navbarValue .disabledLink input {color:#000000;} #navbarValue .disabledLink a:hover, #navbarValue .disabledLink input:hover {text-decoration:none;} #navbarLabel {font-size:14px;} .navbarLine {padding:0;margin:0;} #sectionAttachContent {border: 1px solid #A9A9A9;} .label {width:242px;} #sectionAttachContent .value {} I'm having a very hard time getting a particular website to look correctly in IE6. It looks perfect in Safar, Firefox, and IE7. But of course, IE6 can't seem to figure out what I want done. If you go to www . sixpak . org/~chafer2002/tactical/index.php (remove the spaces between www and sixpak and sixpak and org), you'll see the page. The page is laid out with a branding area, navigation area, a main content <div>...and within the main content <div>'s there are three "sub" <divs>...a left content, middle content (for the bulk of the content), and a right content. For some reason, the right content <div> "breaks" the middle content <div> and is pushed off to the left. I can't figure out how to get it back where it belongs...on the left side of the page. You can view the same link in Firefox. It looks fine. I'd appreciate any ideas on how to get this page to look right. Thanks! Russell For some reason my sidebar keeps breaking the wrapper and floating under my content on my blog page. universitysquarecondos. com / owners-2 / updates/ Sorry about wack url but it wont let me post urls since it thinks I may be spamming or something... Note that this only happens in IE, not in Mozilla (of course... ) Any ideas? Thanks for helping a noob get his sealegs, Reid This is a first I've seen my problem and I'm hoping it's something silly stupid. check out the site, code is listed below as well: http://bigoak.kjellandrew.com Ultimately I'm trying to float the sidebar to the left of the main content. First thing I notice is that the banner image has excess margin that is anywhere in the CSS. I've tried everything to eliminate that spacing and am starting to think it's related to my other problem. Second is that when I try to float the side bar (float: left on content and float: left on sidebar) it kills the div #body prematurely. You can tell cause the background color disappears and using firebug proves it showing that the body div is shortened. I've tried specifying heights (min height does extend it, but ultimately not a fix). I've made sure all of my divs are closed in proper order. And I've checked for random ", ', }, or / in my CSS and html and it's totally clean. It validates just fine too. HELP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Big Oak - Home</title>
<style type="text/css">
* { margin: 0; padding: 0;}
a img {
border: none;
}
.clear {
clear: both;
}
body {
background: url('_img/outside_bg.png') no-repeat top center #59858b;
}
#body {
margin: 0 auto;
margin-top: 50px;
background-color: #fff;
width: 950px;
height: 100%;
}
#header {
background: url('_img/header_wood.jpg') no-repeat top;
width: 950px;
height: 75px;
}
#header h1 {
text-indent: -9000px;
font-size: 0;
}
#header img.logo {
float: left;
position: relative;
top: -50px;
}
#header img.banner {
margin: 0px auto;
}
#header ul {
float: left;
list-style: none;
padding-top: 40px;
width: 480px;
}
#header li {
display: inline;
margin: 10px;
font-family: helvetica;
font-weight: normal;
font-size: 1em;
}
#header li a:link,
#header li a:active {
text-decoration: none;
color: #231f20;
}
#header li a:hover,
#header li a:active {
border-bottom: 2px solid #444;
}
#header form {
float: left;
margin: 30px 5px 0 0;
display: inline;
}
.searchbox {
height: 1.5em;
font-size: 1em;
padding: 2px 2px 2px 5px;
width: 140px;
vertical-align: middle;
border: 1px solid #ccc;
}
.searchsubmit {
vertical-align: middle;
}
#social_links img {
float: left;
padding: 30px 5px 0 0;
}
#container {
width: 890px;
margin: 0px auto;
}
#content {
width: 560px;
float: left;
}
#sidebar {
width: 270px;
margin-left: 25px;
}
</style>
</head>
<body>
<div id="body">
<div id="header">
<h1>Big Oak</h1>
<a href="/"><img src="_img/bigoak_logo.png" alt="big oak logo" class="logo" height="119" width="142"></a>
<ul class="nav">
<li><a href="#">about</a></li>
<li><a href="#">speaking</a></li>
<li><a href="#">a:life</a></li>
<li><a href="#">go events</a></li>
<li><a href="#">contact</a></li>
</ul> <!-- ends main navigation list -->
<form method="get" action="">
<p><input type="text" class="searchbox">
<input type="image" src="_img/go.png" class="searchsubmit"></p>
</form>
<div id="social_links">
<a href="#"><img src="_img/facebook.png" alt="facebook"></a>
<a href="#"><img src="_img/twitter.png" alt="twitter"></a>
<a href="#"><img src="_img/rss.png" alt="rss"></a>
</div> <!-- ends social links div -->
</div> <!-- ends header div -->
<div id="container">
<img src="_img/header_img.jpg" alt="banner" class="banner" width="890" height="270">
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam adipiscing ultrices scelerisque. Fusce suscipit nulla eu sem placerat imperdiet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris laoreet suscipit risus id elementum. Sed massa ante, ornare nec rutrum sit amet, fringilla ac quam. Donec sed rutrum sem. Aenean vulputate molestie quam, eget vehicula justo pellentesque quis. Aliquam consequat est vitae purus pellentesque aliquam. In sagittis dolor et dolor fermentum mattis. Sed sed purus urna, feugiat suscipit tellus. Etiam sollicitudin metus in ante consectetur pretium vulputate ligula fringilla. Sed condimentum dignissim ipsum ut consectetur. Curabitur pellentesque placerat neque. Nam ante sem, condimentum eget aliquet eget, auctor vitae nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacinia odio in ante consectetur condimentum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam adipiscing ultrices scelerisque. Fusce suscipit nulla eu sem placerat imperdiet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris laoreet suscipit risus id elementum. Sed massa ante, ornare nec rutrum sit amet, fringilla ac quam. Donec sed rutrum sem. Aenean vulputate molestie quam, eget vehicula justo pellentesque quis. Aliquam consequat est vitae purus pellentesque aliquam. In sagittis dolor et dolor fermentum mattis. Sed sed purus urna, feugiat suscipit tellus. Etiam sollicitudin metus in ante consectetur pretium vulputate ligula fringilla. Sed condimentum dignissim ipsum ut consectetur. Curabitur pellentesque placerat neque. Nam ante sem, condimentum eget aliquet eget, auctor vitae nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacinia odio in ante consectetur condimentum.</p>
</div> <!-- ends content area -->
<div id="sidebar">
<h3>Cool Sidebar</h3>
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
</div><!-- ends sidebar div -->
</div> <!-- ends container div for main area of content -->
</div>
</body>
</html>
Hi, we are hoping someone can help us figure out why (besides the obvious) our CSS isn't rendering our site correctly in any version of IE. If you take a look at our website (DJDeals) in Chrome or Safari, you'll see how it should look. Then take a look in IE. The shopping cart and other major features are WAY our of place... help? We've implemented a slightly modified form of suckerfish dropdowns...apparently I can't post links, but it's at jlfurnishings.com Here's the markup and javascript: Code:
<ul id="nav-bar" class="nav-bar">
<li><a href="/jlf/pages/facility" >Facility</a></li>
<li><a href="#" >About Us</a>
<ul>
<li><a href="/jlf/pages/aboutjlf" >JLF</a></li>
<li><a href="/jlf/pages/aboutlm" >Lone Meadow</a></li>
</ul>
</li>
<li><a href="/jlf/pages/designerresources" > Designer Resources</a></li>
<li><a href="#" >Projects / Clients</a> <ul>
<li><a href="/jlf/pages/hotels" >Hotels</a></li>
<li><a href="/jlf/pages/restaurants" >Restaurants</a></li>
</ul>
</li>
<li><a href="/jlf/pages/links" >Links</a></li>
<li><a href="/jlf/pages/newsevents" >News / Events</a></li>
<li><a href="/jlf/pages/calendar" >Calendar</a></li>
<li class="nav-bar-white">
<a href="/jlf/pages/contactus"><font style="color:#2E350A;">Contact Us</font></a>
</li>
</ul><!--end nav-bar -->
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav-bar").getElementsByTagName("LI");
if (!sfEls) sfEls = document.getElementById("nav-bar-products").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
Here's the CSS: Code:
#nav-bar {
position:relative;
float:left;
width:595px;
height:25px;
text-align:left;
padding-left:6px;
margin-left:30px;
line-height:25px;
}
.nav-bar {
position:relative;
float:left;
width:595px;
height:25px;
background:url(../img/content-nav-bg.jpg) #FFF no-repeat;
text-align:left;
padding:0px;
margin:0px;
padding-left:6px;
margin-left:30px;
line-height:25px;
color:#FFF;
}
.nav-bar li {
position:relative;
list-style:none;
display:inline;
margin:0px;
margin-left:-4px;
padding:0px;
}
.nav-bar a {
color:#FFFFFF;
font-size:11px;
font-weight:normal;
padding:0px;
padding-left:12px;
padding-right:8px;
margin:0px;
border-right:solid 1px #FFF;
margin:0px;
margin-left:-4px;
}
.nav-bar a:hover {
position:relative;
color:#2E350A;
background:#FFF;
padding:7px;
padding-left:12px;
padding-right:8px;
margin:0px;
margin-left:-4px;
}
.nav-bar li.nav-bar-highlight {
position:relative;
color:#FFF;
background:#FFFFFF;
font-size:11px;
font-weight:normal;
padding:7px;
padding-left:12px;
padding-right:8px;
margin:0px;
margin-left:-4px;
}
.nav-bar li.nav-bar-highlight a {
position:relative;
color:#2E350A;
background:#FFFFFF;
font-size:11px;
font-weight:normal;
padding:7px;
padding-left:12px;
padding-right:8px;
margin:0px;
margin-left:-4px;
}
/** this is for the "contact us" item that has a white background **/
.nav-bar-white {
background:#FFFFFF;
}
.nav-bar li ul, .nav-bar-products li ul { /* second-level lists */
position: absolute;
background: #E1E1E1;
z-index:9;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}
.nav-bar li ul li, .nav-bar-products li ul li {
border:0px;
float:left;
clear:left;
margin-left:5px;
z-index:900;
}
.nav-bar li ul li a, .nav-bar-products li ul li a {
color:#4C4C4C;
border:0px;
width: 10em;
}
#nav-bar li:hover ul, #nav-bar li.sfhover ul, #nav-bar-products li:hover ul, #nav-bar-products li.sfhover ul { /* lists nested under hovered list items */
left: auto;
left:-20px;
top:10px;
z-index:900;
width: 10em;
}
They work fine in Firefox (for the most part...feels a little unstable), but in IE6 (and 7, I believe), the dropdowns are all jacked. Can anyone shed any light on this? I've played with it, but I'm not making any progress. My client is freaking out because this is overdue and my css guy is MIA and I'm about to rip my hair out. Any insight at all would be welcome... (URL address blocked: See forum rules) (dropdowns for 'About Us' and 'Projects / Clients') On a sidenote: how do you guys do this? I'm a PHP developer and CSS is like black magic to me :-) I can usually get things working fine in non-IE browsers, but then I pull up the site in IE and I'm completely mystified. Kudos to you all... Hi I am not new to web development but fairly new to css and learning css-xhtml for web 2.0. I am making a design at http://www.superstaruk.com/v/ it shows fine in IE but in FF, Chrome and Opera etc it shows broken. Main problem is with pistioning the divs and also the background of free delivery does not appear. Can anybody help me please by pointing out the problem? I read the box-model but even according to that i am unable to solve this. thank you Hey guys, Never needed to ask for help before but I've ran out of ideas with this one. I'm in the process of making a web development site and ironicly, came into a problem with the CSS. I have a main content area like every site does where all the content goes. And then a navigation to the right of the content box for things like search, or additional links that I might want to add. http://img254.imageshack.us/img254/1762/heightproblempp4.jpg <--- Img here Because I need the navigation to be 100% height, its caused me a lot of time trying to get it to work. I need to set the .body and the .cont_nav css classes both to 100% height for the navigation height to work as I would "correctly". However when .body has a set width its causing overflow of the text. (seen below) http://img257.imageshack.us/img257/8436/footerproblemic6.png And im hoping there is a way to get both the content not overflowing and height set to 100% so that the navigation can work. Code:
.body <--- White Area with curl
{
background-color: white;
color: #333333;
background-image: url(images/curl.jpg);
background-repeat:no-repeat;
height: 100%; <---- Problem
}
#wrap
{
width: 75%;
float: left;
}
.content
{
padding-top: 70px;
width: 80%;
margin-left: 80px;
padding-bottom: 60px;
}
.cont_nav <--- Right navigation
{
float: left;
width: 200px;
padding-left: 15px;
padding-right: 15px;
background-color: #c9c9c9;
border-left: 1px solid #a3a3a3;
border-right: 1px solid #a3a3a3;
height: 100%; <--- Only works when body height is set to 100%
}
.cont_nav_inner
{
padding-top: 15px;
}
HTML Code: Code:
<div class="body">
<div id="wrap">
<div class="content">
<!-- MAIN CONTENT HERE -->
</div>
</div>
<div class="cont_nav">
<div class="cont_nav_inner">
<img src="css/dropdown/themes/nvidia/images/ads.gif" alt="Sponsors" class="icon"/><h2 style="padding-bottom: 4px;">Sponsors</h2>
<small>We are suppored by</small><br />
<!-- Sponsored by images go here -->
<hr />
</div>
</div>
</div>
I hope you can fully understand my situation, Im rubbish at explaining problems :P Summary: Left navigation only works at 100% height when a parent is set, however when the parent (.body) has a height of 100% the content overflows. Praying for a way that full height can be possible that the content doesnt overflow as atm if i fix the navigation the content breaks if i fix the content the navigation breaks . -Phil http://cad-design-engineering.com/New/contact_us.php The text areas are not fitted and floating in IE the same as they are in other browsers. Instead, they are all strung in a single column. (and my sidebar is broken) I'm terrible at hacks - don't know the first thing. So, here is my code... Code:
<div class="leftbox2">Please note:
- All fields marked with asterisk (*) are required.
- The "Tab" key will navigate through the fields in sequence.</div>
<div class="leftbox2">
name*
<input name="name" type="text" value="" size="30" tabindex="1" />
Company*
<input name="company" type="text" value="" size="30" tabindex="2" />
Address 1*
<input name="address1" type="text" value="" size="30" tabindex="3" />
Address 2
<input name="address2" type="text" value="" size="30" tabindex="4" />
</div>
<div class="rightbox2">
City*
<input name="city" type="text" value="" size="30" tabindex="5" />
State or Province*
<input name="stateprov" type="text" value="" size="30" tabindex="6" />
Postal Code*
<input name="postal_code" type="text" value="" size="30" tabindex="7" />
Country*
<input name="country" type="text" value="" size="30" tabindex="8" />
</div>
<div class="leftbox2">
Email*
<input name="email" type="text" value="" size="30" tabindex="9" />
Confirm Email*
<input name="confirm_email" type="text" value="" size="30" tabindex="10" />
</div>
<div class="rightbox2">
Phone*
<input name="phone" type="text" value="" size="30" tabindex="11" />
<em>(valid format = xxx-xxx-xxxx)</em>
</div>
<div class="leftbox2">
Message*
<textarea name="message" rows="7" cols="40" tabindex="12"></textarea>
<div class="leftbox2"><input type="submit" value="Submit" tabindex="13" size="1.5" /><input type="reset" value="Reset" tabindex="14" size="1.5" /></div>
</div>
AND THE CSS...
.leftbox2, .rightbox2 {
margin: 3px;
padding: 3px;
font-size: 12px;
}
.leftbox2 {
text-align: left;
float: left;
margin-right: 7px;
}
.rightbox2 {
text-align: left;
float: right;
margin-left: 7px;
}
As usual, thank you for your time and help. I have a form design that i've been working on and I've got the border to appear correctly in FF, but not in IE. In IE the sides of the border don't meet the top pieces. I've heard about something similar before and solution involved negative margins. This did work to correct IE but then FF was messed up. The form is contained in the #wrapper div. I would really appreciate anybody's help. I'll warn you though, I'm pretty new to web design. Here's the HTML & PHP (The first 2/3 is php): Code: <?php require_once('Connections/getBiz.php'); ?>
<?php
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////DREAMWEAVER FUNCTION - USED TO STRIP OUT COMMAS ETC.
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "")
{
$theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
$theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);
switch ($theType) {
case "text":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
break;
case "long":
case "int":
$theValue = ($theValue != "") ? intval($theValue) : "NULL";
break;
case "double":
$theValue = ($theValue != "") ? "'" . doubleval($theValue) . "'" : "NULL";
break;
case "date":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
break;
case "defined":
$theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
break;
}
return $theValue;
}
}//end DreamWeaver Function
//USED CHECK IF FORM FIELD IS EMPTY
function notEmpty($variable){
if($variable == NULL || $variable == ''){
$ntEmpty = false;
}
else {
$ntEmpty = true;
}
return($ntEmpty);
} //end notEmpty function
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//BEGIN HTML CODE CREATION
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
session_start();
$currentPage = $_SERVER["PHP_SELF"];
$num_fields = 0; //Initiate counter for filled fields
//Set form field variables to 'missing'
$name = "-1";
$city = "-1";
$zip = "-1";
$begDate = "-1";
$endDate = "-1";
$maxRows_Biz = 10;
$pageNum_Biz = 0;
if (isset($_GET['pageNum_Biz'])) {
$pageNum_Biz = $_GET['pageNum_Biz'];
}
$startrow_Biz = $pageNum_Biz * $maxRows_Biz;
//CHECK EACH FORM FIELD TO SEE IF IT'S EMPTY
if (isset($_GET['Name']) && notEmpty($_GET['Name'])) {
$name = $_GET['Name'];
$num_fields++;
}
if (isset($_GET['City']) && notEmpty($_GET['City'])) {
$city = $_GET['City'];
$num_fields++;
}
if (isset($_GET['zp']) && notEmpty($_GET['zp'])) {
$zip = $_GET['zp'];
$num_fields++;
}
if (isset($_GET['Beginning_Date']) && notEmpty($_GET['Beginning_Date'])) {
$begDate = date("Y-m-d", strtotime($_GET['Beginning_Date']));
$num_fields++;
}
if (isset($_GET['Ending_Date']) && notEmpty($_GET['Ending_Date'])) {
$endDate = date("Y-m-d", strtotime($_GET['Ending_Date']));
$num_fields++;
}
if (isset($_GET['Submit']) && notEmpty($_GET['Submit'])) {
$submit = true;
}
//print ($begDate);
mysql_select_db($database_getBiz, $getBiz);
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//IF FORM FIELDS WERE SUBMITTED, CREATE QUERY BASED ON NUMBER OF FILLED FIELDS
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//print (str_replace(' ','',GetSQLValueString($zip, "defined")));
//print ("Here is the zip" . $zip . "<br>");
//print ("Here is the zip" . GetSQLValueString($zip, "defined"));
if ($num_fields > 0) {
$query_Biz = "SELECT * FROM biz WHERE ";
if ($name != "-1") {
$query_Biz .= "bizName LIKE '%" . $name . "%'";
$num_fields--;
if ($num_fields > 0) {
$query_Biz .= " AND ";
}
}
if ($city != "-1") {
$query_Biz .= "city LIKE " . GetSQLValueString($city, "text") ;
$num_fields--;
if ($num_fields > 0) {
$query_Biz .= " AND ";
}
}
if ($zip != "-1") {
$query_Biz .= "zip IN ( " . $zip . " ) ";
$num_fields--;
if ($num_fields > 0) {
$query_Biz .= " AND ";
}
}
if ($begDate != "-1") {
$query_Biz .= "incDate > " . GetSQLValueString($begDate, "date");
$num_fields--;
if ($num_fields > 0) {
$query_Biz .= " AND ";
}
}
if ($endDate != "-1") {
$query_Biz .= "incDate < " . GetSQLValueString($endDate, "date");
$num_fields--;
}
/// PUT A LIMIT ON THE QUERY ////////////////////////////////////////////////////////////
$query_limit_Biz = sprintf("%s LIMIT %d, %d", $query_Biz, $startrow_Biz, $maxRows_Biz); //add limit
// print($query_limit_Biz);
$Biz = mysql_query($query_limit_Biz, $getBiz) or die(mysql_error());
$row_Biz = mysql_fetch_assoc($Biz);
if (isset($_GET['totalRows_Biz'])) { //get total # rows from clicked link....
$totalRows_Biz = $_GET['totalRows_Biz'];
} else {
$all_Biz = mysql_query($query_Biz, $getBiz); //or from adjunct query
$totalRows_Biz = mysql_num_rows($all_Biz);
}
$totalPages_Biz = ceil($totalRows_Biz/$maxRows_Biz)-1;
}
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//CHECK FOR NEW PARAMETERS AND INCORPORATE THEM
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
$queryString_Biz = "";
if (!empty($_SERVER['QUERY_STRING'])) { //get the query parameters from clicked link
$params = explode("&", $_SERVER['QUERY_STRING']);
$newParams = array();
foreach ($params as $param) {
if (stristr($param, "pageNum_Biz") == false &&
stristr($param, "totalRows_Biz") == false) {
// print($param);
array_push($newParams, $param);
}
}
if (count($newParams) != 0) { //add new parameters, if any, to queryString
$queryString_Biz = "&" . htmlentities(implode("&", $newParams));
}
}
$queryString_Biz = sprintf("&totalRows_Biz=%d%s", $totalRows_Biz, $queryString_Biz);
//print ($currentPage);
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//BEGIN HTML
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>NewBizFL - The only site devoted exclusively to free business listings</title>
<link href="css/hilite.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<div id="logo">
<h1>newbizFL</h1>
</div>
<div id="menu">
<ul>
<li class="active"><a href="#">homepage</a></li>
<li><a href="#">search</a></li>
<li><a href="#">about us</a></li>
<li><a href="#"> faq</a></li>
<li><a href="#">contact us</a></li>
</ul>
</div>
<p> </p>
<p> </p>
</div>
<div id="wrapper">
<div class="top"></div>
<div class="rside">
<div class="content">
<div id="srchForm">
<form name="form1" method="get" action=<?php $currentPage ?> >
<fieldset id="location">
<ol>
<li>
<label for="Name">Business Name:</label>
<input type="text" name="Name" id="Name">
</li>
<li>
<label for="City">City:</label>
<input type="text" name="City" id="City">
</li>
<li>
<label for="Zip Code">Zip Code:</label>
<input type="text" name="zp" id="Zip Code">
</li>
</ol>
</fieldset>
<fieldset id="dateRange">
<ol>
<li>
<label for="Beginning Date">Beginning Date</label>
<input type="text" name="Beginning_Date" id="Beginning Date">
</li>
<li>
<label for="Ending Date">Ending Date</label>
<input type="text" name="Ending_Date" id="Ending Date">
</li>
</ol>
</fieldset>
<input type="submit" name="Submit" id="Submit" value="Submit" />
</form>
</div>
<div id="dataTable">
<?php
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//IF NO RECORDS, SHOW 'NO RECORDS' MESSAGE. ELSE, SHOW TABLE WITH RECORDS
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
if ($totalRows_Biz == 0 ) {
echo '<td>No Records to Display' . ' Sorry </td>'; }
else {
echo '<p> Records' . ($startrow_Biz + 1) . ' to ' . min($startrow_Biz + $maxRows_Biz, $totalRows_Biz) . ' of ' . $totalRows_Biz . '</p>'; // Result Page Heading: 'Records 1 to 10 of 40'
echo '<table border="1">';
echo "<thead>";
echo " <tr>";
echo " <th scope=\"col\">Business Name</th>";
echo " <th scope=\"col\">Address</th>";
echo " <th scope=\"col\">City</th>";
echo " <th scope=\"col\">Zip</th>";
echo " <th scope=\"col\">Filing</th>";
echo " <th scope=\"col\">Date</th>";
echo " <th scope=\"col\">President</th>";
echo " </tr>";
echo "</thead>";
$counter = 0; // counter to highlite rows
do { //do loop till all records are printed
if ($counter++ % 2) {
echo '<tr class="hilite">'; }
else {
echo '<tr>'; }
echo '<td>' . $row_Biz['bizName'] . '</td>';
echo '<td>' . $row_Biz['Address'] . '</td>';
echo '<td>' . $row_Biz['city'] . '</td>';
echo '<td>' . $row_Biz['zip'] . '</td>';
echo '<td>' . $row_Biz['incDate'] . '</td>';
echo '<td>' . $row_Biz['type'] . '</td>';
echo '<td>' . $row_Biz['pres'] . '</td>';
echo '</tr>';
} while ($row_Biz = mysql_fetch_assoc($Biz));
echo '</table>';
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//LINKS FOR 'PREVIOUS', 'NEXT', ETC..
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
echo '<table border="0">';
echo '<tr>';
////FIRST LINK
echo '<td>';
if ($pageNum_Biz > 0) { // Show if not first page
echo '<a href="' . sprintf("%s?pageNum_Biz=%d%s", $currentPage, 0, $queryString_Biz) . '">First</a>'; }
echo '</td>';
////PREVIOUS LINK
echo '<td>';
if ($pageNum_Biz > 0) { // Show if not first page
echo '<a href="' . sprintf("%s?pageNum_Biz=%d%s", $currentPage, max(0, $pageNum_Biz - 1), $queryString_Biz) . '">Previous</a>';}
echo '</td>';
////NEXT LINK
// print ("This is querystringbiz = " . $queryString_Biz);
// print ('%s?pageNum_Biz=%d', $currentPage, 23) ;
// print ("total pages = " . $totalPages_Biz);
// print ("current page = " . $pageNum_Biz);
// print (printf("%s?pageNum_Biz=%d", $currentPage, 2));
echo '<td>';
// Show if not last page
if ($pageNum_Biz < $totalPages_Biz) {
echo '<a href="' ;
echo $currentPage . '?pageNum_Biz=' . ($pageNum_Biz + 1). $queryString_Biz;
echo '">Next</a>' ;
}
echo '</td>';
////LAST LINK
echo '<td>';
if ($pageNum_Biz < $totalPages_Biz) { // Show if not last page
echo '<a href="' . sprintf("%s?pageNum_Biz=%d%s", $currentPage, $totalPages_Biz, $queryString_Biz) . '">Last</a>';}
echo '</td>';
echo '</tr>';
echo '</table>';
}
?>
</div>
</div>
</div>
<div class="bottom"></div>
</div>
</body>
</html>
<?php if (isset($totalRows_Biz)) {
mysql_free_result($Biz);} ?>
And here's the CSS: Code: @charset "utf-8";
.hilite {
background-color: #CCCCFF;
}
body {
font-family : "Trebuchet MS", Arial, sans-serif;
padding: 0;
text-align: center;
background-image: url(../images/gradient.png);
background-repeat: repeat-x;
background-color: #ecffec;
}
#wrapper {
width: 920px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
text-align: left;
background-color: #FFFFFF;
}
#wrapper .bottom {
background-image: url(../images/bottom.png);
background-repeat: no-repeat;
background-position: left bottom;
height: 21px;
}
table, th, td {
border : 1px solid #d4e0ee;
border-collapse : collapse;
font-family : "Trebuchet MS", Arial, sans-serif;
color : #555;
}
#wrapper .rside {
background-image: url(../images/right.png);
background-repeat: repeat-y;
background-position: right top;
}
#header {
width: 900px;
height: 40px;
margin: 0 auto 20px auto;
padding-top: 10px;
}
#menu {
float: right;
padding-top: 10px;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
display: block;
float: left;
margin-left: 5px;
padding: 1px 10px;
text-decoration: none;
font-size: 12px;
color: #FFFFFF;
background-color: #A6A6FF;
}
#menu .active a {
}
#menu a:hover {
text-decoration: underline;
}
#logo {
float: left;
}
#logo h1 {
float: left;
margin: 0;
font-size: 38px;
color: #8484FF;
}
#logo h1 sup {
vertical-align: text-top;
font-size: 24px;
}
#logo h1 a {
color: #0099E8;
}
#wrapper #dataTable {
text-align: left;
clear: both;
}
legend {
margin-left: 1em;
color: #000000;
font-weight: bold;
padding: 0;
}
fieldset ol {
list-style: none;
margin: 0;
padding: 0.5em 0em 0em .5em;
}
fieldset li {
padding-bottom: 1em;
}
label {
float: left;
width: 7em;
margin-right: 1em;
}
#wrapper #location {
float: left;
width: 40%;
margin-right: 15px;
margin-left: 5px;
}
#wrapper #dateRange {
margin-right: 20px;
}
input {
background: #F3F4EC !important;
}
#wrapper .top {
background-image: url(../images/top.png);
background-repeat: no-repeat;
background-position: left top;
height: 18px;
margin: 0;
}
#wrapper .top span {
background-image: url(../images/leftside.png);
background-repeat: repeat-y;
background-position: left top;
}
#wrapper .content {
background-image: url(../images/leftside.png);
background-repeat: repeat-y;
background-position: left top;
padding-top: 0px;
padding-right: 20;
padding-bottom: 0;
padding-left: 20;
}
#wrapper .content span {
background-image: url(../images/right.png);
background-repeat: repeat-y;
background-position: right top;
}
Sorry, I know my code is probably a mess. I really appreciate anyone's help with this, though. Oh, and by the way, does anyone know how to attach things to a post? For example, a screen capture (jpeg) or the images I used? Something has gone terribly wrong. I added a sub menu to one of my pages by creating a sub-unordered list and positioning it absolutely where I wanted it. Now only 1 of 7 of the hyperlinks actually works and even that one isn't lined up correctly. I'm not sure what is going on here. The page in question can be found here. I've gone over this a hundred times and can't find where the problem starts. I run a personal website which has a theme utilizing 960 grid system, and recently restructured parts of my theme to make it utilize this more. Unfortunately, though, it seems that if I open it on either Firefox for Android or Android Browser from my Asus Eee Pad Slider with Ice Cream Sandwich, the container divs are broken. It seems that the height from the div with id "BasicContainer" is not being passing its height up to its parent div, id "Content". Currently, it uses position relative, but this should still pass its height. I tried investigating with Weinre, but I couldn't figure out what was wrong with it even with that. Perhaps someone more experienced with mobile web development can take a look and help me figure out what's going on? My site is smartboyssite dot net. Thanks to anyone who helps. I'd like for these to align nice and neat, but when the lines break, they don't line up. See submenus: http://test.firstinsurancefunding.net/first-advantage/why-first/ Thanks in advance! |
|||||||