Please help! I am quite new to CSS and I've come across a problem in IE7. On my homepage (www.tickity-boo.co.uk) the radio buttons (part of a poll) appear squashed in IE7, but display fine in IE6 and Firefox. Any help would be greatly appreciated. This is the css that relates to the forms: /* ----- FORMS ----- */ #header-right form{margin:0 0 0 20px; font-size:90%;} #header input {padding:1px;border:1px solid #ada089; margin:1px; } #header .button {background:#b2a98e; color:#eae6c3; font-size:92%;} #boxes form{padding:8px;} #boxes form div{padding-bottom:6px;} .radio label {padding:4px;} #blockCenter .button {margin:5px;padding:3px;background:#c63;color:#fff;border:2px solid #dd8237;} #radio p{margin:0 0 2px 0;padding:0;} #radio label {margin:4px 8px 0 6px;padding:0;float:left;color:#8c826c;} #radio input {width:14px;padding:0;float:left;border:none;color:#8c826c;margin-top:4px;}
In the last CSS line you quoted in your post #radio input {width:14px;padding:0;float:left;border:none;color:#8c826c;margin-top:4px;} Code (markup): ..why would you set a width value for a radio button? Why use float? Border? Top margin? I'd remove the whole line, and clean the poll form to make it look like this: <form action="site/poll.php" method="post"> <input name="voteid" value="1" type="radio"><label>yes</label><br /> <input name="voteid" value="2" type="radio"><label>no</label><br /> <input name="voteid" value="3" type="radio"><label>don't care</label><br /> <input name="submit" class="button" value="vote" type="submit"> <input name="pollid" value="5" type="hidden"><br /><a href="site/poll.php?pollid=5">View results</a> </form> Code (markup):
Thanks for your reply Clive. Just to make things clearer, I didn't write this code, but am trying to make sense of it and fix the problem, but no success so far. The actual poll is part of an admin system. Any suggestions are welcome and greatly appreciated. The homepage (index.php) calls the poll with the following script: <div class="left"> <!-- poll --> <?php $activePoll = new TB_Poll; echo $activePoll->activePoll; ?> </div> The index.php file also call an external file to display the poll: <?php require_once("classes/displayPoll.php"); ?> Part of the script for displayPoll.php which I think relates to how the poll is displayed is: function createPoll(){ $pollID = $this->poll['id']; $activePoll="<h3>This week's poll</h3>"; $activePoll.="<p>".$this->poll['question']."</p>"; $activePoll.="<form action=\"site/poll.php\" method=\"post\">"; $query = "SELECT poll_answer, poll_voteid FROM tbPollAnswer WHERE poll_id = '$pollID' ORDER BY poll_voteid"; $this->result = $this->DB_executeQuery($query,$this->pollLink); while ($row = mysql_fetch_object($this->result)){ $activePoll.="<div class=\"radio\">"; $activePoll.="<input name=\"voteid\" type=\"radio\" value=\"".$row->poll_voteid."\" />"; $activePoll.="<label>".$row->poll_answer."</label>"; $activePoll.="</div>"; } $activePoll.="<input name=\"submit\" type=\"submit\" class=\"button\" value=\"vote\" />"; $activePoll.="<input type=\"hidden\" name=\"pollid\" value=".$this->poll['id']." />"; $activePoll.="<div><a href=\"site/poll.php?pollid=".$this->poll['id']."\">View results</a></div>"; $activePoll.="</form>"; $this->activePoll = $activePoll; }//END FUNCTION Index.php also calls only one external css file which has the following code which I think relates to the way the poll is displayed: /* ----- FORMS ----- */ #header-right form{margin:0 0 0 20px; font-size:90%;} #header input {padding:1px;border:1px solid #ada089; margin:1px; } #header .button {background:#b2a98e; color:#eae6c3; font-size:92%;} #boxes form{padding:8px;} #boxes form div{padding-bottom:6px;} .radio label {padding:4px;} #blockCenter .button {margin:5px;padding:3px;background:#c63;color:#fff;border:2px solid #dd8237;} #radio p{margin:0 0 2px 0;padding:0;} #radio label {margin:4px 8px 0 6px;padding:0;float:left;color:#8c826c;} #radio input {width:14px;padding:0;float:left;border:none;color:#8c826c;margin-top:4px;}
Not blaming you at all. But the code is a bit dirty and unnecessarily filled with CSS stuff that a website can live without. Replace the createPoll() function with the code below: function createPoll(){ $pollID = $this->poll['id']; $activePoll="<h3>This week's poll</h3>"; $activePoll.="<p>".$this->poll['question']."</p>"; $activePoll.="<form action=\"site/poll.php\" method=\"post\">"; $query = "SELECT poll_answer, poll_voteid FROM tbPollAnswer WHERE poll_id = '$pollID' ORDER BY poll_voteid"; $this->result = $this->DB_executeQuery($query,$this->pollLink); while ($row = mysql_fetch_object($this->result)){ $activePoll.="<input name=\"voteid\" type=\"radio\" value=\"".$row->poll_voteid."\" /><label>".$row->poll_answer."</label><br />"; } $activePoll.="<input name=\"submit\" type=\"submit\" class=\"button\" value=\"vote\" />"; $activePoll.="<input type=\"hidden\" name=\"pollid\" value=".$this->poll['id']." />"; $activePoll.="<a href=\"site/poll.php?pollid=".$this->poll['id']."\">View results</a>"; $activePoll.="</form>"; $this->activePoll = $activePoll; } Code (markup):
Hi Clive, Your code worked a treat apart from one little problem. There is no space in between the labels and the radio buttons in Firefox, but it's fine in IE6 & 7. I tried a few things, but don't seem to be going anywhere. The code you referred to earlier on in the week as unnecessary, seems to relate to the main menu bar at the top of the website: #radio input {width:14px;padding:0;float:left;border:none;color:#8c826c;margin-top:4px;} By the way, where are you based and would you be interested in doing some work for our website, for which we'll be more than happy to pay you. I greatly appreciate you giving us your time and help. Aden
Aden, in my corrected code, do a search for /><label> Code (markup): and replace it with /> <label> Code (markup): That should fix the spacing problem. Feel free to use my profile info to get in touch via MSN, Yahoo or AIM. I'm available for chat right now.