Success: Thanks (My CSS Works in IE but nothing else, please Help) [Archive]

radamsiii

05-05-2008, 06:29 AM

4 weeks I didn’t know what html was, truly thought a web page meant you have lots of money. I am new to this but I have spent every spare moment reading anything I can get my hands on to learn it. It works fine in IE, but I lose the #body in 6 other browsers. I know this will not compare to anything you can do but it is a start for a newbie. Can it be fixed??
My CSS

body
{
background-image: url("WebBackground.jpg");
background-attachment:fixed;
}

html, body {
height:100%;
}

a.rollover:hover {
color: #FF0000;
font-weight: bold;
font-size: medium;
}

a:link {
font-size: small;
color: #000099;
font-weight: normal;
text-decoration: none;
}

a:visited {
font-size:small;
color: #3366FF;
font-weight: normal;
text-decoration: none;
}

a:active {
font-size:small;
color: #660099;
font-weight: normal;
text-decoration: none;
}

h1 {
color: #1F00D1;
font-size: x-large;
font-family: algerian, elephant, "goudy stout", Verdana;
margin-bottom: 2px;
margin-top: 2px;
}

h2 {
color: #000099;
font-size: small;
}

h3 {
color: #1F00D1;
font-family: "lucida handwriting";
font-size: small;
text-align: right;
}

h4 {
color: #1F00D1;
font-size: x-small;
font-style: italic;
}

h5 {
color: #1F00D1;
font-size: medium;
text-align: center;
}

p.c1 {
color: #1F00D1;
font-size: medium;
font-weight: bold;
}

p.c2 {
color: #1F00D1;
font-size: medium;
text-indent: 20px;
}

p.c3 {
color: #1F00D1;
font-size: medium;
text-align: justify;
}

#table {
position:relative;
width:100%;
min-height:100%;
margin:0;
padding:0;
}

#header {
width: 60%;
background-color: #FFFFFF;
padding: 6px;
position:relative; top:20px;
border: #F0F8FF 12px;
text-align: center;
border-style: inset;
margin: auto;
}

#body {
width: 60%; height: auto;
background-color: #FFFFFF;
padding:8px;
position: relative; top:40px;
border: #F0F8FF 12px;
border-style: inset;
margin:auto;
}

#bodyimg {
width: 25%; height: auto;
position: relative;
margin: auto;
float: right;
}

#text {
width: 70%; height: auto;
position: relative;
margin: auto;
float: left;
}

#left {
position:absolute;
top:120px;
width:100px;
}

#navbar1 {
width: 80px;height: 12px;
background-color: #FFFFFF;
padding: 5px;
border: #F0F8FF 8px;
text-align: center;
border-style: inset;
position:relative;
margin: 3px;
}

#navbar2 {
width: 80px;height: 12px;
background-color: #FFFFFF;
padding: 5px;
border: #F0F8FF 8px;
text-align: center;
border-style: inset;
position:relative;
margin: 3px;
}

#navbar3 {
width: 80px;height: 12px;
background-color: #FFFFFF;
padding: 5px;
border: #F0F8FF 8px;
text-align: center;
border-style: inset;
position:relative;
margin: 3px;
}

#navbar4 {
width: 80px;height: 12px;
background-color: #FFFFFF;
padding: 5px;
border: #F0F8FF 8px;
text-align: center;
border-style: inset;
position:relative;
margin: 3px;
}

#navbar5 {
width: 80px;height: 12px;
background-color: #FFFFFF;
padding: 5px;
border: #F0F8FF 8px;
text-align: center;
border-style: inset;
position:relative;
margin: 3px;
}

#navbar6 {
width: 80px;height: 12px;
background-color:#FFFFFF;
padding: 5px;
border: #F0F8FF 8px;
text-align: center;
border-style: inset;
position:relative;
margin: 3px;
}

#navbar7 {
width: 80px;height: 12px;
background-color: #FFFFFF;
padding: 5px;
border: #F0F8FF 8px;
text-align: center;
border-style: inset;
position:relative;
margin: 3px;
}

#pride {
position:absolute;
top:430px;
margin: 12px;
}

My HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="DESCRIPTION" content="The Portfolio of Richard Adams" />
<meta name="KEYWORDS" content="Portfolio" />

<link href="style.css" rel="stylesheet" type="text/css" />
<title> Portfolio of Richard Adams</title>
</head>

<body>



<div id="table">
<div id="header">
<h1>The Portfolio of Richard Adams</h1>
</div>



<div id="body">
<div id="text">

<p class="c2">Within this site I have gathered the, personal, educational, and employment
information of myself for your review. Use the links above and feel free to learn
more about me, my interest and accomplishments.</p>
<p class="c2">I am a single parent of two, living in a small community in Pasquotank County NC
were I own a Home Repair and Improvement company and spoil, my daughter an 18yo
College freshman, and my son a 9yo NASCAR fan.</p>
<p class="c2">After an accident in 2001, I have struggled to regain the ability to walk again
and have accomplished much toward that goal, now only needing a cane, I hope to
someday lay it down as well. </p>
<p class="c2">Aspiring to provide a better life for my family, I have returned to school
seeking a Master Degree in Information Technology. I have had an interest in
computers since the late '80's and have built hundreds. I wish to achieve a
programming degree in, Java, Visual Basic, UNIX, Web Programming/Development</p>
<p class="c2">I believe strongly in education, self motivation, goal setting, and have always
supported my children in their educational desires. I have attended many motivational
seminars and read motivational and self help books in my spare time.</p>
<p class="c2">I am an active participant in my community as a volunteer Emergency Medical Technician,
a volunteer instructor for the American Red Cross, and help my neighbors as much as I can.</p>

<h3>Richard Adams</h3></div>



<div id="bodyimg">

<a href="pic1.html"><img src="j0403673.jpg" width="140" height="185" alt="HELP" /></a>
<a href="pic2.html"><img src="PH03316I.jpg" width="140" height="115" alt="I Lost" /></a>
<a href="pic3.html"><img src="PH01281J.jpg" width="140" height="115" alt="My Pics" /></a>

<p><a href="http://office.microsoft.com/en-us/clipart/default.aspx" rel="Microsoft">All Pic's from microsot clip art</a></p>
</div>
</div>
</div>



<div id="left">

<div id="navbar1"><a class="rollover" href="Home.html"><span><em>Home</em></span></a></div>
<div id="navbar2"><a class="rollover" href="Biography.html"><span>Biography</span></a></div>
<div id="navbar3"><a class="rollover" href="Experience.html"><span>Experience</span></a></div>
<div id="navbar4"><a class="rollover" href="Education.html"><span>Education</span></a></div>
<div id="navbar5"><a class="rollover" href="Gallery.html"><span>Gallery</span></a></div>
<div id="navbar6"><a class="rollover" href="Resume.html"><span>Resume</span></a></div>
<div id="navbar7"><a class="rollover" href="Contact.html"><span>Contact</span></a></div>
</div>

<div id="pride">
<a href="http://jigsaw.w3.org/css-validator/">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
alt="Valid CSS!" /></a>
<p><a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10-blue"
alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a></p>
</div>

</body>
</html>

This is W3C compliant Strict.

effpeetee

05-05-2008, 08:29 AM

Just to help.

Code available here.

http://exitfegs.co.uk/testab.html

Could you let me have
"WebBackground.jpg"
to add.

Frank

abduraooft

05-05-2008, 08:31 AM

You need to clear your floats, see www.positioniseverything.net/easyclearing.html
Have a try by adding <div style="clear: both;"/> just after closing
<div id="bodyimg">

PS: It's not a good practice to give an id value same as that of a tag name (use #wrapper/#container or something like that instead of #body)

effpeetee

05-05-2008, 08:40 AM

<div style="clear: both;"/>

added in

http://exitfegs.co.uk/testab.html

Frank

radamsiii

05-05-2008, 02:06 PM

Thank you so much. I was looking at this all wrong (for 3 days) and you took it out in a few minutes. I have so much to learn yet and I am glad to find a place that will help.

radamsiii

05-05-2008, 02:08 PM

PS: It's not a good practice to give an id value same as that of a tag name (use #wrapper/#container or something like that instead of #body)

Thanks for the tip, I will change that, any and all advice is welcome as I learn.