making more than one css file

quartzy · Joined: 26 Dec 2007 Posts: 413

I would like to know if making one CSS for div layout and one for the other stuff would make my site load faster? It is still taking too long to load, I have stripped out all I can and made my images smaller and optimised them, but even the bakcground for the main content div takes awhile to load up. So I would appreciate any help with getting the loading quicker, I have optimised the css so it may look a mess if you look at it, and some of the HTML. www.bytesizeoffice.co.uk

PayneLess Designs · Joined: 28 Feb 2007 Posts: 1408 Location: Biloxi, MS

The problem must be with your computer, internet connection, server routing or all of these as your page loaded quickly for me.

Might look into pre-loading your images and have your page not displayed until images are all loaded.

Having more than one css is ok, but it doesn't help the page load much having more than one when only one would do. I would add this attribute to the link tag for the css: media="screen"

Should you ever want a print css then you can use a link to it with: media::print"

You are also loading two separate frame pages. probably loaded with graphics. I didn't check.

You do have some css coding problems.

Ron

PayneLess Designs · Joined: 28 Feb 2007 Posts: 1408 Location: Biloxi, MS

Dup post: server hung up on me.

Ron

sticks464 · Joined: 31 Dec 2006 Posts: 1283

It loads real fast for me also.
I noticed that when I hover on the top menu it jumps down. This is caused by the 4px top and bottom padding on the a:link and a 5px padding on the a:hover top and bottom padding. If you make the left and right containers height auto instead of fixed, it will eliminate the white space between content and footer and probably eliminate the overlapping on the footer. The footer will then be at the bottom of the longest container.

quartzy · Joined: 26 Dec 2007 Posts: 413

thank you both for getting back to me. The CSS coding problems I do not understand, some i do, like what is a parsing error?

1 �� Parse Error - ��* {margin: 0;padding: 0;}
41 Parse Error - :

so I have left these as I dont know what to do with them. The other error I can fix. And what is pre-loading images until the page is displayed? Also I dont understand the insert CSS: media="screen" where do I put that? I suppose my connection is a bit slow but other people have mentioned it loads slow too. You said I am loading two frames pages, I am not loading frames pages, I dont even know how to do frames. Should I make the padding all the same size for the a:link and the a:hover link then? I dont know whats wrong with the padding. I do appreciate your help.

sticks464 · Joined: 31 Dec 2006 Posts: 1283

Maybe this long winded explanation will help
<link rel="stylesheet" type="text/css" href="stylessheet.css" media="screen">
See http://www.w3.org/TR/REC-CSS2/media.html for media types

Incorrect doctype <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
Correct doctype <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
See http://www.w3.org/QA/2002/04/valid-dtd-list.html

The parsing error on line 1 is fron the characters ï»¿* it cannot read these character and is reading {margin: 0;padding: 0;} only. The characters need to be removed leaving the * in place. If you are writting with notepad, save as ANSI and nothing else to prevent the insertion of these characters on css and html pages.

The frames you are loading are the google ads.

This is what your css should look like. I have commented areas that can possibly be changed, have shorthanded some elements and made some changes.

sticks464 · Joined: 31 Dec 2006 Posts: 1283

Just a quick note on my last post. I commented about the border around the content are being the same color as the background. IE and Firefox use a different box model. In Firefox the height and width define the dimensions of the content area. Margins, borders and padding are added on. In IE however the height and width define the max dimensions of the whole box.

So a div specified to be 100px x 100px with a 5px border all round would render as a 110px x 110px box in FireFox but as a 100px x 100px box in IE.

If your not having problems with IE then your ok.

quartzy · Joined: 26 Dec 2007 Posts: 413

hi sticks thanks for posting the css updates, I do need it, I will make the changes, I am having problems with IE 6 in particular as it separates my navigation links, and makes wide gaps, when I use the fix, zoom 1% it makes the top navigation go out of line, so I cannot use that, and the other fix I know of the display: inline; then display: block; does not work either.

I need to make the content boxes, auto, but the boxes display differently in IE, so is there a fix for this? In firefox, the boxes line up OK but in IE they expand and go out of alignment.

Did not realise I had borders on the container, I will change that and your other comments on the CSS I can work on too. The parsing errors I now understand. thanks for helping me.

I'm using the transitional as the shout box, is not valid, just for this page, the other pages are strict.
Read the media stuff and I understand I should use the media/screen but dont know where to put it for sure, and how does it tie in with my CSS file link? do I add it at the end?

sticks464 · Joined: 31 Dec 2006 Posts: 1283

Put the media type on the end of the css link in the head section

quartzy · Joined: 26 Dec 2007 Posts: 413

OK will do that, thanks

sticks464 · Joined: 31 Dec 2006 Posts: 1283

Worked with your code a little bit and fixed a few problems. The google ads are breaking the two sidebars and I don't see a fix.

quartzy · Joined: 26 Dec 2007 Posts: 413

Hi Do you mean that the Amazon ads are breaking the content boxes? And the shout box is breaking the other content box? I dont really know what you mean the google ads are breaking the sidebars. It all works find in FF and IE7 its just IE6 that does not like it.
I worked on my code today and done your fixes,from yesterday, floated the nav to the right and ammended the content boxes, so they load quicker, which they do. I put the date in the nav bar. And now you have given me new code to work with, not sure when I can get round to this. But really appreciate you helping me out, wonder what errors i had that you changed.

sticks464 · Joined: 31 Dec 2006 Posts: 1283

In IE6, any element that is larger than the width of a floated container will expand the container making it wider. The button1-bm.gif breaks the right box, IE7 and FF do not expand the container, it extends to the right outside the border.

I added a width to the left menu a so IE6 would not add white space between the links and adjusted the width and padding to line it up with the box below it and move it away from the left border so IE7 would show the numbers correctly.
I set the two sidebars height to auto and gave the footer another 10px of height to contain all the content. Also put dividers between the links in the footer.

quartzy · Joined: 26 Dec 2007 Posts: 413

Hi Sticks
Worked on all the fixes you gave me, and I hope it loads better now. I changed the width of the top of the content box, so It can expand the size of the left content to make it fit better. Dont you mean you added a height to th left menu? as it already had a width. Hopefully it will not work in IE6 without large gaps.
thanks again

sticks464 · Joined: 31 Dec 2006 Posts: 1283

Excellent quartzy!
The only thing I might do is put space on the reviews page between the paragraphs like the first two (maybe increase it by 5px) and on some of the links on each review, a space between the name and site link.

The date does not show in FF, and in opera it extends past the right edge of the container. I would completely do away with the date.

I'm not sure what's causing this (haven't investigated) but in FF and Opera the header height is 10px higher on the Home page then all the other pages. (like adding a 10px padding to the logo image bottom.

Your doing a fine job so I'll let you investigate.