Problem with css in firefox and safari

[amxcorey]

I have been building a site using three column css in internet explorer. but when i open it up in firefox or safari its all screwed up.
here is the url

view here

Open the url up in firefox and you will know whati mean.

How do i get it to all stay in line like it does in internet explorer?

Amxcorey

[Boogle]

Have you used floating to keep the three column display or have you used display:inline? You need a float fixing element to solve that.

Try searching for FF float fix
if you've used display:inline then i want to see your css to look it over...

HTH's boogs

[amxcorey]

here is the css code that control the whole thing

body {
background:url(images/img2.gif) repeat-x center top;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 11px;
text-align: justify;
color: #888888;
}


h1 {
}

h2, h3 {
margin-top: 0px;
}

h4, h5, h6 {
}

p, ol, ul, dl, blockquote {
}

a {
color: #ABABAB;
}

a:hover {
text-decoration: none;
color: #787878;
}


/* Header */

#header {
width: 95%;
height: 128px;
margin: 0px auto;
}


#header a {
text-decoration: none;
color: #5C5C5C;
}

/* Navigation bar */

#nav{
width: 700px;
height: 21px;
background:#ffffff;
border: 1px solid #D9D9D9;
background-position:left;
background-repeat:no-repeat;
padding:0;
margin: 10px auto;
}

#nav ul{
list-style-type:none;
margin: 0 auto;
}

#nav li{
display: inline;
margin: 0 auto;
}

#nav li a{
display:block;
float:left;
background:#666666;
width:100px;
height:21px;
margin: 0 auto;
text-align:center;
padding: 9px 0 0 0;
color: #FFFFFF;
text-decoration: none;
font-weight:bold;
font-size:12px;
font-family:Tahoma;
}

#nav li a:hover{
text-decoration: underline;
background: #666666;
}

#nav li.selected{

}

#nav li.selected a{
background: #C5C5C5;
}

#nav li.selected a:hover{
background: #CCCCCC;
}



/* Post */

#code {
margin: 5px 0;
padding: 10px;
text-align: left;
color:#00CC00;
display: block;
overflow: auto;
font: 500 1em/1.5em 'Lucida Console', 'courier new', Tahoma ;
/* white-space: pre; */
background: #FAFAFA;
border: 1px solid #D9D9D9;
}
#code-head {
margin: 5px auto;
padding: 5px;
text-align: left;
color:#000000;
display: block;
overflow:auto;
font: 500 1em/1.5em Tahoma;
font-weight:bold;
/* white-space: pre; */
background: #E4E4E4;
border: 1px solid #999999;
}

.latest-post {
padding: 0 0 1em 0;
}

.latest-post h2 {
margin-bottom: .5em;
background-color: #88C65A;
padding: 8px 10px 8px 10px;
border: 1px solid #666666;
text-transform: uppercase;
font-size: 16px;
font-family:Tahoma;
color: #000000;
}

.post {
padding: 2em 0 1em 0;
}

.post h3 {
margin-bottom: .5em;
font-size:12px;
font-family:Tahoma;
color: #FFFFFF;
}

.file * {
color: #5B5B5B;
}

/** Forms */

form {
margin: 0px;
padding: 2px;
}

.input1 {
width: 110px;
background-color: #FFFFFF;
border: 1px solid #B6B6B6;
color: #000000;
}

/* Content */

#content {
width: 95%;
margin: 30px auto;
padding: 0px 0px 0px 0px;
}

#colOne {
background-color:#FAFAFA;
border: 1px solid #D9D9D9;
float: left;
width: 20%;
}


#colOne h2{
padding: 5px 5px 5px 5px;
background-color: #669999;
border-color:#006699;
font-size: 12px;
font-family:Tahoma;
text-transform: uppercase;
color: #FFFFFF;
}

#colOne ul {
margin: 5px;
padding-left: 5px;
padding-right: 5px;
list-style:none;
}

#colOne li {
margin-bottom: 1em;
color: #333333;
}

#colOne li li {
margin-bottom: 10px;
padding-left: 15px;
line-height: 15px;
background: url(images/arrow_im_1.jpg) no-repeat left center;
}

#colOne a {
color: #333333;
font-family:Tahoma;
font-size:11px;
font-weight:bold;
text-decoration:none;
}

#colOne a:hover {
color: #666666;
font-family:Tahoma;
font-size:11px;
font-weight:bold;
text-decoration:underline;
}

