Forum Moderators: not2easy
Here's what it looks like:
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<title>TESTING 123</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="css/main.css" rel="stylesheet" type="text/css">
I'm using Dreamweaver CS3. I'm not sure that I've got the right DOCTYPE, as I started this as a blank page and DW didn't automatically write the DOCTYPE.
I've tried refreshing the page, and that doesn't do anything.
Another odd thing, I have a background "faux column" image, but it keeps rendering off-center (in all browsers) about 1px to the right.
#bground {
background-color: 4179aa;
background-image: url(../images/sky-bg.jpg);
background-repeat: no-repeat;
background-position: 50% 0px;
}
Any ideas?
Can you post more of your CSS and relevant HTML?
Marshall
First off, for all you that will be horrified that you see table tags, I tried to do this in an all CSS layout and I couldn't get things to work. After spending over a week in pure frustration, I re-did the layout, using a simple 3-row table to hold header/content/footer and CSS for everything else.
So here's one area that's not rendering correctly in Firefox. It's in the header and contains the nav and a background. In IE 6&7, the background image shows up and all the buttons are positioned correctly. In Firefox, I get no background image and all the buttons are stacked on top of each other in order.
<td width="760" height="221" colspan="2">
<div id="header">
<div id="home"><a href="index.html" ><img src="images/home_nav.jpg" alt="Home" name="home_button" width="101" height="23" border="0"></a></div>
<div id="cal"><a href="/calendar.html"><img src="images/cal_nav.jpg" alt="Squadron Calendar" name="cal_button" width="101" height="22" border="0"></a></div>
<div id="who"><a href="/who.html" "><img src="images/who_nav.jpg" alt="Who We Are" name="who_button" width="109" height="23" border="0"></a></div>
<div id="news"><a href="/news.html" ><img src="images/news_nav.jpg" alt="Squadron News" name="news_button" width="109" height="22" border="0"></a></div>
<div id="history"><a href="/history.html" "><img src="images/history_nav.jpg" alt="History" name="history_button" width="87" height="23" border="0"></a></div>
<div id="staff"><a href="/staff.html" ><img src="images/staff_nav.jpg" alt="Squadron Staff" name="staff_button" width="87" height="22" border="0"></a></div>
<div id="members"><a href="/members.html" ><img src="images/members_nav.jpg" alt="Members Section" name="members_button" width="96" height="23" border="0"></a></div>
<div id="thanks"><a href="/thanks.html" "><img src="images/thanks_nav.jpg" alt="Thanks to Our Sponsors and Donors" name="thanks_button" width="96" height="22" border="0"></a></div>
</div>
</td>
#header {
background-image: url(../images/header.jpg);
background-repeat: no-repeat;
background-color: #366496;
height: 221px;
width: 760px;
}
#home {
position: relative;
visibility: visible;
height: 23px;
width: 101px;
left: 24px;
top: 140px;
}
#cal {
position: relative;
visibility: visible;
left: 24px;
top: 158px;
height: 23px;
width: 101px;
}
#who {
position: relative;
visibility: visible;
height: 23px;
width: 109px;
left: 148px;
top: 94px;
}
#news {
position: relative;
visibility: visible;
height: 22px;
width: 109px;
left: 148px;
top: 112px;
}
#history {
position: relative;
visibility: visible;
height: 23px;
width: 87px;
left: 502px;
top: 50px;
}
#staff {
position: relative;
visibility: visible;
height: 22px;
width: 87px;
left: 503px;
top: 66px;
}
#members {
position: relative;
visibility: visible;
height: 23px;
width: 96px;
left: 620px;
top: 5px;
}
#thanks {
position: relative;
visibility: visible;
height: 22px;
width: 96px;
left: 620px;
top: 21px;
<td width="463" height="136" valign="top" bgcolor="#FFFFFF">
<div id="main">
<h1>Cache Valley's Hometown <br>
Air Force: The Civil Air Patrol</h1>
<h2>The US Civil Air Patrol is the official Auxiliary of the Air Force, the Cache Valley Composite Squadron (CVCS) being the local unit. For over 20 years, we've served the Bridgerland community by training our youth to be leaders, providing emergency services, and promoting aerospace education in our school.</h2>
<h3>The Three Missions of the Civil Air Patrol.</h3>
<p class="sub">Cadet Programs</p>
<p class="info">Structured like the JROTC, CAP's Cadet Program takes an aviation and military centric approach to building up today's youth and developing them into responsible citizens. Five elements are the basis of the program: <strong>Leadership, Aerospace Education, Physical Fitness, Character Development and Activities</strong>. While advancing in Air Force style rank, our cadets will take part in a challenging aerospace education program, develop advanced leadership skills and serve Cache Valley by participating in Search and Rescue missions. Many cadets join CAP because they are interested in aviation, and through our programs they can even earn a private pilot's license.</p>
<p class="sub">Emergency Services</p>
<p class="info">Over 90% of the inland Search & Rescue missions in America are performed by Civil Air Patrol units. Our pilots fly CAP C-182s and direct search teams on the ground to search sites. Those ground teams include both cadets and adult CAP personnel. CAP also lends aerial support to the Department of Homeland Security, the Drug Enforcement Agency and we fly missions for the Red Cross, transporting vital blood and tissues for transplant operations. In the event of a local disaster, you'll find CVCS members filling or placing sandbags, clearing debris, providing community information, or directing traffic.</p>
<p class="sub">Aerospace Education</p>
<p class="info">As the auxiliary of the US Air Force, we proud promoters of all things aviation in the Valley. Aside from the cadet program, we provide special guest programs in many aerospace topics to local schools, (elementary through high school), and we have special programs and lesson plans for teachers to integrate into their regular classes. This year will see the first annual Cache Valley Model Rocket Competition, an annual contest among our schools to build the highest flying rockets, supervised by both CVCS adults and cadets. </p>
<h3>Feel free to contact us for more information. <br>
You can call 555-5555 or email info@cachevalleysquadron.org</h3>
</div>
</td>
#main {
padding-top: 15px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
}
h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
font-style: normal;
font-weight: bold;
padding-top: 0px;
text-align: center;
color: #012145;
text-transform: uppercase;
line-height: 28px;
}
h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 15px;
font-weight: normal;
line-height: 22px;
}
h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 15px;
font-weight: bold;
}
.sub {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
font-variant: normal;
color: #366496;
text-transform: uppercase;
padding-left: 10px;
margin-bottom: 5px;
}
Again, in IE 6&7, and in DreamWeaver, everything renders correctly. That's why it seems to me that Firefox isn't reading the CSS. I also tried an experiment where I copied & pasted all the CSS into the page instead of having it on an external stylesheet, but got the same result. There are other issues, but I think they are all related.
Thanks for your help!
Marshall
