|
CSS - Fieldset Width Problem (mainly In Ie)
Hey guys, I'm new to the forums and would appreciate any help...
I've never used fieldsets before, until now, and check out: http://www.koofers.com/contact.php A horizontal bar shows up in IE... and the globe in the top right of the screen goes off the monitor! And in FireFox, if I add bullet points to the content, the text actually goes outside of the fieldset. I know now the more I read that fieldsets are pretty much just for forms and such, but I really like the cool effect they give! And yes, I know... I shouldn't be using tables for my design, I should be doing crazy sweet things in CSS, but I'm still learning and don't have the time to totally re-design it in CSS (even if I could get it working!) Any help would be appreciated. Similar TutorialsHello! I am using some pretty simple css to format a form for my website. I really like the way using Fieldset & Legend allows for quick and easy formatting of the form but I have one small problem. When I give the fieldset a background it goes above the border of the legend and doesn't look right. I've seen forms that have worked around this problem but I'm not sure how. Any suggestions or help would be appreciated! Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title>ALE Join Form</title>
<head>
<style type="text/css">
fieldset
{
border: 2px solid #87AFC7;
width: 50%;
background: #F5F5F5;
}
legend
{
color: #fff;
background: #87AFC7;
border: 1px solid #fff;
padding: 2px 6px
}
</style>
</head>
<body>
<form action="#" method="post">
<fieldset>
<legend>ALE Membership</legend><br><br>
<!-- Provide a dropdown menu option field with sauces. -->
<input type="hidden" name="on0" value="Type">Type of Sauce
<select name="os0">
<option value="Select a type">-- Select a type --</option>
<option value="Red">Red sauce</option>
<option value="Green">Green sauce</option>
</select></p>
<br />
<!-- Provide a dropdown menu option field with prices. -->
<input type="hidden" name="on1" value="Size">Size
<select name="os1">
<option value="06oz">6 oz. bottle - $1.00 USD</option>
<option value="12oz">12 oz. bottle - $2.00 USD</option>
<option value="36oz">3 12 oz. bottles - $3.00 USD</option>
</select></p>
<br />
<!-- Display the payment button. -->
<input type="submit" name="submit" value="submit" /><br><br>
</fieldset>
</form><br><br>
<fieldset>
<legend>Thank You</legend>
<center>
<p>Your something is complete!</p><br>
</center>
</fieldset>
</body>
</html>
Below is a link to a terrible picture of the form (sorry it's not online): http://www.leadershipeducators.org/redesign/images/users/Jared/profile.jpg does fieldset have a width attribute rather than having it spread across the whole screen or should i just put it inside a DIV tag? Hi, I currently have the following layout in a fieldset: [IMG]EDIT: I'll just go ahead and make some spam posts now so I can post an image link[/IMG] Please ignore the language. What I basically want to achieve is making the radio buttons align to the right and the labels to the left. The source for this is like this: html4strict Code: Original - html4strict Code <fieldset> <legend>Beantwoord a.u.b. met helemaal oneens tot helemaal eens</legend> <ol> <li> <label for="q0">Question1</label> <input type="radio" id="q0" name="q0" value="1">1</input> <input type="radio" id="q0" name="q0" value="2">2</input> <input type="radio" id="q0" name="q0" value="3" checked="true">3</input> <input type="radio" id="q0" name="q0" value="4">4</input> <input type="radio" id="q0" name="q0" value="5">5</input> <input type="hidden" name="qid0" value="4" /> </li> <li> <label for="q1">Question2</label> <input type="radio" id="q1" name="q1" value="1">1</input> <input type="radio" id="q1" name="q1" value="2">2</input> <input type="radio" id="q1" name="q1" value="3" checked="true">3</input> <input type="radio" id="q1" name="q1" value="4">4</input> <input type="radio" id="q1" name="q1" value="5">5</input> <input type="hidden" name="qid1" value="6" /> </li> <li> <label for="q2">Question3</label> <input type="radio" id="q2" name="q2" value="1">1</input> <input type="radio" id="q2" name="q2" value="2">2</input> <input type="radio" id="q2" name="q2" value="3" checked="true">3</input> <input type="radio" id="q2" name="q2" value="4">4</input> <input type="radio" id="q2" name="q2" value="5">5</input> <input type="hidden" name="qid2" value="7" /> </li> <li> <label for="q3">Question4</label> <input type="radio" id="q3" name="q3" value="1">1</input> <input type="radio" id="q3" name="q3" value="2">2</input> <input type="radio" id="q3" name="q3" value="3" checked="true">3</input> <input type="radio" id="q3" name="q3" value="4">4</input> <input type="radio" id="q3" name="q3" value="5">5</input> <input type="hidden" name="qid3" value="24" /> </li> <li> <label for="q4">Question5</label> <input type="radio" id="q4" name="q4" value="1">1</input> <input type="radio" id="q4" name="q4" value="2">2</input> <input type="radio" id="q4" name="q4" value="3" checked="true">3</input> <input type="radio" id="q4" name="q4" value="4">4</input> <input type="radio" id="q4" name="q4" value="5">5</input> <input type="hidden" name="qid4" value="40" /> </li> </ol> </fieldset> <fieldset> I already tried making them float but this kinda messed everything up as some questions are multi-line. Is the best way to do this separating the labels and inputs into two floating divs or is there a way that would look cleaner code-wise? Tim Hello All, I am having a bit of a problem with IE and fieldsets. I am not sure what exactly is going on. Take a look at this site in Firefox (I'm currently running version 3.5.2). You will see that it displays correctly. The site also displays correctly in IE8. I am now testing it against IE6/7. I have worked out most of the problems with it, but can not figure out what is causing this issue. The pages to look at are Board Members, Tech News, and Association. The link is: http://209.159.189.187/index.html One further, minor, issue that hopefully is simple involves the UL LI items on the About Us page. I used the reset css file to clear everything, and now whenever the LI item contains text that spans more than a single line, the second level does not indent itself to align with the first line. Like I said, it is a minor thing, but I would appreciate knowing what setting controls that. Thanks everyone. The border around the fieldset in IE7 is messed up. The right border is shifted to the left several pixels. It looks fine in IE6. In FF the border isn't shifted but there is less padding on the right side of the fieldset than the left. I can't figure that one out either. If I zero out all the padding & borders the input/textareas push a few pixels out the right side of the fieldset. Looks fine in IE6. So has anyone seen either of these issues and might know how to correct them? Here is the page in question Thanks! I can't seem to set any padding on the fieldset element with ie7 Has anyone else had these problems and is there a way I can fix this. I even set the fieldset element to a block level element but that didn't work either. example http://section31.us/scripts/testing/xhtml/fieldset.html http://www.veracon.net/qwaffle/ If you look closely in Firefox, the content holder (left and right) is one pixel too small - it's meant to be the same size as the header. I don't see why this is happening, as it looks fine in IE. I could use some help. How do I make "content" <div class="content"> to go all the way to the right side of the "profile"? Code:
<style type="text/css">
#container { width: 800px;
background-color:#666;
padding: 20px;
}
#profiles_container {
background-color:#33CC66;
}
#profiles_container .profile { background-color:#CCFFFF;
margin: 20px 0px 20px 0px;
padding: 10px;
}
#profiles_container .profile .foto { background-color:#CCCC33;
float: left;
width: 200px;
padding: 10px;
}
#profiles_container .profile .content { background-color:#FF0000;
float: left;
margin-left: 10px;
padding: 10px 10px 10px 10px;
}
#profiles_container .profile .content .col1 { background-color:#CCFFCC;
float: left;
}
#profiles_container .profile .content .col2 {
float: left;
}
#profiles_container .profile .btm{
background-color:#999999;
}
.clear {clear:both;}
</style>
</head><body>
<div id="container">
<div id="profiles_container">
<div class="profile">
<div class="foto"><img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="Photo_1" border="0" align="top" />
</div><!-- END foto -->
<div class="content">
<div class="col1"><p>COLUMN_1</p></div><!-- END col1 -->
<div class="col2"><p>COLUMN_2</p></div><!-- END col2 -->
</div><!-- END content -->
<div class="clear"></div>
<div class="btm"><p>BOTTOM</p></div>
</div><!-- END profile -->
</div><!-- END profiles_container -->
</div><!-- END container -->
I'm having a problem with a width attribute in IE7. The main content div on the page http://www.mckr.ie/test.html looks fine in Opera but in IE7 it makes the page scroll horizontally. Basically I didn't put a width on the #contentdiv styled <div>, its supposed to just occupy the width of the page automatically. When I put width 100% on it it messed up in IE6. Now I'm looking at it in IE7 and its similarly messed up. Does anyone know a way of solving this? Any help would be much appreciated. Here's my HTML code: Code: <div id="bannerdiv"></div> <div id="contentdiv"> Content here</div> <div id="leftnavdiv"><div id="leftnavouterdiv"><div id="leftnavinnerdiv">Nav here</div></div> <div id="searchdiv"><div id="innersearchdiv"><p><b>Site Web en Francais</b></p> <form action="http://search.atomz.com/search/" method="get" target="main"> <b>Search the Site<br /> </b> <input name="sp-q" size="15" /> <input name="submit" type="submit" value="Go" /> <input name="sp-a" type="hidden" value="sp10023119" /> <input name="sp-f" type="hidden" value="ISO-8859-1" /> </form> </div> </div> </div> <div id="topnavdiv"> <ul> <li><a href="/" id="buttonhome"><b>Home</b></a></li> <li><a href="about.html" id="buttonabout"><b>About Us</b></a></li> <li><a href="location.html" id="buttonlocation"><b>Location</b></a></li> <li><a href="contact.html" id="buttoncontact"><b>Contact Us</b></a></li> <li><a href="news.html" id="buttonnews"><b>News</b></a></li> <li><a href="people.html" id="buttonpeople"><b>People</b></a></li> <li><a href="recruitment.html" id="buttonrecruitment"><b>Recruitment</b></a></li> </ul> </div> Here is the relevant CSS code: Code: #bannerdiv { background-image: url(images/logo_banner.gif); height: 120px; width: 100%; background-color: #3366CC; background-repeat: no-repeat; background-position: left top; display: block; top: 0px; position: absolute; z-index: 9; left: 0px; } body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; margin: 0px; padding: 0px; }
#leftnavdiv { position:absolute; left:0px; top:146px; width:237px; z-index:2; font-size: 11px; } #contentdiv { position:absolute; left:250px; top:146px; z-index:1 }
#leftnavinnerdiv { width: 210px; margin-top: 0px; margin-bottom: 0px; margin-left: 10px; padding-bottom: 30px; padding-top: 0px; }
#leftnavouterdiv {
background-color: #EEF3F9;
background-image: url(images/bg.newsbottom.jpg);
background-repeat: no-repeat;
background-position: right bottom;
}
#searchdiv {
background-color: #EEF3F9;
width: 234px;
margin-top: 15px;
margin-bottom: 15px;
}
#innersearchdiv {
margin: 0px 15px;
padding-top: 15px;
padding-bottom: 15px;
}
#topnavdiv {
position:absolute;
left:0px;
top:120px;
width:100%;
z-index:3;
background-color: #3366CC;
border-top-width: 1px;
border-right-width: 0px;
border-bottom-width: 1px;
border-left-width: 0px;
border-top-color: #f8c015;
border-bottom-color: #f8c015;
border-right-color: #f8c015;
border-left-color: #f8c015;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
height: 24px;
}
Hi all - ive discovered a css problem when using 100% width areas on a website. take the following site for example.. offmymakeupbox.com if you open a browser that is not maximized there is a scrollbar that allows you to scroll to the right, but if you scroll to the right you can see that the footer has been cut off. ie. it is the width of the resized browser and not 100% width of the actual template. is there a way to fix this? thanks http://www.turboconceptsllc.com/main.php in IE 6. how do i get the top banner stretch to span across the entire width of the browser? i think its stopping at the scroll bar, from what ive read.. how is this fixed? Code:
.main_table_top_banner
{
background-image:url('');
background-repeat: no-repeat;
background-color: #3A3A3E;
width: 100%;
height: 50px;
position:absolute;
left:0px;
top:0px;
overflow: none;
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
border:0px solid;
z-index:1;
}
When i view rockitdesign.co.uk/portfolio in IE6, one of the columns seems too wide so the right one is getting squeezed underneath. This seems to happen on many of the sites i do so must be the same thing causing it? Any ideas? Thanks. hi, wonder if someone can help me. I'm trying to create a css layout for a site, which has a header then two vertical columns (pretty standard). i want the first column to be a set size and the second content column to be variable to use up the rest of the page space. i can get the first column and header to work fine but not the second content column. any help would be good. here my code: Code: #header {
margin: 20px 20px 0px 20px;
padding: 10px;
border: 1px solid #666;
background: #ccc;
height: 100px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
height: 70px;
}
html>body #header {
height: 70px; /* ie5win fudge ends */
}
#menu_v {
position: absolute;
top: 120px;
left: 0px;
margin: 20px;
padding: 10px;
border: 1px solid #666;
background: #ccc;
width: 150px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 120px;
}
html>body #menu_v {
width: 120px; /* ie5win fudge ends */
}
#content {
position: absolute;
top: 120px;
right: 0px; /* Opera5.02 will show a space at right when there is no scroll bar */
margin: 20px 20px 20px 190px;
padding: 10px;
border: 1px solid #666;
background: #ccc;
}
me again, i fixed my last problem just to run into another i messed a little with my code, so that i have 2 elements on the page 'fixed' (in FF and IE) and the main body part is scrollable. the complete site is here i cannot seem to set a minimum width for the browser window. try to resize the window and you will see, that the main bodywindow will maintain at least 500px width in Firefox (not in IE < thats prob no.1) -- but also does the main body window slip underneath the navigation to the left. i tried to change the z-value, but even if i give them both the same z-value it slips underneath it. it would be great, if someone could help me with this problem, i know i have to correct it somewhere in the css, but cannot find it EDIT solved problem.... okay, so i just positioned (absolute) the bodybox element a fix amount away from the left border of the screen -- before it was 10% away from the right border of the screen .... it doesn't seem that liquid anymore, but i can live with it .... now i just need to convince IE to maintain a minimum width .... which topic has been discussed before EDIT2 i added the line Code: width: expression(document.body.clientWidth < 781 ? "780px" : "100%" ); to my fixed4ie.css file .... this messes on my old IBM ('95) around a little and i am not sure if you can see the graphic delay on newer computers. this is the only thing that worked for me so far .... interesting enough there are no more scrollbars, once i go under that certain width .... if - by now - someone has an idea how to fix this, i would appreciate other solutions to this problem Hello, Can I apply a top and bottom border to a fieldset but using an image to define a custom border line? How can I do this? Thank You, Miguel Hi, I am using fieldset to group checkboxes. fieldset { border:none; autoHeight:true; } Several fieldset groups are used inside td (table). In firefox 3.6.17, the layout comes properly. The fieldset automatically adds a line break for every tr-td combination, the layout shows fine. But in IE 8.0.6001, the fieldset does not add a line break for every td/tr. So I have to add an additional blank/empty tr/td to add a line break. Doing so adds 2 lines in FF. How to overcome this problem? What is the ideal css style to be used so that the display comes properly in both IE and FF? Just wondering if there are any css tags that would be able to produce a fieldset/legend look like this... The idea of being able to get a link to show up on the right side there is what i'm trying for. thanks for reading... Hi Guys, I'm trying to figure out if a certain formatting is available for Fieldsets, specifically, the legend styling. In the fieldset, the legend is typically displayed in the top left corner of the fieldset. I'm wanting to have TWO legends. One in the top left, and one in the top right. Here's two examples. A normal one, and one with two legends that I would like. (i photoshopped the 2nd one). Is this possible? I know everyone who has tried designing emails for Outlook 2007 has had their share of headaches. But I encountered a bug recently where Outlook 2007 is not rendering my fieldset elements correctly. Based on Microsoft's own documents, Outlook 2007 should have full CSS support of the <fieldset> and <legend> elements. Here is my html and css: Code: <fieldset style="border:1px solid #99CCFF; padding-left:10px; padding-right:10px; padding-bottom:10px;"> <legend style="font-weight:bold; text-transform:uppercase;">Warranty Items</legend> ** Content here *** </fieldset> In every other email reader it looks as it should. But in Outlook 2007 there is no border and no padding. Each <legend> element appears as if it were an inline element. Has anyone had any luck with this sort of problem? Thanks! Hi I'm new to CSS and this site, so please excuse any stupidity in the code and presentation of this query! The following CSS (error.css): Code: body {background-color: white;}
title {font-style: italic}
thead {font-weight: bold; border-bottom: thick double}
td {width: 5em; border-bottom: thin solid black; border-top: thin solid black; background-color: green}
table {border: hidden}
.Xaddress {border-left: thin solid black; font: 1em bold; color: yellow; text-align: left}
.title {border-left: thin solid black; text-align: center; border-bottom: thick double; border-top: hidden}
caption {font: 2em bold}
#intro {position: static; color: black; height: 20%; backXground: #cccccc;}
#addresses { position: relative; left: 5em; height: 60%; color: black; height: 10em;}
#table1 {position: absolute; top: 4em; left: 1em; z-index: 10; color: black; background: #cccccc;}
#table2 {position: absolute; top: 5em; left: 6em; z-index: 9; color: black; background: #ff00ff;}
#footer {position: static; z-index: 10; color: black; height: 20%; backXground: #00ff00;}
and xhtml (error.html): Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<html>
<head>
<link rel="stylesheet" type="text/css" href="error.css" />
<script type="text/javascript">
//Bring a span element and descendents to the front and send its span siblings and their descendents to the back
function bringToFront(id)
{
if (id != null) {
if (document.getElementById(id)) {
//Send all parent's descendents in spans to the back
var span=document.getElementById(id).parentNode.getElementsByTagName("SPAN");
var s=0;
var c=0;
while (span[s]) {
setzIndexOfBranch(span[s],9);
s++;
}
//bring id and descendants to the front
setzIndexOfBranch(document.getElementById(id),10);
}
}
}
//Set the zIndex of a node and all of its descendants
function setzIndexOfBranch(node,value)
{
if (node.style != undefined) {
node.style.zIndex = value;
}
var c=0;
while (node.childNodes[c]) {
setzIndexOfBranch(node.childNodes[c],value);
c++;
}
}
function parseXML()
{
text="<root>";
text=text+"<heading>XML CSS HTML test</heading>";
text=text+"<table1data>"+"<table>"+
"<caption>"+
"First table"+
"</caption>"+
"<thead>"+
"<td class="title">Column1</td>"+
"</thead>"+
"<tr>"+
"<td>row1</td>"+
"</tr>"+
"<tr>"+
"<td>row2</td>"+
"</tr>"+
"<tr>"+
"<td>row3</td>"+
"</tr>"+
"</table><br/>Some text after table 1<br/>"+
"</table1data>"+
"<table2data>"+"<table>"+
"<caption>"+
"Second table"+
"</caption>"+
"<thead>"+
"<td class="title">Column1</td>"+
"</thead>"+
"<tr>"+
"<td>row1</td>"+
"</tr>"+
"<tr>"+
"<td>row2</td>"+
"</tr>"+
"<tr>"+
"<td>row3</td>"+
"</tr>"+
"<tr>"+
"<td>row4</td>"+
"</tr>"+
"</table><br/>How can I make these 2 tables appear inside the addresses fieldset ?<br/>"+
"<br/>How can I make the addresses fieldset always fill @60% of the height ?<br/>"+
"<br/>Note the size of each table will vary but can assume to be less than 6 rows.<br/>"+
"</table2data>";
text=text+"</root>";
try //Internet Explorer
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.loadXML(text);
}
catch(e)
{
try // Firefox, Mozilla, Opera, etc.
{
parser=new DOMParser();
xmlDoc=parser.parseFromString(text,"text/xml");
}
catch(e)
{
alert(e.message);
return;
}
}
document.getElementById("table1").innerHTML=
xmlDoc.getElementsByTagName("table1data")[0].childNodes[0].nodeValue;
document.getElementById("table2").innerHTML=
xmlDoc.getElementsByTagName("table2data")[0].childNodes[0].nodeValue;
document.title=
xmlDoc.getElementsByTagName("heading")[0].childNodes[0].nodeValue;
}
</script>
</head>
<body onload="parseXML()">
<h1>Positioning test script</h1>
<span>
<fieldset id="intro">
<legend>header</legend>
<span id="to"></span><br/>
Header text
</fieldset>
<br/><br/>
<fieldset id="addresses">
<legend>addresses</legend>
<br>This is in the addresses fieldset</br>
<span id="table1" onclick="bringToFront('table1')"></span>
<span id="table2" onclick="bringToFront('table2')"></span>
<br>This is in the addresses fieldset...................................................................................and I would hope for it to appear beneath the tables above. Table 2 may not exist.</br>
</fieldset>
<br/><br/>
<fieldset id="footer">
<legend>footer</legend>
This is all
<br/><br/><br/><br/><br/><br/><br/><br/>
footer text<br/>
<br/>Down to here.
</fieldset>
</span>
</body>
</html>
produces overflow in the middle fieldset. I would like the tables in this fieldset to be contained by the fieldset. It's prettier. That would also make the footer fieldset visible, so it's essential ! Can anybody help please ? Also the text which should appear below these tables. Any idea why it isn't positioned inline after the tables end ? Thanks. |
|||||||