cbmr777
10-02-2007, 07:45 AM
I am needing an extra set of eyes to help me make my css work in IE... The website looks good in FF, NS, Opera, and Safari. XHTML & CSS checks out as valid.
Here's the website:
http://travelingsling.com/index.php
Problem #1: the bottom of the left content column is not aligning correctly in IE.
Problem #2: Maybe I am just missing it, but why in IE is it indenting my image that says: "Next sling stop"?
Probably all easy fixes that my tired eyes are missing. Any help is greatly appreciated!! :)
Here's my CSS:
* {
margin:0;
padding:0;
}
body {
background:#000B33 url(side.gif) no-repeat top left;
background-attachment:fixed;
padding:14px 20px 0 73px;
margin:0;
}
p {
margin:12px 0;
color:#000;
}
#container {
position:absolute;
width:700px;
margin:0;
padding:0;
background:transparent url(lines.gif) repeat-y top left;
}
#intro {
position:relative;
text-align:justify;
background:transparent url(mid.jpg) no-repeat top left;
width:425px;
font:normal 13px/18px arial;
color:#000;
padding:150px 75px 0 30px;
}
#pageHeader {
display:none;
}
#stop {
color:#999;
text-align:right;
padding-top:75px;
height:150px;
}
h3 span {
display:none;
}
#stop h3 {
width:260px;
height:16px;
background:url(stop.gif) no-repeat;
}
#stop img {
float:right;
}
#blog {
margin-top:50px;
color:#999;
}
#bottom {
position:relative;
font:normal 13px/18px arial;
color:#999;
width:485px;
margin-left:75px;
text-align:center;
}
#bottom h3 {
margin-top:24px;
}
#bottom a {
color:#98A892;
}
#bottom a:hover {
text-decoration:none;
color:#fff;
background-color:#000080;
}
#footer {
position:absolute;
background:url(footer.gif) no-repeat top center;
width:485px;
height:110px;
margin-left:-150px;
padding-left:150px;
padding-top:27px;
padding-bottom:0;
margin-bottom:0;
margin-right:50px;
text-indent:-150px;
text-align:center;
font-size:11px;
}
#footer img {
border:0px;
vertical-align:top;
text-decoration:none;
background-color:#ffffff;
}
.validate {
text-align:center;
}
#sidelinks {
position:absolute;
top:0;
width:200px;
left:500px;
font:normal 11px/15px arial;
color:#999;
background:#fff url(lines2.gif) repeat-y top center;
color:#666;
float:left;
}
#sidelinks2 {
background:transparent url(sidetop.jpg) no-repeat top left;
padding:50px 25px 0 25px;
width:150px;
}
.menu {
}
h3.menu {
width:115px;
height:18px;
background:url(menu.gif) no-repeat;
}
h3.archives {
width:115px;
height:18px;
background:url(archives.gif) no-repeat;
}
h3.moreinfo {
width:115px;
height:18px;
background:url(moreinfo.gif) no-repeat;
}
h3.cat {
width:145px;
height:18px;
background:url(cat.gif) no-repeat;
}
h3.search {
width:115px;
height:18px;
background:url(search.gif) no-repeat;
}
#sidelinks a {
color:#000;
text-decoration:none;
}
#sidelinks a:hover {
color:#fff;
background-color:#000080;
text-decoration:none;
}
ul {
margin:4px 0 16px 18px;
}
li {
margin:4px 0;
list-style-image:url(bullet.gif);
}
#lmenu {
padding-top:55px;
}
#lmoreinfo {
margin:0 -25px;
padding:0 25px 15px 25px;
background:url(line2.gif) no-repeat bottom center;
}
#lmoreinfo ul {
margin-bottom:0;
padding-bottom:14px;
}
/* Nucleus specific stuff */
.itemtitle {
color:#000080;
font:bold 18px/20px arial;
}
.itembody {
color:#000;
}
.iteminfo {
color:#000;
}
.searchform .formfield
{
width: 130px;
font-family: Arial, Tahoma, Trebuchet MS, Verdana, sans-serif;
padding: 2px 0;
margin: 0 2px 2px 0;
}
.searchform .formbutton
{
width: 60px;
font-family: Tahoma, Arial, Trebuchet MS, Verdana, sans-serif;
padding: 2px 2px;
}
.mainform .formfield
{
width: 280px;
font-family: Arial, Tahoma, Trebuchet MS, Verdana, sans-serif;
padding: 2px 0;
margin: 0 2px 2px 0;
}
.mailform .formbutton
{
width: 100px;
font-family: Tahoma, Arial, Trebuchet MS, Verdana, sans-serif;
padding: 2px 2px;
}
#nucleus_cf_name, #nucleus_cf_mail
{
width: 300px;
margin-right: 105px;
font-family: Arial, Trebuchet MS, Verdana, sans-serif;
}
.commentform textarea, .commentform .formfield, .mailform textarea, .mailform .formfield
{
width: 300px;
}
.commentform .formbutton
{
width: 100px;
height: 22px;
font-family: Tahoma, Arial, Trebuchet MS, Verdana, sans-serif;
}
.error
{
color: red;
font-weight: bold;
}
.commentform, .mailform
{
margin-top: 10px;
padding: 10px;
background: #EEEEEE;
/* Rounded borders, for Mozilla browsers */
/* -moz-border-radius: 10px; */
}
.commentform img{
margin: 5px 0 0 0;
}
Here's the website:
http://travelingsling.com/index.php
Problem #1: the bottom of the left content column is not aligning correctly in IE.
Problem #2: Maybe I am just missing it, but why in IE is it indenting my image that says: "Next sling stop"?
Probably all easy fixes that my tired eyes are missing. Any help is greatly appreciated!! :)
Here's my CSS:
* {
margin:0;
padding:0;
}
body {
background:#000B33 url(side.gif) no-repeat top left;
background-attachment:fixed;
padding:14px 20px 0 73px;
margin:0;
}
p {
margin:12px 0;
color:#000;
}
#container {
position:absolute;
width:700px;
margin:0;
padding:0;
background:transparent url(lines.gif) repeat-y top left;
}
#intro {
position:relative;
text-align:justify;
background:transparent url(mid.jpg) no-repeat top left;
width:425px;
font:normal 13px/18px arial;
color:#000;
padding:150px 75px 0 30px;
}
#pageHeader {
display:none;
}
#stop {
color:#999;
text-align:right;
padding-top:75px;
height:150px;
}
h3 span {
display:none;
}
#stop h3 {
width:260px;
height:16px;
background:url(stop.gif) no-repeat;
}
#stop img {
float:right;
}
#blog {
margin-top:50px;
color:#999;
}
#bottom {
position:relative;
font:normal 13px/18px arial;
color:#999;
width:485px;
margin-left:75px;
text-align:center;
}
#bottom h3 {
margin-top:24px;
}
#bottom a {
color:#98A892;
}
#bottom a:hover {
text-decoration:none;
color:#fff;
background-color:#000080;
}
#footer {
position:absolute;
background:url(footer.gif) no-repeat top center;
width:485px;
height:110px;
margin-left:-150px;
padding-left:150px;
padding-top:27px;
padding-bottom:0;
margin-bottom:0;
margin-right:50px;
text-indent:-150px;
text-align:center;
font-size:11px;
}
#footer img {
border:0px;
vertical-align:top;
text-decoration:none;
background-color:#ffffff;
}
.validate {
text-align:center;
}
#sidelinks {
position:absolute;
top:0;
width:200px;
left:500px;
font:normal 11px/15px arial;
color:#999;
background:#fff url(lines2.gif) repeat-y top center;
color:#666;
float:left;
}
#sidelinks2 {
background:transparent url(sidetop.jpg) no-repeat top left;
padding:50px 25px 0 25px;
width:150px;
}
.menu {
}
h3.menu {
width:115px;
height:18px;
background:url(menu.gif) no-repeat;
}
h3.archives {
width:115px;
height:18px;
background:url(archives.gif) no-repeat;
}
h3.moreinfo {
width:115px;
height:18px;
background:url(moreinfo.gif) no-repeat;
}
h3.cat {
width:145px;
height:18px;
background:url(cat.gif) no-repeat;
}
h3.search {
width:115px;
height:18px;
background:url(search.gif) no-repeat;
}
#sidelinks a {
color:#000;
text-decoration:none;
}
#sidelinks a:hover {
color:#fff;
background-color:#000080;
text-decoration:none;
}
ul {
margin:4px 0 16px 18px;
}
li {
margin:4px 0;
list-style-image:url(bullet.gif);
}
#lmenu {
padding-top:55px;
}
#lmoreinfo {
margin:0 -25px;
padding:0 25px 15px 25px;
background:url(line2.gif) no-repeat bottom center;
}
#lmoreinfo ul {
margin-bottom:0;
padding-bottom:14px;
}
/* Nucleus specific stuff */
.itemtitle {
color:#000080;
font:bold 18px/20px arial;
}
.itembody {
color:#000;
}
.iteminfo {
color:#000;
}
.searchform .formfield
{
width: 130px;
font-family: Arial, Tahoma, Trebuchet MS, Verdana, sans-serif;
padding: 2px 0;
margin: 0 2px 2px 0;
}
.searchform .formbutton
{
width: 60px;
font-family: Tahoma, Arial, Trebuchet MS, Verdana, sans-serif;
padding: 2px 2px;
}
.mainform .formfield
{
width: 280px;
font-family: Arial, Tahoma, Trebuchet MS, Verdana, sans-serif;
padding: 2px 0;
margin: 0 2px 2px 0;
}
.mailform .formbutton
{
width: 100px;
font-family: Tahoma, Arial, Trebuchet MS, Verdana, sans-serif;
padding: 2px 2px;
}
#nucleus_cf_name, #nucleus_cf_mail
{
width: 300px;
margin-right: 105px;
font-family: Arial, Trebuchet MS, Verdana, sans-serif;
}
.commentform textarea, .commentform .formfield, .mailform textarea, .mailform .formfield
{
width: 300px;
}
.commentform .formbutton
{
width: 100px;
height: 22px;
font-family: Tahoma, Arial, Trebuchet MS, Verdana, sans-serif;
}
.error
{
color: red;
font-weight: bold;
}
.commentform, .mailform
{
margin-top: 10px;
padding: 10px;
background: #EEEEEE;
/* Rounded borders, for Mozilla browsers */
/* -moz-border-radius: 10px; */
}
.commentform img{
margin: 5px 0 0 0;
}