Avatar billede feriefun Nybegynder
18. august 2009 - 22:47 Der er 5 kommentarer

CSS ødelægger javaeffekter i shop (billeder)

Jeg har et problem med Stylesheet i min shop, det ødelægger billed visning :-(

Det som der sker er, at de fade effekter jeg kan vælge i Dandomain systemet bliver overrulet af CSS'en
Bl.a. skulle de små billeder under det store ved denne vare stå 2 og 2 og ikke i 4 rækker, og billederne skulle fade ind og ud ved klik på de små.

http://www.netcentret.dk/shop/atv-110cc-model-1427p.html

Kan du gennemskue hvor fejlen ligger?

Her er min CSS:

body
{
    background-color: #b86900;
    font-family: Arial, helvetica;
    font-size: 10px;
}

.Topbanner
{
    border: none;
}

.ContainerTopLeft
{
    width: 23px;
    height: 23px;
    background-image: url(  'containertopleft.png' );
}
.ContainerTopRight
{
    width: 23px;
    height: 23px;
    background-image: url(  'containertopright.png' );
}
.ContainerTop
{
    height: 23px;
    background-image: url(  'containertop.png' );
}
.ContainerLeft
{
    width: 23px;
    background-image: url(  'containerleft.png' );
}
.ContainerRight
{
    width: 23px;
    background-image: url(  'containerright.png' );
}
.ContainerBanner, .ContainerAd
{
    width: 748px;
    background-color: #FFFFFF;
    padding-bottom: 10px;
}
.Topbanner, .Ad
{
    float: right;
}
.ContainerBasket
{
    padding: 0px 0px 0px 10px;
    width: 192px;
    height: 89px;
    vertical-align: middle;
    background-color: #FFFFFF;
}
#BasketImg
{
    border: none;
}
BasketImgLink:hover, .BasketImgLink:active, .BasketImgLink:link, .BasketImgLink:visited
{
    text-decoration: none;
    border: none;
}
.BasketTextLink:link, .BasketTextLink:active, .BasketTextLink:visited
{
    text-decoration: none;
}
.BasketTextLink:hover
{
    text-decoration: underline;
    color: #b7b7b7;
}
.BasketCards
{
    margin-top: 5px;
}
#BasketText
{
    font-family: Arial, helvetica;
    color: #bbb9b9;
    font-size: 13px;
}
#BasketQuantity
{
    font-family: Arial, helvetica;
    color: #fea32c;
    font-size: 13px;
}
.ContainerMenu
{
    background-color: #FFFFFF;
    padding: 10px 0px 0px 10px;
}
.MenuTop
{
    width: 188px;
    background-image: url(  'infotop.png' );
    height: 10px;
}
.MenuContent
{
    width: 186px;
    border: solid 1px #b7b7b7;
    border-top: none;
    border-bottom: none;
    font-family: Arial, helvetica;
    background-image: url(  'infobackground.png' );
    height: 283px;
    vertical-align: top;
    text-align: left;
    background-color: #c5c5c5;
    background-repeat: repeat-x;
}
.MenuBottom
{
    width: 188px;
    height: 10px;
    background-image: url(  'infobottom.png' );
}
.InfoImg
{
    vertical-align: middle;
    margin: 10px 0px 10px 10px;
}
.InfoText
{
    vertical-align: middle;
    font-family: Arial, helvetica;
    font-size: 16px;
    color: #fea32c;
    text-transform: uppercase;
}
.InfoSearch
{
    padding: 10px 0px 0px 40px;
    color: #777777;
    font-size: 15px;
}
.SearchTextCell
{
    color: #777777;
    font-size: 14px;
    vertical-align: bottom;
}
.SearchButtonCell
{
    padding-top: 10px;
    padding-left: 3px;
}
.SearchFieldCell
{
    vertical-align: top;
}
.ProductsBottom
{
    width: 188px;
    float: right;
    height: 56px;
    background-image: url(  'productsbottom.png' );
}
.FrontpageContainer
{
    height: 719px;
    background-image: url(  'frontpagebackground.png' );
    width: 718px;
    border-left: solid 1px #bbbbbb;
    border-right: solid 1px #bbbbbb;
    background-repeat: repeat-x;
    background-position: left top;
    background-color: #d8d8d8;
    padding: 0px 12px 0px 12px;
    vertical-align: top;
}
.MainRight
{
    background-position: right top;
    background-repeat: repeat-y;
    width: 23px;
    background-image: url(  'containerright.png' );
}
.FrontpageProducts
{
    width: 100%;
    height: 120px;
    border: 1px solid #bbbbbb;
    background-color: #f4f4f4;
    font-size: 12px;
    color: #888888;
    padding: 8px;
}
.ProductNameFrontpage a, .ProductNameFrontpage a:link, .ProductNameFrontpage a:active, .ProductNameFrontpage a:visited
{
    color: #494949;
    font-weight: bold;
    text-decoration: none;
}
.ProductNameFrontpage
{
    vertical-align: top;
    height: 18px;
}
.ProductNameFrontpage a:hover
{
    color: #494949;
    font-weight: bold;
    text-decoration: underline;
}
.ProductPriceFrontpage
{
    color: #d40a00;
    font-weight: bold;
    text-align: right;
    vertical-align: top;
    height: 18px;
}

.ProductImgFrontpage
{
    width: 108px;
    padding-right: 8px;
    height: 104px;
}
.ProductDescriptionFrontpage a:link, .ProductDescriptionFrontpage a:active, .ProductDescriptionFrontpage a:visited, .ProductDescriptionFrontpage a:hover
{
    text-decoration: none;
    color: #f69522;
}
.ProductDescriptionFrontpage a:hover
{
    text-decoration: underline;
}
.ProductDescriptionFrontpage
{
    vertical-align: top;
}
.ProductToBasketFrontpage
{
    vertical-align: bottom;
    height: 33px;
}
.ProductName
{
    font-weight: bold;
    font-size: 14px;
    color: #494949;
    font-family: Arial, Helvetica, sans-serif;
}
.ProductNumber{ font-size: 10px;
    font-style: italic;
    font-weight: normal;
}
.Description_Productinfo
{
    font-weight: bold;
    font-size: 14px;
    color: #494949;
    font-family: Arial, Helvetica, sans-serif;
}
.ProductNumber .Description_Productinfo, .ProductStock .Description_Productinfo, .ProductCatNum .Description_Productinfo, #BUYSECTION, .ProductDescription .Description_ProductInfo
{
    font-weight: normal;
    font-size: 10px;
}
.ProductDescription .Description_ProductInfo
{
    font-size: 12px;
}
.ProductDescription .Desciption_ProductInfo
{
    vertical-align: top;
}
.ProductDescription img
{
    float: right;
}
#BUYSECTION
{
    float: left;
    display: inline;
}
.BuyButton_ProductInfo
{
    vertical-align: top;
}
.ProductStock .Description_Productinfo, .ProductStock
{
    vertical-align: top;
    font-size: 12px;
    width: 138px;
}
.ProductCatNum
{
    text-align: right;
    vertical-align: top;
    font-weight: normal;
    font-size: 12px;
    color: #494949;
    font-family: Arial, Helvetica, sans-serif;
}
.ProductToBasket
{
    vertical-align: middle;
    height: 37px;
}
.TextInputField_ProductInfo
{
    height: 18px;
    font-size: 10px;
    width: 26px;
    padding: 1px 1px 1px 1px;
}
.FavAddButton_ProductInfo
{
    vertical-align: middle;
    position: relative;
    top: 3px;
}
.Prices_Custom_TBL
{
    font-size: 12px;
    text-align: left;
}
.BasketRemove, .BasketDelete
{
    width: 35px;
    vertical-align: middle;
    font-size: 12px;
}
.BasketProduct, .BasketDescription
{
    width: 465px;
    vertical-align: middle;
    font-size: 12px;
}
.BasketAmount
{
    width: 100px;
    vertical-align: middle;
    font-size: 12px;
}
.BasketPrice, .BasketTotalPrice
{
    width: 100px;
    vertical-align: middle;
    text-align: right;
    font-size: 12px;
}
.BasketFeeText, .BasketTotalText
{
    width: 600px;
    font-size: 12px;
}
.BasketTotal, .BasketFee
{
    width: 100px;
    text-align: right;
    font-size: 12px;
}
.BasketTotal, .BasketTotalText
{
    font-weight: bold;
    text-align: right;
}
.BasketLines
{
    margin-top: 2px;
    margin-bottom: 2px;
}
.ShowBasket_TD
{
    font-size: 10px;
}
.Amount
{
    position: relative;
    top: -10px;
}
.BasketProduct a:link, .BasketProduct a:active, .BasketProduct a:hover, .BasketProduct a:visited
{
    font-size: 12px;
    color: #363636;
    text-decoration: none;
}
.Heading_Orderstep1, .Heading_Orderstep2, .Heading_OrderStep3, .Heading_Order4, .Heading_Customer, .Heading_Terms, .Heading_Profile, .Favorites_TD span span
{
    color: #f69522;
    font-weight: bold;
    font-size: 14px !important;
}
center
{
    text-align: left;
}
.LoadProfile_Orderstep1_TBL, .LoadProfile_Orderstep1_TBL table, .CustomerData_Orderstep1_TBL, .CustomerData_Orderstep1_TBL table, .BackgroundColor1_Orderstep2, .BackgroundColor1_Orderstep2 table, .BackGroundColor1_OrderStep3, .BackGroundColor1_OrderStep3 table, .OrderStep4_TD, .TableLines_OrderStep4, .TableLines_OrderStep4 table, .Customer_TD, .Customer_TD table, .Text1_Terms, .Text1_Profile, .FavTB_ProdNameTD
{
    font-size: 12px;
}
.BackGroundColor1_OrderStep3 table a:link, .BackGroundColor1_OrderStep3 table a:active, .BackGroundColor1_OrderStep3 table a:visited, .BackGroundColor1_OrderStep3 table a:hover, .BackGroundColor1_OrderStep3 a:link, .BackGroundColor1_OrderStep3 a:active, .BackGroundColor1_OrderStep3 a:visited, .BackGroundColor1_OrderStep3 a:hover
{
    color: #f69522;
    text-decoration: none;
}
.BackGroundColor1_OrderStep4 table a:link, .BackGroundColor1_OrderStep4 table a:active, .BackGroundColor1_OrderStep4 table a:visited, .BackGroundColor1_OrderStep4 table a:hover, .BackGroundColor1_OrderStep4 a:link, .BackGroundColor1_OrderStep4 a:active, .BackGroundColor1_OrderStep4 a:visited, .BackGroundColor1_OrderStep4 a:hover, .OrderStep4_TD a:link, .OrderStep4_TD a:active, .OrderStep4_TD a:visited, .OrderStep4_TD a:hover, .LoadProfile_Orderstep1_TBL a:hover, .LoadProfile_Orderstep1_TBL a:link, .LoadProfile_Orderstep1_TBL a:active, .LoadProfile_Orderstep1_TBL a:visited, a:link, a:active, a:visited, a:hover
{
    color: #f69522;
    text-decoration: none;
}
.BackGroundColor1_OrderStep3 table a:hover, .BackGroundColor1_OrderStep3 a:hover, .OrderStep4_TD a:hover, .BackGroundColor1_OrderStep4 table a:hover, .BackGroundColor1_OrderStep4 a:hover, .LoadProfile_Orderstep1_TBL a:hover, a:hover
{
    color: #f69522;
    text-decoration: underline;
}
a.ActivePageNumber_ProductList:link, a.ActivePageNumber_ProductList:active, a.ActivePageNumber_ProductList:hover, a.ActivePageNumber_ProductList:visited, a.InactivePageNumber_ProductList:link, a.InactivePageNumber_ProductList:active, a.InactivePageNumber_ProductList:visited, a.InactivePageNumber_ProductList:hover
{
    color: #939393;
    font-size: 12px;
}
.ProductPaging a img
{
    border: none 0px #FFFFFF;
}
.ProductPaging
{
    float: right;
}
/* Editing DD styles */
.BuyButton_ProductList
{
    position: relative;
    left: -4px;
}
.TopMenu_TR
{
    position: relative;
}
.TopMenu_TD
{
    top: -200px;
    position: relative;
}
.TopMenu_TD a, .MenuLinks a
{
    display: block;
    width: 126px;
    padding: 3px 10px 3px 40px;
    font-family: Arial, helvetica;
    font-size: 12px;
    background-image: url( 'menuarrow.png' );
    background-repeat: no-repeat;
    background-position: 20px center;
    text-transform: uppercase;
    font-variant: normal;
    font-weight: lighter;
    color: #aba9a9;
    text-align: left;
}
.TopMenu_TD a:link, .TopMenu_TD a:active, .TopMenu_TD a:visited, .MenuLinks a:link, .MenuLinks a:active, .MenuLinks a:visited
{
    color: #aba9a9;
    text-decoration: none;
}
.TopMenu_TD a:hover, .MenuLinks a:hover
{
    color: #aba9a9;
    text-decoration: underline;
}
#Search_Form
{
    display: none;
}
.SearchField_SearchPage
{
    height: 18px;
    width: 95px;
    border: solid 1px #494949;
    margin-top: 3px;
    padding: 1px 1px 1px 1px;
    background-color: Transparent;
    font-family: Arial, helvetica;
    font-size: 12px;
    vertical-align: middle;
    color: #494949;
}
.SubmitButton_SearchPage
{
    background-image: url(  'search.png' );
    background-color: transparent;
    border: 0 none #FFFFFF;
    cursor: pointer;
    height: 30px;
    text-indent: -9999px;
    width: 31px;
}
.ProductMenu_TD
{
    background-image: url(  'containerleft.png' );
    background-repeat: repeat-y;
    background-position: left top;
}
.ProductmenuContainer_DIV
{
    float: right;
    padding: 0px 10px 0px 0px;
    width: 192px;
    background-color: #FFFFFF;
    height: 100%;
}
.Heading_Productmenu
{
    display: block;
    width: 131px;
    float: right;
    background-image: url(  'productstop.png' );
    height: 28px;
    padding: 28px 0px 0px 57px;
    color: #FEA32C;
    font-family: Arial,helvetica;
    font-size: 16px;
    text-transform: uppercase;
}
#ProductMenu_Table
{
    width: 188px;
    float: right;
    height: 326px;
    background-image: url(  'productsbackground.png' );
    background-color: #ececec;
    background-repeat: repeat-x;
    background-position: left center;
    vertical-align: top;
    border: solid 1px #bbbbbb;
    border-top: none;
    border-bottom: none;
    text-decoration: none;
    font-variant: normal;
    font-weight: lighter;
    color: #aba9a9;
    text-align: left;
}
.Deactiv_Productmenu:link, .Deactiv_Productmenu:active, .Deactiv_Productmenu:visited
{
    text-decoration: none;
    font-variant: normal;
    font-weight: lighter;
    color: #777777;
    text-align: left;
    font-size: 12px;
}
.Deactiv_Productmenu:hover, .Activ_Productmenu:link, .Activ_Productmenu:visited, .Activ_Productmenu:active, .Activ_Productmenu:hover
{
    text-decoration: underline;
    font-variant: normal;
    font-weight: lighter;
    color: #777777;
    text-align: left;
    font-size: 12px;
}
.Deactiv_Productmenu img, .Activ_Productmenu img
{
    margin-right: 5px;
    border: none;
    text-decoration: none;
    vertical-align: middle;
    position: relative;
    top: -1px;
}
.Deactiv_Productmenu b, .Activ_Productmenu b
{
    font-weight: normal;
}
.RootCategory_Productmenu
{
    width: 162px;
    padding: 2px 0px 2px 24px;
    vertical-align: top;
}
#ProductMenu_Table tr
{
    height: 20px;
}
#Table75
{
    background-color: #FFFFFF;
}
.SpaceBottom_TD
{
    background-image: url(  'containerbottom.png' );
    background-repeat: no-repeat;
}
.Topmenu_TR
{
    display: none;
}
.ContainerAd
{
    background-color: #FFFFFF;
}
.ContainerAd img
{
    border: none 0px #FFFFFF;
}
#banner
{
    list-style-type: none;
}
#banner li, #banner, .ContainerAd div
{
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    float: right;
}
#FormSearch
{
    margin: 0px 0px 0px 0px;
}
Avatar billede olebole Juniormester
18. august 2009 - 23:15 #1
<ole>

Du bør først rette alle fejlene:
    http://validator.w3.org/check?uri=http%3A%2F%2Fwww.netcentret.dk%2Fshop%2Fatv-110cc-model-1427p.html&charset=(detect+automatically)&doctype=Inline&group=0&ss=1&verbose=1

- og derefter ville jeg nok vælge et væsentligt mere moderne script. Det, du bruger, er fra engang i 90'erne  ;o)

/mvh
</bole>
Avatar billede zips Juniormester
18. august 2009 - 23:24 #2
Jeg har ikke testet dette, men prøv at indsætte width:100% som her under.
.ProductInfo_TD td{ width:100%;}
Avatar billede olebole Juniormester
18. august 2009 - 23:27 #3
Med kode som denne, kan alle rettelser være ligemeget:

<table class="Prices_Custom_TBL" cellpadding="0" cellspacing="0" width="100%" border="0"><td align="center" valign="top" width="100%">Pris: DKK 3.799,00 </td></TR></table>
Avatar billede olebole Juniormester
18. august 2009 - 23:31 #4
- og et table element i et inline element er en absolut no-go:
    <SPAN class="BuyButton_ProductInfo"><TABLE ID="BUYSECTION">
Avatar billede zips Juniormester
19. august 2009 - 00:58 #5
Den <td> som indeholder de billeder har en brede på 200px men det store billede er 250px, ret bredden på din <td> til 250px

Det med width:100% virkede kun i ie6, så glem det.

Men olebole har helt ret med din kode, det er et held at siden ser ud som den gør :-)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester