CSS Alignment issues and IM sure others

[Grey]

Can I have someon take a look at this css coding and let me know where IM going wrong.. This is a three column simply layout using percentages. In ie it looks geat.. of course.. but in Firefox the righ and left hand columns are askew.. Any help will be appreciated.

Thanks guys
Grey
PS Yes IM still very raw at it but keep trying to improve :)

/* Home Page styles */

body {
background: #C6B895;
text-align: center;
font: normal 10pt verdana,arial,Helvetica,sans-serif;
color: #000000;
border-color: #2C603B;
border-top-color:#21493B;
border-top-style:solid;
border-top-width: .5em;
border-left-color:#21493B;
border-left-style:solid;
border-left-width:.5em;
border-right-color:#21493B;
border-right-style:solid;
border-right-width:.5em;
margin:0;
padding:0em,0em,0em,0em;
}

/* header styles */
#header {
margin: 1em 1em 1em 1em;
font-size: 18px;
font-weight: bold;
font-style: italic;
color: #2E0F55;
}

.header9 {
font-size: 12px;
font-weight: bold;
font-style: italic;
color: #23493C;
}

.header8 {
font-size: 12px;
font-weight: normal;
font-style: italic;
color: #ffffff;
}

.p3 {
font-size: 9px;
font-weight: bold;
font-style: italic;
color: #D0BE17;
}

/* Navbar styles */ /* Background color for the nav bar */
#navbar ul {
margin: 0;
font-size: 10px;
padding: 1em 0em 1em 0em;
list-style-type: none;
text-align: center;
background-color: #21493B;

}

#navbar ul li { display: inline; }

#navbar ul li a {
text-decoration: none;
font-size: 11px;
padding: .2em 1em;
border-style: outset;
border-color: #238D3C;
border-width: 2px;
color: #fff;
background-color: #2C603B;
}

#navbar ul li a.button:visited {
font-size: 14px;
font-weight: bold;
text-decoration: none;
border-style: outset;
border-color: #8DA5F1;
border-width: 3px;
background-color: #21493B;
width: 125px;
}

#navbar ul li a:hover {
color: #000;
border-style: outset;
border-color: #F4F707;
border-width: 2px;
background-color: #EAC032;
}


/* column container */
.colmask {
clear:both;
float:left;
width:100%; /* width of page */
overflow:hidden;
}

/* common column settings */
.colright,
.colmid,
.colleft {
float:left;
width:100%; /* width of page */
position:relative;

}

/* This the ctr main content area*/
.col1 {
float:left;
position:relative;
padding:.5em 0em 0em 0em; /* no left and right padding on columns, we just make them narrower instead/only padding top and bottom is included here */
overflow:hidden;
background-color: #C6B895;
}

/* This the Left col main content area*/
.col2 {
float:left;
position:relative;
padding:.5em 0em 1em 0em; /* no left and right padding on columns, we just make them narrower instead only padding top and bottom is included here */
overflow:hidden;
background-color: #B9AE95;
}

/* This the Right col main content area*/
.col3 {
float:left;
position:relative;
padding:.5em 0em 1em 0em; /* no left and right padding on columns, we just make them narrower instead only padding top and bottom is included here */
overflow:hidden;
background-color: #B9AE95;
}

/* 3 Column settings */
.threecol {
background:#21493B; /* right column background colour */
}

.threecol .colmid {
right:25%; /* width of the right column */
background:#C6B895; /* center column background colour */
}

.threecol .colleft {
right:50%; /* width of the middle column */
background:#21493B; /* left column background colour */
}

.threecol .col1 {
width:46%; /* width of center column content (column width minus padding on either side) */
left:102%; /* 100% plus left padding of center column */
}

.threecol .col2 {
width:21%; /* Width of left column content (column width minus padding on either side) */
left:31%; /* width of (right column) plus (center column left and right padding) plus (left column left padding) */
}

