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 9 of 9
  1. #1
    New to the CF scene
    Join Date
    May 2007
    Location
    VA/DC
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    IE/FF issues..Hopefully a simple fix? Help please :)

    Hello there,

    I am trying to code this site for a client and I've run into a problem with IE, and i'm sure its totally my fault/stupidity, but I'm stumped and I'm not a CSS Guru just yet so if anyone can help me I'd totally love ya for it

    http://www.aquaboogie.net/dujardin/home.php

    The code is not very neat/clean at all just yet because I'm just kinda winging it (I usually tidy up my code when everything works). So I apologize for that.

    the css can be found here http://www.aquaboogie.net/dujardin/style.css

    So basically my problem is, the lil swirly image on the far left at the very bottom in the blue box is showing up where it should using FF, but in IE, it moves all the way to the top. It's in a div called container because I dont know any other way to always keep it there no matter what lol. I gave it a height, but that's not gonna work in the longrun because if the text on the right hand side exceeds the height I specified, it wont stay at the bottom like I need it to. I may need to totally make over the entire code but I"m not sure what I should do first.


    **Here's the CSS
    Code:
    body {
    	margin: 0px 0px 0px 0px;
    	padding: 0px 0px 0px 0px;
    	font-family: "Lucida Grande", "Lucida Sans Unicode", Trebuche MS, Arial, Tahoma, sans-serif;
    	color: #000;
    	background-color: #fff3d7;
    	text-align: center;
    	background-image:url(background.jpg);
    	background-repeat:no-repeat;
    	background-position:center top;
    /* part 1 of 2 centering hack */
    	}
    #header {
    	background-image: url(header.gif);
    	background-repeat: no-repeat;
    	background-position: center top;
    	height: 100px;
    	width: 850px;
    	text-indent: -9999px;
    }
    #wrapper {
    	margin-top: 36px;
    	margin-bottom: 20px;
    	margin-right: auto;
    	margin-left: auto; 	/* opera does not like 'margin:20px auto' */
    	background-color: #bce0e2;
    	border: 1px solid #fff;
    	text-align:left; /* part 2 of 2 centering hack */
    	width: 850px;
    	color:#000000;
    	background-image:url(wrapperbg.jpg);
    	background-repeat:no-repeat;
    	background-position: top;
    	font-family: "Lucida Grande", "Lucida Sans Unicode", Trebuche MS, Arial, Tahoma, sans-serif;
    	}
    #container {
    	background-image:url(leftswirlbg.gif);
    	background-position:left bottom;
    	background-repeat:no-repeat;
    	height:auto;
    }
    #left {
    	float: left;
    	width: 330px;
    	font-size: 12px;
    }
    #main {
    	float: right;
    	width: 500px;
    	font-size: 12px;
    	padding: 5px;
    	margin: 5px;
    }
    #sidenav {
    	padding:5px;
    	margin:20px 5px 5px 5px;
    	font-size:12px;
    	font-family: "Lucida Grande", "Lucida Sans Unicode", Trebuche MS, Arial, Tahoma, sans-serif;
    	width: 300px;
    	float:left;
    }
    .clear {clear:both;}
    
    #footer {
    	margin-right: auto;
    	margin-left: auto; 	/* opera does not like 'margin:20px auto' */
    	margin-bottom:50px;
    	background-color: #511b00;
    	border: 1px solid #fff;
    	text-align:left; /* part 2 of 2 centering hack */
    	width: 830px;
    	color:#fff;
    	font-size:10px;
    	text-align:center;
    	padding:10px;
    	font-family: "Lucida Grande", "Lucida Sans Unicode", Trebuche MS, Arial, Tahoma, sans-serif;
    	}
    #sidenav li {
    	list-style-type: none;
    	padding: 1px;
    	display: block;
    	margin: 1px;
    }
    #sidenav ul {
    	margin: 1px;
    }.input {
    	background-color: #C2E4E5;
    	background-image: url(inputbg.jpg);
    	border: 1px solid #FFFFFF;
    }
    form fieldset{
    		font-family: "Lucida Grande", "Lucida Sans Unicode", Trebuche MS, Arial, Tahoma, sans-serif;
    		color:#000;
    		font-size:95%;
    		margin:10px 10px 20px 0px;
    		display:block;
    		padding: 0px 10px 10px 10px;
    		border:1px solid #C2E4E5;
    }
    label{
    	color:#000;
    	font-size:10px;
    	display:block;
    	text-align:left;
    	margin:4px 0 0 0;
    	padding:2px;
    	font-size:95%;
    }
    input {
    	background-color: #bce2e2;
    	background-image: url(inputbg.jpg);
    	border: 1px solid #FFFFFF;
    	background-repeat:repeat-x;
    	/*width:60%;*/
    	margin:0px 0px 0px 0px;
    	color:#000;
    	font-family: "Lucida Grande", "Lucida Sans Unicode", Trebuche MS, Arial, Tahoma, sans-serif;
    	font-size:95%;
    	padding:3px;
    }
    input:focus, textarea:focus {
    	border: 1px dotted #fff;
    }
    textarea {
    	background-color: #bce2e2;
    	background-image: url(inputbg.jpg);
    	border: 1px solid #FFFFFF;
    	background-repeat:repeat-x;
    	width:60%;
    	margin:0px 0px 0px 0px;
    	color:#000;
    	font-family: "Lucida Grande", "Lucida Sans Unicode", Trebuche MS, Arial, Tahoma, sans-serif;
    	font-size:95%;
    	padding:5px;
    }
    select{
    	font-family: "Lucida Grande", "Lucida Sans Unicode", Trebuche MS, Arial, Tahoma, sans-serif;
    	font-size:95%;
    	background-color:#fff6c4;
    	width: 35%;
    	}
    /* CONTROLS SEND BUTTON ONLY!!*/
    div#submit input {
    	padding: 5px;
    	background:#fff6c4;
    	font: bold 95% Geneva, Arial, Helvetica, sans-serif;
    	color: #7e8028;
    	text-transform:uppercase;
    	border:0;
    	}
    div#submit input:hover {
    	background:#5B5C16;
    	color: #fff6c4;
    	}
    .required {
    	color:#FF0000;
    	font-weight:bold;
    	font-size:100%;
    	padding:3px;
    	}
    Last edited by Rachielle; 07-13-2007 at 04:03 PM.

  • #2
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    I expect that because you have that background image in the container and, because that container starts at the top of that page that ie is putting it at the top.

    I would be inclined to put it in its own div, inside the left div, below the menu. Thats probably the easiest way with your existing code but it raises the quesion (with my quick look) what the container div is for.

    bazz

  • #3
    New to the CF scene
    Join Date
    May 2007
    Location
    VA/DC
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hmmmmm, i'll try that

  • #4
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    Just to clarify that it is in IE 7 the problem is.
    .
    .

  • #5
    New to the CF scene
    Join Date
    May 2007
    Location
    VA/DC
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    yes, its IE7 to my knowledge. i dont have IE6 anymore lol

  • #6
    New to the CF scene
    Join Date
    May 2007
    Location
    VA/DC
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok i dont know what i did, but its working! LOL thanks you guys

  • #7
    Regular Coder
    Join Date
    Jul 2007
    Posts
    571
    Thanks
    25
    Thanked 28 Times in 28 Posts
    in ie6 the swirly img on the left is ok, but the right content gets pushed below the nav.

  • #8
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    As srule_ says you need check the page in IE6. There is float dropping.

    The main reason for this is the IE6 double float margin bug which affects at least #left and #main. The article contains the fix for the bug which is to add display: inline for the affected floats.

    But note that in many cases you can avoid the bug by using padding instead of margin. You can do this in your case too. This gives an equivalent rendering if the element has transparent background color.

  • #9
    Regular Coder
    Join Date
    Jul 2007
    Posts
    571
    Thanks
    25
    Thanked 28 Times in 28 Posts
    another bug that could cause it is the 3px bug, where ie adds 3px of space between a floated element and a none floated one.


  •  

    Posting Permissions

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