|
CSS - Why Won't Ie Display My Checkbox!
I don't know if this is an HTML or CSS error but basically everything was running smoothly in FF then when I came round to IE testing everything was screwed (as usual), I've worked out most of the problems but for some reason I've get a checkbox that doesn't display and I haven't been able to find anything on google about IE bugs relating specifically to checkboxes. Heres the code:
Code: <h1>Login</h1> <form action="" method="post" id="login"> <fieldset> <legend>Log In</legend> <label for="user">Username:</label> <input type="text" name="user" maxlength="30" id="user"> <label for="password">Password:</label> <input type="password" name="pass" maxlength="30" id="password"> <input type="image" name="sublogin" value="Login" src="http://localhost/stock/database/images/login.png" class="inline_submit"> </fieldset> <fieldset class="login_spacer"> <input type="checkbox" name="remember" id="remember"> <label for="remember" id="rem_label">Remember me on this computer</label> </fieldset> </form> and the relevant CSS: Code: fieldset { border:none; padding:0; margin:0; }
input { height:18px; min-width:140px; }
input#backup { margin:10px 0 0 35px; }
input.inline_submit { position:relative; top:6px; width:20px; height:20px; min-width:0; }
input:focus,select:focus{ border:2px solid #FAEF20 }
label { margin: 0 5px 0 0; }
legend { display:none; }
fieldset.login_spacer { margin:10px 0 0 0; }
input#remember { min-width:0; height:0; margin:0 5px 0 0; padding:1px; }
label#rem_label { position:relative; top:-1px; }
Similar TutorialsI'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 is it possible to modify the look of a checkbox input field with CSS? (background, check color, border, etc) thanks, --Lone Is there a way I can have the checkbox to the right of the heading without stretching out the actual heading? It works fine when it is floated to the left http://www.iankovi.com/html_.html http://www.iankovi.com/css_.css Hello, Though the 'CssClass' property is available with the control, it doesnt seem to have any effect on it. Rather it works on HTML Control Checkbox. Thanks. Hi all, I am having a bear of a time trying to modify the size of a checkbox element in a form under IE Windows. For all other browsers on the Mac and Windows I use the following style sheet settings: PHP Code: input[type=checkbox] { font-size: 9px; margin: 0px 0px 0px 0px;} I have also tried coding a "style" attribute directly on the <input type=checkbox"...> element in my HTML code but to no avail! Does anyone know how the heck to do this? I'm working on a new site, and having trouble getting the CSS to work with IE7 (big surprise), it works fine in Firefox (big surprise). You can see the site he http://www.gocubit.com CSS he http://www.gocubit.com/styles.css IE6 stylesheet he http://www.gocubit.com/ie.css The problem is very simple, so let me explain what I have setup, and what is happening. I have 4 backgrounds I want to display, in the following containers: body - this contains a tiling wall texture #outerWrapper - this contains a small non-repeating bg image that puts graffiti in the upper right corner on top of the wall bg #innerWrapper - same as outerWrapper, but puts a graffiti bg in top left #contentWrapper - this div contains the main display area, and displays a vertically repeating paper background that should fill the screen from top to bottom (on top of the wall and two graffiti backgrounds) I've tried my best to get this to display right, but have one of two problems depending on how it is set up. In all cases, BODY and HTML are set to 100% height. SCENARIO #1 (same problem in FF or IE7): I set outerWrapper, innerWrapper, and contentWrapper to min-height: 100%. This doesn't extend the paper background all the way to the bottom on pages that don't fill the screen with content (see the CONTACT page). SCENARIO #2 (works in FF): I set outerWrapper, innerWrapper to height: 100%, and contentWrapper to min-height:100%. This actually appears to work on first glance (and does work in FF). But, if you go to a page with a lot of content (see the SERVICES page) where you need to scroll, what happens is that there is no paper BG in the area that is off screen. The content "below the fold", when scrolled to, has no paper BG. It's setting the height of the div to the screen height, filling in the BG, and any content below that height has no BG (only the wall BG in the body element). Code: html { height: 100%; }
body {
background-color: #8d7c51;
background-image: url(images/bgStucco.jpg);
font-size: 12pt;
margin: 0;
padding: 0;
height: 100%;
}
#outerWrapper {
background-image:url(images/bgStucco_tr.jpg);
background-repeat:no-repeat;
background-position: right top;
width: 100%;
margin: 0;
padding: 0;
min-height: 100%;
}
#innerWrapper {
background-image:url(images/bgStucco_tl.jpg);
background-repeat:no-repeat;
min-height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
Code: <body><div id="outerWrapper"><div id="innerWrapper"><div id="contentWrapper"> CONTENT GOES HERE </div></div></div></body> Any ideas on how to get this to work? Hello all, I feel like such a dumb a$$ for not figuring this out... I have a div with ID head and width 100%; In that div there are 4 elements, 2 images and two header ( h1 and h2 ) elements. The two gifs are positioned absolutely one top:0;left:0; and one top:0;right:0; The parent div is set to min-height & height of 160px; The height of the images. In firefox they display where you would expect them, top right and left corners. In ie 5,5.5, 6 and 7 they just don't display at all. Here is some code: CSS Code: Original - CSS Code #head{ text-align:center; clear:both; width:100%; min-width:100%; max-width:100%; min-height:160px; height:160px; } #img1{ position:absolute;top:0;left:0; } #img2{ position:absolute;top:0;right:0; } #head1{ clear:none; width:100%; min-width:100%; max-width:100%; } #head2{ clear:left; margin:0; width:100%; min-width:100%; max-width:100%; }
#head{
HTML4strict Code: Original - HTML4strict Code <link type="text/css" rel="stylesheet" href="default.css" /> </head> <body> <div id="head"> <img id="img1" src="img1.gif" alt="an animated gif"> <h1 id="head1">h1</h1> <h2 id="head2">h2</h2> <img id="img2" src="img2.gif" alt="an animted gif"> </div> <link type="text/css" rel="stylesheet" href="default.css" /> Hey all I'm having a little trouble with my web site, which I have been attempting to make "css-based" and "tableless." The problem that I am having is that there are quite a few small but frusterating differences between how the page displays in IE and Mozilla Firefox (i tend to beleive that ie, the non-standards browser is wrong). Anyway, to the problem. If you view this site: http://trinity.killagraphix.com/index.php Css: http://trinity.killagraphix.com/theme.css (i didn't want to paste the whole file as it is quite large) In Internet explorer, you get a small margin between the Header image, and the rest of the content. This is not here viewing the same page in Mozilla. Also, in both browsers the menu background image is slightly above the center of the line. I think this is because the image is not as big as the line size, is there a way to make the image (which is a css background property) appear vertically-aligned to the center? Thanks in advance, sorry for the post length I need some assistance getting my site menu to display correctly on FF. It displays fine on IE. You can see an example of the page he http://www.gallery.vividusphoto.com. If viewed in FF, the menu table is touching the logo. In IE, the menu is aligned to the right. If I do an align="right" the "under construction" bar goes up under the logo/menu in FF and the menu is moved to the correct position all while IE is unchanged. Any help is greatly appriciated. Code:
@charset "utf-8";
/* CSS Document */
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
background-color: #333333;
}
.vividus #container {
width: 46em;
margin: 20px auto; /* the auto margins (in conjunction with a width) center the page */
text-align: left; /* this overrides the text-align: center on the body element. */
}
.vividus #mainContent {
padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
background: #333333;
height: 30em;
}
.vividus #headerContent {
width: 46em;
text-align: right;
color: #CCCCCC;
}
.vividus #footerContent {
width: 46em;
padding: 10px 0 0 0;
text-align: left;
color: #CCCCCC;
font: 75% Georgia, "Times New Roman", Times, serif;
}
.vividus #menu {
width: 30em;
border: 0;
margin: 15px 0 5px 0;
text-align: right;
font: 75% Georgia, "Times New Roman", Times, serif;
}
a:link {
color: #CCCCCC;
text-decoration: none;
}
a:visited {
color: #CCCCCC;
text-decoration: none;
}
.login {
background: #000000;
}
.login a:hover {
text-decoration: none;
color: #999999;
}
.newsBanner a:hover {
color:#FFFFFF;
}
.vividus #newsBanner {
background: #666666;
padding: 7px 15px 7px 5px;
font-family: Georgia, "Times New Roman", Times, serif;
color: #CCCCCC;
}
.vividus #realContent {
background: #FFFFFF;
margin: 10px 0 0 0;
height: 30em;
padding: 10px 15px 10px 15px;
}
.vividus #realContentHome {
background: #666666;
margin: 10px 0 0 0;
height: 30em;
padding: 10px 10px 10px 10px;
}
.vividus #bodyHeadline {
color: #000000;
font-family:Georgia, "Times New Roman", Times, serif;
font-size: .8em;
padding: 10px 0 0 0;
}
.vividus #bodyText {
color: #000000;
font-family:Georgia, "Times New Roman", Times, serif;
font-size: .8em;
}
.vividus #loginForm {
padding: 5px 0 5px 0;
border: 1px solid #000000;
}
.vividus #bodyHeader {
font-size: 2em;
font-family: Georgia, "Times New Roman", Times, serif;
}
.floatright {
float: right;
margin: 10px 0 10px 10px;
}
.vividus #imgAbout {
height: 30em;
background: top right no-repeat url(../images/about_img.jpg);
}
.vividus #bodyHeadlineAbout {
color: #000000;
font-family:Georgia, "Times New Roman", Times, serif;
font-size: .8em;
padding: 10px 0 0 0;
width: 35em;
}
.vividus #error {
color: #FF0000;
font-family:Georgia, "Times New Roman", Times, serif;
font-size: .8em;
padding: 10px 0 0 0;
width: 35em;
}
.green {
background:#333333;
margin: 0px 6px 6px 6px;
border:1px solid #3b6e22;
height:24px;
line-height:14px;
color:#FFFFFF;
font-size:12px;
font-family:Georgia, "Times New Roman", Times, serif;
margin-right:10px;
display:inline-block;
text-decoration:none;
}
.login2 {
width: 200px;
font-size: 1.1em;
font-family:Georgia, "Times New Roman", Times, serif;
background-color: #FFFFFF;
color: #102132;
border: 1px solid #284279;
}
Hi guys, Just a quickie , I was looking at a site I produced in Netscape Navigator 7 and noticed a problem. I have a left hand nav that expands to show a sub Nav on mouse over. When moving your mouse off the menu item onto another one the previous menu closes (unless it's the page your looking at) Simple right? - well I noticed in NN7 that the display:none; I use to close the menu does not seem to work. No error, just doesn't work. Does display:none; not work in NN7 then? Is there a way arround it? Cheers, Daz Edit: Nevermind, I fixed my problem by working through each issue that the W3C validation service gave me, and fixing each one. It works in Internet Explorer now. Thanks for your time anyway. Peace, Pete Zaria. Hi there, thanks in advanced for any help. I have an xls file that is diplayed in my index page... however, when I view the index.htm locally is applies to the css style to my xls file perfectly. In both IE and Firefox.. however when I upload the file to my server IE displays it correctly, however FireFox doesnt. XSL file Code: <?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/TR/xhtml1/strict">
<xsl:template match="/">
<html>
<body>
<link media="all" rel="Stylesheet" type="text/css" href="css/schedule.css" />
<div class="stitle">Schedule</div>
<xsl:for-each select="SCHEDULE">
<div class="date">
<xsl:value-of select="DATE" />
</div>
</xsl:for-each>
<div class="schedule">
<xsl:for-each select="SCHEDULE/SHOW">
<div>
<div class="stime">
<xsl:value-of select="STIME" />
</div>
<div class="etime">
<xsl:value-of select="ETIME" />
</div>
<div class="title">
<xsl:value-of select="TITLE" />
</div>
<div class="description">
<xsl:value-of select="DESCRIPTION" />
</div>
<br />
</div>
</xsl:for-each>
</div>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
any ideas? and also it doesnt display this part of the xsl file on the web at all. Code: <div class="stitle">Schedule</div> thanks steve Hello, I am trying to make a website www.jazzsurlaplage.ch/2007/home.php (sorry for the french script over there) Here is the issue : One Firefox or IE 7, the partners box appears to the right side of the page, whereas on IE 6, it appears way at the bottom. you can check out the html source on the page itself (I've written it, not generated, so it must be pretty easy to get) and the css is over here : www.jazzsurlaplage.ch/2007/style.css Here is the part in the file where I define the side box : Code: /*===========SIDE NAVIGATION==================*/
#sideinfo{
left:600px;
width:200px;
position: relative;
margin-top:3px;
margin-bottom:0px;
}
.sidebox{
margin:0px 0px 0px 0px;
padding:15px 0px 0px 0px;
width:200px;
height:30px;
position:relative;
background:transparent url(images/sidehead.jpg) left top no-repeat;
}
.sidebox .sidebody{
position:relative;
padding:0px 10px 0px 10px;
background:url(images/sidebody.jpg) left top repeat-y;
margin-bottom:0px;
text-align:center;
}
.sidebox .sidefooter{
position:relative;
height:30px;
width:200px;
margin-top:0px;
background:url(images/sidefoot.jpg) left top no-repeat;
}
/*============================END SIDE BLOCK===========================*/
/
Here is the part in the html file where I insert the box : Code: <? //sidebar echo '<div id="sideinfo">'; echo '<div class="sidebox">'; echo '<div class="sidebody">'; echo '<img src="images/partenaires.jpg" />'; echo '<br />'; echo '<img src="images/partenaires/arg.jpg" />'; echo '<br />'; echo '<img src="images/partenaires/chatnoir.jpg" />'; echo '<br />'; echo '<img src="images/partenaires/coheran.jpg" />'; echo '<br />'; echo '<img src="images/partenaires/heineken.jpg" />'; echo '<br />'; echo '<img src="images/partenaires/semeuse.jpg" />'; echo '<br />'; echo '<img src="images/partenaires/jardinnerie.jpg" />'; echo '<br />'; echo '<img src="images/partenaires/raiffeisen.jpg" width="130"/>'; echo '<br />'; echo '<img src="images/partenaires/aurelys.jpg" width="130"/>'; echo '<br />'; echo '<img src="images/partenaires/mb.jpg" width="130"/>'; echo '</div>'; echo '<div class="sidefooter"></div>'; echo '</div>'; echo '</div>'; ?> What do I do, and where can I get more info on these kind of issues ? Thanks, Manojo Hello, my code works fine on my MAC browsers, but on my PC, IE6 browser, the buttons underneath the body of the page don't align. Here's the site: http://www.caillouette.com/Utilitrek/three/ Here's the CSS:http://www.caillouette.com/Utilitrek/three/style2.css Can someone tell me if this site looks okay in IE 7? I can't download IE 7 because of some technical quirk on my computer. And if they don't align in IE 7, please tell me what I should do. thanks -Sean intrigue.net -- please copy and paste (link not allowed here since I'm a new member) HTML & CSS both validate with no errors. The page displays correctly in Opera and Firefox, but in IE... 7+ does not color the menu (white), making it invisible <7 displays only half of the page I would love any assistance at all in getting this resolved (aside from bombing MS) Thanks in advance. -=-TS Code:
<!-- #Include virtual="/webcontent/doctype.txt" -->
<html>
<head>
<!-- #Include virtual="/tagsm.htm" -->
<!-- #Include virtual="/webcontent/cssinclude.htm" -->
<title>EPIC Performance</title>
<SCRIPT LANGUAGE="JavaScript" SRC="/webcontent/nav.js">
</SCRIPT>
</head>
<body>
<div class="wrapper">
<div class="lefthandnav">
<div class="headerimgleft">
EPIC LOGO
</div>
<div class="bl"><div class="br"><div class="tl"><div class="tr">
<a href="index.shtml">Home </a><br/>
<a href="login.asp">Log In </a><br/>
<a href="shopping.asp">Products</a><br/>
<a href="history.shtml">History</a><br/>
<a href="podcasts.shtml">Podcasts</a><br />
<a href="news.asp">News</a><br />
<a href="faq.asp">FAQ</a><br />
<a href="contact.shtm l">Contact Us</a><br/>
</div></div></div></div>
<div class="clear"> </div>
<div class="bl"><div class="br"><div class="tl"><div class="tr">
<b>Sponsors</b><br/><br/>
<p><img src="/images/PowerLift_logo.jpg"></p>
<p><img src="/images/Uesaka_logo.jpg"></p>
</div></div></div></div>
<div class="clear"> </div>
<div class="bl"><div class="br"><div class="tl"><div class="tr">
<b>EPIC Athletic Performance Inc.</b><br/>
P.O Box 61689<br/>
Colorado Springs, CO 80906<br/>
<b>epicindex.com</b>
</div></div></div></div>
<div class="clear"> </div>
</div>
<div class="righthandnav">
<hr class="topline"/>
<h2 class="headingtitle">Evaluate and Improve Athletic
Performance</h2>
<hr class="topline"/>
<div id="menu">
<dl>
<dt onmouseover="javascript:montre('smenu5');">Testing</dt>
<dd id="smenu5">
<ul>
<li><a href="#">Talent Identification</a></li>
<li><a href="#">Big 33</a></li>
<li><a href="#">Test Procedures</a></li>
<li><a href="#">Test Equipment</a></li>
<li><a href="#">Test Card</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu1');">Evaluation </dt>
<dd id="smenu1">
<ul>
<li><a href="#">Five Star Rating</a></li>
<li><a href="#">Vertical Jump Index</a></li>
<li><a href="#">Talent Identification Index</a></li>
<li><a href="#">Individual Index</a></li>
<li><a href="#">Multiple Test History</a></li>
<li><a href="#">Team Data</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu2');">Goals</dt>
<dd id="smenu2">
<ul>
<li><a href="#">Setting Goals</a></li>
<li><a href="#">Six Weeks</a></li>
<li><a href="#">High School</a></li>
<li><a href="#">College</a></li>
<li><a href="#">Pyramid Poster</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu3');">Program</dt>
<dd id="smenu3">
<ul>
<li><a href="#">Selecting a Program</a></li>
<li><a href="#">Strength Disk</a></li>
<li><a href="#">Books</a></li>
<li><a href="#">CD's</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">Posters</a></li>
<li><a href="#">Nutrition</a></li>
<li><a href="#">Make the Play Clinic</a></li>
<li><a href="#">Performance Speakers</a></li>
<li><a href="#">Program Equipment</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu4');">Equipment</dt>
<dd id="smenu4">
<ul>
<li><a href="#">Program Equipment</a></li>
<li><a href="#">Testing Equipment</a></li>
<li><a href="#">Clothing</a></li>
</ul>
</dd>
</dl>
</div>
</div>
</div>
</body>
</html>
the problem is when you look at the website in mozilla and IE I like the way it looks in mozilla but when you look in IE the top navigation is not aligning properly there is a problem with the HR tag here is the CSS code Code:
body
{
margin: 0;
padding: 0;
font-family: arial;
color: #000;
}
.wrapper {
width: 900px;
height:605px;
}
.lefthandnav
{
float: left;
width: 145px;
background-color:white;
padding:0px 5px 0px 0px;
}
.righthandnav
{
float: left;
width: 745px;
background-color:white;
padding: 0px 0px 0px 5px
}
.headerimgleft
{
height:75px;
}
.clearing
{
clear:both;
}
.headingtitle
{
font-weight: bold;
font-size: 15;
text-align:center;
}
.topline
{
margin: 0;
padding: 0;
width:94.3%;
margin:0px;
color: #CC0000;
background-color: #CC0000;
height: 5px;
}
.bl {background: url(bl.gif) 0 100% no-repeat #e68200;}
.br {background: url(br.gif) 100% 100% no-repeat}
.tl {background: url(tl.gif) 0 0 no-repeat}
.tr {background: url(tr.gif) 100% 0 no-repeat; text-align:center;padding:5px}
.clear {font-size: 1px; height: 1px}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
padding:5px 0px 0px 0px;
}
#menu dl {
float: left;
width: 8.7em;
margin: 0 1px;
}
#menu dt {
cursor: pointer;
text-align: left;
font-weight: bold;
background: #CC0000;
border: 1px solid gray;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: left;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray;
}
a {text-decoration: none;
color: black;
color: #222;
}
any idea why its doing like that todd Hi Everyone, I can't get my background image to display in Firefox the html looks like this: Code: <div id="textBack"> <div id="leftSide"></div> <div id="centerText"> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br </div> <div id="rightSide"></div> </div> Here is my CSS: Code: #textBack
{
background:url(images/textBack.gif);
background-repeat:repeat-y;
width:902px;
height:inherit;
position:relative;
}
#leftSide
{
width:180px;
position:relative;
float:right;
}
#rightSide
{
width:180px;
position:relative;
float:right;
}
#centerText
{
width:540px;
position:relative;
float:right;
}
Can anyone tell me what it is I'm doing wrong? I would greatly appreciate it. Thanks. Hi there www/argyllplotsforsale/co/uk I am currently building a website. I managed to get the CSS working before I uploaded it on the server. I have a header image above the orange Nav Bar. Soon as I uploaded it to the server it doesn't display and I am so confused. The style sheet in question is argyllplotsforsale/co/uk/style.css I cannot understand why the image is not displaying. Help would be greatly appreciated. Thanks Cakeface |
|||||||