...

View Full Version : CSS Help



bermanbp
12-19-2005, 09:38 PM
Hi,

I am simply trying to create the ever-so-common rounded box. I have to use images supplyed to me. I am having trouble lining up the bottom image (a strip as wide as the box with rounded-corners) at the bottom of the box if the content inside the box is too short. I have the bottom image as a separate div placed after a fixed height div. It wants to place the image right after the content and then continue to run the other div further below.

please help! Thank you in advance.

b

HTML:

<div id="poll">
<input type="hidden" name="question1Id" value="118">
<h1>Question?</h1><input type="radio" name="q1Choice" value="432" class="firstPollAnswer">Yes<br /><input type="radio" name="q1Choice" value="433">No<br /><input type="radio" name="q1Choice" value="434">Not sure<br /><div class="pollResults"><a href="/content/polls/1/111982?uri=pollresults.htm" onclick="s_objectID='MyPolls_results';return showlink(this, 'normal', page_name + '_MyPolls_results');">View Results</a></div><input class="voteButton" type="image" onclick="s_objectID='MyPolls_vote';return showlink(this, 'normal', page_name + '_MyPolls_vote');" alt="submit" src="http://a876.g.akamai.net/7/876/1448/v00002/images.com/wwwimages/webmdportal/images/button_vote.gif"></div>
<div id="pollBoxBottom">
<img src="http://a876.g.akamai.net/7/876/1448/v00002/images.com/wwwimages/webmdportal/images/transparent.gif" width="1" height="1" border="0" alt="">

</div>
</form></div>
</div>

CSS:
/* =POLL DIVS & STYLES
------------------------------------------------------- */
#pollBox {
float: left;
margin-top: 12px;
width: 300px;
height: 150px;
color: #7C2900;
background:url(images/bg_poll.jpg) no-repeat;
background-color: #EAD5C4;
font-size: 70%;
padding: 0px;
}

* html #pollBox {
float: none;
margin-top: 10px;
}

.firstPollAnswer {
margin-top: 0px;
}

* html .firstPollAnswer {
margin-top: -5px;
}

.voteButton {
margin-top: 2px;
}

#pollBox a {
color: #7C2900;
}

#pollBox h1 {
color: #7C2900;
}

#poll {
padding: 0 10px 0 15px;
margin: 0;
}

.pollResults {
background: url(images/icon_arrow_poll.gif) 0px 2px no-repeat;
position: relative;
top: 0px;
float: right;
padding-right: 10px;
padding-left: 8px;
margin: 5px 0 0 0;
}

#pollBoxBottom {
position relative;
background: url(images/border_poll_bottom.gif) bottom no-repeat;
height: 11px;
width: 300px;
margin: 0px;
padding: 0px;
}


I need to use that border_poll_bottom.gif which is a strip with the two bottom rounded corners.

Thanks

_Aerospace_Eng_
12-19-2005, 09:51 PM
Can you attach the images you are using?

bermanbp
12-19-2005, 09:55 PM
main Top Image
http://a876.g.akamai.net/7/876/1448/v00002/images.webmd.com/wwwimages/webmdportal/images/bg_poll.jpg

Bottom Part
http://a876.g.akamai.net/7/876/1448/v00002/images.webmd.com/wwwimages/webmdportal/images/border_poll_bottom.gif

Thanks,

_Aerospace_Eng_
12-19-2005, 10:10 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
#poll {
margin: 0;
padding: 0;
}

#pollBox {
float: left;
margin-top: 12px;
width: 275px;
height: 150px;
padding: 0 10px 0 15px;
color: #7C2900;
background:#EAD5C4 url(images/bg_poll.jpg) no-repeat;
font-size: 70%;
}

.firstPollAnswer {
margin-top: 0px;
}

.voteButton {
margin-top: 2px;
}

#pollBox a {
color: #7C2900;
background:none;
}

#pollBox a:hover {
text-decoration:none;
}

#pollBox h1 {
color: #7C2900;
margin:0;
padding:20px 0;
}

.pollResults {
background: url(images/icon_arrow_poll.gif) 0px 2px no-repeat;
position: relative;
float: right;
padding-right: 10px;
padding-left: 8px;
margin: 5px 0 0 0;
}

#pollBoxBottom {
background: url(images/border_poll_bottom.gif) no-repeat;
height: 11px;
width: 300px;
line-height: 0px;
font-size: 1px;
clear: both;
position:relative;
}

</style>
</head>

<body>
<form id="poll">
<div id="pollBox">
<input type="hidden" name="question1Id" value="118">
<h1>Question?</h1>
<input type="radio" name="q1Choice" value="432" class="firstPollAnswer">Yes<br />
<input type="radio" name="q1Choice" value="433">No<br />
<input type="radio" name="q1Choice" value="434">Not sure<br />
<div class="pollResults"><a href="/content/polls/1/111982?uri=pollresults.htm" onclick="s_objectID='MyPolls_results';return showlink(this, 'normal', page_name + '_MyPolls_results');">View Results</a></div>
<input class="voteButton" type="image" onclick="s_objectID='MyPolls_vote';return showlink(this, 'normal', page_name + '_MyPolls_vote');" alt="submit" src="http://a876.g.akamai.net/7/876/1448/v00002/images.com/wwwimages/webmdportal/images/button_vote.gif"></div>
<div id="pollBoxBottom">&nbsp;</div>
</div>
</form>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum