question + advice

[select sires]

First, I have a question. Here is a page from a site I have started:
here (http://www.thekill.net/main.html) Why does it scroll so far to the right? Also, how can I make the background image load faster? I know it is something in my code that makes it think there is some info there, but I cannon figure it out. Second of all, I'd like to hear any advice on the design, I'm happy with it, but always open to ideas.

Thanks,

SS.

[Mhtml]

Well the design is quite nice, colors and layout (from what I saw) were very clean and contrasted well..
As for your code, I noticed in a few places you had border=0, you should be using quotes on ALL attributes. :)

Also, your background (and other images) just don't seem to exist, that's what's taking so long. And for the overflow you should add background colors to you different elements to see how far they are spanning, I tend to use red myself. That way you can see where things actually start/stop and can configure the widths..

[ronaldb66]

... I have a couple of remarks:

Why do you absolutely position just about every page element? There's absolutely no need for that, and may cause problems that can easily be avoided;
What's the "main" div for? It's empty at the moment (and, again, positioned absolutely);
Take out the bgcolor attribute for the body element, and use CSS instead; this attribute is deprecated;
supply a fitting doctype to prevent browsers from kicking in quirks mode; also, and a better reason for doing it: you can validate your source code;
always supply at least a generic font when specifying font-familiy, and preferably an alternative that will likely be available on most clients; I don't think Trebuchet is that prolific;
you code suffers from divitis; I don't really see a need to envelop every single link in a div. Then again, your main text is not placed inside an appropriate element, like p, causing the need for inappropriate brs.
I don't know if it's necessary, but I really like to see a space between a CSS selector and its opening curly brace, and between the colon following a property and the property value.
You might as well specify your background for the body element instead of for some div; I really don't see a need for that;

Lastly, from your source code I couldn't find a reason for your page stretching so wide, but if you lose some of those positionings things maybe start to clear up.

[Mhtml]

Why do you absolutely position just about every page element? There's absolutely no need for that, and may cause problems that can easily be avoided;lol, very punny ;)..

He's right of course. I couldn't see any reason for the positioning myself either, as a rule I try never to use positioning like that and rather use padding and margins to gain the look I'm after.

Also those scrollbar colors may look snazzy, but it's a user friendly hazard, personally I don't like colored scrollbars and also it's only IE (of course because it's not a standard)..

You would probably gain a lot from visiting www.w3schools.com/css ..

[bcarl314]

My guess is this css is causing the problems in IE


#homelink{
position:absolute;
top:90px;
left:374px;
width:100%;
padding:1px;
}


#showslink{
position:absolute;
top:90px;
left:438px;
width:100%;
padding:1px;
}


#medialink{
position:absolute;
top:90px;
left:514px;
width:100%;
padding:1px;
}

#biolink{
position:absolute;
top:90px;
left:582px;
width:100%;
padding:1px;
}

#linkslink{
position:absolute;
top:90px;
left:624px;
width:100%;
padding:1px;
}

#contactlink{
position:absolute;
top:90px;
left:691px;
width:100%;
padding:1px;
}


You're teling the browser to place the block left (#contactlink) 691 px, and make the width 100% of the browser window. (Which could be another 800+px) so the right side of this block is over some 1500px. Try chnaging these to width:auto, or something smaller than 100%. That might do it.

[ronaldb66]

lol, very punny Yeah, I noticed that after posting; none intended, though... :o

Select sires,

pleeeease don't get me wrong, I had no intention whatsoever to blow your page out of the water, I was just in the mood for a duck shoot and your code had some pretty easy ones sitting around. After the feathers have settled and the retrievers are back in the kennel you should end up with a page that works better and is easier to maintain, and generally more of a pleasure to work with.

[pb&j]

don't know if this would fix matters...

no type declared here...
<style>

you need a PX or other size declared on this...
font-size:12;

don't know what this is...
scrollflat:yes;

missing a semicolon here...
scrollbar-highlight-color:86AC75

missing a # symbol here...
color:990000;

what is o%??
left:o%;

another size missing here...
font-size:12;

[select sires]

Don't worry about it at all, as long as i'm being taught, I can handle some sarcasm, I grew up in new york :) I appreciate all the advice, I'll start hunting through and trying to straighten everything up. I'll check in once there's been some progress.

take care,
SS/


Originally posted by ronaldb66
Yeah, I noticed that after posting; none intended, though... :o

Select sires,

pleeeease don't get me wrong, I had no intention whatsoever to blow your page out of the water, I was just in the mood for a duck shoot and your code had some pretty easy ones sitting around. After the feathers have settled and the retrievers are back in the kennel you should end up with a page that works better and is easier to maintain, and generally more of a pleasure to work with.

[select sires]

Originally posted by bcarl314
My guess is this css is causing the problems in IE

Try chnaging these to width:auto, or something smaller than 100%. That might do it.

By the way, that fixed all the extra space, thanks again.

[bazz]

Well just about all that I can throw in the pot (along with the ducks :) ) is the link for the validator for both your html and css code.

Go to the validator (http://validator.w3.org) and after you have your html sorted, you'll see a link on the results page to check your CSS.

Someone please correct me if I have picked this part up wrongly but:-

After your css validates (or in your case, will show the colored scrollbars up as the only faults [coz they are non-standard]), the actual css code is replicated further down the validator page. I have in the past just copied and pasted this to my css file, replacing the enitire css that I had used pre-validation. This enabled me to have a much clearer layout of css and the necessary spaces between colons and curly braces etc was sorted in one go.

now my page are readable in Moz and IE. Netscape just gets a non-styled page since it isnt good with css.


HTH

Bazz