...

View Full Version : float problem...need a second set of eyes on this



pbneal
11-18-2011, 06:05 PM
Please take a look at this page (http://www.pcnaturals.com/wellness.html) 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.

http://www.pcnaturals.com/images/wellness.jpg

Excavator
11-18-2011, 07:03 PM
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 -

#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 (http://www.quirksmode.org/css/clearing.html).

pbneal
11-18-2011, 08:40 PM
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!

Excavator
11-18-2011, 09:31 PM
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.



.

pbneal
11-18-2011, 10:13 PM
New it was something dumb!! Thanks got it all working now.

Excavator
11-18-2011, 10:17 PM
Right on :thumbsup:

pbneal
11-21-2011, 08:31 PM
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!!

Excavator
11-21-2011, 08:34 PM
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 -

ul.description li {
color: #8A9DA9;
font-size: 0.8em;
list-style-type: disc;
text-align: left;
}

pbneal
11-21-2011, 10:01 PM
Size and color change from this bit -

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.

pbneal
11-21-2011, 10:49 PM
Found it and fixed it.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum