Mon, 2007-09-03 04:39
hi, is me again!
i have some problems with this website that i practise to make by using xhtml and css,
the link is :
html link (this website is not real, it is just a practise for me to create layout with css and xhtml,if click the link inside nothing will happen)
css link
my problem is like this :
in my "content_box" the "p" i have set the min-height, but it works well in FF, but when i use IE6, it doest work, why is it? (i wish my "add to cart" is always at the same line as the product image)
although my FF works, but i saw the error msg saying "unknown property _height. decralation dropped." i guess because of this msg the IE doest work?
second problem:
well,i guess this is not big deal,but i am just curious, because when there is a link, even img, in FF, there will be dotted line surrounding it,so that i know it is a link.
but this html link,
i couldnt see the dotted line for the link in "page top" ?(i realised if i deleted the overflow:hidden in the
#content_bottom ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}
i can see the dotted line. why is it?
other links some dotted line of the link show up only. i just curious.
thanks in advance who helps me !!!
code for css:(at line 187)
/* Body
-----------------------------------------------------------------------------*/
body {
margin: 0;
padding: 0;
font-family: verdana;
font-size: 11px;
color: #333333;
}
/* Wrapper
-----------------------------------------------------------------------------*/
#wrapper {
margin: 0 auto;
padding: 0 15px 0 15px;
width: 820px;
background: url(../images/common/bg.gif) repeat-y;
}
/* Header
-----------------------------------------------------------------------------*/
#header {
margin: 0;
padding: 0;
width: 750px;
height: 70px;
color: #ff9900;
background: #ffffff url(../images/common/header.gif) no-repeat;
overflow: hidden;
}
#logo {
float: left;
margin: 6px 0 0 0;
display: block;
}
#logo a img {
border: 0;
}
#header ul {
margin: 0;
padding: 0;
overflow: hidden;
list-style: none;
}
#header li#phone {
margin-top: 20px;
padding: 0 0 0 20px;
background: url(../images/common/phone_icon.gif) left center no-repeat;
float: right;
}
#header li#email {
clear: right;
padding: 0 0 0 24px;
background: url(../images/common/email_icon.gif) left center no-repeat;
float: right;
}
#header li#add {
clear: right;
padding: 0 0 0 18px;
background: url(../images/common/add_icon.gif) left center no-repeat;
float: right;
}
/* Lead
-----------------------------------------------------------------------------*/
#lead {
margin: 5px 0 0 0;
padding: 0;
width: 770px;
}
#lead ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}
#lead li {
float: left;
margin: 0 14px 5px 0;
padding: 0;
font-size: 0;
}
#lead ul a img {
text-decoration: none;
border: none;
}
/* Navigation
-----------------------------------------------------------------------------*/
#nav {
margin: 0 0 10px 0;
padding: 0;
width: 750px;
}
#nav ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}
#nav li {
margin: 0;
padding: 0;
float: left;
height: 45px;
text-indent: -9999px;
}
#nav li#top {
width: 114px;
height: 45px;
background: url(../images/common/nav.gif) 0 0 no-repeat;
}
#nav li#new {
width: 126px;
height: 45px;
background: url(../images/common/nav.gif) -114px 0 no-repeat;
}
#nav li#products {
width: 127px;
height: 45px;
background: url(../images/common/nav.gif) -240px 0 no-repeat;
}
#nav li#contact {
width: 126px;
height: 45px;
background: url(../images/common/nav.gif) -367px 0 no-repeat;
}
#nav li#order {
width: 126px;
height: 45px;
background: url(../images/common/nav.gif) -493px 0 no-repeat;
}
#nav li#search {
width: 131px;
height: 45px;
background: url(../images/common/nav.gif) -619px 0 no-repeat;
}
#nav li a {
margin: 10px 0 0 0;
text-decoration: none;
display: block;
height: 35px;
}
#nav li#top a:hover { background: url(../images/common/nav.gif) 0 -45px no-repeat; }
#nav li#new a:hover { background: url(../images/common/nav.gif) -114px -45px no-repeat; }
#nav li#products a:hover { background: url(../images/common/nav.gif) -240px -45px no-repeat; }
#nav li#contact a:hover { background: url(../images/common/nav.gif) -367px -45px no-repeat; }
#nav li#order a:hover { background: url(../images/common/nav.gif) -493px -45px no-repeat; }
#nav li#search a:hover { background: url(../images/common/nav.gif) -619px -45px no-repeat; }
/* Pagebody
-----------------------------------------------------------------------------*/
#pagebody {
margin: 0;
padding: 0;
width: 750px;
overflow: hidden;
}
/* Content
-----------------------------------------------------------------------------*/
#content {
margin: 0;
padding: 0;
float: left;
width: 620px;
}
#content h1 {
margin: 0 0 10px 0;
padding: 0;
height: 25px;
}
.content_box {
border:1px dotted #ff9900;
margin: 0 5px 5px 0;
padding: 5px;
width: 290px;
float: left;
overflow: hidden;
}
.content_box img {
float: left;
margin: 0 5px 0 0;
width: 95px;
height: 115px;
}
.content_box p {
float: left;
margin: 0;
padding: 0;
line-height: 1.4;
width: 185px;
min-height: 88px;
height: auto;
_height: 88px;
}
.content_box span {
font-weight: bold;
display: block;
}
.content_box ul {
float: right;
margin: 0;
padding: 0;
list-style: none;
}
.content_box li {
text-indent: -9999px;
background: url(../images/common/add_to_cart2.gif) no-repeat;
height: 17px;
width: 92px;
}
.content_box li a {
display: block;
height: 17px;
width: 92px;
}
/* Right_Col
-----------------------------------------------------------------------------*/
#right_col {
float: right;
margin-bottom: 5px;
padding: 0;
width: 130px;
font-size: 0;
}
#right_col ul {
margin: 0;
padding: 0;
list-style: none;
}
#right_col li {
margin: 0 0 1px 0;
padding: 0;
display: block;
}
#right_col ul a img {
border: none;
}
/* Page Top, Back, Paging
-----------------------------------------------------------------------------*/
#content_bottom {
margin: 0;
padding: 10px 0 5px 0;
clear: both;
overflow: hidden;
width: 750px;
background: url(../images/common/line_bg.gif) left top repeat-x;
}
#content_bottom p {
float: left;
margin: 0;
padding: 0;
font-size: 12px;
}
#content_bottom span {
color: #333333;
}
#content_bottom a {
text-decoration: none;
color: #ff9900;
}
#content_bottom a:hover {
color: #333333;
}
#content_bottom ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}
#content_bottom li {
margin: 0 0 0 20px;
padding: 0;
text-indent: -9999px;
}
#content_bottom li#top_body {
float: right;
height: 15px;
width: 66px;
background: url(../images/common/page_top.gif) no-repeat;
}
#content_bottom li#back {
height: 15px;
width: 44px;
float: right;
background: url(../images/common/back.gif) left center no-repeat;
}
#content_bottom li#top a, li#back a {
text-decoration: none;
height: 15px;
display: block;
}
/* Footer
-----------------------------------------------------------------------------*/
#footer {
margin: 0;
padding: 10px 0 5px 0;
color: #999999;
text-align: center;
font-size: 10px;
width: 750px;
background: url(../images/common/line_bg.gif) left top repeat-x;
}
#footer p {
margin: 0;
padding:0;
}
#footer a {
text-decoration: none;
color: #999999;
}
#footer a:hover {
color: #ff9900;
}
code for html:
Untitled Document
Title King Ken
$250.99
This is test. We just got it. If you interested you need to buy it as soon as possible. It is very rare.
Title King Ken
$250.99
This is test. We just got it. If you interested you need to buy it as soon as possible. It is very rare.
Title King Ken
$250.99
This is test. We just got it. If you interested you need to buy it as soon as possible. It is very rare.
Title King Ken
$250.99
This is test. We just got it. If you interested you need to buy it as soon as possible. It is very rare.
Mon, 2007-09-03 16:49
#1
!it works now! my min-height
!it works now!
my min-height is showing up in IE6!!!!
i guess i miss out the validation that's y!! (when i validated i got errors! after i fix the error my min-height works! )
but when i validate the css ...
"proper _height doest exisit"
is this error msg ok?
or how to fix it?
cos i know the _height is for IE purpose.
thanks!!!
Mon, 2007-09-03 16:52
#2
_height won't validate, so
_height won't validate, so consider wrapping it in IE-only conditional comments.
Congrats for validating, now you see why we're so adamant it has to be done 
Tue, 2007-09-04 06:56
#3
thanks!!!!
thanks!!!!