By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,396 Members | 1,835 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,396 IT Pros & Developers. It's quick & easy.

CSS with firefox

P: 23
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.tuffexteriors.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
Apr 12 '07 #1
Share this Question
Share on Google+
45 Replies


nomad
Expert 100+
P: 664
Chris:
I found this website that might be able to help you.

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

nomad
Apr 12 '07 #2

P: 23
Thanks for that!

I'm not sure this will help everyone else who uses firefox to view www.tuffexteriors.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
Apr 12 '07 #3

KevinADC
Expert 2.5K+
P: 4,059
spaces in filenames is a no-no:

Expand|Select|Wrap|Line Numbers
  1. images/Page Pics/header-bar.jpg
rename the "Page Pics" folder to "Page_Pics" and change the style sheet to reflect the change:

Expand|Select|Wrap|Line Numbers
  1. 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.
Apr 12 '07 #4

drhowarddrfine
Expert 5K+
P: 7,435
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.
Apr 13 '07 #5

P: 23
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
Apr 13 '07 #6

drhowarddrfine
Expert 5K+
P: 7,435
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.
Apr 13 '07 #7

P: 23
Ok thanks,

How can I fix these couple of problems:

Error Line 8 column 29: required attribute "TYPE" not specified.
<SCRIPT language="JavaScript">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 "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (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
Apr 13 '07 #8

P: 23
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
Apr 13 '07 #9

drhowarddrfine
Expert 5K+
P: 7,435
The validator is telling you how to fix the errors. The first one, there is no such thing as <script language=javascript>. 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.
Apr 13 '07 #10

P: 23
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
Apr 13 '07 #11

drhowarddrfine
Expert 5K+
P: 7,435
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".
Apr 13 '07 #12

Denburt
Expert 100+
P: 1,356
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.
Apr 13 '07 #13

P: 23
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
Apr 13 '07 #14

KevinADC
Expert 2.5K+
P: 4,059
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.layers) {
if (e.which == 3) {
alert(sorry);
return false;
}
}
}
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
}
document.onmousedown=click;
// -->
</script>

lame lame lame, did I menton it's lame?
Apr 14 '07 #15

P: 23
So you don't like that function then Kevin? lol

Right I'll take it out then - just for you!

Can you help me with the table bug that I'm getting and tell me how's best to format pages without putting them in 100% tables to get things lined up etc?

Also I'm trying to centre every page and move it about 10px from the top the browser. If you look now you'll see the index.html page has messed up becuase I moved a <center> tag at the beginning of the code when the validator said so.

It has been explained previously but I'm struggling to know what code to use and where to put it.

Thanks for your help and advice Kevin.

Chris
Apr 14 '07 #16

KevinADC
Expert 2.5K+
P: 4,059
I don't have the design philosophical problem with using tables for layout that others do. So I see no problem with that. Table code is fully supported and works well for symetrical layouts like yours, even numbers of rows and columns, which is pretty much what tables are for: tabular data/content.

But your HTML code is quite poorly written. All of your element properties, as much as possible, should be in the style sheet, for example I see this:

Expand|Select|Wrap|Line Numbers
  1. <div id="navigator" align="left">
  2.   <div align="center">
  3.     <table width="700" height="20"  border="0" align="center" cellpadding="2" cellspacing="2" id="navtable">
  4.       <tr align="center" valign="middle">
  5.         <td width="100"><div align="center"><strong><a href="index.html" class="nav">home</a></strong></div></td>
  6.           <td width="100"><div align="center" class="nav"><strong><a href="why.html" class="nav">why ?</a></strong></div></td>
  7.  
  8.         <td width="100"><div align="center"><a href="price.html" class="nav">price</a></div></td>
  9.         <td width="100"><a href="about.html" class="nav"><strong>about us</strong></a></td>
  10.         <td width="100"><strong><a href="contact.html" class="nav">contact</a></strong></td>
  11.         <td width="100"></td>
  12.         <td width="100"></td>
  13.         <td width="100">&nbsp;</td>
  14.       </tr>
  15.  
  16.     </table>
  17.     </div>
  18. </div>
which could/should be something like:

Expand|Select|Wrap|Line Numbers
  1. <div id="navigator">
  2.     <table id="navtable">
  3.       <tr>
  4.         <td><a href="index.html" class="nav">home</a></td>
  5.         <td><a href="why.html" class="nav">why ?</a></td>
  6.         <td><a href="price.html" class="nav">price</a></td>
  7.         <td><a href="about.html" class="nav">about us</a></td>
  8.         <td><a href="contact.html" class="nav">contact</a></td>
  9.         <td>&nbsp;</td>
  10.       </tr>
  11.     </table>
  12. </div>
and all the properties of the divs and tables and td cells should be in the style sheet. The html code should be the structural parts of the page and the CSS should be everything else as much as possible.

as far as the left align problem, do you think maybe this is contributing to the problem?

Expand|Select|Wrap|Line Numbers
  1. <div id="navigator" align="left">
I don't know for sure but remove the align-left attribute and see what happens.
Apr 14 '07 #17

