CSS with firefox

[chriselevate]

Could anyone help me with this one????

I've written a site for a friend of mine and used CSS to position the page and code the DIV's etc.

Could you tell me why the header and footer images never show in Firefox but when using IE they work fine? The site is www.tuffexterio rs.co.uk by the way.

It loses the point if the header and footer bar's don't display.

Could you also tell me if you think it's a bad idea to use CSS to make websites these days? I guess, as with everything, they have their upsides and down sides but I wondered if it was still a good idea to use this method to control the style and formatting of sites?

Thanks

Chris

[nomad]

Chris:
I found this website that might be able to help you.

https://addons.mozilla. org/en-US/firefox/addon/3259

nomad

[chriselevate]

Thanks for that!

I'm not sure this will help everyone else who uses firefox to view www.tuffexterio rs.co.uk will it?

It seems that firefox just doesn't like to display the jpg's in the header/footer on sites that use css's does it?

Any other ideas? Tips or solutions?

What do people think to the questions about CSS in web design (see above)?

Thanks

Chris

[KevinADC]

spaces in filenames is a no-no:

images/Page Pics/header-bar.jpg

rename the "Page Pics" folder to "Page_Pics" and change the style sheet to reflect the change:

images/Page_Pics/header-bar.jpg

There is nothing wrong with using CSS to make websites, but you may have to suffer through a few headaches trying to get the pages to look the same in most browsers or mostly to look correct in IE if you use valid CSS code.

[drhowarddrfine]

Validate your html for your list of html errors. Then validate your CSS for your way too many CSS errors.

Telling us something works in IE means little. You have to use a modern browser to test your code in. Get it working in Firefox or Opera first.

[chriselevate]

Wow you guys on here know your stuff,

Thanks for the quick reply and solution.

Kevin you're a genius! Thanks mate! That's sorted out the pics displaying.
There still seems to be a problem with the page not aligning centrally and also part of the page missing at the bottom of the screen.

Do you know what will sort these bugs? I'm sure you will!!!! lol

Drhowarddrfine you say to validate the html for the list of html errors. How did you find that there were errors? Are these easy to fix? I'm using the offices copy of DreamWeaver MX 2004 - can this be done here?

So don't build the site to work in IE? Can you just calify what you mean there?

Thanks again guys,

You know your stuff! - Really appreciate this help.

Chris

[drhowarddrfine]

I never said not to build the site for IE. I said test your code in other more modern browsers. IE, including the new IE7, is nine years behind web standards, buggy and non-compliant. It may show your correctly written markup incorrectly and vice-versa. What you must do is always initially test your code in modern browsers like Firefox or Opera, and then look at it in IE to see if it works there, too. Then we can adjust for IEs quirks and bugs.

Validation is error checking. Do it early and often. Do not trust Dreamweaver to produce valid code. See the sticky at the top of this board.

[chriselevate]

Ok thanks,

How can I fix these couple of problems:

Error Line 8 column 29: required attribute "TYPE" not specified.
<SCRIPT language="JavaS cript">The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.

Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.


and


Error Line 54 column 30: there is no attribute "HEIGHT".
<table width="700" height="20" border="0" align="center" cellpadding="2" ceYou have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transition al" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheig ht" (this is usually fixed by using CSS to achieve the desired effect instead).

This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the <embed> element to incorporate flash media in a Web page, see the FAQ item on valid flash.

I've nailed the rest of them except these 2.

Thanks

Chris

[chriselevate]

How do I also cetrally justify my whole page?

I had to lose the tag which was doing while I was validating.

What is the correct way to do this?

Thanks

Chris

[drhowarddrfine]

The validator is telling you how to fix the errors. The first one, there is no such thing as <script language=javasc ript>. It should be <script type="text/javascript">

The second error is as stated. There is no such thing as a 'height' attribute in tables. Use CSS instead.
table, td, tr{
height: 20px;
}

Also, for future needs, get in the habit of making all your tags and attributes in lower case. HTML doesn't care but xhtml and css do.

To center everything, either wrap the whole in a <div> element and add 'margin:0 auto;' for it's CSS or add that margin to the CSS for each of the main containing elements like 'content'.

You shouldn't use tables for layout either.

[chriselevate]

The second error is as stated. There is no such thing as a 'height' attribute in tables. Use CSS instead.
table, td, tr{
height: 20px;
}

Where abouts do I add this in the CSS file?

Thanks again

Chris

[drhowarddrfine]

This could get tricky. You will have to remove the height attribute from each element. Then assign a 'class' to it, such as height20. For example, <table class="height20 ">. Then in the CSS you would add:
.height20{
height:20px;
}
Note the period before the name.

For elements that have a different height you need a different class name and height value.

The height name I used is terrible for different reasons but it will work. I don't know if 20px is an appropriate value either. You also need to read up on "id's".

[Denburt]

If your a web developer and you have Firefox you realy should check out this extension.

Web Developer toolbar

Edit your CSS on a left pane and watch the page change on the fly. Simply validate your pages with the click of a button etc. etc. etc.

[chriselevate]

I'm not sure I know exactly what you mean by the above etc. Not sure I fully understand what you mean. Anymore help with what exact code needs putting in the css and the html pages would be really helpful.

I've installed the developer code above which was mentioned too. Not sure what advantages there are though.

Could you tell me why the page isn't running correctly in firefox and opera still ? There seems to be a break from the centre content and the footer bar still. Not sure why this is the case.

Thanks

Chris

[KevinADC]

take this lame code out of your webpages,

<script type="text/javascript">
<!--
var sorry="Sorry, that function is disabled."

function click(e) {
if (document.all) {
if (event.button == 2) {
alert(sorry);
return false;
}
}
if (document.layer s) {
if (e.which == 3) {
alert(sorry);
return false;
}
}
}
if (document.layer s) {
document.captur eEvents(Event.M OUSEDOWN);
}
document.onmous edown=click;
// -->
</script>

lame lame lame, did I menton it's lame?