Jump to content

Checkbox Positioning Issue


redwall_hp
 Share

Recommended Posts

I've been working on a redesign of one of my blogs, and it's nearing completion, but I've run into a bit of an odd problem. I'm running a WordPress plugin that adds a "subscribe to comments" checkbox in the comment form, and usually it works fine. However, with the new design the checkbox appears waaay to the right of the element's label.I'm not sure what's going on, and I've spent hours hunting through my source and Googling, looking for anything that could be causing the weird issue (which occurs in Firefox, Safari, IE, etc).Maybe a pair of fresh eyes would spot the problem? You can see an example at the bottom of this page:http://www.webmaster-source.com/2008/12/02...view_theme=wsc5

Link to comment
Share on other sites

On top of the inexistent relative value for the display property,In your CSS, You have this.

#subscribe {background-color:#E7E8E8;background-repeat:no-repeat;border-color:-moz-use-text-color #CDCDCD #CDCDCD;border-style:none solid solid;border-width:0 2px 2px;height:68px;margin-left:686px;width:200px;}

the margin-left property's value of 686px is positioning the checkbox to the right.Try getting rid of that line or setting a lower value.

Link to comment
Share on other sites

Okay, I dropped the "display:relative;", not sure how it got in there to begin with... At any rate, it didn't make any difference.The code block in the "#subscribe" selector is irrelevant. It is a completely different element, at the very top of the page in the header, that holds RSS/Email subscription links for the blog's posts.

Link to comment
Share on other sites

Okay, just to be clear, I found a solution. Apparently the checkbox has an id of subscribe, which is a dupe of another element's id. So I changed the id of my other element, and the accompanying CSS, and voila, no positioning issue. I didn't know that the checkbox, which was added by one of the installed plugins in WordPress, had that id, and I hadn't accounted for it when I built the design.Darn plugins/modules with their undocumented ids. :)

Link to comment
Share on other sites

You still have a small visual problem though.The text next to your checkbox is being pushed away from it. Although I haven't looked at your CSS code I'm sure it's because at some point you have a rule that makes your inputs about 218px wide, well, that rule affects checkboxes as well because they are inputs too. Not only this, but in IE6 the checkbox area has an light gray border.Try applying a specific class to that checkbox, something like:input.normal-checkbox { width:0; border:none; }And that would probably fix this minor visual issue.Of course you could fix this problem without having to edit the HTML code (for all standards compliant browsers, yes, even IE7) but without editing the HTML code the solution wouldn't work in IE6.Hope this helps.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...