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
    Jan 2008
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Please Assist a CSS Rookie

    I normally do all my work with tables and HTML. I have decided that it is time to step out of my comfort zone and begin learning CSS.

    I have finished the basic template for the site I am making and it looks as it should in FF, but is having some issues in IE7. I was hoping that someone may take a few moments to have a look at my code to see what I have done incorrectly.

    The differences between FF and IE are that Nav menu is slightly angled and gets gradually lower (like stairs) and also I have have a blockquote that uses large quotation marks before and after the blockquote that does not even show up in IE. I think that is it, otherwise everything else looks alright.

    Here is the link to the page: http://www.whiteleyenterprises.net/white/

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello chriswhiteley,
    I didn't look at this long ... try it out and see if it works:
    Code:
    /* Navigation */
    #nav {
    padding: 0 0 2px 0;
    
    }
    #nav ul {
    margin: 0 auto;
    width: 730px; /*might need to play with this a bit*/
    overflow: auto;
    }
    #nav li {
    list-style:none;
    margin: 0 2px;
    }
    #nav li a {
    background: url(images/navbg.gif) #fff bottom left repeat-x;
    height: 2em;
    line-height: 2em;
    float: left;
    width: 140px;
    display: block;
    border: 2px solid #dcdce9;
    color: #0d2474;
    text-decoration: none;
    text-align: center;
    }
    
     #nav li a:hover
    {
    background: url(images/navhover.gif) #fff bottom left repeat-x;
    height: 2em;
    line-height: 2em;
    float: left;
    width: 140px;
    display: block;
    border: 2px solid #dcdce9;
    color: #0d2474;
    text-decoration: none;
    text-align: center;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    chriswhiteley (01-10-2008)

  • #3
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Excavator,

    Thanks for the help, but it didn't seem to work.

    I will keep plugging away at it.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Good morning chriswhiteley,
    Sorry for not looking at that closer, I shouldn't have missed this...

    Your styling the link well enough but leaving the li open to interpretation by the browser. If you specify a width for the li then IE won't get so confused.
    Try this:
    Code:
    /* Navigation */
    #nav {
    	padding: 0 0 2px 0;
    }
    	#nav ul {
    		margin: 0 auto;
    		width: 730px;
    		overflow: auto;
    	}
    	#nav li {
    		width: 140px;
    		float: left;		list-style:none;
    		margin: 0 2px;
    	}
    	#nav li a {
    		background: url(http://www.whiteleyenterprises.net/white/images/navbg.gif) #fff bottom left repeat-x;
    		height: 2em;
    		line-height: 2em;
    		width: 140px;
    		display: block;
    		border: 2px solid #dcdce9;
    		color: #0d2474;
    		text-decoration: none;
    		text-align: center;
    	}
    	 #nav li a:hover {
    		background: url(http://www.whiteleyenterprises.net/white/images/navhover.gif) #fff bottom left repeat-x;		
    	}
    /* Main Container */
    I tried it in IE7 and FF, but not IE6.
    You can change your image paths back. I just do that so I can work on it here locally.

    Also, if you'll notice, when your page first loads and you hover over a button...it takes just a second for the a:hover image to download. If you want to get rid of that little flicker have a look at my CSS rollover examples here:
    one
    two
    three
    Last edited by Excavator; 01-10-2008 at 06:24 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks Excavator, looks like you nailed it.

    I just had to adjust the
    Code:
    #nav ul {
    		margin: 0 auto;
    		width: 730px;
    		overflow: auto;
    	}
    to

    Code:
    #nav ul {
    		margin: 0 auto;
    		width: 750px;
    		overflow: auto;
    	}
    in order to have everything fit in a single row in IE6.

    With the adjustments I made the centering is all thrown off. In IE the <ul> pulls to the left and in Mozzila it pulls to the right. I have been wrestling with it for quite some time and I can only seem to get one or the other centered, not both.

    The only way I could get it centered is by using <!--[if IE]> ... <![endif]--> and creating adjustments separate to IE. Of course I am hesitant to do this as I do not know if it complies to proper CSS standards.

    If you have any thoughts please feel free to share. You have helped me so much thus far and I appreciate it, I just don't want waste your time with trivial things such as centering.

    Also thank you for suggesting the CSS Rollovers. I definitely change my rollovers to the style that you have suggested


  •  

    Posting Permissions

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