|
CSS - Ie Messes Up Form Display
[edit] New question, see http://forums.devshed.com/css-help-...tml#post1377956 below for details. Thanks!
--------- old question ------------ Hi, I'm trying to get some checkboxes aligned in a form that i'm creating. I can get it to work perfectly in Firefox, but not in IE6. In Firefox: In IE6: I don't care so much about the height/spacing issue as much as the left/right reversal. the relevant css(i think) is here Code: #application p {text-indent: 0px;}
#application div.col1 {width: 50%; float: left;}
#application div.col2 {width: 50%; float: right;}
#application label {
float: left;
width: 70px;
text-align: right;
height: 2em; line-height: 2em;
}
#application .label_checkbox {width: 100%;}
#application .label_checkbox p{
clear: both;
float: none;
position: relative;
}
#application .label_checkbox input {
position: absolute;
top: 1px;
left: 1px;
}
#application .label_checkbox label {
display: block;
margin-left: 22px;
text-align: left;
width: 160px;
}
and relevant xhtml: Code: <div class="label_checkbox">
<div class="col1">
<p><input type="checkbox" id="ch" value="Classroom Helper" name="roles" /><label for="ch">Classroom Helpers</label></p>
<p><input type="checkbox" id="lt" value="Literacy Tutor" name="roles" /><label for="lt">Literacy Tutor</label></p>
<p><input type="checkbox" id="ta" value="Technology Assistant" name="roles" /><label for="ta">Technology Assistant</label></p>
<p><input type="checkbox" id="ce" value="Campus Enrichment" name="roles" /><label for="ce">Campus Enrichment</label></p>
<p><input type="checkbox" id="ote" value="One-Time Events" name="roles" /><label for="ote">One-Time Events</label></p>
</div>
<div class="col2">
<p><input type="checkbox" id="frn" value="Family Reading Night" name="roles" /><label for="frn">Family Reading Night</label></p>
<p><input type="checkbox" id="rad" value="Read Aloud Day" name="roles" /><label for="rad">Read Aloud Day</label></p>
<p><input type="checkbox" id="dd" value="Dictionary Day" name="roles" /><label for="dd">Dictionary Day</label></p>
<p><input type="checkbox" id="gs" value="Guest Speaker" name="roles" /><label for="gs">Guest Speaker</label></p>
<p><input type="checkbox" id="other" value="Other" name="roles" /><label for="other">Other</label></p>
</div>
</div>
you can see the page at http://oaklandheroes.org/beta/application.php. Thanks for the help! Similar Tutorialshttp://www.innerspect.net/blog/ can anyone confirm this? offer some fixes? Hello, I was wondering if someone could take a look at my website and tell me what the CSS error is and some possible work arounds or fixes. The problem is CSS is messing with links and general text/input boxes. This problem does not occur in Internet Explorer where the css isn't rendered correctly. If you take a look around the site you'll see the error in a few seconds. Not working in: Mozilla and Google Chrome url: egames.hostoi.com/test/home.html Hi to all of you, I've started this new page just this morning, i have some experience with sitebuilding and css but not much. the result can be found here I spent most of my afternoon trying to fix this little error in IE (works fine in FF, opera and netscape). I've tried everything I could find, box model, floating boxes, lots of tricks and hacks but nothing seemed to work (or I implementer everything the wrong way). The problem seems quite simple, it looks like it has something to do with padding or margin for as long as text appears in the left column things in the right column are shifted a little to the right. Pleas help me out on this one, thanks in advance, kind regards, Jef Hi, Im new to totally CSS designs im more a table guy but im trying and getting a problem if you look at http://www.michaelwoodward.co.uk/clients/RSS on the shop page when you go into a department the footer moves up to the top of the main content section - why?? its not related to the height of the page so im guessing is something to do with the databse driven information that is placed in there (in a table). Can anyone help? Thanks Hi guys, This is another standard "why won't it work in IE"-post. I'm making a multi-column news-style site (<spam>first link in my signature</spam>), and IE screws up the widths. The layout is basically three .col's which are floated left, and a #menu on the right. Here's the relevant css: Code:
#menu
{
float: left;
margin-left: 0%;
width: 20%;
line-height: 120%;
padding: 2%;
font-size: larger;
}
.col
{
float: left;
width: 24%;
font-size: 0.8em;
}
.col ul{
list-style-type: none;
padding-left: 0;
}
.col .story{
background: #F5F8ED;
padding: 0 ;
margin: 1%;
border: 1px solid #71804D;
color: #333;
text-align: justify;
}
Here's some example html: Code:
<div class="col">
<ul>
<li class="story">
<p class="story_title"> story title </p>
<div class="story_body">
<p>blah blah</p>
</div>
<div class="sub">
<p>stuff</p>
</div>
</li>
</ul>
</div>
<div class="col">
<ul>
<li class="story">
<p class="story_title"> story title </p>
<div class="story_body">
<p>blah blah</p>
</div>
<div class="sub">
<p>stuff</p>
</div>
</li>
</ul>
</div>
<div class="col">
<ul>
<li class="story">
<p class="story_title"> story title </p>
<div class="story_body">
<p>blah blah</p>
</div>
<div class="sub">
<p>stuff</p>
</div>
</li>
</ul>
</div>
<div id="menu">
<div id="menu_title">
<h1> title </h1>
</div>
<ul id="navbox">
<li> ... </li>
</ul>
... etc
</div>
The problem is that IE renders the .col's very narrowly, and has some major space vertically between them. This means that #menu gets pushed down below the .col's. Can anyone point me in the right direction to fix this width issue? Thanks, Simon problems with positions divs and images within them ... when I have a positioned div, and I insert an image, or another div with image inside, it makes the div too high, and not sure how to get it straight. Code: ?>
<div id="cmp" style="position: absolute; left: <?=$cmp_left*$x_scale+$offx+$leftcolwidth+$xspace ?>px; top: <?=(($startrow*$y_scale)+($cmp_y)*$y_scale)-$offy ?>px; width: <?=($cmp_right-$cmp_left)*$x_scale+$leftcolwidth+$xspace ?>; height: <?=$y_scale+1 ?>; background-color: <? if( $cmp_row[ $j ] != null ) echo $cmp_row[ $j ]->type->getcolour( -1, $connect ); ?>; border: solid black 1px; z-index:<?=$i ?> " >
<div style="position: absolute; left: <?=$cmp_left*$x_scale+$offx+$leftcolwidth+$xspace ?>px; width: <?=($cmp_right-$cmp_left)*$x_scale+$leftcolwidth+$xspace-20 ?>; height: <?=$y_scale ?>;" align="left" width="20px" height="<?=$y_scale ?>px">
<? if( $cmp_row[ $j ] != null ) echo substr( rtrim( $cmp_row[ $j ]->getName() ), 0, $maxchars ); ?>
</div>
<div style="position: absolute; left: <?=$cmp_right*$x_scale+$offx+$leftcolwidth-20 ?>px; width: <?=20 ?>; height: <?=$y_scale ?>; align: right" >
<img src="images/<?=$icon ?>" alt=<?=$alt ?> border="0" <?=$mousey ?>>
</div>
</div>
<?
the code above has got a bit messy with trying to fix the problem... Cheers Adam Hi all, with your great help, the pages looks now almost fine in both IE and FF. But, the photogallery looks much more better with all the photos bordered, like on this screenshot from FireFox. Unfornutely, when you check it in IE, all the images are messed around in a totally upredictable way (screenshot from IE). It was the same using vertical-align, but it's not so essential. So, is there please any solution to handle this? And is there a way how to center floating <div> within his parent <div> ("Unfortunately, there is no easy way to center floated elements." - But is there any way)? The red bordered div is floating, including all the images put in <div>, which are floating too, I'd love center the red bordered <div> inside the green bordered one. To be specific, I don't insist on the red bordered div to be floating, I just looking for a way how to center all the images inside the green bordered <div>. Here are CSS used: Fotogalerie.css, Web.css. Webdesign isn't really easy thing to learn , if all would work how it's supposed to work, it'd wonderful, but IE makes it all 3times harder , I really start to not to like him (more than before ) Hi I recently moved a site "http://www.nikkilamann.com/index.php" and after moving it the CSS is all messed up (style.css) The scroll frame box is not centred anymore and the scrollbar is supposed to be white in colour and there is some funny box next to "fashion" on navigation. Site is totally messed up after move. Does anybody know what could cause this? As per suggestion, I have created a new thread in this forum. This is a follow on from my thread in the Javascript forum I have created a table which displays exactly how I want it to. It displays correctly in IE8, FF3.6, Opera & Chrome. What I've done is created some Javascript to remove the last column of the table. When this happens FF and Chrome (untested in Opera) redraws the table with the right edge column of the right-most column as I would hope it would - with the right edge style of the table as it was before the column was removed - in this instance, a solid black border. IE does not redraw the right border like this - it retains the internal column border, in this instance, a grey dashed cell border. I was wondering if there was a way to make IE behave? A demo is available at geostatsireland and it is a .com - the page name is mytable.html Hi, If I place an input field or select box in a div and set the display to none - will that variable still be sent when the form is submitted? Thanks, Hi Their.. I have an html page that contains a form named form1...i want to display another form when the button in form1 have submitted....It's a matter of (show/hide) html elements...Anyone can help..please. Thank you in Advance Hi, I have a webpage with a 3 column layout using css. In the left column I have a form which takes input and relays it to another php script which either populates another form or produces output. I would like to control where the output of each form is displayed. With frames I just use the target command. Some of the output will be in the same div as the original form (if the output is a form) or in the middle column if it is an output of results. I have been told that javascript would accomplish this. Any thoughts? Thanks, R Haynes I recently relaunched our web site and, trying to stay with the times, use CSS as much as possible for layout purposes. The one place I still use a table for layout is in the top navigation bar, which includes a search form. I would like to eliminate the table and use CSS for styling the top navigation bar, but am not sure how. I want the pages to hold up in IE 5.0+, Mozilla, Netscape 6+, Firefox and Safari and to be tolerable in Mac IE 5.x - a tall order but manageable I think. Can this be done? Am I stuck with a layout table here? Any help is appreciated. You can see an example web page at: http://www.cambridgema.gov/~CDD/ The HTML is in the attached file. Hello! I've got a <div> inside a <form> which I show/hide when a user clicks on a show/hide link. That div holds several form options which I DON'T want to submit with the form when the div is hidden. At the moment, even when my div is hidden, the values within it are still being submitted with the form. Is it possible to / how do I - hide the div so any values enclosed in it do NOT get submitted along with the form? Thanks, regan. Hi all, I'm implementing a web form where the labels for each input will appear as the default value rather than having the actual label elements visible. The label elements themselves will still be present in the markup for accessibility. I want to visually remove the labels while still having them acknowledged by screen readers. I'm aware of the left-offset trick, but I've read several articles where it's suggested to simple set the labels to display: none with JavaScript after the DOM has loaded. This seems to assume that screen readers will ignore this, otherwise there you might as well just set them as display: none in the first place. Can anyone confirm that a screen reader will still acknowledge a label element if display: none has only been applied after the DOM load via JavaScript? Thanks! Take a look <link removed... no longer valid> If you have I.E. and Firefox available... notice the differences... Take a look at the source... I.E. appears to display this "more correctly"... it's certainly more visually appealling. I want the border to go all the way around the calendar in FF (it already does in I.E.), and in FF the first week is messed up (probably has something to do with no information within the divs, but why does it do that? Bryan <edit>I'd also like to fix the gap on the right side between the days and the calendar border, but just making it 15% for the last one doesn't work.</edit> Hi Guys, I'm building some forms, and when they are submitted, I'd like to integrate a method that will fade out the screen a bit, and show an animated "processing" .gif. Basically when the "submit" button is pressed, the form is being submitted to it's destination. The page will hang on the form until the next page is ready to load. While it's hanging there after submitting, I'd like the screen to fade out, and display an image in the center of the screen. I'm hoping this can be achieved with CSS, as I try to use as little Javascript as possible. What's the best way to achieve this? I figure if anything a javascript "onsubmit" function will be a good start. Can the screen be faded with CSS? I've been seeing people using ul and li tags to make their menus in css. So I've started trying to do the same, here is an example. But obviously here, the buttons are not displaying inline. All of the styles are within the page code itself. I've got a display: inline style on the li tag, but it's still not working? How can I get this to work or is there any other way to get a ul li menu to display this way? Could someone enlighten me why the page in the following URL functions perfectly in both IE6 and FF and yet, I seem to be totally unable to get the darn thing working locally? I am trying to avoid JavaScript and this looked like a very clean way of hiding and revealing menu items. I don't speak Japanese so I don't understand the text on the page either. http://www.amy.hi-ho.ne.jp/staka/hp/dhtm/s_disp.htm Hi! Is is vicious to display a table as "display: block" to force margin-collapsing? Otherwise there's no margin collapsing with other elements. Thanks |
|||||||