P: 23
Thanks Kevin,

Righ I've made those changes but I'm still not getting the page aligned in the centre and I'd also like it to appear about 10px form the top of the browser too.

I've changed the code in the index.html to take out the table widths etc etc.

So you would se up a <table id="navtable"> command in the css?

Can you tell me the code for this part of the table because I'm not sure how to code the table into this. I'm guessing that I should do the same for the centre content and in the index.html have something like this... <table id="centrecontenttable"> and so on?

Doing it this way does it mean that you keep full functionality of the table rows etc? Am I doing things the way you would do them for the navigator bar? Or should you really code this a different way. At the moment it means that for each page that has the same navigator I have to cut and paste the part of the code for the next page?

Thanks again

Chris
Apr 14 '07 #18

KevinADC
Expert 2.5K+
P: 4,059
Chris,

see if this link will help you figure out how to properly use CSS:

http://www.w3schools.com/css/default.asp

I am a bit rusty at it myself. CSS is not hard, although it is a little bit more programmatical than simple html code, there really is not much to learn.

I know you want to concentrate more on your current webpages and the problems you are having, but take a few hours to read through some basic CSS tutorials and gain some understanding that you seem to be lacking.
Apr 15 '07 #19

P: 23
Thanks Kevin,

So what would you do about aligning each page centrally and dropping it down 10px?

Thanks

Chris
Apr 15 '07 #20

P: 23
Hi Kevin,

Just a quick question.... http://www.w3schools.com/css/css_table.asp doesn't show you the css code does it? It only seems to show you how to code the html page?

Thanks

Chris
Apr 15 '07 #21

P: 23
Another quick one...... (hopefully!)

Could you also tell me how to get the whole page to print without having to enable background printing in the browser?

The header-bar.jpg is obviously the important first part of the page but when you hit print in the browser it dosn't print out this importand jpg.

How can I take this out of the background-image without having to insert the picture on every html page?

Thanks

Chris
Apr 15 '07 #22

drhowarddrfine
Expert 5K+
P: 7,435
Chris,
I think Kevin was trying to tell you that you need to learn CSS because it has gotten to the point where he is writing your code for you rather than giving advice and that is beyond the scope of this forum.
Apr 15 '07 #23

P: 23
That's fine but where abouts can I find css examples etc?

I've been to the site he suggested but can only find the html page codes and no css codes.

Thanks
Chris
Apr 15 '07 #24

P: 23
I'm also trying to sort this one out too:

Could you also tell me how to get the whole page to print without having to enable background printing in the browser?

The header-bar.jpg is obviously the important first part of the page but when you hit print in the browser it dosn't print out this importand jpg.

How can I take this out of the background-image without having to insert the picture on every html page?

I've looked at lost of information on your site about this but can't seem to find the definative explaination/solution to this. Do you know how to solve this common problem?
Apr 15 '07 #25

Denburt
Expert 100+
P: 1,356
If you would like some samples to look at:
http://www.w3schools.com/
Apr 16 '07 #26

Denburt
Expert 100+
P: 1,356
O.K. I dug up the article I wanted you to read.
http://www.w3schools.com/tags/tag_div.asp

Tips and Notes

Note: Browsers usually place a line break before and after the div element.

Tip: Use the <div> tag to group block-elements to format them with styles.
I made a few minor changes to your DIV statements and managed to correct your spacial issue with the footer section.
Apr 16 '07 #27

P: 23
Still to resolve:

1. Could you tell me how to get the whole page to print without having to enable background printing in the browser?

The header-bar.jpg is obviously the important first part of the page but when you hit print in the browser it dosn't print out this importand jpg.

How can I take this out of the background-image without having to insert the picture on every html page?

I've looked at lost of information on your site about this but can't seem to find the definative explaination/solution to this. Do you know how to solve this common problem?

2. Message number 12 explains how to centre every page but I'm not sure how to apply this to the code and whether it should be unsed in the html or the css file etc.
I'm trying to get every page 10px from the top of the browser too but am not sure how to do this.

Thanks

Chris
Apr 17 '07 #28

KevinADC
Expert 2.5K+
P: 4,059
just put the image in everypage, how many pages are there? 4 or 5?

10px top margin, in the CSS file:

Expand|Select|Wrap|Line Numbers
  1. body {
  2.     font: 12px Verdana;
  3.     font-weight: bold;
  4.     margin:10px 0 0 0;
  5.     padding:0;
  6.     background-color: #e0e0e0;
  7.     }
the margin property reads like this:

margin: top right bottom left

so

margin: 10px 0 0 0;

reads:

margin-top: 10px
margin-right: 0
margin-bottom: 0
margin-left: 0
Apr 17 '07 #29

P: 23
Thanks Kevin!

Right I've made tose changes and so far so good! Thanks for that.

I'm still trying to sort out my navigator bar at the top of the page which has now effected my tables throughout the site. I've used this bit of code in the css file but I guess I have to relate it to the navitgatior and not the whole site? What changes shall I make? Can I not somehow insert a table to the width of the page (700px) split it equally and insert my navigator?

table, td, tr{
height: 20px;
width: 20px;
}


Thanks

Chris
Apr 18 '07 #30

P: 23
Hi,

Howard mentioned in message #10 that there is no such thing as a 'height' attribute in tables and to use CSS instead.

Inserting:
table, td, tr{
height: 20px;
}

Into the CSS file will surely format my whole sites tables to fit this style wont it?

How can I make this apply to only certain parts of the page/site?

Thanks

Chris
Apr 19 '07 #31

drhowarddrfine
Expert 5K+
P: 7,435
As I sit in a hazy, groggy mind set this morning:

.classname element{
CSS stuff
}

will only affect the elements inside the element called "classname".

The same is true of "id's"

#idname element{

Then there are "selectors" somewhat more complicated and I'm not in the mood to explain so, until I wake up or someone else answers, you might google for that or go to w3schools.
Apr 19 '07 #32

Denburt
Expert 100+
P: 1,356
O.K. I will try and give it a go as I am sitting here in my hazy fog downing my community coffee with chicory.

Selectors merely define a particular element in general such as the code that was provided earlier.

table, td, tr{
height: 20px;
}
Each and every element table the row, and the cell on the page using this style sheet will (should) follow that height size.

More info here:
http://www.w3schools.com/css/css_syntax.asp
Apr 19 '07 #33

drhowarddrfine
Expert 5K+
P: 7,435
Actually, this is what I meant by 'selectors'.
Apr 19 '07 #34

Denburt
Expert 100+
P: 1,356
The link you provided goes into more in depth detail but is essentially the same info isn't it?

The link I provided was just a quick breakdown with some samples and I thought he might find it a little easier to understand although I will try and provide both resources next time.
Apr 19 '07 #35

drhowarddrfine
Expert 5K+
P: 7,435
I don't know. I just flew in from Chicago and boy are my arms tired.
Apr 19 '07 #36

P: 23
Thanks guys!

I've just tried:

.navigator table, td, tr{
height: 20px;
width: 40px;
}

And it still formats all my tables to be not how I want them.

Is this what you mean?

Chris
Apr 19 '07 #37

P: 23
Was this the sort of thing you were meaning?

Thanks

Chris
Apr 21 '07 #38

Denburt
Expert 100+
P: 1,356
The page visibly looks o.k. at this point however you still have a lot of various things that could be done to help clean up the code.

I noticed that there were still a lot of inline styles that could be put in a CSS style sheet. One in particular that caught my eye was one that already had a class designated.

Expand|Select|Wrap|Line Numbers
  1.  height="20" align="center" valign="middle" class="style1"
I will try and check back from time to time on different browsers.

Good luck and happy coding.
Apr 22 '07 #39

P: 23
Sorry but I'm really confused now...

Are you saying that each time I use a table to display something on the site or the navigator bar I need to use a different code in the css to control the height and width properties?

Could you point me in the right direction as to how I can format my navigator properly so it will stay the same on every page I create and form template for other sites or uses?

How much cleaning up needs to be done etc.

As mentioned above I tried to work out the code for the nav but am not sure how to do it?

Thanks

Chris
Apr 22 '07 #40

P: 23
Can anyone help me with this ^^^^^^^^^^

Please?

Thanks

Chris
Apr 23 '07 #41

KevinADC
Expert 2.5K+
P: 4,059
see how this works

#navigator {
height: 20px;
width: 700px;
border: 2px solid #000;
border-top: none;
margin: auto;
background-color: #ffff00;
align: center;
}

#navtable {
width: 600px;
margin: auto;
}
Apr 23 '07 #42

P: 23
Thanks Kevin,

I've made that update... www.tuffexteriors.co.uk
How do I have more control over the layout of that specific table? I've tried adding in td 30; lines etc but that doesn't seem to work. How can I get the layout of the navigator nice and symmetrical?

Thanks again

Chris
Apr 24 '07 #43

KevinADC
Expert 2.5K+
P: 4,059
Thanks Kevin,

I've made that update... www.tuffexteriors.co.uk
How do I have more control over the layout of that specific table? I've tried adding in td 30; lines etc but that doesn't seem to work. How can I get the layout of the navigator nice and symmetrical?

Thanks again

Chris
Hi Chris,

At this point I feel I have done more than enough to help you.

Regards,
Kevin
Apr 24 '07 #44

P: 23
Hi Kevin,

Ok thanks, sorry to trouble you.

Chris
Apr 27 '07 #45

P: 16
If you're going to be spending much time with this, there is a single tool that will make your life much much easier.

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

Firebug is the best Firefox add-on I've worked with (I've found it to work much better than the Web Developer Toolbar for most things). It allows you to inspect every element in your document, observe its inherited CSS styles, its computed styles, modify HTML and CSS in real time to see how it will affect your design, etc. etc. Not only that, it will give you on-screen box-model information, showing how space is distributed for each item you have placed.

If you ever get in to JavaScript, it has decent tools for that as well.

Best of luck!
Apr 27 '07 #46

Post your reply

Sign in to post your reply or Sign up for a free account.