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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Mar 2010
    Location
    Lexington
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    css help for IE7 (yuck)

    Would anyone please help me fix my css to make it compatible in IE7?
    I see a couple of issues on the home page itself (ckytech.com):

    1. Header is mis-aligned
    2. Horizontal menu bar hover links are now going diagonal for some reason

    The last problem I'm facing is on the http://www.ckytech.com/contact/contact.html form page. Basically the form is stretching below the footer.

    If anyone can help out I would greatly appreciate it. I'm fairly new to CSS but I'm trying. I think I have most of it looking good in FireFox (much easier!).

    Thanks!

  2. #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    15,060
    Thanks
    165
    Thanked 2,250 Times in 2,237 Posts
    Applying a border(overflow:auto) around ul#nav would have shown you a different display in firefox, than what you've expected. There's a collapsing of margin in firefox, which pushes the ul#nav down along with the margin-top applied to an inner element.
    Try
    Code:
    body {
    	margin-bottom: 100px;
    	font-size: 62.5%;
    	font-family: Helvetica, san-serif;
    	background: url(http://www.ckytech.com/images/body-bg.png) repeat-x 0% 17px #f5ecd4;
    	-moz-background-size: auto;  /*Firefox Bug Fix - http://hacks.mozilla.org/2009/12/css-backgrounds-firefox-36/ */
    }
    Code:
    ul#nav li{
    padding-top:165px;
    }
    ul#nav li a {
    display: block;
    width: 125px;
    float: left;
    /*margin-top:165px;*/
    color: white;
    font-weight: bold;
    text-decoration: none;
    }
    Read http://complexspiral.com/publication...psing-margins/
    Last edited by abduraooft; Mar 8th, 2010 at 04:25 PM.

  3. Users who have thanked abduraooft for this post:

    viperone (Mar 8th, 2010)

  4. #3
    New to the CF scene
    Join Date
    Mar 2010
    Location
    Lexington
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    That lined the header up perfectly but now my menu links are spread everywhere?

  5. #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,910
    Thanks
    23
    Thanked 1,874 Times in 1,858 Posts
    Hello viperone,
    What happens when you addjust the left padding on your ul?
    Here -
    Code:
    ul#nav {
    	height: 236px;
    	background: url(http://www.ckytech.com/images/header-bg.jpg) no-repeat;
    	list-style: none;
    	padding-left: 150px;
    	}
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  6. #5
    New to the CF scene
    Join Date
    Mar 2010
    Location
    Lexington
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    It didn't do anything. Here is what I have for my IE7 patch CSS. What am I doing wrong?

    Code:
    body {
    	margin-bottom: 100px;
    	font-size: 62.5%;
    	font-family: Helvetica, san-serif;
    	background: url(http://www.ckytech.com/images/body-bg.png) repeat-x 0% 17px #f5ecd4;
    	-moz-background-size: auto;  /*Firefox Bug Fix - http://hacks.mozilla.org/2009/12/css-backgrounds-firefox-36/ */
    }
    
    ul#nav li{
    padding-top:165px;
    }
    ul#nav li a {
    display: block;
    width: 125px;
    float: left;
    /*margin-top:165px;*/
    color: white;
    font-weight: bold;
    text-decoration: none;
    }

  7. #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,910
    Thanks
    23
    Thanked 1,874 Times in 1,858 Posts
    Sorry, I didn't even look at it in IE7. Looks like that browser needs the li floated, instead of the anchor.
    Try making these changes -
    Code:
    ul#nav {
    	height: 236px;
    	background: url(http://www.ckytech.com/images/header-bg.jpg) no-repeat;
    	list-style: none;
    padding-left: 100px;
    	}
    	ul#nav li {
    		display: block;
    width: 120px;
    		float: left;
    		margin-top: 165px;
    		}
    ul#nav li a {
    color: white;
    font-weight: bold;
    text-decoration: none;
    }
    		ul#nav li a:hover, ul#nav li a:active {
    			color: yellow;
    		}
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  8. Users who have thanked Excavator for this post:

    viperone (Mar 8th, 2010)

  9. #7
    New to the CF scene
    Join Date
    Mar 2010
    Location
    Lexington
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Awesome job, that worked perfectly! I can't thank you enough

  10. #8
    New to the CF scene
    Join Date
    Mar 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy

    Hi, I'm having a LOT of problems with IE7 too! I've been reviewing everything between IE8, IE6 and Firefox, and it looked fine, but my client is using IE7... and it looked afwul. The bottom menu div is to the right, the social networks bar is also to the right, and I can't seem to be able to modify the left: or margin-left: property without damaging how it looks on Firefox. I've browsed through a lot of tutorials but no luck so far. Please help! I have a deadline... :S

    The url is: http://littlecaesarspr.vistilla.com/...ain/index.html
    That's the main one, but the div positioning problem runs throughout the whole site.

    Thanks a bunch!


 

Tags for this Thread

Posting Permissions

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