PDA

View Full Version : Trying to move a LightForm Error Box



myndcraft
Mar 18th, 2009, 01:45 PM
I'm trying to implement a LightForm (http://web-kreation.com/index.php/articles/lightform-free-ajaxphp-contact-form/) contact page and everything is fine for the most part. The issue though is with select form elements. The table that is made by the LightForm JS and styled by a css file overlaps the select element making it difficult or unfriendly to click and change the selection.

Demo - http://thebros.org/dev/formtest/register.php

Try entering the state/province field and leaving it without making a selection. When the error dialog comes up you can see that you are then unable to click in the upper half of the select arrows because the table is overlapping.

The only problem is I can't figure out what to change in the css to shift the table box up a few pixels to free up some more space for the form element.

Anyone have a suggestion?

abduraooft
Mar 18th, 2009, 02:01 PM
Increasing the let-margin applied to your

<div id="diverrorstateprovince" class="tipsbox"
style="visibility: visible; opacity: 1; position: absolute; top: 319px; margin-left: 320px;"><table ...

would fix it.

btw, do you know why tables for layout is stupid (http://www.hotdesign.com/seybold/)? I'd try to eliminate the table used for that error popup. Also, see how to make an accessible form layout without tables (http://www.alistapart.com/articles/prettyaccessibleforms)

myndcraft
Mar 18th, 2009, 03:00 PM
Increasing the let-margin applied to your

<div id="diverrorstateprovince" class="tipsbox"
style="visibility: visible; opacity: 1; position: absolute; top: 319px; margin-left: 320px;"><table ...

would fix it.

btw, do you know why tables for layout is stupid (http://www.hotdesign.com/seybold/)? I'd try to eliminate the table used for that error popup. Also, see how to make an accessible form layout without tables (http://www.alistapart.com/articles/prettyaccessibleforms)

Thanks for the reply adburaooft, I injected that into the code via firebug and it worked great, although I have a problem figuring out how to actually implement the code in the css file. (I am at best a css neophyte). The css that is being used for the tipsbox is as so



.tipsbox .tipsbox_top_left{
background : url('images/top_left.png') no-repeat;
_background : url('images/top_left.gif') no-repeat;
_background-position : 9px 8px;
}
.tipsbox .tipsbox_top{
background : url('images/top.png') repeat-x;
height : 17px;
_background : url('images/top.gif') repeat-x;
_background-position : 0px 8px;
}
.tipsbox .tipsbox_top_right{
background : url('images/top_right.png') no-repeat;
_background : url('images/top_right.gif') no-repeat;
_background-position : 0px 8px;
}
.tipsbox .tipsbox_left{
background : url('images/left.png') repeat-y;
width : 17px;
_background : url('images/side.gif') repeat-y;
_background-position : 9px 8px;
}
.tipsbox .tipsbox_right{
background : url('images/right.png') repeat-y;
width : 22px;
_background : url('images/side.gif') repeat-y;
_width : 9px;
}
.tipsbox .tipsbox_bottom_left{
background : url('images/bottom_left.png');
_background : url('images/bottom_left.gif') no-repeat;
_background-position : 9px 0px;
}
.tipsbox .tipsbox_mark{
background : url('images/mark.png') no-repeat;
height : 36px;
_background : url('images/mark.gif') no-repeat;
}
.tipsbox .tipsbox_bottom_right{
background : url('images/bottom_right.png');
_background : url('images/bottom_right.gif') no-repeat;
}
.tipsbox .tipsbox_inner, .tipsbox .tipsbox_inner_ie6{
background : url('images/inner.png');
}
.tipsbox .tipsbox_inner_ie6 {
padding : 4px;
}
.tipsbox .tipsbox_error {
background : url('images/error.png') no-repeat;
_background : url('images/error.gif') no-repeat;
width: 40px;
height: 40px;
margin-top: 5px;
float: left;
clear: left;
}
.tipsbox p, .tipsbox {
font-size: .9em;
font-family: tahoma, verdana, "sans-serif";
margin: 0px;
padding: 0;
border: 0;
color: #FFF;
}
.tipsbox p {
padding-left: 55px;
line-height: 15px;
}
.tipsbox p span {
font-size: 1em;
font-weight: bold;
color: red;
line-height: 35px;
}


So I'm not really sure how to manipulate that itself.

As for the links I will check them out for any future project I work on and if I have time for this one as well!

Thanks!