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 10 of 10
  1. #1
    New Coder
    Join Date
    Jun 2011
    Location
    Burlington, NC
    Posts
    25
    Thanks
    8
    Thanked 0 Times in 0 Posts

    float problem...need a second set of eyes on this

    Please take a look at this page and let me know what I am missing. the image of the sock package should be below the main text of the page with the list elements to the right. For whatever reason it is floating behind the upper graphic on the page and the list is all over the place. I know it is something dumb, but i am hitting a wall on this.

    Thanks in advance!!

    here is an image of what it should look like.


  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello pbneal,
    You need to clear the floats in #topMain. Change the background color in that element and you can see what's happening.

    Try adding this bit highlighted in red -
    Code:
    #topMain{
    	position:relative;
    	z-index:2;
    	clear:both;
    	width:725px;
    	min-height:186px;
    overflow: auto;
    	background:#FFF url(../images/Banner_bg_btm.png) no-repeat top left;
    	
    
    }
    See this explanation of how overflow: auto; clears your floats.
    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

  • #3
    New Coder
    Join Date
    Jun 2011
    Location
    Burlington, NC
    Posts
    25
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Thanks, that got the image down, now the list is doing something similar. I updated the page to show what it is doing now.

    Thanks!

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Your id's are not named correctly. You cannot have a number for the first character.

    The validator finds those errors and others. See the links about validation in my signature line below.



    .
    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:

    pbneal (11-18-2011)

  • #5
    New Coder
    Join Date
    Jun 2011
    Location
    Burlington, NC
    Posts
    25
    Thanks
    8
    Thanked 0 Times in 0 Posts
    New it was something dumb!! Thanks got it all working now.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Right on
    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

  • #7
    New Coder
    Join Date
    Jun 2011
    Location
    Burlington, NC
    Posts
    25
    Thanks
    8
    Thanked 0 Times in 0 Posts
    one other question on this page. I am trying to see where the font's are picking up different characteristics on the page. Especially in the <li> arguments. Any advice would be great!!

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by pbneal View Post
    one other question on this page. I am trying to see where the font's are picking up different characteristics on the page. Especially in the <li> arguments. Any advice would be great!!
    Size and color change from this bit -
    Code:
    ul.description li {
        color: #8A9DA9;
        font-size: 0.8em;
        list-style-type: disc;
        text-align: left;
    }
    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

  • #9
    New Coder
    Join Date
    Jun 2011
    Location
    Burlington, NC
    Posts
    25
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Size and color change from this bit -
    Code:
    ul.description li {
        color: #8A9DA9;
        font-size: 0.8em;
        list-style-type: disc;
        text-align: left;
    }
    Yeah, that is what I put in, but if you look at the first 6 stlyes they are different from the last style. I am trying to figure out where that last one is getting it's styling from.

  • #10
    New Coder
    Join Date
    Jun 2011
    Location
    Burlington, NC
    Posts
    25
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Found it and fixed it.


  •  

    Posting Permissions

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