.threecol .col3 {
width:21%; /* Width of right column content (column width minus padding on either side) */
left:85%; /* Please make note of the brackets here:
(100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
}

ul#navigation {
display: table_cell ;
width: 12em;
margin:auto;

}

ul#navigation li {
list-style: none;
background-color: #000000;
border-style: outset;
border-color: #238D3C;
border-width: 2px;
color: #fff;
text-align: center;
font-size: 11px;
margin: 0;
}
ul#navigation li a {
display: block;
text-decoration: none;
padding: em;
border-bottom: 2px outset #4E9704;
border-right: 2px outset #4E9704;
}
a:link, a:visited { color: #FFFFFF; }
a:hover, a:active { color: #000000; }
a:hover { background-color: #EAC032; }
ul#navigation li#youarehere a { background-color: #000000; }


/* lower nav bar styles */

.navbar2 ul li { display: inline; }

.navbar2 ul li a {
text-decoration: none;
font-size: 9px;
padding: .2em .2em;
border-style: outset;
border-color: #238D3C;
border-width: 2px;
color: #fff;
background-color: #2C603B;
}

.navbar2 ul li a.button:visited {
font-size: 6px;
font-weight: bold;
text-decoration: none;
border-style: outset;
border-color: #8DA5F1;
border-width: 3px;
background-color: #21493B;
width: 115px;
}

.navbar2 ul li a:hover {
color: #000;
border-style: outset;
border-color: #F4F707;
border-width: 2px;
background-color: #EAC032;
}

/* Footer styles */
#footer {
clear:both;
padding:1em 0em 1 em 0em;
background-color: #21493B;
border-style: groove;
border-color: #708090;
}

[Medyman]

What do you mean by askewed? Do you have the page up somewhere for viewing?

I haven't really read all of your CSS but problems could be due to organization of your markup as well.

If your page isn't up, maybe post a slimmed up (removing irrelevant content) version of your HTML.

[Grey]

What is happening is the out side borders of the columns are not aligning. Furthermore the text in the right hand colum keeps moving to the right instead of centering.. Ut seems its the two outside columns that are giving me the trouble.

Hope this helps some


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<link rel="stylesheet" type="text/css" href="home.css">
</head>
<body>

<div id="header"></div>
<p><img src="Images/Header3.jpg" width="750" height="200" alt="Header3"></p>
<!-- end header -->

<!-- Beging Main Nav -->
<div id="navbar">
<ul>
<li><a href="Home.html">Home</a></li>
<li><a href="About us.html">About Us</a></li>
<li><a href="Services.html">Services</a></li>
<li><a href="Marketing.html">Marketing</a></li>
<li><a href="Testimonials.html">Testimonials</a></li>
<li><a href="Marketing_tips.html">Marketing Tips</a></li>
<li><a href="Rates.html">Rates & Terms</a></li>
</ul></div>
<!-- end Main Nav -->

<div class="colmask threecol">
<div class="colmid">
<div class="colleft">
<div class="col1">

<!-- Begin Main Column Content -->

<div class="header9">Blah Blah </div>
<p>Blah blah blah</p>

<p>Blah blah blah</p>

<p>Blah blah blah</p>

<p>Blah blah blah</p>

</div>

<!-- End Main Column Content -->

<!-- Begin Left Hand Column Content -->

<div class="col2">
<div class="header9">Images To Delight</div><br>
<script type="text/javascript">

var variableslide=new Array()

//variableslide[x]=["path to image", "OPTIONAL link for image", "OPTIONAL text description (supports HTML tags)"]

variableslide[0]=['Images/sunset_boat.jpg" ', '','']
variableslide[1]=['Images/atumn_leaf.jpg" ', '','']
variableslide[2]=['Images/best-grey.jpg" ', '','']
variableslide[3]=['Images/tunnel.jpg" ', '','']
variableslide[4]=['Images/pilon.jpg" ', '','']

//configure the below 3 variables to set the dimension/background color of the slideshow

var slidewidth='160px' //set to width of LARGEST image in your slideshow
var slideheight='160px' //set to height of LARGEST iamge in your slideshow, plus any text description
var slidebgcolor='#21493B'

//configure the below variable to determine the delay between image rotations (in miliseconds)
var slidedelay=6000

////Do not edit pass this line////////////////

var ie=document.all
var dom=document.getElementById

for (i=0;i<variableslide.length;i++){
var cacheimage=new Image()
cacheimage.src=variableslide[i][0]
}

var currentslide=0

