Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thumbs up SOLVED! A little CSS help needed - IE fix?

    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:

    Code:
    * {
    	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;
    }
    Last edited by cbmr777; 10-02-2007 at 07:19 PM. Reason: SOLVED

  • #2
    Regular Coder
    Join Date
    Sep 2007
    Location
    Raleigh, NC
    Posts
    273
    Thanks
    7
    Thanked 59 Times in 52 Posts
    #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.
    Last edited by vtjustinb; 10-02-2007 at 07:25 PM. Reason: terminology clarification

  • Users who have thanked vtjustinb for this post:

    cbmr777 (10-02-2007)

  • #3
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Awesome!! The website looks perfect now in all browsers! I can't tell you how much I appreciate your time and help!

    Thank you!!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •