how to work with CSS building the "skeleton" of th

[duffs22]

I'm having a hard time with my skeleton working with me. I want my site to be viewable in all browsers but at this time it's not. The links on the right hand side of my page www.gosalmonfishing.com is the problem. Any suggestions? Here is the "meat" of my style so far;

#header {
margin-left:15%;
width:800px;
text-align:center;
background:transparent;
font:bolder small-caps 22px Verdana, Arial, Sans-serif;
}

#date
{
text-align:center;
font-family: Trebuchet MS;
font-size: 12px;
font-weight: normal;
font-variant: normal;
}
#hlight {
background-color:#66FF33;
}
#mainbody {
clear:both;
margin-left:15%;
width:804px;
background:url(background.png);
text-align:center;
border-top:medium;
border-top:#163E16;
border-top:solid;
font-family: Trebuchet MS;
font-size:12px
font-weight:normal;
font-variant:normal;
}
#centercontent {
text-align:justify;
padding:15px;
top:0px;
float:left;
width:75%;
background:#FFFFFF;
border-right-color:#163E16;
border-right-width:medium;
border-right-style:solid;
text-align:justify;
font-family: Trebuchet MS;
font-size: 12px;
font-weight: normal;
font-variant: normal;

}
#smcentercontent {
text-align:justify;
padding:15px;
top:0px;
float:left;
width:100%;
background-image:url(background_container.png);
font:bold 14px Verdana, Arial, Sans-serif;
border-right-color:#163E16;
border-right-width:medium;
border-right-style:solid;
text-align:justify;
font-family: Trebuchet MS;
font-size: 12px;
font-weight: normal;
font-variant: normal;
}

#rightcontent {
float:right;
top:0px;
width:25%;
text-align:center;
font:bold 12px;
font:Kartika;
color:#00CC00;
background:url(background.png);
}
#rightcontent A {
font:Kartika;
color:#00CC00;
}

.righttackle a {
text-align:center;
font:bold 12px;
font:Kartika;
color:#00CC00;

}
#footer {
clear:both;
margin-left:15%;
width:802px;
height:60px;
background:#000000;
color:#FFFFFF;
text-align:center;
font:normal 12px Verdana, Arial, Sans-serif;

}
#gsf-tabs
{
float:left;
margin-top:0px;
left:0px;
padding:5px;
border:0px;
width:100%;
font: bold 12px Trebuchet MS;
text-align:center;
background:black;
}
#linkstab a:visited {
color:#FFFF00;
}

[pagetta]

hi

first off you really need to clean up your html code you have css styles in the header that have defaulted there (style1 & style9) plus you have

tags all over the place that can go.

also, 804px is too wide for an 800 x 600 browser take it down to 770/780px

I think that this is messing up because of the padding:15px on the center content, this is pushing the 75% too wide for the 804 main width.

what you can do here is give exact widths to the two columns - since you define an exact width for the whole thing there's no need for flexible layouts with percentages. you could give the main content say a width of 550px, plus the 15px padding, then the right content a width of 120px for example. then your pictures will come back to where they should be.

there are people here a lot better at css than me who probably know better ways to do this but this is how i woudl fix your problem.

thanks.