PDA

View Full Version : Resolved Improve visibilty of form box.



effpeetee
Aug 10th, 2009, 04:54 PM
At the top left of my Sources program (http://www.exitfegs.co.uk/Sources.html), there is a small box Search Page, I would like to improve the look of that box and its' visibilty. I am not au fait with forms, so I would appreciate some assistance.:D

Frank

abduraooft
Aug 10th, 2009, 05:05 PM
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
I'd recommend to remove the highlighted property. And you may add
input{padding:2px; } to make it more visible.

After that, you may add specific rules to remove borders from elements like <fieldset>, if required, like

fieldset{
border:none;
}

PS: Adding outline: 0; is not a good practice, as it causes some accessibility issues when we click on the links (it's hard to remember the last clicked link). Also I'd recommend to remove
:focus {
outline: 0;
} too.

effpeetee
Aug 10th, 2009, 05:34 PM
I'd recommend to remove the highlighted property.

Thanks, abduraooft, but what is the highlighted property. I coulldn't see one. I'll geton with implimenting the rest.

Frank

Apostropartheid
Aug 10th, 2009, 05:36 PM
The property he highlighted with the [icode] tag. I got confused too.

abduraooft
Aug 10th, 2009, 05:37 PM
Thanks, abduraooft, but what is the highlighted property. I coulldn't see one. Remove the border : 0 from the * selector, as it's hard to revert the default border styles for elements like <input>, in some browser (especially IE)

effpeetee
Aug 10th, 2009, 06:47 PM
Thanks.
I have done all that and moved all the css to the style sheet. Both items validate with W3.
It it now on site but it does not look significently different at the box although I have obviously done something to stop the equal columns jscript from doing its' job.

Probably due to my poor eyesight.

Any further thoughts?

Combined version here (http://www.exitfegs.co.uk/ASources.html). (includes CSS,

Frank.

effpeetee
Aug 11th, 2009, 08:55 AM
Any other ideas?
Frank

abduraooft
Aug 11th, 2009, 09:01 AM
Any further thoughts?

Combined version here. (includes CSS,


......
.
.
.
<!--[if IE]>

li.nobullet, * html .clearfix {
height: 1%;
}

* html #body {
height: 100%;
width: 100%;
}
<![endif]-->

</style>
Adding the conditional comment inside the style tag is invalid. You need to add an extra style tag and enclose it inside your conditional comments, like

<!--[if IE]>
<style type="text/css">
li.nobullet, * html .clearfix {
height: 1%;
}

* html #body {
height: 100%;
width: 100%;
}
</style>
<![endif]-->

effpeetee
Aug 11th, 2009, 10:46 AM
I have put that right but the equal columns has gone completely bonkers.
To add to my problems, my back up on my memory stick, bitlocker protected, is not accessible. To add to my troubles, it is not able to be formatted for future use.

I am beginning to regret my original aim of improving the look of the program. I've made a complete mess of it. Salvation is called for, innit?

In case you want to see. It is here. (http://exitfegs.co.uk/ASources.html)
Forlornly,

Frank

Things are more like they are now than they ever were before. - Dwight D. Eisenhower.

AMEN.

abduraooft
Aug 11th, 2009, 11:00 AM
You forgot to take that comment from your old style tag
(Line 55 of your ASources.html)



.........
.clearfix {display: inline-block;} /* for IE/Mac */


<!--[if IE]>
<style type="text/css">
li.nobullet, * html .clearfix {
height: 1%;
}

* html #body {
height: 100%;
width: 100%;
}
</style>
<![endif]>

body {
line-height: 1;

effpeetee
Aug 11th, 2009, 11:22 AM
The part was commented out because it totally ruined the program. All the program code came up on screen when enabled. I have removed the section altogether. It's still wacky.

I cannot understand it. I have done nothing to the javascript 'equalcolumns' script.

I have posted the fresh page over (http://exitfegs.co.uk/ASources.html).


Frank