Поле ошибки пузыря CSS для формы

Question

Я хочу создать окно с ошибкой для формы, как показано ниже.

Я уже задал окно ввода и использую проверку jQuery для отображения ошибок. Однако я не могу получить это поле ошибки правильно. Я думаю, мне нужно будет добавить это вместе с тремя тегами, но я не знаю, какие теги использовать (проверка jQuery использует тег label для отображения ошибки). Мой текущий код ошибки:

<label for="email"> 
    <span>Email:</span> 
    <input type="text" id="email" name="email" class="error"> 
    <label for="email" class="error" style="">Az e-mail címet kötelező megadni</label> 
</label> 

Я должен сделать это IE7 совместимы.

Я сделал следующие изменения:

<div class="dataline"> 
    <div class="label">Label:</div> 
    <div class="field"><input type="text" id="name" name="name" /></div> 
    <div class="arrow"></div> 
    <label class="error">Error text</label> 
    <div class="ender"></div> 
    </div> 

Я поставил стрелку в качестве изображения для класса arrow, так что теперь он выглядит идеально. В основном я использовал 4 левых поплавковых элемента блока (метка, вход, стрелка и корпус пузыря). Теперь у меня только две проблемы: стрелка отображается даже тогда, когда нет ошибки. Как я могу скрыть его, когда label не после него? Моя другая проблема заключается в том, что контейнер div имеет ширину 800 пикселей и, если текст ошибки длинный, он переносится на следующую строку. Как я могу избежать этого?

Мой КСС:

div.dataline { 
    margin: 10px 0 0 0; 
    white-space: nowrap; 
    width: 3000px; 
    owerflow: visible; 
    height: 60px; 
} 

div.field { 
    float: left; 
} 

div.label { 
    float: left; 
    width: 120px; 
    margin: 20px 0 0 0; 
} 

div.arrow { 
    background-image: url('gfx/redarrow.png');  
    margin: 7px 0 0 10px; 
    background-repeat: no-repeat; 
    width: 20px; 
    height: 45px; 
    float: left; 
} 

div.ender { 
    background-image: url('gfx/bubbleend.png');  
    margin: 7px 0 0 0px; 
    background-repeat: no-repeat; 
    width: 3px; 
    height: 45px; 
    float: left; 
} 

label.error {  
    height: 27px; 
    background-image: url('gfx/bubblemiddle.png'); 
    float: left;  
    padding: 9px; 
    margin: 7px 0 0 0; 
} 

Answer 1

следующая скрипка является хорошим началом для реализации:

http://jsbin.com/aReQUgay/1/edit

#email.error 
{ 
    border-color: red; 
} 

#email.error + label 
{ 
    background-color: red; 
}