|
CSS - Specifying Text Size In Select List
how can you specify a new font size in a select list. I need to make the items appearing in that list smaller than they already are.
Similar TutorialsHi Is it possible to set the size of a <select> box? I have a multiple selection box and I'd like to make it wider than the items it is showing. Purely cosmetic, but I'd like to do it if poss. Thanks Hello, I am a current beginner to the web design game, and I am currently making my first website using CSS. As you may already know, I am having difficulties rendering my web site in Internet Explorer 7/8. My two main problems a 1.) IE won't resize the font size that I need to display my navigation bar correctly 2.) IE is positioning my wrapper slightly left of center pushing my navigation list off the template Here is a link to my page http://www.kyjocro.com/IAO/navproblem.html Here is the HTML HTML Code: <html> <head> <title>Title</title> <html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="styletest.css" rel="stylesheet" type="text/css"> </head> <body> <div id="wrapper"> <div id="container"> <div id="top"></div> <div id="bod"> <div id="wrapHeader"> <div class="headerLeft"></div> <div class="headerRight"><p>Call Now 888-467-6650</p></div> </div> <div id="navWrap"> <ul id="navigation"> <li><a href="#"><span class="currentTab">Independent Agents Online</span></a></li> <li><a href="#"><span>Link</span></a> <ul> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> </ul> </li> <li><a href="#"><span>Link</span></a> <ul> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link </a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> </ul> </li> <li><a href="#"><span>Link</span></a> <ul> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> </ul> </li> <li><a href="#"><span>Link</span></a> <ul> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> </ul> </li> <li><a href="#"><span>Link</span></a> <ul> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> </ul> </li> <li><a href="#"><span>Information & Insurance Resource Center</span></a> <ul> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> </ul> </li> <li><a href="#"><span>Link</span></a></li> </ul> </div> <div id="contentMain"> <h2>Welcome to Independent Agents Online!</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis ante volutpat nunc adipiscing at dictum orci mollis. Proin nec tincidunt urna. Phasellus placerat lorem at enim auctor nec imperdiet lectus tempor. Nullam arcu nisi, tristique in vestibulum et, suscipit at velit. Nunc ligula massa, fringilla laoreet pellentesque a, consequat at eros. Suspendisse sem justo, ultrices ac hendrerit eget, porttitor eget arcu. Cras volutpat accumsan odio ut cursus. Integer a ipsum at libero semper eleifend at ac mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ultrices, augue sed rhoncus auctor, ligula lorem rutrum enim, nec congue ipsum mi eu massa. Vestibulum imperdiet interdum sodales. Ut condimentum consequat fringilla. Proin vestibulum porttitor porta. Integer elit turpis, sodales lacinia blandit sed, egestas at augue. Vestibulum ut felis sed eros pharetra interdum nec ut sapien.</p> </div> <div id="wrapColumn"> <div id="columnLeft"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis ante volutpat nunc adipiscing at dictum orci mollis. Proin nec tincidunt urna. Phasellus placerat lorem at enim auctor nec imperdiet lectus tempor. Nullam arcu nisi, tristique in vestibulum et, suscipit at velit. <center><img src="images/handshake.jpg" width="150" height="150" alt="" border="0" /></center> </div> <div id="columnMid"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis ante volutpat nunc adipiscing at dictum orci mollis. Proin nec tincidunt urna. Phasellus placerat lorem at enim auctor nec imperdiet lectus tempor. Nullam arcu nisi, tristique in vestibulum et, suscipit at velit. </div> <div id="columnRight"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis ante volutpat nunc adipiscing at dictum orci mollis. Proin nec tincidunt urna. Phasellus placerat lorem at enim auctor nec imperdiet lectus tempor. Nullam arcu nisi, tristique in vestibulum et, suscipit at velit. Nunc ligula massa, fringilla laoreet pellentesque a, consequat at eros. Suspendisse sem justo, ultrices ac hendrerit eget, porttitor eget arcu. </div> </div> </div> <div id="bottom"></div> <div id="footer">Site Map LegalAbout Us</p></div> </div> </div> </body> </html> Here is the CSS http://www.kyjocro.com/IAO/styletest.css Code:
body{ margin:0; padding:0; background: rgb(26,124,54); background-image:url(images/bg.png); background-repeat: repeat-x; text-align:center; /*IE POS Comp.*/}
h2{ font-family:Verdana, Arial, Helvetica, sans-serif; font-size:18px; color:#FF0000; padding: 4px; padding-left: 0px; text-align:center;}
img { border:none;}
/*Containers*/
#wrapper{margin:0 auto; padding:0; height:auto; display:block; background-image: url(images/bg.png) repeat-x;}
#container{ margin:0 auto; padding:0; width:960px; height:100%;}
#top{ margin:10px 0 0 0; padding:0; float:left; display:block; width:100%; height:22px; background-image:url(images/top.png); background-repeat:no-repeat; text-align:left;}
#bod{ margin:0; padding:0; float:left; display:block; width:100%; height:auto; background-image:url(images/bgc.png); background-repeat:repeat-y; text-align:left;}
#bottom{ margin:0; padding:0; float:left; display:block; width:100%; height:22px; background-image:url(images/bottom.png); background-repeat:no-repeat; text-align:left;}
/*Logo Header*/
#wrapHeader{margin:0px auto; width: 960px; height:128px; background: url(images/bgc.png) repeat-y;}
.headerLeft{width:566px; float:left; background:url(images/logo.png) no-repeat; height:128px;}
.headerRight{width:382px; float:left; background:url(images/headerRight.jpg) no-repeat; height:128px;}
.headerRight p{ font-family:"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; font-size:24px; color:#FF0000; padding:60px 0 0 100px;}
/*Navigation Bar Code*/
#navWrap {margin: 0 auto; width: 940px; font-size: 12px;}
#navigation {overflow: visible; font-size: 13px; font-family: verdana, arial, helvetica, sans-serif; padding:1px; width: 960px; margin: 0 auto; font-variant: small-caps; }
#navigation li { float: left; list-style: none; background-color: rgb(26,124,54);repeat-x; width: 115px; border: 1px solid black;}
#navigation a {display: block; background-position: top right; background-repeat: no-repeat; color: white; text-decoration: none; font-weight: bold; }
#navigation span {display: block; background: url(images/navbg.png) repeat-x; padding: 1px 0px; text-align: center; min-height: 50px; font-variant: small-caps; height: 50px;}
#navigation span.currentTab {background: url(images/navbghover.png) repeat-x; border-bottom:none;}
#navigation a:hover {background-position: right -198px; }
#navigation a:hover span {background-position: 0 -198px; background-color: red; background: url(images/navbghover.png) repeat-x; }
#navigation li ul {position: absolute; width: 115px; left: -999em; margin-left: -41px; font-size: 12px; color: black; font-weight: normal; font-variant: normal;}
#navigation li ul a, #navigation li ul a:link {background-image: none; padding: 2px 0px; width: 115px; background-color: rgb(173,204,239); color: black;}
#navigation li ul a:hover {background-color: rgb(128,187,150);}
#navigation li:hover ul, #navigation li.sfhover ul {left: auto;}
.contactBreak p {line-height: 3px;}
/*Main Body*/
#contentMain {margin: 0px auto; width: 960px; float: left; padding: 10px;}
#contentMain p {padding: 10px 30px; text-indent: 30px;}
#contentMain img {float: left; padding: 0px 10px;}
.getQuote {width: 200px; float:left; padding:5px; border: 1px solid black;}
.getInfo {width: 200px; float:left; padding:5px; border: 1px solid black;}
.getManage {width:200px; float:left; padding 5px; border: 1px solid black;}
/*COLUMN WRAPPER AND DIVS */
#wrapColumn{
overflow: auto;
float: left;
width:960px;
margin: 0px auto;
background-image: url(images/bgc.png);
}
#columnLeft {
border-top: 2px solid #046004;
padding: 10px;
margin-left: 10px;
width:230px;
float: left;
background-color:white;
min-height: 600px;
}
#columnMid {
border-top: 2px solid #046004;
padding: 10px;
width: 404px;
float: left;
background-color: white;
min-height: 600px;
}
#columnRight {
border-top: 2px solid #046004;
padding: 10px;
width:230px;
float: left;
background-color:white;
min-height: 600px;
}
/* Footer Copyright Legal*/
#footer {margin: 0 auto; display:inline-block;}
I realize that my drop down doesn't work in IE either, but that might be too complicated for me to understand at this point since I kind of frankensteined it from various examples. Much thanks in advance I need to know how to format a selection list, what I want to do is change the color of the arrow how do I do this? Tim Is there any way to add a horizontal scrollbar to a SELECT listbox that works in both Mozilla and IE? I have a mutiple-select enabled box with about 50 items, only displaying 10 rows, and some of the rows are really wide because the text is very lengthy. I'd like to add a horizontal scrollbar to the SELECT box in addition to the vertical scrollbar. Here's what I've tried - I'm running Windows XP and testing with Firefox 1.0 and IE 6.0.2. a) Adding various overflow styles, like overflow:scroll and overflow-x:scroll. None of these cause the horizontal scrollbar to show up. b) Adding the mozilla "-moz-scrollbars-horizontal" style, which doesn't add it even in Mozilla. c) Surrounding the SELECT inside a DIV tag, with scrollbars. This works, and IE is even smart enough to remove the vertical scrollbars on the SELECT listbox if I make it tall enough to show all choices at once. However, in Mozilla, the vertical scrollbar stays visible even when it's not needed. So in this case I end up with two vertical scrollbars - one for the SELECT and one for the DIV. I tried various things to disable the Mozilla vertical scrollbar but that didn't work either. So basically I'm looking for a way to either: a) Add a horizontal scrollbar to a SELECT that works in both browsers. b) Or, a way to disable the vertical scrollbar in the SELECT object in Mozilla Firefox, so that I can use the DIV trick. Any clues? can someone help me with this? here is the page&css I have been working on... the page file the css file I might be silly to use a template that I did on illustrator (with all the banner, boxes and navbar read and just use that as my container background. then I made some transparent boxes for puting in text, images or form elements. Is that why I am not able to select any other those things on the site? this is the first time I try using css to make the whole webpage, so I would appreciate any guidance...thanks!! I have a website created with absolute positioning. So when someone increases the font of the text on the page (with the view menu for the browser), some of my text may run outside of the images that they are placed over. I had this problem with IE as well as firefox, but set all of the text with font-size in my CSS file. Now IE works perfectly, but in firefox, the size of the text can still be increased, thus, making the text expand outside of the images. How can I prevent this in firefox? Second question... is there a way to set the size of the actual bullets themselves to a set size so they dont increase/decrease? I'm referring to the bullets, and not the text beside the bullets... I may go with images for the bullets, but was trying to prevent that. Any help would be appreciated. Thanks. Hi all, Just an opinion I would like to get from the folks here. For example: Let say you create a navigation bar thats contained within a div. You make a background image that is gradient from top to middle to bottom - dark/light/dark. You add your text links and align them over the middle lighter area of the div background, looks great. Now do you compensate for someone using a different text size? Maybe creating 3 different DIVS - two to fade from dark to light both ways, and the middle one being the light color of the gradient to hold the text? Or do you just forget about it and let the background repeat if the font size changes? This is one of those pet peave things of mine, where I'd create images for links and have the peace of mind that my design won't be broken. I made a new site design in pure css, that in my opinion looks sweet, but I'm ready to trash it and go back to a table/image heavy design because I can't have absolute control of how it will look with all the variables considered. Would love to hear opinions! I've been using a 3 column fluid layout and so far so good - works in all browsers and resolutions with some standard hacks... Except with huge text sizes in Firefox. I've used ems all the way and was wondering what the majority of people do when considering how much work to put in to ensure that people with really really poor eyesight can actually get the same experience as everyone else. I tried expanding the text size on dozens of major websites and it appears there probably is some limit where it's not worth considering fixing overflowing divs on large text size. So what does everyone else do? Is this the right place to ask? I'm in need of help in this CSS coding. I used class to divine different font styles in the same page. But my question is how to set a standard or force a fix font size to the browser. HEre is an example of a website whereby when I use the IE's View -> Text Size -> Largest or Smallest option, it doesn't change the font size! http://www.htmlite.com I've looked at its css file and I still can't find a clue to which code which makes the font size stays as it is. Anyone can help, please?? Hi I'm working ona site at the moment: (URL address blocked: See forum rules) The site is fine up to now, however when I change the size of the text in my browser settings to larger in firefox it ruins the look of the page, ie it puts everything out. Is there a way I can design the page elements so that they can accommodate larger text size and expand? At the moment all of the elements use jpeg images created in photoshop. Thanks for any help! Hi, This is only happens in IE, in firefox (the only 2 browsers I tested) works fine. http://nazgulled.no.sapo.pt/test.html There's only one image inside the <div> tag, and I have set that div tag style to have a 10px height. But that doesn't work on IE... it's like there were some spaces wich because of the font-size it makes the height be more than 10px.... I wanted to fix that but how can I do it? One solution is to make the div tag like this: Code: <div id="test"><img src="spect.gif" width="300" height="10" /></div> instead of this: Code: <div id="test"> <img src="spect.gif" width="300" height="10" /> </div> But I don't want to fix it that way... Any help would be hot, thanks. Hey, wondering if any of you could help me with regards to syntax needed in CSS (im guessing) to make text fields in a form taller and wider? Thanks,Sean I have this problem making this menu and I have multible <h1></h1> on each title of the of stuff. It seems that the text gets bigger and bigger then when its to big then the text in the <h1> goes back smaller. Is there a way to fix this? Here is my code. Code: h1 { font-family: cursive, sans serif;
font-weight: normal; font-size: 200%; font-style: cursive;}
EDIT:The strange thing is that I know of this wird effect only happens in IE. Thank you, sorry to be a bother but I do want to have a good first impression on my site that I am working for Ernies Bar & Grill at my town. Hi all, I would like to get the user to be able to change their background/and or text size at the click of a button. I was going to try and use multiple sheets, but am not sure of the most effective way of doing this. For an example of what I mean, search for "Disability Rights Commision" on Google. I am having few html pages with external CSS used. Now when i want to change the brower text using View->Text size, its not allowing. Yes, i can change the font size in my CSS but I dont want all should see in the same font. Few people viewing those pages may not like that font. So, Can any body help me to find out how to change the text size of an html page having CSS. Hello: I am building a website for a broad audience. I need there to be an option for text to be resized for those who have trouble with reading screens. I am trying to have the text on HTML pages be changeable through CSS. Two examples I offer are (URL address blocked: See forum rules) and (URL address blocked: See forum rules) On the top right corner of the screen, there are options to change the text size without switching to a new HTML page. I believe this is done using CSS (perhaps Live StyleSheet Selector). I'm not really sure. If anyone can help me, I would really appreciate it. Thanks! Deanna hi all ! I want to know how I can change the text size and color for a button created inside my page (only for the button the rest should remain the same). The data and button are created in PHP so it looks something like: Code: <div class="column3">
<div class="padding">
<?php if( $this->countModules('right') ): ?>
<jdoc:include type="modules" name="right" style="xhtml" />
<?php endif; ?>
</div>
And css for that part of the page is: Code: #index .box .column3 {width:252px;}
Hi, Can anyone recommend how best to how to dynamically constrain amount of Text/Content in a DIV area that can vary in size?? That is, say you have: (a) a content (DIV) area on your view that can expand/contract depending upon browser size ( i.e. when someone is re-sizing the browser window) and (b) dynamic text/content that is to be displayed, based upon user input - e.g. image a defined area/size for several user comments for example. Users can create their own comments, but you only want them to be able to take up a given amount of screen resource, and then perhaps have a "...more" link at the bottom if they go over. How can I best setup this up? e.g. (1) How to setup the layout/CSS so that if more text / content is present in the DIV area that can be displayed that the DIV area doesn't expand due to the extra content the user put forward, and/or (2) Do I need to also complete this by programming what content comes out? E.g. in Ruby on Rails say then the question would be how to calculate how much text/content can fit in the current size of the DIV (noting browser re-sizing) so that you get the chance to put the "...more" link at the bottom? Hopefully this approach isn't required. Any other suggestions welcome that address what I'm trying to do are welcome, which is really offering a area for display of user feedback where each piece of feedback has a maximum area it can take on the main screen only, and also that browser re-sizing is possible. Tks Greg 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>
Hello, I am trying to make a select box (align:left) with link text (align:right) inline. I don't know what the best method would be to do this. I tried using li but it doesn't seem to be working. It looks like it should be simple but for the love of me... it's not working. Can you please show me how? |
|||||||