#colTwo {
float:left;
width: 55%;
margin: 0px;
padding: 0px 15px;
}

#colTwo p {
padding: 0 1.5em 0 1.5em;
line-height: 25px;
}

#colTwo h3{
padding: 10px 10px 10px 10px;
background-color: #3F4D50;
border: 1px solid #D9D9D9;
text-transform: uppercase;
color: #FFFFFF;
}

#colThree {
background-color:#FAFAFA;
border: 1px solid #D9D9D9;
float: left;
width: 20%;
}

#colThree ul {
margin: 5px;
padding: 0;
list-style: none;
}

#colThree li {
margin-bottom: 1em;
color: #B6B6B6;
}

#colThree li li {
margin-bottom: 0;
padding-left: 1em;
line-height: 15px;
padding-left: 15px;
background: url(images/img1.gif) no-repeat left center;
}

#colThree a {
color: #888888;
}

#colThree a:hover {
color: #B6B6B6;
}

#colThree h2{
padding: 5px 5px 5px 5px;
background-color: #669999;
border: 1px solid #669999;
font-size: 12px;
font-family:Tahoma;
text-transform: uppercase;
color: #FFFFFF;
}

/* Footer */

#footer {
background-color:#102931;
width: 95%;
margin: 0px auto;
padding: 15px 0px;
border-top: #363636 1px solid;

}

#footer p {
margin: 0px;
text-align: center;
}

oh by the way. i have php running that calls the sidebars, header, and footer.

Thanks
Amxcorey

[Boogle]

OK, you want colThree's float element to be set to float:right;
and then after the columns but before your footer you want to insert a <div> with the following properties:

<div style="clear:both; height:0; visibilty:hidden;"></div>

just like that and then give it a try in FF, and work from there. that will solve the problem of the three columns not lining up like they do in IE.

Try that and get back to me,
Boog's

[amxcorey]

I haven't checked it out in firefox yet but i added the code and made those changes. I also found that i had a little problem with the navigation. I want the nav to be centered right under the header but i can only get it to either float left or float right.

Can you help me with that???

Thanks for all of your help

Amxcorey

[Boogle]

OK if you check FF out now it is fixed for the layout. So now you want the header to be aligned correctly...

You need to give your Nav Div a margin property like so:

margin: 0 auto;

That should work.

Boogs

[amxcorey]

haha it looks perfect in firefox right now except for one thing but im really not worried about it. now that everything is lined up in firefox it isn't in internet explorer.ahhhh why why why? if you look you will see what i mean

Amxcorey

[Boogle]

it looks fine to me in IE, what version of IE are you looking on? I am on 7 and it looks fine?

[amxcorey]

well i changed templates actually to better fit the site but im having a problem integrating a paypal button.

check it out

http://www.computerbuddy.org/service...e/services.php

look at how far away the paypal button is from the text. it is actually picking up the form code in the css class. How do i keep this from happening?

Amxcorey

[Boogle]

			<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
			<input type="hidden" name="cmd" value="_xclick">
			<input type="hidden" name="business" value="admin@computerbuddy.org">
			<input type="hidden" name="undefined_quantity" value="1">
			<input type="hidden" name="item_name" value="Forum Posting Plan 1">
			<input type="hidden" name="item_number" value="0001">
			<input type="hidden" name="amount" value="13.99">
			<input type="hidden" name="page_style" value="PayPal">
			<input type="hidden" name="no_shipping" value="1">
			<input type="hidden" name="return" value="http://www.computerbuddy.org/payment sent details form.php">
			<input type="hidden" name="cancel_return" value="http://http://www.computerbuddy.org/cancel.php">
			<input type="hidden" name="no_note" value="1">
			<input type="hidden" name="currency_code" value="USD">
			<input type="hidden" name="lc" value="US">
			<input type="hidden" name="bn" value="PP-BuyNowBF">

you need to wrap these in an element with properties such as,

margin:0; padding:0; visiblity:hidden; width:0; height:0;, i can't be sure though because I haven't used the PayPal button before so sorry about that... also why are all those offers wrapped in <code></code> tags? I'm pretty sure that's not required?

Boog's

[amxcorey]

Ah thanks
i figured everything out
the site will be up and running in a day or two tell everyone about COMOUTERBUDDY!!!! YEAY


Amxcorey

[amxcorey]

hahaha spelled my own site wrong! computerbuddy*