[Solved] Wrong width in Safari 4.0 (530.170) @ Win 7 64bit

[Jozef]

Hello,

there is a problem with rendering this control to the given width. We tested it in FF, IE, !!Chrome!!, Opera. But only Safari - also on Mac OS had this problem. Sample pictures are attached. Thank you.

Jozef

CSS: 

form > div, form fieldset > div, .form > div {
    margin-bottom: 10px;
}

form div, .form div {
    vertical-align: middle;
}

.whiteStyle label, .whiteStyle p {
    color: White;
}

form div label {
    display: block;
    float: left;
    margin-right: 10px;
    padding-top: 5px;
    text-align: right;
    vertical-align: bottom;
    width: 35%;
}

#signUpContactTypeDiv {
    border: 1px solid #AACFE4;
    border-radius: 3px 3px 3px 3px;
    width: 170px;
}

Code:

<form>

<fieldset>

<div id="signUpContactTypeContainer">

  <label for="SignUpContactType">Contact Type</label>

  <div id="signUpContactTypeDiv" class="t-widget t-dropdown t-header" tabindex="0">

    <div class="t-dropdown-wrap t-state-default">

      <span class="t-input">Resident</span>

      <span class="t-select">

        <span class="t-icon t-arrow-down">select</span>

      </span>

    </div>

    <input type="text" value="Resident" style="display:none" name="signUpContactType" id="signUpContactTypeDiv">

  </div>

</div>

</fieldset>

</form> 

[Dimo]

Hi Jozef,

According to your screenshots and my tests, the ComboBox displays with the same width in all browsers when using the provided HTML and CSS. It's the other textbox, which is not consistent. Am I missing something?

Kind regards,
Dimo
the Telerik team

[Jozef]

I'm sorry. I was not able to make light extract from our pages in a previous post. I'm attaching solution with described behaviour - FF ok, IE ok, Chrome ok vs. Safari bad, Opera bad...

Thank you,

Jozef

[Dimo]

Hi Jozef,

As I said in my previous message, there is no problem with our component in this case and it looks the same in ll browsers. You have a textbox (SignUpBusinessName) with no width style and every browser is free to render it with the browser's default textbox width. Set some width to this textbox if you want it to look consistent across browsers.

Regards,
Dimo
the Telerik team

[Jozef]

Sorry, our fault. 

Thank you,

Jozef