|
CSS - Styling Inline Form Inside Table Or Li, Ff 1.5, Ie6, Ie7
Im trying to get an input field and form button to line up to the right of an <li> tagged menu and not sure of the approach i should take.
I'd prefer not to use a table if possible, and the table im using now is a bit buggy anyway. this is a page with the menu as it shows right now.... http://www.seesawusa.com/products/ this is the page with the basic idea of what im trying to do http://www.seesawusa.com/pages/74/ Things i'v tried 1. put the form inside a LI tag.... This results in putting the search box below the list of menu items across all my test browsers. 2. put the UL and the FORM inside a table with 2 cells... in FF, i get the result i want... except the LI and INPUT field are not aligned to the right in IE6 & 7 I get it lined up the way i want it. But the table pushes the the height and width of the containing div to an unacceptable level I've seen this type of thing before and in my searching other sites i've only found complicated table based layouts that use it. Does anyone know an approach that would allow me to leave out tables, or at the very least only use one? Thanks for the glance. P.S. Interestingly enough, the page you are reading has a menu and text field configuration that im wanting to use, but it is very table oriented. Similar TutorialsHi, This will be a quick question. Why cant I style ul inside a div as: .css-tabs { margin:0 !important; padding:0; height:30px; border-bottom:1px solid #666; background:#EFEFEF none repeat scroll 0 0; } <!-- Left column --> <div class="floatLeft width73"> <!-- the tabs --> <ul class="tabsss"> <li><a href="#first">Tab 1</a></li> <li><a href="#second">Tab 2</a></li> <li><a href="#third">Tab 3</a></li> </ul> </div> I need to style all images within a div. For example, I want to do something like this: <div style="img{border: 0;}"> <img src="" /> <img src="" /> <img src="" /> </div> But that does not seem to work. Is it this possible with css? It is for an ebay template, so I don't think I can reference a separate stylesheet. thanks. Charley Hello, I have a question about div's set to display: inline. First let me explain what I'm trying to do so that if I'm going about it the wrong way you can show me the light. I'm trying to have multiple divs centered on the screen and lined up horizontally, like so: | (div1)(div2)(div3)(div4) | The thing is, I have images in the divs. I also have a border on the divs. So when I set display: inline, the border goes through the image (although the divs are positioned correctly with the body text-align: center). However, when I set display: block, the border is exactly how I want it (i.e. it includes the image) but the divs are placed one on top of the other vertically and they are left-aligned. Is there a simple way to do this? Thanks Damn another problem good thing you guys are so helpful.... What am I doing wrong here? css Code: #footer{
position:relative;
z-index:-1;
margin-top:-50px;
background-color:#666666;
width:100%;
height:100px;
margin-left:auto;
margin-right:auto;
border-top:#000000 10px solid;
}
#footer ul{
position:absolute;
padding:0px;
margin-top:50px;
margin-left:auto;
margin-right:auto;
}
#footer li{
display:inline;
padding:0px;
margin:0px;
}
#footer a{
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
border-right:#FFFFFF 1px solid;
}
html Code: <div id="footer">
<ul>
<li><a href="#">Nav 1</a></li>
<li><a href="#">Nav 2</a></li>
<li><a href="#">Nav 3</a></li>
<li><a href="#">Nav 4</a></li>
<li><a href="#">Nav 5</a></li>
<li><a href="#">Nav 6</a></li>
<li><a href="#">Nav 7</a></li>
</ul>
</div>
Just can't seem to get the list centered inside the div Ok, so maybe I don't understand the display attribute quite right. What I'm doing makes sense to me, but it's not working right when displayed. I have a div that is set to display inline (so that I don't have to use floating). Since inline elements can't have height/width attributes, i have another div inside of it, with display set to block. This inner div has height and width attributes. Now, if I place another similar structure (block div inside inline div) in the code, the two outer divs /should/ (in my mind) render side-by-side with the heights and widths of their child div's. When I try it though, it displays everything as block-type. Any ideas? PHP Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Title</title> <style type="text/css"> img{ border: 0px black solid; height: 200px; } div.outerholder{ display: inline; } div.innerholder{ text-align: center; height: 200px; width: 267px; margin: 0px; padding: 0px; display: block; } div.centerme{ text-align: center; margin-left: auto; margin-right: auto; } </style> </head> <body> <div class="centerme"> <div> <div class="outerholder"> <div class="innerholder" style="margin-right: 5px;"><a href="dir1/PICTURE.JPG"><img src="dir1/PICTURE.JPG" /></a></div> </div> <div class="outerholder"> <div class="innerholder" style="margin-left: 5px;"><a href="dir1/PICTURE.JPG"><img src="dir1/PICTURE.JPG" /></a></div> </div> </div> <div> <div class="outerholder"> <div class="innerholder" style="margin-right: 5px;"><a href="dir1/PICTURE.JPG"><img src="dir1/PICTURE.JPG" /></a></div> </div> <div class="outerholder"> <div class="innerholder" style="margin-left: 5px;"><a href="dir1/PICTURE.JPG"><img src="dir1/PICTURE.JPG" /></a></div> </div> </div> <div> <div class="outerholder"> <div class="innerholder" style="margin-right: 5px;"><a href="dir1/PICTURE.JPG"><img src="dir1/PICTURE.JPG" /></a></div> </div> </div> </body> </html> P.S. It also doesn't center properly in FF, but that's secondary... Hello, I know that putting a block level element (such as <p> or <div>) inside an inline element (such as <a>) is against "xhtml 1.0 strict" rules, so I'm putting a <span> (inline) within an <a> (also inline). I've made my <span> "display: block;", and it works in all browsers and validates fine, but I feel like I'm cheating the system a bit? The thing is, I need to put a margin under a piece of text without using <br /> (as when a browser forces a line break, it will use that rule and make different pieces of text look odd), but all the text is within an anchor tag, so I can't use <p> or <div>. Would appreciate any thoughts on the matter, Cheers! I have a CSS table that is rendering well with no problem in IE browser but it is skipping three rows in the Firefox browser. I can't figure out why it is skipping those three rows which are rows 2, 4, 8. Here's the code: Code: <body>
<div align="center"><link href="../css/theme2.css" rel="stylesheet" type="text/css">
<tbody><tr>
<td style="background-repeat: no-repeat;" background="/images/chart-header.jpg" height="44"><table width="720" border="0" cellpadding="8" cellspacing="0" height="34">
<tbody><tr>
<td class="chart_head border" width="150" height="34">PROVIDER<span class="provider border">your name here</span></td>
<td class="chart_head border" width="53">PRICE</td>
<td class="chart_head border" width="98">SPACE</td>
<td class="chart_head border" width="150">HOSTING BONUSES</td>
<td class="chart_head border" width="98">REVIEWS</td>
</tr>
</tbody></table></td>
</tr>
<!----- Row 1 ----->
<tr>
<td style="background-repeat: no-repeat;" background="/images/row-bg.jpg" height="90"><table width="720" border="0" cellpadding="8" cellspacing="0" height="56">
<tbody><tr>
<td class="provider border" width="150"> </td>
<td class="price border" width="53">$4.95</td>
<td class="space border" width="98">Unlimited</td>
<td class="bonuses border" width="150"><img src="/images/money_bag.png" alt="money back guarantee" width="16" height="16" /> money back guarantee<br><img src="/images/arrow_up.png" width="16" height="16" /> 99% uptime guarantee<br><img src="images/computer.png" width="16" height="16" />free domain for life</td>
<td class="reviews border" width="98"><img src="/images//web_search.png" width="16" height="16" />Visit Website</a><br><img src="/images/pencil.png" width="16" height="16" /> Read Review</td>
</tr>
</tbody></table></td>
</tr>
<!---- Row 2 ------>
<tr>
<td style="background-repeat: no-repeat;" background="/images/row-bg.jpg" height="90"><table width="720" border="0" cellpadding="8" cellspacing="0" height="56">
<tbody><tr>
<td class="provider border" width="150">your name here</td>
<td class="price border" width="53">$1.98</td>
<td class="space border" width="98">1GB</td>
<td class="bonuses border" width="150"><img src="/images/support.png" alt="hosting support" width="16" height="16" />customer support<br><img src="/images/arrow_up.png" width="16" height="16" /> 99% uptime guarantee<br><img src="images/computer.png" width="16" height="16" /> free domain for life</td>
<td class="reviews border" width="98"><img src="/images//web_search.png" width="16" height="16" /> Visit Website</a><br><img src="/images/pencil.png" width="16" height="16" /> Read Review</td>
</tr>
</tbody></table></td>
</tr>
<!----- Row 3 ------>
<tr>
<td style="background-repeat: no-repeat;" background="/images/row-bg.jpg" height="90"><table width="720" border="0" cellpadding="8" cellspacing="0" height="56">
<tbody><tr>
<td class="provider border" width="150">your name here</td>
<td class="price border" width="53">$1.99</td>
<td class="space border" width="98">Unlimited</td>
<td class="bonuses border" width="150"><img src="/images/money_bag.png" alt="money back guarantee" width="16" height="16" />money back guarantee<br><img src="/images/support.png" width="16" height="16" />customer support<br><img src="images/panel.png" width="16" height="16" />easy control panel</td>
<td class="reviews border" width="98"><img src="/images//web_search.png" width="16" height="16" /> Visit Website<br><img src="/images/pencil.png" width="16" height="16" /> Read Review</td>
</tr>
</tbody></table></td>
</tr>
<!------ Row 4 ------>
<tr>
<td style="background-repeat: no-repeat;" background="/images/row-bg.jpg" height="90"><table width="720" border="0" cellpadding="8" cellspacing="0" height="56">
<tbody><tr>
<td class="provider border" width="150">your name here</td>
<td class="price border" width="53">$3.95</td>
<td class="space border" width="98">Unlimited</td>
<td class="bonuses border" width="150"><img src="/images/computer.png" alt="free domain" width="16" height="16" /> free domain & setup<br><img src="/images/software.png" width="16" height="16" /> free website builder<br><img src="images/support.png" width="16" height="16" />customer support</td>
<td class="reviews border" width="98"><img src="/images//web_search.png" width="16" height="16" /> Visit Website<br><img src="/images/pencil.png" width="16" height="16" /> Read Review</td>
</tr>
</tbody></table></td>
</tr>
<!----- Row 5 ------->
<tr>
<td style="background-repeat: no-repeat;" background="/images/row-bg.jpg" height="90"><table width="720" border="0" cellpadding="8" cellspacing="0" height="56">
<tbody><tr>
<td class="provider border" width="150">your name here</td>
<td class="price border" width="53">$2.49</td>
<td class="space border" width="98">Unlimited</td>
<td class="bonuses border" width="150"><img src="/images/video.png" alt="video hosting" width="16" height="16" />FFMPEG hosting<br><img src="/images/computer.png" width="16" height="16" /> free website transfers<br><img src="images/support.png" width="16" height="16" />customer support</td>
<td class="reviews border" width="98"><img src="/images//web_search.png" width="16" height="16" /> Visit Website<br><img src="/images/pencil.png" width="16" height="16" /> Read Review</td>
</tr>
</tbody></table></td>
</tr>
<!------ Row 6 ----->
<tr>
<td style="background-repeat: no-repeat;" background="/images/row-bg.jpg" height="90"><table width="720" border="0" cellpadding="8" cellspacing="0" height="56">
<tbody><tr>
<td class="provider border" width="150">your name here</td>
<td class="price border" width="53">$4.95</td>
<td class="space border" width="98">Unlimited</td>
<td class="bonuses border" width="150"><img src="/images/money_bag.png" alt="money back guarantee" width="16" height="16" />money back guarantee<br><img src="/images/arrow_up.png" width="16" height="16" /> 99% uptime guarantee<br><img src="images/support.png" width="16" height="16" />24/7 Tech Support</td>
<td class="reviews border" width="98"><img src="/images//web_search.png" width="16" height="16" /> Visit Website<br><img src="/images/pencil.png" width="16" height="16" /> Read Review</td>
</tr>
</tbody></table></td>
</tr>
<!----- Row 7 ----->
<tr>
<td style="background-repeat: no-repeat;" background="/images/row-bg.jpg" height="90"><table width="720" border="0" cellpadding="8" cellspacing="0" height="56">
<tbody><tr>
<td class="provider border" width="150">your name here</td>
<td class="price border" width="53">$3.49</td>
<td class="space border" width="98">150 GB</td>
<td class="bonuses border" width="150"><img src="/images/transfer.png" alt="transfer" width="16" height="16" />unlimited traffic<br><img src="/images/software.png" width="16" height="16" />website builder<br><img src="images/shopping_cart.png" width="16" height="16" />eCommerce software</td>
<td class="reviews border" width="98"><img src="/images//web_search.png" width="16" height="16" />Visit Website</a><br><img src="/images/pencil.png" width="16" height="16" /> Read Review</td>
</tr>
</tbody></table></td>
</tr>
<!----- Row 8 ------>
<tr>
<td style="background-repeat: no-repeat;" background="/images/row-bg.jpg" height="90"><table width="720" border="0" cellpadding="8" cellspacing="0" height="56">
<tbody><tr>
<td class="provider border" width="150">your name here</td>
<td class="price border" width="53">$3.50</td>
<td class="space border" width="98">Unlimited</td>
<td class="bonuses border" width="150"><img src="/images/money_bag.png" alt="money back guarantee" width="16" height="16" /> money back guarantee<br><img src="/images/security.png" width="16" height="16" /> free security suite <br><img src="images/computer.png" width="16" height="16" /> free domain for life</td>
<td class="reviews border" width="98"><img src="/images//web_search.png" width="16" height="16" /> Visit Website<br><img src="/images/pencil.png" width="16" height="16" /> Read Review</td>
</tr>
</tbody></table></td>
</tr>
<!----- Row 9 ------>
<tr>
<td style="background-repeat: no-repeat;" background="/images/row-bg.jpg" height="90"><table width="720" border="0" cellpadding="8" cellspacing="0" height="56">
<tbody><tr>
<td class="provider border" width="150">your name here</td>
<td class="price border" width="53">$6.95</td>
<td class="space border" width="98">Unlimited</td>
<td class="bonuses border" width="150"><img src="/images/software.png" alt="website builder" width="16" height="16" /> free site builder<br><img src="/images/coins.png" width="16" height="16" /> $50 free Ad Credits<br><img src="images/computer.png" width="16" height="16" />free domain with signup</td>
<td class="reviews border" width="98"><img src="/images//web_search.png" width="16" height="16" /> Visit Website<br><img src="/images/pencil.png" width="16" height="16" /> Read Review</td>
</tr>
</tbody></table></td>
</tr>
<!----- Row 10 ---->
<tr>
<td style="background-repeat: no-repeat;" background="/images/row-bg.jpg" height="90"><table width="720" border="0" cellpadding="8" cellspacing="0" height="56">
<tbody><tr>
<td class="provider border" width="150">your name here</td>
<td class="price border" width="53">$4.95</td>
<td class="space border" width="98">Unlimited</td>
<td class="bonuses border" width="150"><img src="/images/money_bag.png" alt="money back guarantee" width="16" height="16" /> money back guarantee<br><img src="/images/battery.png" width="16" height="16" /> critical data backup<br><img src="images/computer.png" width="16" height="16" /> free domain</td>
<td class="reviews border" width="98"><img src="/images//web_search.png" width="16" height="16" /> Visit Website<br><img src="/images/pencil.png" width="16" height="16" /> Read Review</td>
</tr>
</tbody></table></td>
</tr>
</body>
</html>
</body>
Hi I wonder if you can help me im just doing some stuff with css as practice and need to know about table bordering basically i can border the intire table and all the cells but i just want to be able to put a border around the rows not the individual cells but the rows in the table Hi All, I have 2 questions, 1st one is I have a caption above my table, which sits on the extreme left. I also want to have the word 'Download' in the caption but want this to sit on the extreme right any ideas? Also I have lots of data to display so have designed up my css so all the table look the same. The only issue is that because some of the headings aren't very long some of the data is moving onto the next line, do I have to manually set a column width in pixels/percent inside every single table? Or can I add something to my css? This is how my caption looks... [code] <table width="700" border="0" cellspacing="0" cellpadding="0"> <caption>MEMBERS - SEARCH Download Details</caption> <thead> <tr> <th scope="col" class="left">NAME</th> <th scope="col">DOB</th> <th scope="col">ADDRESS</th> <th scope="col">PHONE</th> <th scope="col" class="right">MOBILE</th> </tr> </thead> How would one go about adding the styling normally defined by the depreciated attributes bordercolorlight & bordercolordark of the TABLE Html element, using CSS? http://www.tonglebeak.com/articles/styletablecaptions.php After searching for a way endlessly to style table captions cross-browser wise, I finally found that way, and wrote an article on it (can't you tell I passed my AP english test @_@). What I'm wondering is if anyone else discovered this? Hi, The local styling of my table, td objects is suppressed by CSS. Please help. Simple html file: test.html Code: <html> <head> <link rel="stylesheet" type="text/css" href="test.css" /> </head> <body> Table 1 <table border=0 bgcolor=blue> <tr> <td>one</td> <td>two</td> <td>three</td> </tr> </table> <body> </html> Corresponding CSS: test.css Code: th, td { font-size: 75%;
border-width: 1px;
padding: 1px;
border-style: solid;
border-color: red;
background-color: white; }
table {
border-width: 2px;
border-style: solid;
border-color: black;
border-collapse: collapse;
background-color: white; }
I'm reading around, wondering how I get form fields to change style and the text that is inserted in the form fields to change style (font/size).. Is there an easy way to do this? for example http://member.classifieds.com/userjoin.php the entry boxes are smaller, and the text is smaller.. I looked at their code and I'm not quite sure how they achieved this. im trying to get an effect like this one, where when a textfield or form area is selected, the div around changes bgcolor WooFoo I think i might be able to use the pseudo selectors but not sure if ie will take it. Anyways i would love some suggestions! I've seen some text inputs with pretty snazzy styling, such as borders with rounded corners. How is this done? Im having trouble with styling a web form, im trying to manipulate the textarea width and have the following CSS code textarea { width: 400px; height: 250px; margin-top: 5px; margin-bottom: 5px; padding: 0; } The width is fine in Internet Explorer yet in Opera it seems to completely ignore the width attribute. The form itself is in a <div> which has no width attribute. Anyone got any ideas? OK, I have a table I'd like to format with CSS. No problem. I have an external stylesheet that I link to for the rest of my site. I figured I'd add the CSS there and be good to go. Nope. When I link to the external stylesheet, everything else on my page is formatted correctly, except the table. It's like the table isn't grabbing the CSS information. (Example 1) When I take the CSS and put it in the header of the page, it works fine (same exact CSS, the only difference is where it's referenced). (Example 2) Is it possible to differentiate between various types of input field, e.g. assign a width to text inputs but leave buttons to find their own width based on content. I know I can do this by assigning certain elements a class but I'd prefer not to have to do this. Thanks I have this code that works fine in firefox and MSIE and the whole page validates with tidy (Green checkmark). I can't post a URL because its on a private server. The part that isn't quite right on safari is these: I have a table load of these that are part of a big form named commit. <td width="30" bgcolor ="#e7e7e7"><input type ='submit' class='button_notdone' value='2' onclick="javascript:mapbutt(document.commit,2)" /></td> This is the javascript code for mapbutt function mapbutt(myform,dex) { myform.action.value='map'; myform.qnum.value=dex; } The javascript does not return false so after clicking and setting the action and qnum values it is supposed to fall through to the form's serverside action, which it does. The problem is the styling of the submits. On every other browser they are whatever color I specify in the style I assign to them. Here is the style for button_notdone .button_notdone { font-family: monospace; font-weight: bold; width: 28px; height: 22px; color:#ffffff; background:#000000; } The background color in this case is supposed to be black and the text color is supposed to be white, and on safari it is black text on grey. I tried changing "input" to "button" which does indeed display the background color but unlike a submit it does not display the value. I need the text of the value to show in the text color over the button or submit or whatever it ends up being. How can I get these submits to look like what I want on safari. Thank you. I have form located below the google map on this page - http://www.hometowntrans.com/map_hours.asp I want to style it such that it has a 3d look to it if you will, with a gray background and black text. |
|||||||