Click to See Complete Forum and Search --> : Yet another display problem via FF
mybuddyeric
11-06-2007, 11:58 AM
Hi!
I like what I've read here so far, and I wanted to join to get some help. Would those of you with about 2 minutes take a look at a website I'm developing right now? http://www.vabbqsauce.com is the domain. My issue is this: in IE, the site displays correctly. HOWEVER... in FF, it looks awful. For some reason, my CSS isn't letting the block elements flow like they're supposed to? Or so I think. I am trying to use a layout that most browsers can display easily (and readers too).
I'm still pretty new at coding, so I'd appreciate any and all feedback. Thank you so much!
drhowarddrfine
11-06-2007, 01:00 PM
Rarely is there a display problem in Firefox. Did you design this using old, buggy non-standard IE? Then there is your problem. First, fix your html and css errors.
drhowarddrfine
11-06-2007, 01:01 PM
Do not double post.
drhowarddrfine
11-06-2007, 01:04 PM
You did not assign a width to #content so it is taking the full width of the screen, as it should, and, as usual, Firefox is performing correctly while IE is not. Have to run so others will have to explain the rest.
mybuddyeric
11-06-2007, 01:19 PM
it was an accident. I didn't realize my first thread was submitted properly. Sorry.
WebJoel
11-06-2007, 02:26 PM
That's no so bad.. -just a few mishaps with proper tag-useage.
<p>
<h3>Look for VA-Style BBQ Sauce in stores!</h3><br />
Our sauces can be found in Kroger Supermarkets, Food Lion, & other local retailers.</p>
<p>
<h3>Unique Fundraising Opportunity</h3><br />
Instead of settling for candy, popcorn or gift wrap as a fundraising item, why not consider purchasing VA Style BBQ sauce?
Our sauces are available in four flavors, easy to sell, and will make an excellent profit. <a href="fundraising.html" title="Click to learn more">More...</a></p>
Here, you have inserted two seperate block-level elements "<h3>" inside of another block-level element "<p>". This is invalid. IE displays what it thinks you intended to do... while Fx (the correct abbreviation of "Firefox" is "Fx", according to the Mozilla site), shows the code correctly, -the way you wrote it. That is what "compliancy" is all about, -writing code correctly and 'compliant browsers' like Firefox, Opera, Mozilla, Konqueror, Safari, OmniWeb etc etc, read them that way.
The Header tags ("<h3>" that you used) being "block-level", force a line-return anyway, so the "<br />" is unnecessary here. :)
I'll have another look at this later tonight, -maybe I can get a fix on this for you.
mybuddyeric
11-06-2007, 11:41 PM
I fixed the <h3> tags as you said. I'll be working on this all night so feel free to post your suggestions. Thanks again!
WebJoel
11-07-2007, 09:52 AM
I fixed the <h3> tags as you said. I'll be working on this all night so feel free to post your suggestions. Thanks again! I appreciate the effort you probably put in 'all night'. However, I changed most of your code and made the CSS be 'internal' (your external file is not needed).
I would make this internal CSS be 'external' when you have it the way you want it (some link colors are probably not the way you want anymore).
I have got this looking the same in IE6 and Fx 2.x, no errors or warnings on TIDY.
I created a dummy-image (attached) to populate the #header requirements for a representative image.
Enjoy!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<!-- link type="text/css" rel="stylesheet" href="/bbq.css" / -->
<title>
"Virginia-style" BBQ Sauce! Welcome!
</title>
<!-- Note: Above on TITLE, I changed word "Welcome!" to be the LAST word. NEVER start "TITLE"-tag with "THE", or "WELCOME", etc...
This is for SEO purposes. You want site to be ranked by it's actual NAME, not by "WELCOME to my~..." -->
<style type="text/css">
/* Content Properties */
* {margin:0; padding:0; }/* 'zero' everything first for cross-browser */
body {background-color:#b5a789; color:black; font-family:tahoma, sans-serif;
font-size:11px; text-decoration:none; line-height:14px;}
html, body {height:100%;}
p {font-family: tahoma, sans-serif; font-size: 13px; color: #6e4835; }
.red { color: red; }
#wrapper {position:relative; width:800px; height:auto; padding:10px; margin:10px auto 20px auto; background-color:#efe5d0;}/* basic */
#wrapper {min-height:100%; overflow:hidden;} /* 100% height for compliants, enwraps content*/
* html #wrapper {height:auto;}/* and feed IE what it needs */
#header {position:relative; background-color:#675c47; height: 88px; width:auto; border:1px solid red;}
#menu {position:relative; left:25px; width:470px; height:17px; margin:40px auto 0 auto; padding:2px 0 2px;text-align:center; background-color:#efe5d0;;}
#menu li {display:inline; width:60px; padding:0 10px 0;}
#menu li a {width:60px; padding:1px 7px 1px;}
#menu li a:hover {background-color:wheat;}
#leftContent {width:440px; float:left;}
#main {background-color:#efe5d0; font-size:1.0em; padding:20px 15px 15px;; margin:10px auto;
font-family: tahoma, sans-serif; color:#6e4835; text-decoration:none; overflow:hidden;
line-height:normal; width:744px; height:100%; height:auto; border:12px solid #675c47;}
/*
#contact { background-color:#efe5d0;text-align: left; font-size:1.0em; padding:15px;
margin:0px 10px 10px 10px; float: left;}
*/
#rightContent {background:#efe5d0; text-align:left; border-left:10px solid #675c47;
padding:15px 15px 15px 25px; margin:0px 10px 10px 10px; float:right; width:182px;}
#footer {background-color:#675c47; color:white;
text-align: center; padding:15px; font-size:90%; clear:both;}
#footer p { color:white;}
h1, h2, h3, h4, h5, h6 {font-size:0; font-family: 'times new roman', arial, verdana, helvetica,
sans-serif; background-color:none;font-style:normal; font-variant:normal;
font-weight:bold; margin:14px 0 4px 10px; padding:3px;}
h1 {font-size: 1.60em; color: #954b4b; border:1px dashed #954b4b;}
h2 {font-size: 1.50em;}
h3 {font-size: 1.40em;}
h4 {font-size: 1.30em;}
h5 {font-size: 1.26em;}
h6 {font-size: 1.20em;}/* Defined default Header sizes*/
/* Navigation */
a {color:black;}
a:link {color:black; text-decoration:none; font-size:12px; font-weight:bold;}
a:visited {color:green;}
a:hover {color:blue; text-decoration: underline;}
a:focus {color:blue;text-decoration: underline;}/* a 'hover state' for non-mouse navigation, like 'hotkeys' for handicapped, etc */
a:active {}/* for depressed 'mouse-down' button state */
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<img src="va-sauce.gif" alt="replace this ketchup bottle image with YOUR image..." title="replace this ketchup bottle image with YOUR image..." style="position:absolute; left:20px; top:-12px;" />
<ul id="menu">
<li><a href="index.html" title="Back to the Home Page">Home</a></li>
<li><a href="about.html" title="Read about how we started">Our Story</a></li>
<li><a href="order.html" title="Click to order our sauces!">Ordering</a></li>
<li><a href="fundraising.html" title="We can suit your fundraising needs">Fundraising</a></li>
<li><a href="contact.html" title="How to get in touch with us">Contact</a></li>
</ul>
</div><!-- end HEADER -->
<div id="main">
<div id="leftContent">
<h1 title="Welcome to "Virginia-style" BBQ Sauce!">Welcome to "Virginia-style" BBQ Sauce!</h1>
<h4 title="ADD the text of this HEADER tag, for Accessibility and indexing">THIS SITE IS IN THE MIDDLE OF CONSTRUCTION. <br />
PLEASE BE PATIENT WHILE WE ADD THE FINISHING TOUCHES. THANK YOU.</h4>
<h5 title='"Virginia-style BBQ Sauce": -Youre in for a real treat!'>You're in for a real treat!</h5>
<p>Our sauce is specially formulated to offer you the best possible taste. It's a one-of-a-kind blend that's not too mild and not too <span class="red">spicy.</span></p>
<p>Try our sauce once, and you'll be a customer for life!</p>
<p>If you're not 100% satisfied, send back the unused portion and we'll gladly refund your money (excluding shipping).</p>
<p><a href="about.html" title='Read about "Virginia-style BBQ Sauce" and our other sauces'>Learn more</a> about our product.</p>
</div><!-- end leftContent -->
<div id="rightContent">
<h2 title="Look for VA-Style BBQ Sauce in stores!">Look for VA-Style BBQ Sauce in stores!</h2>
<p>Our sauces can be found in Kroger Supermarkets, Food Lion, & other local retailers.</p>
<h3 title="Unique Fundraising Opportunity">Unique Fundraising Opportunity</h3>
<p>Instead of settling for candy, popcorn or gift wrap as a fundraising item, why not consider purchasing VA Style BBQ sauce?
Our sauces are available in four flavors, easy to sell, and will make an excellent profit. <a href="fundraising.html" title="Click to learn more">More...</a></p>
</div><!-- end SIDEBAR -->
</div><!-- end MAIN -->
<div id="footer">
<p title="© 2007 TLT Enterprises. All Rights Reserved.">© 2007 TLT Enterprises. All Rights Reserved.</p>
</div><!-- end FOOTER -->
</div><!-- end WRAPPER -->
</body>
</html>
mybuddyeric
11-07-2007, 11:17 AM
You are awesome Joel! Thank you so much; you definately know your stuff!
WebJoel
11-07-2007, 12:47 PM
Ain't nuthin' but a 'thang.. :p