...

View Full Version : SOLVED! A little CSS help needed - IE fix?



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;
}

vtjustinb
10-02-2007, 02:51 PM
#1.) You absolutely-positioned the div, but didn't provide any offset. Adding a left: 0 will fix this in IE.

#2.) Since you put a firm width in it, and text-aligned right, IE is actually making the box grow from right to left (at least that's what it looks like). Taking away the width, or setting width to auto will fix this in IE.

cbmr777
10-02-2007, 06:18 PM
Awesome!! The website looks perfect now in all browsers! I can't tell you how much I appreciate your time and help!

Thank you!! :D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum