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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    May 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Serious CSS problem in IE6 and IE7

    I have been trying to make a CSS template for my site for the last few days and everything has been going well until I hit a serious roadblock. IE 6 and 7 are pushing two of my columns out to the right for no apparent reason. This is *not* happen in Dreamweaver 8 or FireFox 1.5.

    The pages:
    http://www.xyzcomputing.com/v4/index.php
    http://www.xyzcomputing.com/v4/xyz.css

    Any ideas? I have tried a few hacks and fixes, but nothing seems to do the trick. Could be a problem with my coding, but does not seem like it.

    Thanks in advance!

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Looks like a basic 3 column CSS layout. http://bonrouge.com/3c-hf-fluid.php
    You seem to have a case of divitis. You are using way to many divs.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New to the CF scene
    Join Date
    May 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yeah, that is definitely something to consider- the design is a bit complex, but I was trying to fix the height issue and then this positioning problem came up. I thought someone here might have an idea- the layout is fundamentally sound, it just has this one (major) hiccup in IE. Figured someone here might see something I did not and there would be a pretty painless solution...

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Well if I were you would recode it without so many divs but if all you are looking for and don't really care how its code then this might help
    Code:
    #maincontent	{
    	margin: 2px 144px 0 178px;
    	padding: 5px; 
    	}
    #leftcolumn {
    	float: left;
        padding: 2px 1px 1px 5px;
    	margin: 2px 0 0 0;
    	width: 138px;
    	text-align: center;
    	voice-family: "\"}\""; 
    	voice-family:inherit;
    	}	
    
    #leftcolumn {
    	float: left;
            padding: 2px 1px 1px 5px;
    	margin: 2px 0 0 0;
    	width: 138px;
    	text-align: center;
    	voice-family: "\"}\""; 
    	voice-family:inherit;
    	}	
    #rightcolumn {
    	float: right;
            padding: 2px 1px 1px 3px;
    	width: 174px;
    	}
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    New to the CF scene
    Join Date
    May 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Looks like that did the trick! I did not need those "position tags" in there, that's for sure.

    Thanks so much! It seems so simple now- not floating the main window and then putting left and right margins...

    Think I am going to see if I can make this work and then take your advice and redesign with cleaned up code


  •  

    Posting Permissions

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