3 replies [Last post]
nanacss
nanacss's picture
Offline
Enthusiast
Last seen: 6 years 50 weeks ago
Timezone: GMT+8
Joined: 2007-07-27
Posts: 107
Points: 22

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





















What's News





Title King Ken
$250.99

This is test. We just got it.









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.









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.









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.









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.




























真诚清静平等真觉慈悲,看破放下自在随缘念佛。
name: WEN YU
my blog: http://webwhalenews.com
my collection: http://gtoystage.com

nanacss
nanacss's picture
Offline
Enthusiast
Last seen: 6 years 50 weeks ago
Timezone: GMT+8
Joined: 2007-07-27
Posts: 107
Points: 22

!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!!!

真诚清静平等真觉慈悲,看破放下自在随缘念佛。
name: WEN YU
my blog: http://webwhalenews.com
my collection: http://gtoystage.com

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 35 weeks 6 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

_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 Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

nanacss
nanacss's picture
Offline
Enthusiast
Last seen: 6 years 50 weeks ago
Timezone: GMT+8
Joined: 2007-07-27
Posts: 107
Points: 22

thanks!!!!

thanks!!!!

真诚清静平等真觉慈悲,看破放下自在随缘念佛。
name: WEN YU
my blog: http://webwhalenews.com
my collection: http://gtoystage.com