Yet another display problem via FF

@mybuddyericNov 06.2007

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? ~~[URL=”http://www.vabbqsauce.com”]~~http://www.vabbqsauce.com[/URL] 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!

to post a comment

HTML

9 Comments(s) _↴

@drhowarddrfineNov 06.2007 — #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.

@drhowarddrfineNov 06.2007 — #Do not double post.

@drhowarddrfineNov 06.2007 — #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.

@mybuddyericauthorNov 06.2007 — #it was an accident. I didn't realize my first thread was submitted properly. Sorry.

@WebJoelNov 06.2007 — #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, &amp; 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>

[/QUOTE] 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.

@mybuddyericauthorNov 07.2007 — #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!

@WebJoelNov 07.2007 — #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![/QUOTE] 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" />



<title>

"Virginia-style" BBQ Sauce! Welcome!

</title>



<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>

<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>

<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>

</div>

<div id="footer">

<p title="© 2007 TLT Enterprises. All Rights Reserved.">© 2007 TLT Enterprises. All Rights Reserved.</p>

</div>

</div>

</body>

</html>[/QUOTE]

[upl-file uuid=d441e26a-fb60-4648-abec-cd56c97ce24e size=5kB]VA-sauce.gif[/upl-file]

@mybuddyericauthorNov 07.2007 — #You are awesome Joel! Thank you so much; you definately know your stuff!

@WebJoelNov 07.2007 — #Ain't nuthin' but a 'thang.. :p

Also in #HTML _↴

HELP! Embedded PDF overlays SPRY nav bar SVG + text file names = HTML content data beside image

Success!

Help @mybuddyeric spread the word by sharing this article on Twitter...

Tweet This

Yet another display problem via FF

9 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

Yet another display problem via FF

9 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

9 Comments(s) _↴

Also in #HTML _↴