|
CSS - How Do I Change The Size Of A Checkbox Element?
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? Similar TutorialsHello all I need to display the Login info inside a DIV 'WELCOME <USER FIRST NAME AND LAST NAME>' i have set the width of the DIV and a font size - 16px but when the name length increases the design brakes One way of solving the issue is by applying some logic using scripts but i want to know that whether we can do anything using the same with CSS only Regards Anees Something for the css pros: Can anybody give me a hint on how to convert the following (table) based markup snippet to div-only markup? http://www.twosailors.net/test.html In all my tests I cannot get the rightmost cell expand so the whole menu gets it's total size. I do NOT want to convert the boxes to fixed width but keep them shrinkwrapping around the menu texts. Also, I do want a border around the boxes so any faking with background colors will not work either. Any ideas? Andreas Pardeike I have an unordered list that I'm making into a navigation menu. It's all working except for the first item in the list. I don't think I've missed anything but let me post the code and get a 2nd opinion. Thanks in advance for the help: Code:
@charset "utf-8";
/* CSS Document */
#wrapper
{
width: 700px;
position: absolute;
top: 50px;
left: 150px;
margin: 0px 0px 0px 100px;
}
body
{
background-image: url(images/bg1.png);
background-repeat: repeat;
margin:0 0 0 0;
}
#banner
{
height: 125px;
width: auto;
background-image:url(images/banner.jpg);
background-repeat:no-repeat;
}
#content
{
width: 400px;
position: static;
background-color: #e8caa6;
font-size: 18px;
margin: 0px 318px 0px 0px; /* 318px right 125px for centered */
padding: 10px 5px 10px 5px;
border-style:solid;
border-color:#000;
border-width:10px;
}
#movietable
{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#footer
{
padding: 0px 0px 0px 0px;
margin: 0px 50px 10px 50px;
text-align: center;
font-size: 14px;
}
#footer a
{
text-decoration: none;
color:#333;
font-weight:500;
}
#footer a:link
{
text-decoration:none;
}
#footer a:hover
{
text-decoration:none;
background:#d9d3c6;
}
#footer a:visit
{
text-decoration:none;
}
#nav ul
{
list-style: none;
width: 700px;
position: relative;
}
#nav span
{
display:inline;
}
#nav
{
height: 40px;
background-color: #8D5C22;
}
#nav li
{
float: left;
margin: 0 0.15em;
}
#nav li a
{
height: 40px;
line-height: 40px;
float: left;
width: 167px;
display: block;
/*border: 0.1em solid #dcdce9;*/
text-align: center;
}
a.home:link{ color: #FFF; text-decoration: none; font-size: 2.0em; font-weight: bold; }
a.home:hover{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.home:active{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.home:visited{ color: #FFF; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.restaurants:link{ color: #FFF; text-decoration: none; font-size: 2.0em; font-weight: bold; }
a.restaurants:hover{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.restaurants:active{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.restaurants:visited{ color: #FFF; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.servicearea:link{ color: #FFF; text-decoration: none; font-size: 2.0em; font-weight: bold; }
a.servicearea:hover{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.servicearea:active{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.servicearea:visited{ color: #FFF; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.contact:link{ color: #FFF; text-decoration:none; font-size: 2.0em; font-weight: bold; }
a.contact:hover{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.contact:active{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.contact:visited{ color: #FFF; font-size: 2.0em; font-weight: bold; text-decoration: none; }
Html Code:
<body>
<div id="wrapper">
<div id="banner">
<!-- blah -->
</div>
<div id="nav">
<ul id="navblock">
<li id="nav1"><a href="index.html" class="home"><span>Home</span></a></li>
<li id="nav2"><a href="rest.html" class="restaurants"><span>Restaurants</span></a></li>
<li id="nav3"><a href="area.html" class="servicearea"><span>Coverage</span></a></li>
<li id="nav4"><a href="contact.html" class="contact"><span>Contact</span></a></li>
</ul>
</div><!-- End Nav -->
You can check the site live here . <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> <!-- div.print { font-family: Arial, Helvetica, sans-serif; font-size: 2pt; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; text-transform: none; color: #FF3300; letter-spacing: normal; word-spacing: normal; } div.regular{ font-family: "Times New Roman", Times, serif; font-size: larger; font-style: normal; line-height: normal; font-weight: bold; font-variant: normal; text-transform: none; color:#006600; letter-spacing: normal; word-spacing: normal; text-decoration: underline; } --> </style> <script language="JavaScript"> function printerFriendly() { document.getElementById('div1').className = 'print'; } </script> </head> <body> <p><a href="javascriptrinterFriendly()">click here to change font</a></p> <div id="div1" class="regular"> <table id="tab1" width="100%" border="0" cellspacing="1" cellpadding="1"> <tr> <td>bla</td> <td>kla</td> <td>sal</td> <td>kdef</td> </tr> <tr> <td>iuwhdfqower</td> <td>ouresgopu</td> <td>uihwdrfpu</td> <td>uiwrhgfpuieroi</td> </tr> <tr> <td>oiiudefpuiwerv</td> <td>iufdgpiuwqerpoi</td> <td>iuergpuergipou</td> <td> </td> </tr> </table> <p class="print"> </p> </div> </body> </html> why is the font size not changing nor the color?? only the font changes when th link is clicked?? I know how to do this using Javascript, but I'm not sure if it can be done using CSS itself. I have a bunch if div tags and some anchor tags on my page. By default, the div tags are hidden, and when I mouseover an anchor, I would like a specific div to be displayed. Again, I can do this in Javascript, but would like to see if there is a CSS-only approach to this. Example HTML: Code: <div id="div1">Option1</div> <div id="div2">Option 2</div> <div id="div3">Option 3</div> <a id="link1" href="somepage.html"></a> <a id="link2" href="someotherpage.html"></a> <a id="link3" href="someotherpageentirely.html"></a> Example CSS: Code:
div#div1 div#div2 div#div3 {
display:none;
width:50px;
height:50px;
background-image: url(divimage.png);
}
a#link1 a#link2 a#link3 {
display:block;
width:100px;
height:100px;
background-image: url(myimage.png);
}
a#link1:hover a#link2:hover a#link3:hover
{
display:block;
width:120px;
height:120px;
background-image: url(myotherimage.png);
}
So in this instance, when one of the anchor tags is hovered over, I would like to change the associated (link1 -> div1, link2 -> div2, link3 -> div3) div CSS to change to be something like this: Code:
div#div1
{
display:block;
}
I realize I've generalized these CSS definitions and on my actual page I have individual CSS definitions for each anchor and div separately as they all differ slightly. Is there a way to do this using straight CSS or am I bound to Javascript in order to do this? Thanks! - skubik http://cad-design-engineering.com/New I double checked, and this page validates. (CSS and XHTML) The gray background on the right hand side - I can't adjust the width. When I do get a change, it breaks something - the links panel shifts to the bottom of the screen. Code:
#container
{
width: 737px;
height: 1%;
overflow: visible;
float: left;
padding: 4px 0 0 0;
margin-right: -185px;
}
This is the output from the Firefox Web Developer plugin: Code:
#container (line 147)
{
width: 737px;
height: 1%;
overflow: visible;
float: left;
padding-top: 4px;
padding-right-value: 0pt;
padding-bottom: 0pt;
padding-left-value: 0pt;
padding-left-ltr-source: physical;
padding-left-rtl-source: physical;
padding-right-ltr-source: physical;
padding-right-rtl-source: physical;
margin-right-value: -185px;
margin-right-ltr-source: physical;
margin-right-rtl-source: physical;
}
Not sure what I'm doing wrong. I've been perplexed for several days on this one. Thank you. I am creating a website that uses English and Japanese characters. The default font size I use for English characters displays the Japanese characters too small. I would like the Japanese characters to display in a certain size whenever and wherever they appear. I can't simply use classes because I have English and Japanese appearing in the same elements a lot of the time. Any help would be greatly appreciated. Thank you. I'm trying to resize links on hover but doing so they change their vertical alignment during hover. Is there a way to prevent this ? Basically I just want the text to be bottom aligned and stay that way on hover. "text-align: top" works, but thats not what I want. simple example: CSS: Code:
a:link, a:visited, a:active {
font-size: 1em;
}
a:hover {
font-size: 1.5em;
}
HTML: Code:
<div>
<a href="#">Text</a>
</div>
Hi, My page has 3 elements: one at the top(header banner), one in the middle (a middle content area) and one at the bottom (footer banner). Now I want those positions to remain intact regardless of the number of lines output in the middle element. The content is going to be determined at runtime by a server-side routine so I don't want to use a fixed positioning for the footer banner. I want it to be displayed at the bottom - after the middle content is displayed. And I want the middle content to be visible in the page i.e. I don't want a scroll area within the page. I have tried various approaches and read up on positioning but so far have not been able to do it using css. Any help is much appreciated. Jim I have an navigation menu that I am building as an unordered list. What I have is an image rollover that appears at the bottom of the navigation menu when the cursor hovers over one of the first level links by using a span within the link that has its display set to none, and then set to absolute positioned directly below the navigation menu on a:hover. Here is an example: Code:
<ul>
<li>
<a href="link1.html" id="link1">Link<span></span></a>
</li>
</ul>
.link a { some link height }
.link a span { display: none; }
.link a:hover span {
position: abolute;
top: (some link height * the number of links);
background-image: (some image url)
width: (image width)
height: (image height)
}
Appearance: ------ Link1 Link2 Link3 Link4 ------- ------- Rollover Image to appear here ------- The problem that I have is that since the rollover image is positioned absolutely, if the size of the list of links changes (IE with sub-links in the list) it slides under or over where I have the rollover image placed. IE ------ Link1 sublink1 sublink2 Link2 Link3 Link4 ------- will break my scheme. Is there a way to get the span within the link to show up relative to the bottom of the <ul> element, or at the bottom of an element that contains the whole shebang? If I cant get this to work, I'm going to be forced to adopt the existing tables/javascript based template for our site, and I'd hate hate hate to do that. thanks. Hi there, I'm completely new to CSS. I'm trying to do this more than one hour but can't get it right. Code: <font color='white'><font size='1' face=verdana size=1> I couldn't find the equivalent of this in CSS This is my last experiment but it doesn't seem to work either Code: fontstyle { color : #FFFFFF; font-family : verdana ; font-size :1;}
Thanks So when using Netscape 7.2 & Opera 7.5 and MSIE 6.0, How do you get a simple tag like body { font-size:small; } to be equal in all browsers? Setting IE Text Size to Medium, and Opera's Zoom to 100% (both defaults) and Netscape 7.2 to 120% (not the default) is one way, but is there a CSS way? By the way, the child element hack "body>div {property}" wasn't working no matter what I tried, by not working I mean to say Netscape never would read it or apply it. It appeared to be that Opera & IE need to read the same value while Netscape needs to apply a larger size to be equal to IE's and Opera's rendering. B I could see this as potentially being really easy to do or really hard to do. I'm hoping for the former. Suppose I have 3 divs, A, B, C and that I want the total width of A + B + C to equal the width of the screen. Suppose also that I want them to be inline. How can I have B to be a fixed width while A and C expand depending on the screen width (such that the width of A = the width of C)? Can anyone explain the difference between the two? For example, what is the difference between: this: element element {} div p { } and this: element > element { } div > p { } I don't understand it and have not found an explanation in tireless searching. Thx! I have a button which is drawn using css background-image and it has a hover effect using css a:hover. I also need to have a click state for this button, so that each time the button is clicked it switches between two different states (4 states total). Is this possible? I'm assuming this will probably require JavaScript which I have little experience. Thanks in advance for any help! 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; }
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. I want to change this: LIST-STYLE-TYPE: square; I want to show a picture in the place of that square. Can this be possible? |
|||||||