|
CSS - Formatting Form Option's?
Hi,
I am trying to format my forms option tags inside a select list (basically I want to create something like the quick forum jump on devshed). In my css is: PHP Code: SELECT.quickselect { background-color: #ffffff; width: 250px; height: 20px; font-family: verdana, arial, 'times new roman'; font-size: 10px; } OPTION.quickselectmain { font-weight: bold; color: #6D9500; background-color: #F2F2F2; } OPTION.quickselectsub { color: #595959; } And in my HTML is: Code: <select name="quickselect" class="quickselect"> <option name="Antiques" value="5" class="quickselectmain">Antiques</option> <option name="Antiques - Decorative" value="32" class="quickselectsub">Decorative</option> How come I cant apply any formatting to the option tag? Similar TutorialsForms are needed to submit values, of course. But they may also change the formatting on a page when included. If I want to include a form just to contain hidden input fields, or even include it otherwise for some other reason, it will affect formatting. Is there a way to disable all presentational effects caused by inserting a form tag? I'm assuming this would involve CSS. Skolem I am running amuck! know this should be basic, but Firefox and IE both handle the <h1> tags differently: 1) IE seems to put equal whitespace above and below the element 2) Firefox seems to put less whitespace AFTER the <h1> tag. Anyway to smooth this out so it displays close to similiar? My gratitude ahead of time... hi all, need one help from you.. i have to format a div tag which is generated dynamically.. if there are only 4-5 lines consists in that div it works fine, but the lines go out of bound it takes scroll bar overflow:auto; overflow-x:hidden; height:200px; in mozzila it works fine as the scroll bar comes inside the div tag... but in internet explorer .. the scroll bar goes out of the div tag.. can anybody help me... Hi, Really new to this css stuff and i'm sure i'll get a beratting for asking such a simple question but here goes... What i need is a cell with a linked word in it. Initial state is white background with blue text. On rollover i would like the whole cell to turn blue with white text. I'm sure this is simple but just need a point in the right direction. Thanks for any help Tom Hey guys, hit a problem with my div formatting in css. usig external style sheet with the two styles "header" and "regular". If i make the div class="regular" and then make the first line class="header" using the <a> tag without defining href (as it is not a link, and dont want it to be a paragraph). Then the content below the 1st line ends up superimposed over the 1st line. You understand what i mean? Hopefully this might be a common bug? Anyone know what is causing this? im using IE6.0 to check it for bugs. It is offline atm, as i am making it. but it can be made available if anyone needs to see it. Code: <div id="content" class="regular" style="top: 280px; background-color: F5DEB3; padding: 10px; padding-bottom: 0px;"> <a class="header">About New Zealand</a> <p>New Zealand is one of the most unique places in the world to dive. Its rich, nutrient-dense waters provide a home to a <a href="constructionpage.html" class="interlink">multitude</a> of exotic and amazing <a href="constructionpage.html" class="intralink">creatures.</a> Whilst many of the tropical wonders are summer visistors to our shores, there is an abundance of life all year round.</p> </div> Monkeewrench p.s sorry the code window is stuffed, first time using it, lol I posted a question about this in the HTML forum but maybe there is a CSS solution to my problem. I have a table that is filled with names from a database. It is filled with a first, middle , and last name. I want these to be displayed on one line and not put onto two lines. I have been using the <pre> tag but it makes my <td>'s two tall for my liking(only in IE). Is there something I can do make sure the name is displayed on one line and make sure the td is only as tall as the font that is used? Here's a snippet of the code. Code: <td><pre><a href="ViewProfile.pl?StudentID=$studentID[$x]">$firstName[$x] $middleInitial[$x] lastName[$x]</a></pre></td> I have a table whose class is "dogs" How do I make all the <tr> elements within the table dogs have a certain style and not all the <tr> elements on the page? Hello all, I'm trying to add digg stories to my site & want to format it with css. Digg says you can use CSS with the class names to customize the display. Havent use css before so I'm lost...if someone could hook me up with this I would sure appeciate it. I would like to be able to format the links and text differently. The code I want to use to add digg is: Code: <script language="JavaScript" src="(URL address blocked: See forum rules)/diggjs/front/tech_news/0" type="text/javascript"></script> I'm going to put it in a frame so just on a blank page. Thanx! I'm working on a project where the client wants a table of data, and one column of data is money, such as "$1.23". The client would like all the "$" aligned on the left side of the column and all the amounts aligned on the right side. Now I could do something like: Code: <td> <div style="float:left">$</div> <div style="float:right">1.23</div> <td> (Obviously I'd change those to classes.) That works, but it seems sloppy, so many extra divs for a tiny little formatting thing. I could also put the "$" into a background image, but then you lose something if you're using a screen reader. I looked into doing something with :first-letter, but there's no way to say "everything else but the first letter float right" without wrapping the amount in a span or div, which still seems sloppy to me. Is there another way to approach this, CSS or otherwise? Hi, I need help with formatting a calendar using CSS. Here's a list of the goals I'm trying to achieve: The day numbers are positioned in the top right corner of the cell. The event text is centered both vertically and horizontally within each cell. The day number doesn't affect the centering of the event text (i.e., it's as if it has zero width). I need to be able specify a minimum width and height for the cells. I have a png of the effect I am trying to achieve, but unfortunately I can't post it being a brand-new member. If seeing it would help, let me know and I guess I can PM the url to you. Update: Here's the link to the png: Code: http://tapestryfolkdance.org/images/calendar.png Below is what I've tried. However, the event text is not centered vertically within each cell, and the first couple of events are not centered horizontally in the cell. It is fine if the event text overlaps with the day number. Code:
<html><head><style>
table { text-align: center; border-style: solid; border-width: medium; border-spacing: 0px }
td { border-style: solid; border-width: thin; border-color: black; }
.day {
margin: 0px; text-align: center; font-style: bold;
border-style: solid; border-width: thin; border-spacing: 1px;
font-size: large; color: black;
float: right;
}
td {
text-align: center; color: black; font-size: small; min-width: 60px; min-height: 120px;
vertical-align: top;
}
</style>
</head><body>
<table>
<tr>
<td>
<div class=day>2</div>event 1<br></td>
<td>
<div class=day>3</div>event 1<br>event 2<br>event 3<br></td>
<td>
<div class=day>4</div>event 1<br></td>
<td>
<div class=day>5</div>event 1<br>event 2<br>event 3<br></td>
<td>
<span class=day>6</span>event 1<br>event 2<br>event 3<br></td>
<td>
<span class=day>7</span>event 1<br>event 2<br></td>
<td>
<div class=day>8</div>event 1<br></td>
</tr>
<tr>
<td>
<div class=day>9</div>event 1<br>event 2<br>event 3<br></td>
<td>
<div class=day>10</div>event 1<br>event 2<br>event 3<br></td>
<td>
<div class=day>11</div>event 1<br></td>
<td>
<div class=day>12</div>event 1<br>event 2<br>event 3<br></td>
<td>
<div class=day>13</div>event 1<br></td>
<td>
<div class=day>14</div>event 1<br>event 2<br>event 3<br></td>
<td>
<div class=day>15</div>event 1<br>event 2<br></td>
</tr>
</table>
</body>
</html>
I've run up against a css problem with the homepage on this site under development. In IE8 the right column in the main content area contains an image swapper and the column pushes out beyond the page content area. It displays properly in FF3. I've tried a variety of margin, padding and width changes without success. How do I correct this for all IE and FF browsers? To avoid bloat I have not included the stylesheet here, but it can be viewed in FF. Yes, this is actually a CSS question, despite me providing HTML code... I'm at my wit's end with IE. In the code below, "outer" is losing all formatting--background color, border, you name it, it's gone. html4strict Code: Original - html4strict Code <div id="outer" style="width: 410px;"> <div id="left" style="float: left; width: 200px;"><p>stuff</p></div> <div id="right" style="float: right; width: 200px;"><p>stuff</p></div> <div style="clear:both; font-size: 0; height: 0; width: 0;">&nbps;</div> </div> <div id="outer" style="width: 410px;"> My stylesheet is set up just fine (works fine in Firefox), so I assume this is one of those weird float bugs in IE. The thing is, it was rendering fine until I added another <div> in an entirely different location. Yes, it's all formatted correctly and validates XHTML 1.0 strict. Am I missing something, or is a known bug that I can't find documented, or does anyone have a suggestion for an alternate approach? Thanks all! Ok, so I'm having some problems getting my site to look how I want. The formatting appears correctly in all browsers (I think) but in IE it's horribly messed up. This is my first site that I'm making just to learn some things and I don't know much CSS at all. I've tried reading up but am not sure how to properly use CSS to make this work cross browser capable. Basically, I want my text box search bar properly centered along with my logo and the "advanced search" and "preferences" links. I painted over some stuff for privacy heh. In FireFox, it looks like this ( http://img261.imageshack.us/img261/9625/ex1hu0.jpg ) but in IE, it looks like this ( http://img523.imageshack.us/img523/4631/ex2sm7.jpg ). So basically in IE the search bar and what not is aligned too high! How can I use CSS to make it looks like it does in FireFox, in all browsers!? I learn best by example so thanks much for any help!!! My probably terrible code is as follows: Code: <table>
<tr>
<td valign="middle">
<a href="/home"><img src="logo.jpg"></a>
</td>
<td valign="middle">
<form id="SearchBarForm" action="search.php" method="get">
<input type="text" name="q" size="30" maxlength="150" value="'.($q).'" title="Search">
<select name="FTS"> <!-- FTS = File Type Selections -->
<option value ="File_Type">File Type</option>
</select>
<font size=-1><input type="submit" name="Submit" value="Search"></form></font>
</td>
<td nowrap> <a href=/advanced_search.phpf>Advanced Search</a><br> <a href=/preferences.php>Preferences</a>
</td>
</tr>
</table>
Hey All, I'm trying to make text float to the right, the challenge part of it all is that i need to try and do this using a class that get asigned to the text so i can't really use a DIV or anything to do this. Really what i want is a bunch of text in a text box aligned to the right with a grey background. Anythoughts or ideas? Really in a binde here. Hi, Can anyone please help with formatting a list? In the simple list below, I would like; 1) The main list items should always be positioned at top 0px, left 90px of it's container (done) 2) Nested list items should be hidden (done) 3) The nested item that belongs to the "selected" list item, should be visible (done) 4) The nested item that belongs to the "selected" list item, should always be positioned at top 0, left 0 (I can't do this) 5) The main list items should be on top of the visible sub item (I can't do this, the sub item is always on top) Many thanks for any pointers, Cheers, Mark 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">
<head>
<title>Untitled</title>
</head>
<body>
<style type="text/css">
#container{position:relative;height:100px;border:1px solid #000}
#container ul{list-style: none;padding: 0;margin: 0;position:absolute;top:0px;left:90px;width:100px;z-index:20;}
#container ul ul{display:none;}/* hide nested lists */
#container ul li{display:block;width:100px;background:red}
#container li.selected ul{display:block;} /* show nested list for item with selected class */
#container li.selected ul li{width:100px;position:absolute;top:0px;left:0px;background:yellow;z-index:10;}/* style nested item */
</style>
<div id="container"><div style="clear:both"></div>
<ul>
<li class="selected">item 1
<ul>
<li>Nested item 1</li>
</ul>
</li>
<li>item 2
<ul>
<li>Nested item 2</li>
</ul>
</li>
<li>item 3
<ul>
<li>Nested item 3</li>
</ul>
</li>
<div style="clear:both"></div>
</div>
</body>
</html>
Hi all, I am in the process of writing a news script in php, i want to display the articles in a downward way, using divs.. I am having a problem in IE & firefox where the image flows out of the bounds of the div and overlaps in the following div whereas I actually want the div to contain the image so the next div will start below.. I can fix this in a number of ways in firefox (display: table; not sure if its right but it works), but nothing I try seems to work in IE, is there a correct way of doing this that will worth in both browsers? I have included the red border to demonstrate how it is overlapping over the other div.. 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"><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>GenerationQ - News</title>
<style type="text/css">
div.spotlight {
text-align: left;
border: solid 10px red;
}
div.spotlight * {
margin: 0 auto;
border: 0;
padding: 0;
}
div.spotlight img {
float: left;
}
div.spotlight p.title {
text-align: left;
font-size: 12px;
font-weight: bold;
padding-bottom: 12px;
}
div.spotlight p {
font-size: 12px;
}
div.spotlight p.desc {
font-size: 12px;
padding-bottom: 3px;
}
div.spotlight p.byline {
font-size: 9px;
padding-bottom: 20px;
}
div.spotlight span.username {
font-size: 11px;
}
div.spotlight span.publishdate {
font-size: 10px;
}
div.section {
text-align: left;
border: solid 10px red;
}
div.section * {
margin: 0 auto;
border: 0;
padding: 0;
}
div.section img {
float: left;
}
div.section p.title {
text-align: left;
font-size: 12px;
font-weight: bold;
padding-bottom: 12px;
}
div.section p {
font-size: 12px;
}
div.section p.desc {
font-size: 12px;
padding-bottom: 3px;
}
div.section p.byline {
font-size: 9px;
padding-bottom: 20px;
}
div.section span.username {
font-size: 11px;
}
div.section span.publishdate {
font-size: 10px;
}
</style></head><body>
<h3 align="left">News</h3><div class="spotlight">
<img src="be51273175be707e583f4c3591dd3c3d71564018.jpg" alt="">
<p class="title"><a href="http://localhost/mmm/viewarticle.php?article=This-a-test-article-of-Link-type-with-an-image%21-1">This a test article of Link type with an image!</a></p>
<p class="desc">This a test article of text type with an image!</p>
<p class="byline">by <span class="username">Administrator</span> on <span class="publishdate">2006-08-29</span></p>
</div>
<div class="section">
<p class="title"><a href="http://localhost/mmm/viewarticle.php?article=This-a-test-article-of-Link-type-without-an-image%21-1">This a test article of Link type without an image!</a></p>
<p class="desc">This a test article of Link type without an image!<span class="smallText"></span></p>
<p class="byline">by <span class="username">Administrator</span> on <span class="publishdate">2006-08-29</span></p>
</div>
</body></html>
I have included the image as an attachment for easy of testing the code above so you can see what I mean! Hopefully someone could help? thanks in advance, regards // infin. I am trying to style the <hr> in the following peice of my page using css selectors. I have used,
Code: td div hr {...}
, but this affects other hr's outside of this menu. Is there a way to make this work without having to give the hr a class name? Thanks. Code:
<td width="140" bgcolor="#EFBE56" class="Menu_WhiteText_GoldBkgd"><div align="left">
<p class="side_menu_white"><br>
<a href="In-The-News.htm" style="color: white">in the news...</a> </p>
<p class="side_menu_white"> <a href="Press_Releases.htm" style="color: white">press releases</a> </p>
<p class="side_menu_white"><a href="Newsletter.htm" style="color: white">newsletter</a> </p>
<p class="side_menu_white"><a href="Multimedia.htm" style="color: white">multimedia </a></p>
<p class="side_menu_white"><a href="../About/annual_reports.htm" style="color: white">annual reports</a> </p>
<p class="side_menu_white"><a href="Contact.htm" style="color: white">contact media relations & communications</a> </p>
<hr>
<p><span class="Menu_WhiteText_GoldBkgd"> <a href="PhotoRelease-ConsentForm.pdf" target="_blank">consent form</a> </span> <span class="Body_Text2"><span class="Body_Text"><br>
<br>
</span></span></p>
</div></td>
This appears to be strictly a formatting/style problem. I built a page using validated XHTML Strict and of course, it displays at it should in IE6: http://computerslayer1.spymac.com/formpics/IE---1.gif http://computerslayer1.spymac.com/formpics/IE---2.gif In Opera 8, it displays for the most part, but the table containing the AV/Periphrial radio buttons is shrunk and aligned to the left. Then, when one of the radio buttons are selected, it expands, and the right side of the table appears to be missing. http://computerslayer1.spymac.com/f...s/opera---1.gif http://computerslayer1.spymac.com/f...s/opera---2.gif Firefox 1.0.4 displays the tables in much the same was as opera, however, the right side is not missing, like in Opera 8. http://computerslayer1.spymac.com/f.../firefox--1.gif http://computerslayer1.spymac.com/f.../firefox--2.gif Any ideas, guys? I'm stuck. Is there a way to use CSS to format printer output specifically for a sheet of paper such that page breaks can be formatted in at specific points? |
|||||||