This is a migrated thread and some comments may be shown as answers.

RadWindows display problem.

2 Answers 122 Views
Window
This is a migrated thread and some comments may be shown as answers.
Vunvulea
Top achievements
Rank 1
Vunvulea asked on 19 Jun 2009, 01:32 PM
I have a CSS style that had come from a web design company that use UL and Li for "tables".
The problem is that the Rad Windows show incorrect.

Printscreen:  http://g.imagehost.org/view/0937/telerik

Here is the CSS style:
/*
 * Reset
 */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin: 0; padding: 0; }
fieldset, img { border: none; vertical-align: middle; }

/*
 * Margins
 */
p, ul, ol, dl, table, address { margin: 0 0 10px 0; }

/*
 * Hyperlinks
 */
a { color: #C42C25; overflow: hidden; }
a:hover, a:focus { text-decoration: none; }
.content strong { color: #7da2c4; font-size: 16px; font-weight: normal; margin-right: 5px; }
.content span { margin-right: 10px; }

/*
 * General Document Settings
 */
body { font: .75em/1.83em Calibri, Helvetica, Arial, sans-serif; color: #423d3b;  }
#wrap { width: 969px; margin: 0 auto; position: relative; border: 1px solid #d0cfcf; border-top: 2px solid #fff; background: url(images/background.jpg) no-repeat 50% 0; }
hr { background: none; border: solid #e6e6e6; border-width: 1px 0 0 0; margin-bottom: 0px; }

/*
 * Headings
 */
h1, h2, h3, h4, h5, h6 { font-size: 1em; margin: 0; color: #4c493f; }
#content h1 { width: 248px; height: 33px; line-height: 33px; padding-left: 8px; background: url(images/title.png) no-repeat 0 0; color: #fff; font-size: 1.75em; font-weight: normal; }
h2 { color: #da251d; font-size: 1.5em; font-weight: normal; margin: 10px 0 15px 0; }

/*
 * Lists
 */
ul { line-height: 1.5em; margin-left: 2.2em; }
ul li { margin: .5em 0; }
li ul, li ol { margin-top: 0; margin-bottom: 0; }
li { margin: .3em 0; }
ol { margin-left: 2.2em; }
ol ul li { list-style: disc !important; }
ol li { list-style-type: decimal; }

dl { line-height: 1.4em; }
dt { font-weight: bold; }
dd { margin: .5em 0 .5em 10px; }

/*
 * Table
 */
table { border-collapse: separate; border-spacing: 2px; width: 100%; }
caption, th, td { text-align: left; font-weight: normal; }
th, td { padding: 4px 4px; border: 1px solid #e5e5e4; background: #fff; }
thead th, thead td { background: #dededd; color: #1f1a17; text-align: center; height: 45px; font-size: 18px; }

/*
 * Table List
 */
.thead-societate { width: 150px; }
.thead-1, .thead-6, .thead-12 { width: 110px; }
.thead-6 { background: #aaa9a9; color: #fff; }
.thead-12 { background: #72706f; color: #fff; }
.thead-promo { background: #c95348; color: #fff; }

#table-list td { text-align: center; }
#table-list .price { width: 66px; height: 95px; margin: 0 auto; background: url(images/table-list-price.png) no-repeat 50% 0; position: relative; color: #1f1a17; font-size: 14px; line-height: 12px; }
#table-list .price strong { display: block; font-size: 16px; line-height: 44px; font-weight: normal;  }
#table-list .price a { display: block; height: 20px; line-height: 20px; width: 66px; position: absolute; bottom: 0; left: 0; background: url(images/buton-comanda.png) no-repeat 0 0; color: #fff; text-decoration: none; text-transform: uppercase; font-size: 12px; }
#table-list .price a:hover, #table-list .price a:focus { background-position: 0 -20px; }

/*
 * Quotes
 */
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }

/*
 * Forms
 */
input[type=text], input[type=password], select, textarea { font-size: 1em; font-family: Calibri, Helvetica, Arial, sans-serif; color: #332e2c; border: 1px solid #bcbbbb; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 3px; background: #fff url(images/round.svg); behavior :url(javascript/border-radius.htc); }
input, select, textarea { vertical-align: middle; }
.checkbox { width: auto !important; }

form { border: 1px solid #e8e8e7; padding: 0 3px; *padding: 3px; background: #fff; }
form ol { margin: 0; }
form ol li { list-style: none; margin: 0 0 5px 0; display: inline; position: relative; }

fieldset { border: 1px solid #e7e7e6; background: #f5f5f5 url(images/fieldset.png) repeat-x 0 0; position: relative; padding: 30px 20px 10px 20px; *padding-top: 20px; margin: 3px 0; display: inline-block; }
fieldset { display: block; }
fieldset legend { width: 0; border-top: 1px solid #e7e7e6; }
fieldset legend span { position: absolute; top: 5px; left: 20px; display: block; width: 300px; color: red; }

/* Firefox */
@-moz-document url-prefix() {
    fieldset legend span { top: -25px; left: 0; }
}

.submit { display: inline-block; overflow: hidden; }
.submit { display: block; }
.submit .inapoi, .submit .inainte { height: 29px; line-height: 29px; width: 102px !important; padding-left: 30px; padding-bottom: 5px; text-align: left; background: url(images/buton-inapoi.png) no-repeat 0 0; border: 0; color: #fff; font-size: 15px; vertical-align: top; float: left; }
.submit .inainte { background-image: url(images/buton-inainte.png); float: right; }

/*
 * Standard Form
 * [label     ][input]
 * [label     ][select]
 * etc
 * should have the "form" class on the <form> (or other parent)
 */
.form ol li { display: inline-block; clear: both; }
.form ol li { display: block; }
.form ol li:after { content: '.'; display: block; clear: both; height: 0; visibility: hidden; }
.form label { float: left; width: 100px; line-height: 1.1em; padding-top: .5em; }
.form input, .form textarea { width: 220px; }
.form select { width: 228px !important; }
.form .inline { display: inline; float: left; clear: none; }
.form .inline label { float: none; }
.form .inline select { width: auto !important; margin: 0 0 7px 18px; }

li.submit { display: block; clear: both; margin: 0; padding-top: 5px; text-align: right; line-height: 1.2em; font-size: .9166em; }
li.submit input { cursor: pointer; }
li.submit p { text-align: left; }

.form .red { border: 1px solid #e35a79; }
.form .yellow { border: 1px solid #f8d142; }
.form .green { border: 1px solid #a4d15f; }

/*
 * Compara si alege Form
 */
#tip-client { width: 150px; margin-right: 35px; }
#sex { margin-right: 47px; width: 95px !important; }
#varsta { width: 70px !important; }
.statut { display: inline-block; overflow: hidden; margin: 0; padding-top: 10px; }
.statut { display: block; }
.statut span { float: left; width: 25%; *width: 24%; padding-top: 5px; }
.statut span.disabilitate { *width: 26%; }
.statut span.copil { text-align: right; *width: 26%; }

#tip-autovehicul { width: 470px; margin-bottom: 15px; }
#capacitate { width: 115px; margin-right: 10px; }
#marca { width: 130px; margin-right: 15px; }
.mediu { float: left; display: inline; margin-right: 10px; }
.data-intrare { display: block; clear: both; }
.data-intrare label { margin-left: 2px; }
.data-intrare br { display: none; }
.judet { float: left; margin-right: 12px; padding-right: 20px; }
#judet { width: 130px; }
#localitate { width: 140px; }

#submitcauta { width: 101px; height: 27px; padding-left: 20px; color: #fff; text-transform: uppercase; background: url(images/submit-search.png) no-repeat 0 0; border: 0; }


/*
 * Date Asigurat Form
 */
#date-asigurat .tip-client legend span,
#date-asigurat-detaliu .tip-client legend span { top: 19px; }
@-moz-document url-prefix() {
    #date-asigurat .tip-client legend span,
    #date-asigurat-detaliu .tip-client legend span { top: -9px; }
}
#date-asigurat #tip-client,
#date-asigurat-detaliu #tip-client { margin: -20px 0 0 75px; width: 205px; position: relative; }
#date-asigurat .block { display: block; }
#date-asigurat #sex { _margin-right: 45px; }
#date-asigurat .statut span { width: 118px; text-align: right; }
#date-asigurat .statut .veteran,
#date-asigurat .statut .copil { float: right; }

#date-asigurat .tip-autovehicul li,
#date-asigurat .tip-mediu li { display: block; margin: 0 0 10px 0; float: none; }
#date-asigurat .tip-autovehicul label { float: left; width: 70px; _width: 67px; }
#date-asigurat .tip-autovehicul select { width: 210px; margin: 0 !important; }
#date-asigurat #tip-autovehicul { width: 280px; margin-bottom: 0; }

#date-asigurat .mediu br { display: none; }
#date-asigurat .mediu label { margin-right: 20px; }
#date-asigurat .judet { position: relative; display: inline-block; padding: 0; }
#date-asigurat .judet { display: block; }
#date-asigurat .judet label,
#date-asigurat .localitate label { float: left; width: 70px; _width: 67px; }
#date-asigurat .judet select,
#date-asigurat .localitate select { width: 210px; }
#date-asigurat .info { right: -18px; }
#date-asigurat li.data-intrare { margin: 0; line-height: 30px; }
#date-asigurat .data-intrare br { display: block; }
#date-asigurat .submit { padding-top: 10px; }

/*
 * Date asigurat Detaliu
 */
#date-asigurat-detaliu #tip-client { width: 248px; margin-left: 100px; }
#date-asigurat-detaliu .statut { padding: 0; margin: -5px 0 5px 0; }
#date-asigurat-detaliu .statut span { width: 33%; padding: 0; }
#date-asigurat-detaliu .statut label { float: none; }
#date-asigurat-detaliu .statut input { width: auto; }
#date-asigurat-detaliu #sex { margin-right: 30px; }
#date-asigurat-detaliu .statut .veteran { text-align: right; width: 95px; }

/*
 * Date auto
 */
#date-auto label { width: 125px; }
#date-auto input, #date-auto textarea { width: 195px; }
#date-auto select { width: auto !important; }
#date-auto .short label { width: 70px; }
#date-auto .short select { width: 155px !important; }
#date-auto .size-1 { width: 110px; }
#date-auto .size-2 { width: 140px; }

/*
 * Tooltip
 */
.info { position: absolute; top: 50%; right: 0; display: block; width: 16px; height: 15px; padding: 0; margin: -7px 0 0 0; background: url(images/info.png) no-repeat 0 0; }
#tooltip { position: absolute; z-index: 3000; border: 1px solid #111; color: #7DA2C4; font-size: 12px; font-weight: normal; width: 200px; background-color: #1F1A17; padding: 5px; }
#tooltip h3 { color: #fff; font-size: 14px; font-weight: normal; line-height: 1.2em; }

/*
 * Logo
 */
#logo { position: absolute; top: 20px; left: 35px; }
#logo a { display: block; width: 158px; height: 72px; background: url(images/logo.png); text-indent: -9999px; _background: none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/logo.png', sizingMethod='crop'); }

/*
 * Banner
 */
#banner { position: absolute; top: 16px; right: 16px; width: 600px; height: 100px; padding: 5px; }
#banner .banner-border { position: absolute; top: 0; left: 0; border: 1px solid #19223c; width: 100%; height: 100%; opacity: .5; filter:Alpha(opacity=50); }

/*
 * Meta Navigation
 */
#meta-nav { position: absolute; top: 37px; left: -33px; width: 30px; margin: 0; }
#meta-nav li { list-style: none; margin: 0; display: inline-block; }
#meta-nav li { display: block; }
#meta-nav a { display: block; height: 30px; background: url(images/meta-nav.png) no-repeat 0 0; text-indent: -9999px; margin-bottom: 2px; }
#meta-nav a:hover, #meta-nav a:focus, #meta-nav #active a { background-position: -30px 0; }

#meta-nav .meta-2 a { background-position: 0 -30px; }
#meta-nav .meta-3 a { background-position: 0 -60px; }
#meta-nav .meta-4 a { background-position: 0 -90px; }
#meta-nav .meta-2 a:hover, #meta-nav .meta-2 a:focus, #meta-nav #active.meta-2 a { background-position: -30px -30px; }
#meta-nav .meta-3 a:hover, #meta-nav .meta-3 a:focus, #meta-nav #active.meta-3 a { background-position: -30px -60px; }
#meta-nav .meta-4 a:hover, #meta-nav .meta-4 a:focus, #meta-nav #active.meta-4 a { background-position: -30px -90px; }

/*
 * Nav
 */
#nav { padding: 158px 0 20px 15px; margin: 0; display: inline-block; overflow: hidden; text-transform: uppercase; font-size: 1.25em; }
#nav { display: block; }
#nav li { float: left; margin: 0; list-style: none; }
#nav a { float: left; width: 112px; padding: 0 10px; height: 34px; line-height: 34px; color: #1f1a17; text-decoration: none; background: url(images/nav.png) no-repeat 0 0; _background: none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/nav.png', sizingMethod='crop'); cursor: pointer; }
#nav a:hover, #nav a:focus, #nav .active a { color: #C42C25; }

/*
 * Steps
 */
#steps { width: 945px; margin: 0 auto 25px auto; position: relative; background: url(images/steps.png) repeat-x 0 35px; display: inline-block; overflow: hidden; text-transform: uppercase; color: #838281; }
#steps { display: block; }
#steps li { list-style: none; margin: 0; padding-top: 60px; line-height: 20px; float: left; width: 189px; text-align: center; cursor: default; }
#steps li i { position: absolute; left: 0; top: 40px; height: 8px; width: 189px; }
#steps .step-2 i { width: 378px; }
#steps .step-3 i { width: 567px; }
#steps .step-4 i { width: 756px; }
#steps .step-5 i { width: 945px; }

#steps .active { color: #4f4a5d; background: url(images/steps-car.png) no-repeat 0 0; _background: none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/steps-car.png', sizingMethod='crop'); }
#steps .active i { background: url(images/steps-active.gif) repeat-x 0 0; }

/*
 * Content
 */
#content { margin: 0 10px; padding-bottom: 20px; display: inline-block; overflow: hidden; }
#content { display: block; }
.col { float: left; width: 520px; }
.medium { width: 400px; }
.small { width: 330px; }
.last { float: right; }

/*
 * Tabs
 */
#tabs { float: right; width: 410px; border: 1px solid #e7e7e6; background: #fff; position: relative; padding-bottom: 78px; }
#tabs ol, #tabs ul { margin: 0; }
#tabs ol ul { margin: 3px 0 0 1.5em; }

.tab { width: 405px; height: 302px; margin: 2px auto; list-style: none; background: url(images/tabs.jpg) no-repeat 0 0; position: relative; }
.tab h2 { font-size: 2em; padding: 15px 0 0 45px; font-weight: normal; color: #383431; text-transform: uppercase; margin: 0; }
.tab .tab-content { position: absolute; left: 15px; top: 242px; width: 380px; color: #fff; line-height: 14px; }
.tab .tab-content li { margin: 0; line-height: 14px; }

#tab-1 h2 { color: #fff; }
#tab-2 { background-position: 0 -302px; }
#tab-2 .tab-content { top: 203px; }
#tab-3 { background-position: 0 -604px; }
#tab-4 { background-position: 0 -906px; }

.ui-tabs .ui-tabs-hide { display: none; }

/* Thumbs */
#tab-thumbs { position: absolute; left: 2px; bottom: 2px; width: 405px; height: 76px; background: url(images/tab-thumbs.jpg) no-repeat 0 -76px; }
#tab-thumbs li { float: left; margin: 0; list-style: none; }
#tab-thumbs a { float: left; width: 101px; height: 76px; text-indent: -9999px; background: url(images/tab-thumbs.jpg) no-repeat -9999px -99999px; }
#tab-thumbs a:hover, #tab-thumbs a:focus, #tab-thumbs .ui-tabs-selected a { background-position: 0 0;  }

#tab-thumbs #tab-2-thumb { margin-right: 1px; }
#tab-thumbs #tab-2-thumb a:hover, #tab-thumbs #tab-2-thumb a:focus, #tab-thumbs #tab-2-thumb.ui-tabs-selected a { background-position: -101px 0; }
#tab-thumbs #tab-3-thumb a:hover, #tab-thumbs #tab-3-thumb a:focus, #tab-thumbs #tab-3-thumb.ui-tabs-selected a { background-position: -203px 0; }
#tab-thumbs #tab-4-thumb a:hover, #tab-thumbs #tab-4-thumb a:focus, #tab-thumbs #tab-4-thumb.ui-tabs-selected a { background-position: -304px 0; }

/*
 * Companie
 */
#companie { padding-top: 15px; }
#companie h3 { width: 310px; height: 51px; line-height: 51px; padding-left: 21px; background: url(images/companie.png) no-repeat 0 0; font-size: 1.75em; font-weight: normal; margin-bottom: 5px; }
#companie p { margin-left: 21px; }

/*
 * Footer
 */
#footer { width: 954px; margin: 0 auto; padding: 20px 15px 20px 0; color: #4f4b4a; display: inline-block; overflow: hidden; text-align: right; }
#footer { display: block; }
#footer a { color: #4f4b4a; text-decoration: none; }
#footer a:hover, #footer a:focus { text-decoration: underline; }
#footer ul { float: left; margin: 0 0 0 -1px; display: inline-block; }
#footer ul { display: block; }
#footer li { display: inline; margin: 0; float: left; list-style: none; }
#footer li a { border-left: 1px solid #c4c3c3; float: left; padding: 0 15px; line-height: 12px; }

#footer #made, #footer #made a { color: #9e9d9c; }

/*
 * Table List
 */
#table-list { float: right; width: 600px; }

/*
 * Contents
 */
.content { background: #fff; border: 1px solid #e4e4e3; padding: 15px; display: inline-block; overflow: hidden; line-height: 1.25em; }
.content { display: block; }
.image { float: left; border: 1px solid #e5e5e4; margin: 0 20px 10px 0; }

2 Answers, 1 is accepted

Sort by
0
Accepted
Georgi Tunev
Telerik team
answered on 19 Jun 2009, 02:39 PM
Hi Vunvulea,

The problem comes from the global styles that you are using. Note that CSS issues that have arisen after the inheritance of global styles are not bugs with our products, but a logical consequence of CSS inheritance - our elements cascadingly inherit properties (that are not explicitly set) coming from global style.

When working with 3rd party controls, instead of global styles (no matter how basic they are) it is recommended to use classes, otherwise such problems will keep coming.

Kind regards,
Georgi Tunev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Vunvulea
Top achievements
Rank 1
answered on 22 Jun 2009, 05:36 AM
I know that this is not a bug. I just tried to find a solution without changing the CSS that came from the design team. Thanks very much for reply.
Tags
Window
Asked by
Vunvulea
Top achievements
Rank 1
Answers by
Georgi Tunev
Telerik team
Vunvulea
Top achievements
Rank 1
Share this question
or