CSS not working in FireFox

Question

woocha 0 Light Poster

17 Years Ago

I have a header to this website that I am working on and my part is due real sone. I am stuck. I am using css to display the header and it lloks like a million bucks in IE 6 but not in IE7 and especially not in FireFox.
Can anyone help me fix it. The code is here:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "(URL address blocked: See forum rules)">
<html xmlns="(URL address blocked: See forum rules)" xml:lang="en" lang="en">
<head>
<link href="(URL address blocked: See forum rules)" rel="stylesheet" type="text/css">
</head>
<body ONLOAD="preloadImages();">
<div id="content">
   <a href="(URL address blocked: See forum rules)" title="Click here to retun to Woocha.com"><div id="tabs"></a><img src="(URL address blocked: See forum rules)"><img src="(URL address blocked: See forum rules)"><img src="(URL address blocked: See forum rules)"><img src="(URL address blocked: See forum rules)">
   <dl> 
    <dt><a href="(URL address blocked: See forum rules)" target="_top"  title="Shop the Woocha mall for great products and great prices!" accesskey="m"><span class="key">M</span>all</a></dt>
    <dt><a href="(URL address blocked: See forum rules)" target="_top" title="Woocha Auction with free listings" accesskey="a"><span class="key">A</span>uctions</a></dt>
    <dt><a href="(URL address blocked: See forum rules)" target="_top" title="Don't search the paper, search Woocha.com" accesskey="c"><span class="key">C</span>lassifieds</a></dt>
    <dt><a href="(URL address blocked: See forum rules)" target="_top" title="Free E-mail" accesskey="e"><span class="key">E</span>-Mail</a></dt>
    <dt><a href="(URL address blocked: See forum rules)" target="_top" title="Host all of your digital photos for free!" accesskey="i"><span class="key">P</span>hotos</a></dt>
    <dt><a href="(URL address blocked: See forum rules)" target="_top" title="Download free woocha software" accesskey="s"><span class="key">S</span>oftware</a></dt>
    <dt><a href="(URL address blocked: See forum rules)" target="_top" title="Vist the Woocha forum, join the community" accesskey="f"><span class="key">F</span>orum</a></dt>
   </dl>
    

    <div id="search">
   <form method="post" action="?">
      <input type="radio" name="search1" value="web" checked>Web
      <input type="radio" name="search1" value="woocha">Woocha
      <input type="radio" name="search1" value="photos">Photos
      <input type="radio" name="search1" value="auctions">Auctions
      <input type="radio" name="search1" value="classifieds">Classifieds
      
      <p><input type="text" name="search" class="search" /> <input type="image" name="submit" src="(URL address blocked: See forum rules)" border="0" />
      </p>
    </form>
   </div><br>
    <br>
      
    <div id="top_info"> Click here to <a href="(URL address blocked: See forum rules)">Log in</a>,<img src="(URL address blocked: See forum rules)"> 
      <a href="(URL address blocked: See forum rules)">visit my account</a>,<img src="(URL address blocked: See forum rules)"><a href="(URL address blocked: See forum rules)">register</a>,<img src="(URL address blocked: See forum rules)">or <img src="(URL address blocked: See forum rules)"><a href="(URL address blocked: See forum rules)=logout">log 
      out</a>. </div>
  </div>  
 </div>
 </body>
</html>

PLEASE HELP !!

html-css web-design

4 Contributors
14 Replies
155 Views
2 Weeks Discussion Span
Latest Post 17 Years Ago Latest Post by MidiMagic

autocrat 52 Posting Pro in Training

17 Years Ago

Well, due to some of the addresses being stripped, I cannot help with the css... but I can tell you did not validate!

You need to validate as you code... otherwise it will not do as you think.
Additionally, you eed to test in other browsers as you build, as it saves a lot of time being wasted making something good in 1 Browser, and then realising you have to redo half of it for the others... (or worse!).

Still, if you validate, you can correct half the problems instantly... such as :
not <br>... but <br /> for XHTML.
not <img></img> (which you missed!)... but <img />
If using DL, where is DD?

So, make the validation, make the corrections (hell, W3C even allow you to use HTML Tidy (or TIDY HTML?) to clean up and correct the code for you when it validates!!!

http://validator.w3.org

So do then, then come back and let us know if it helped.

also play around with providing a link to the site page for us to see live.

cereal 1,524 Nearly a Senior Poster

17 Years Ago

Your URLs have been blocked by the forum filter. We can't help you without your css code. Please paste the stylesheet or a link to an example online, so we can look it.

P.S. sorry autocrat I didn't saw your reply =)

autocrat 52 Posting Pro in Training

17 Years Ago

lol - just reinforcesx the point of learning good coding practice :D

autocrat 52 Posting Pro in Training

17 Years Ago

Not a problem, best way to learn is to ask questiosn and practice correctly (if you learn bad tricks now, you'll use them later too... trust me, not nice!).

Best of luck, and look forward to seeing your results.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

woocha 0 Light Poster · Answer 1 · 2007-08-09T19:04:19+00:00

Thanks guys...I'll check it out and go through what you said today and will repost later on tonight EST. THannks for the tips....In case you didn't know, I am just learning here.

Thanks

woocha 0 Light Poster · Answer 2 · 2007-08-12T02:44:19+00:00

I have uploaded the code to a geocities hosting thing. the url is http://www.geocities.com/smm18951/header.txt

I ran my site through the validator and it said I have 83 errors - It looks like I have a lot of work to do here.

PS - Is there anyone out there who can make the code located at:
geocites . com / smm18951 / header.txt

work in firefox. I am struggling here and it doesn't look good for my header.

thanks guys

woocha 0 Light Poster · Answer 3 · 2007-08-12T02:46:18+00:00

Upon looking further at this validator on http://validator.w3.org I have to say, this thing is stinkin awesome... What a cool devise.

autocrat 52 Posting Pro in Training · Answer 4 · 2007-08-12T03:29:07+00:00

lol

Eventually, you'll barely need it.

The Text File is more than a little complex... considering the php stuff in there...
Also, it was more a link to the CSS and the output page data what would help...

XHTML
!!!Above!!!

CSS Location
http:// www . woocha . com / style . css

Will play with it shortly and see what I get.

autocrat 52 Posting Pro in Training · Answer 5 · 2007-08-12T06:14:20+00:00

Hmm... okay.

You hae a nice bit for Accessibility... but you do realise that it will break when text-size is increased!

I would actually suggested doing it again, (seems a shame to have one set of accessible features, only to have the pretty design break over another!).

Yet you are faced with issues due to the background image...

You may want to consider not using Spacer images as well (particularly as you are using css.. so no real need).

-----------

So with all of that said, you'll have to redo some of the graphics, providing top/bottom images for each (being overly tall, so that when text size increase, the bg will continue being visible).
That means you can then use multiple blocks, sectioning off the header so that when things change size, they stretch their containers... the containers remain "in the flow", so as the top-most block gets taller, those beneath it move downwards... so no overlaps or breaks).

woocha 0 Light Poster · Answer 6 · 2007-08-12T18:19:56+00:00

Hmm... okay.
You hae a nice bit for Accessibility... but you do realise that it will break when text-size is increased!
I would actually suggested doing it again, (seems a shame to have one set of accessible features, only to have the pretty design break over another!).
Yet you are faced with issues due to the background image...
You may want to consider not using Spacer images as well (particularly as you are using css.. so no real need).
-----------
So with all of that said, you'll have to redo some of the graphics, providing top/bottom images for each (being overly tall, so that when text size increase, the bg will continue being visible).
That means you can then use multiple blocks, sectioning off the header so that when things change size, they stretch their containers... the containers remain "in the flow", so as the top-most block gets taller, those beneath it m
ove downwards... so no overlaps or breaks).

Oh Boy !!

I am going to give it a whirl later on today, but I have to say, I think I am a little more confused now than I was before. :)

woocha 0 Light Poster · Answer 7 · 2007-08-14T01:40:36+00:00

OK....I got the header to look great in both IE6 and firefox, but if you make the font size (senior citizen) large the header goes all screwy. Here are link to the header and to the style sheet.

Can anyone offer up some good suggestions?
Thank you

ALSP: I can't seem to get this darn thing centered with out using the <center> tag, which I am told you are not supposed to use.

autocrat 52 Posting Pro in Training · Answer 8 · 2007-08-14T06:42:27+00:00

Okay... you won't like this... but you might want to "rebuild" it.

The problem you have is that it is to constricted to start with.

It is a major issue that normally starts with "design"... and limits the "scalability" and "flexability" of a site.

Because you are usig single images of a set size, your text will always break out.
Because you hae iamges in blocks of set sizes, things will never shift to permit expansion.

For example...your Tabs could isntead be comprised of 2 parts... look for "Slidding Doors".
(basically, two containers - Link + Span, and two images..the Left/Right... both taller than they need to be, one a thin side strip, the other wider than needed).

The same principle applies to the Header block and the Search Block.

If you want things to move and stretch, you have to either use bigger images, more parts... or both!

I would recommend...

HAving a containing block... set to be Relative.. no Height!
In that you then need to hae a block for hte Blue, a Block for the Green, a block for the Tabs and a block for the login etc. links.

As they are in a parent block with position:relative, you can position them absolutely. if you set heights in em's, it means that they can expand.
So you put in the blue, pos:abs, and tel it to be 2em from the top.
Then you put in the Tab-Menu block, tell it to be pos:abs, and to be 0 from the top, and 2em in height...

Making sense? the tabs would actually be layered on top of the blue, but as both have thesame measurement, they do not change their ratio relationship (they will always be sat on top of each other!) (Note, that is until the tab liks get to wide and drop down a row!).

woocha 0 Light Poster · Answer 9 · 2007-08-19T00:15:57+00:00

If anyone can make that code(the header when displayed) so that it is centered and when the font size is increased, it still looks somewhat ok I'll gladly pay you for your services.

the files are located at:

http://www.geocities.com/smm18951/header.txt
http://www.geocities.com/smm18951/style.txt

If anything esle is needed, I will furnish it upon request.

Thank you

MidiMagic 579 Nearly a Senior Poster · Answer 10 · 2007-08-24T08:47:51+00:00

You probably did not have 83 errors. Many times one typo can generate 6 errors.