function rotateimages(){
contentcontainer='<center>'
if (variableslide[currentslide][1]!="")
contentcontainer+='<a href="'+variableslide[currentslide][1]+'">'
contentcontainer+='<img src="'+variableslide[currentslide][0]+'" border="0" vspace="3">'
if (variableslide[currentslide][1]!="")

if (variableslide[currentslide][2]!="")
contentcontainer+=variableslide[currentslide][2]

if (document.layers){
crossrotateobj.document.write(contentcontainer)
crossrotateobj.document.close()
}
else if (ie||dom)
crossrotateobj.innerHTML=contentcontainer
if (currentslide==variableslide.length-1) currentslide=0
else currentslide++
setTimeout("rotateimages()",slidedelay)
}

if (ie||dom)
document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')

function start_slider(){
crossrotateobj=dom? document.getElementById("slidedom") : ie? document.all.slidedom : document.slidensmain.document.slidenssub
if (document.layers)
document.slidensmain.visibility="show"
rotateimages()
}

if (ie||dom)
start_slider()
else if (document.layers)
window.onload=start_slider</script>

<br>
<div class="header9">Wolf Paw Graphics<br> The Process</div>
<br>

<ul id="navigation">
<li><a href="process.html">The Process <br>The Entire Process Page.</a></li>
<li><a href="needs.html">Needs Analysis<br>"Your Objectives."</a></li>
<li><a href="Developing_Quote.html">Development Quote<br> Return On Investment.</a></li>
<li><a href="Project begins.html">Project Begins<br>Content and Coding.</a></li>
<li><a href="coding.html">Programming/Coding<br>The Strictest Standards.</a></li>
<li><a href="attractions.html">Testing<br>Each Element Assured.</a></li>
<li><a href="directions.html">Launch Phase<br>You Have a New Look</a></li>
<li><a href="rates.html">Completion Phase<br>One Final Check.</a></li>
<li><a href="rates.html">Marketing Phase<br>Search Engines and Directories</a></li>
</ul>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>

<!-- Column 2 end -->
<div class="col3"><!-- Column 3 start -->

<div class="header9">News</div>
<p><script type="text/javascript">
<!--
currentDate = new Date()
with (currentDate) {
document.write("Current Date: "+(getMonth()+1)+"/"+getDate()+"/"+getFullYear() +"<BR>")
document.write("Current Time: "+getHours()+":"+getMinutes()+":" +getSeconds())
}
// -->
</script></p>

<!-- End Left Hand Column Content -->

<!-- Begin Right Hand Column Content !-->


<p>*****************************</p>
<p> 12/05/07<br> <b>Blah blah blah</b><br> Blah blah blah<br> <b>Blah blah blah</b><br>Blah blah blah <br><a class="ref" href="http://www.cnn.com" title="CNN">Cnn.com</a>
</p>

<p>*****************************</p>

<p>01/15/08<br><b>Blah blah blah<br> <a href="Services.html">Services Page For Details</a>
</p>

<p>*****************************
</p>



</div></div></div>

<!-- End Right Hand Column Content -->

<!-- Begin Fooer Content -->
<div id="footer">
<div class="header8">
<p>Wolf Paw Graphics... 59 Central Ave... Farmington NH 03938... Phone 603-978-8971</p></div>

<div class="navbar2">
<ul>
<li>
<p><a class="ref" href="mailto:wolfpawgraphics@gmail.com" title="Contact Wolf Paw Graphics">Email Wolf Paw Graphics</a></p>
<div class="header4"></div>

<p><a class="ref" href="#header">Top of page</a></p>

</li>
</ul>
<!-- begin Footer navbar -->

<div class="navbar2">
<ul>
<li><a href="Home.html">Home</a></li>
<li><a href="About us.html">About Us</a></li>
<li><a href="Services.html">Services</a></li>
<li><a href="Marketing.html">Marketing</a></li>
<li><a href="Testimonials.html">Testimonials</a></li>
<li><a href="Marketing_tips.html">Marketing Tips</a></li>
<li><a href="Rates.html">Rates & Terms</a></li>
</ul>
</div>
<!-- End Footer Navbar -->
</div>
</div>



</body>
</html>

[Grey]

No comments or help on this? I sure could use it if anyone has the time.. thanks :)

Grey

[Grey]

I posted this 2/02/08 got one question post response for more information and havent heard a thing since. I know it's not the most exciting question in the forum but can someone take a look at this again and help me out please. I'd really appreciate it. :rolleyes:
Grey