|
CSS - Ie 100% Width Of Select Element In Table
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "(URL address blocked: See forum rules)">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Styling HTML select elements</title>
<style type="text/css">
select {
width: 100%;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>Test</td>
</tr>
<tr>
<td>
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</td>
</tr>
</tbody>
</table>
</body>
This code does exactly what I want it to in Mozilla. The widest select determines the width of the column, and then every other select takes the same width. In IE, however, the width is determined by the plain text cells, and the text of the options get cut off. Without making the width fixed, which is a problem as I have a very large table with dropdowns in each cell where I don't really know what the values are or whether the user modifies the text size, is there any workaround in IE to acheive the same effect using CSS? Similar Tutorialsthe width property of the element "#globalNavWrapper #nav .subnav li a" in this drop down menu is being ignored. when i add padding-right: 200px to it, the full element is visible in the drop down menu, but the long text strings get cut off. why is the width element being ignored? Thanks in advance! Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Groups</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#navbar {
position: relative;
z-index: 10000;
}
#globalNavWrapper {
position: relative;
width: 100%;
font-family: Arial, Verdana, sans-serif;
font-size: 11px;
z-index: 10;
}
#globalNavWrapper #nav ul {
list-style: none;
z-index: 20;
}
#globalNavWrapper #nav li {
float: left;
background: #0f0 url(sprite.gif) no-repeat scroll 0%;
display: inline;
height: 24px;
}
#globalNavWrapper #nav li.navpadleft {
border-left: 1px solid #999;
}
#globalNavWrapper #nav li a {
display: block;
background: #0f0 url(sprite.gif) no-repeat scroll 0%;
height: 0;
width: 100%;
padding-top: 24px;
overflow: hidden;
}
#globalNavWrapper #nav li#nav_home, #globalNavWrapper #nav li#nav_home a:hover, #globalNavWrapper #nav #nav_home.over a { width: 53px; }
#globalNavWrapper #nav li#nav_home a { background-position: -155px -18px; }
#globalNavWrapper #nav li#nav_home.active a { background-position: -155px -64px; }
#globalNavWrapper #nav li#nav_home a:hover, #globalNavWrapper #nav li#nav_home.active.over a, #globalNavWrapper #nav #nav_home.over a { background-position: -155px -87px; }
#globalNavWrapper #nav li#nav_myXXXX, #globalNavWrapper #nav li#nav_myXXXX a:hover, #globalNavWrapper #nav #nav_myXXXX.over a { width: 73px; }
#globalNavWrapper #nav li#nav_myXXXX a { background-position: -720px -18px; }
#globalNavWrapper #nav li#nav_myXXXX.active a { background-position: -720px -64px; }
#globalNavWrapper #nav li#nav_myXXXX a:hover, #globalNavWrapper #nav li#nav_myXXXX.active.over a, #globalNavWrapper #nav #nav_myXXXX.over a { background-position: -720px -87px; }
#globalNavWrapper #nav li#nav_people, #globalNavWrapper #nav li#nav_people a:hover, #globalNavWrapper #nav #nav_people.over a { width: 56px; }
#globalNavWrapper #nav li#nav_people a { background-position: -208px -18px; }
#globalNavWrapper #nav li#nav_people.active a { background-position: -208px -64px; }
#globalNavWrapper #nav li#nav_people a:hover, #globalNavWrapper #nav li#nav_people.active.over a, #globalNavWrapper #nav #nav_people.over a { background-position: -208px -87px; }
#globalNavWrapper #nav li#nav_groups, #globalNavWrapper #nav li#nav_groups a:hover, #globalNavWrapper #nav #nav_groups.over a { width: 60px; }
#globalNavWrapper #nav li#nav_groups a { background-position: -264px -18px; }
#globalNavWrapper #nav li#nav_groups.active a { background-position: -264px -64px; }
#globalNavWrapper #nav li#nav_groups a:hover, #globalNavWrapper #nav li#nav_groups.active.over a, #globalNavWrapper #nav #nav_groups.over a { background-position: -264px -87px; }
#globalNavWrapper #nav li#nav_tnn, #globalNavWrapper #nav li#nav_tnn a:hover, #globalNavWrapper #nav #nav_tnn.over a { width: 103px; }
#globalNavWrapper #nav li#nav_tnn a { background-position: -324px -18px; }
#globalNavWrapper #nav li#nav_tnn.active a { background-position: -324px -64px; }
#globalNavWrapper #nav li#nav_tnn a:hover, #globalNavWrapper #nav li#nav_tnn.active.over a, #globalNavWrapper #nav #nav_tnn.over a { background-position: -324px -87px; }
#globalNavWrapper #nav li#nav_green, #globalNavWrapper #nav li#nav_green a:hover, #globalNavWrapper #nav #nav_green.over a { width: 91px; }
#globalNavWrapper #nav li#nav_green a { background-position: -427px -18px; }
#globalNavWrapper #nav li#nav_green.active a { background-position: -427px -64px; }
#globalNavWrapper #nav li#nav_green a:hover, #globalNavWrapper #nav li#nav_green.active.over a, #globalNavWrapper #nav #nav_green.over a { background-position: -427px -87px; }
#globalNavWrapper #nav li#nav_ecards, #globalNavWrapper #nav li#nav_ecards a:hover, #globalNavWrapper #nav #nav_ecards.over a { width: 60px; }
#globalNavWrapper #nav li#nav_ecards a { background-position: -518px -18px; }
#globalNavWrapper #nav li#nav_ecards a.active { background-position: -518px -64px; }
#globalNavWrapper #nav li#nav_ecards a:hover, #globalNavWrapper #nav li#nav_ecards.active.over a, #globalNavWrapper #nav #nav_ecards.over a { background-position: -518px -87px; }
#globalNavWrapper #nav li#nav_shopping, #globalNavWrapper #nav li#nav_shopping a:hover, #globalNavWrapper #nav #nav_shopping.over a { width: 73px; }
#globalNavWrapper #nav li#nav_shopping a { background-position: -578px -18px; }
#globalNavWrapper #nav li#nav_shopping a.active { background-position: -578px -64px; }
#globalNavWrapper #nav li#nav_shopping a:hover, #globalNavWrapper #nav li#nav_shopping.active.over a, #globalNavWrapper #nav #nav_shopping.over a { background-position: -578px -87px; }
#globalNavWrapper #nav li#nav_petit, #globalNavWrapper #nav li#nav_petit a:hover, #globalNavWrapper #nav #nav_petit.over a { width: 69px; }
#globalNavWrapper #nav li#nav_petit a { background-position: -651px -18px; }
#globalNavWrapper #nav li#nav_petit a.active { background-position: -651px -64px; }
#globalNavWrapper #nav li#nav_petit a:hover, #globalNavWrapper #nav li#nav_petit.active.over a, #globalNavWrapper #nav #nav_petit.over a { background-position: -651px -87px; }
#globalNavWrapper #nav li#nav_don, #globalNavWrapper #nav li#nav_don a:hover, #globalNavWrapper #nav #nav_don.over a { width: 107px; }
#globalNavWrapper #nav li#nav_don a { background-position: -793px -18px; }
#globalNavWrapper #nav li#nav_don a.active { background-position: -793px -64px; }
#globalNavWrapper #nav li#nav_don a:hover, #globalNavWrapper #nav li#nav_don.active.over a, #globalNavWrapper #nav #nav_don.over a { background-position: -793px -87px; }
#globalNavWrapper #nav li.over .subnav, #globalNavWrapper #nav li.over iframe { display: block; }
#globalNavWrapper #nav .subnav {
position: absolute;
margin: -1px;
border: 1px solid #999;
background: #fff;
width: 150px;
z-index: -10;
display: none;
overflow: hidden;
}
#globalNavWrapper #nav .subnav li {
clear: both;
float: none;
display: block;
background: none;
line-height: 18px;
height: 18px;
width: 150px;
list-style: none;
border: 0;
}
#globalNavWrapper #nav .subnav li.hr {
border-bottom: 1px solid #999;
}
#globalNavWrapper #nav .subnav li a {
background: #fff;
padding: 0 0 0 5px;
width: 1000px;
height: 18px;
color: #000;
text-decoration: none;
}
#globalNavWrapper #nav .subnav li a:hover {
background: #e4f5e5;
color: #009f00;
}
#globalNavWrapper #nav li iframe {
display: none;
z-index: -1000;
height: 220px;
width: 151px;
-moz-opacity: 0;
opacity: 0;
filter: alpha(opacity=0);
}
</style>
</head>
<body>
<div id="globalNavWrapper">
<ul id="nav">
<li id="nav_home" class="navpadleft">
<a href="#">Home</a>
</li>
<li id="nav_myXXXX">
<a href="#">My XXXX</a>
<ul class="subnav">
<li class="hr"><a href="#">Main</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
</ul>
</li>
<li id="nav_people">
<a href="#">People</a>
<ul class="subnav">
<li class="hr"><a href="#">Main</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
</ul>
<li id="nav_groups" class="active">
<a href="#">People</a>
<ul class="subnav">
<li class="hr"><a href="#">Main</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
</ul>
</li>
<li id="nav_tnn">
<a href="#">News Network</a>
<ul class="subnav">
<li class="hr"><a href="#">Main</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
</ul>
</li>
<li id="nav_green">
<a href="#">Green Living</a>
<ul class="subnav">
<li class="hr"><a href="#">Main</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
</ul>
</li>
<li id="nav_ecards">
<a href="#">E-Cards</a>
<ul class="subnav">
<li class="hr"><a href="#">Main</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
</ul>
</li>
<li id="nav_shopping">
<a href="#">Shopping</a>
<ul class="subnav">
<li class="hr"><a href="#">Main</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
</ul>
</li>
<li id="nav_petit">
<a href="#">Petite</a>
<ul class="subnav">
<li class="hr"><a href="#">Main</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
</ul>
</li>
<li id="nav_don">
<a href="#">Don</a>
<ul class="subnav">
<li class="hr"><a href="#">Main</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
startList = function() {
var navRoot = document.getElementById("nav");
var is_MSIE = false;
if(navigator.userAgent.indexOf('MSIE') >= 0) is_MSIE = true;
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if ( (node.nodeName=="LI") && (!node.id.match(/noMenu$/)) ) {
node.onmouseover = function() { this.className += " over"; }
node.onmouseout = function() {
this.className = this.className.replace(" over", "");
this.className = this.className.replace("over", "");
}
for(j=0; j<node.childNodes.length; j++) {
if(node.childNodes[j].nodeName=="UL"){
if(is_MSIE) {
var iframe = document.createElement('<iframe frameborder="0">');
iframe.style.position = 'absolute';
iframe.border = '0';
iframe.frameborder = 0;
iframe.style.backgroundColor = '#f00';
iframe.src = 'about:blank';
node.appendChild(iframe);
}
}
}
}
}
}
startList(); // could run elsewhere on the page, or onLoad, but inline just after seems to work best.
document.getElementById('nav').style.zIndex = 2000;
</script>
</body>
</html>
right now i have a div that is floated left. in Firefox, the width of the box depends on the contents. however, in IE, the width is 100% of the parent element. how can i make IE act like firefox in this situation? I want to have some small boxes of fixed width on a page, so I can change the background colour to create the appearance of "flashing lights". I've set the width property on the span tag. It works fine in Internet Explorer but not in Netscape. Any suggestions? Hello 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 Ok. Here's the problem: I have a asp.net 1.x datagrid inside a floated div and I want the datagrid to stretch the width of the div. This div is in the center of two other floated divs. Is there a way to make a table go 100% the width of its container div? Css code: Code:
/* left bar: */
#navBar{
width: 185px;
float: left;
}
/* right bar: */
#rightModulesContainer {
width: 130px;
margin: 0;
padding: 0px 0px 0px 10px;
float: right;
}
/* center content: */
#content{
padding: 0px 5px 0px 0px;
margin-top:0;
margin-bottom:0;
margin-left:4px;
margin-right:0px;
float: left;
text-align:left;
/*display: inline;*/
}
/* contained in #container: */
#dataGridContainer{
margin: 0;
padding-bottom: 10px;
min-width:360px;
}
.categoryGridStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
color: #000000;
width:100%;
}
and here is the layout of the divs: Code: <div id="navBar">left navigation bar here (tree view)</div> <div id="rightModulesContainer">right side bar here</div> <div id="content"><div id="dataGridContainer">datagrid here</div></div> Thanks for your help in advance. I've been messing with this for a while - trying to get it to work cross browser is driving me nuts. I've tried placing the divs in containers and floating the containers, I've tried everything I can think of... Hello, (please also see attached/uploaded style sheet) I'm puzzled why (in the following code) the TEST #2 table renders as required (i.e. 2 rows in 1 column, all with the same cell WIDTH) but the table in TEST #1 seems to render the table cells (i.e. 2 columns in 1 row) without a common cell WIDTH. How can I get all the cells (there are plenty more!) in table TEST #1 to all be exactly the same width (preferably 85px)? Code: <link rel="stylesheet" type="text/css" href="http://thinet/cgi-bin/thinetStyleSheet.css"> TEST #1 <table class="menu" border=1 CELLPADDING=2> <tr> <td class="pinkButtons"><a title="Treats menu" href='http://thinet/theread/forumdisplay.php?s=&forumid=82'>Treats</a></td> <td class="pinkButtons"><a title="New Starters, Leavers and Transfers" href='http://thinet/theread/forumdisplay.php?s=&forumid=41'>Joiners etc.</a></td> </tr> </table> <P> TEST #2 <table class="menu" border=1 CELLPADDING=2> <tr><td class="pinkButtons"><a title="Treats menu" href='http://thinet/theread/forumdisplay.php?s=&forumid=82'>Treats</a></td></tr> <tr><td class="pinkButtons"><a title="New Starters, Leavers and Transfers" href='http://thinet/theread/forumdisplay.php?s=&forumid=41'>Joiners etc.</a></td></tr> </table> I don't think I've quite grasped the idea of CSS yet?!?! Any help/pointers would be appreciated. Thanks, Andy Layout Page I know. It's not too great yet. But I've just started and it's still in the baby stages. whenever I add a width or height paramater to "navBar" the background image NEVER shows up, even with content! Why is that? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Coast Guard</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
body {
background: url(Images/bgClouds2.jpg);
height: 100%;
}
html {
height: 100%;
}
.navigationBar {
width: 150px;
height: 1000px;
background-image: url(Images/navBarImage.png);
background-repeat: repeat-y;
border-style: dotted;
overflow: none;
}
#section {
padding-left: 57px;
overflow: none;
font-size: 15px;
text-align: left;
}
#top {
width: 901px;
height: 1000px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 0px;
background-color: white;
border-style: groove;
border-color: darkblue;
}
#navBar {
background-image: url(Images/navBG.jpg)
height: 73px;
border-style: dotted;
}
</style>
<script type="text/javascript">
<!--
// -->
</script>
</head>
<body>
<div id="top">
<center>
<img src="Images/CircleBanner.png" style= "border-style: none;" align="center">
</center>
<div id="navBar">
alex wait
</div>
Hi. I want to have full control over the colors of a SELECT element. Example: I want to control the color behind the arrow at the right in the SELECT (the area where you click to expand the SELECT). Is that doable using CSS? If not.. any other way to control this (not from client browser, but from developer code)? Hi all, I've got a drop down box (select box) inside an element in a table. How can I get the width of the drop down to expand to fill the size of the table element? i.e. I have: | <DROP DOWN> | but want | < DROP DOWN > | Also, is it possible to change the height of a drop down? Thanks, John. 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 a textarea in a <td>which asks for users for some description. If users enter text and don't use any space or enter, the width of the table gets bigger and bigger and damages the pages design. What can I add (to td.fixed_width css for example )to make the line break after the width of the table is reached??? There is a solution that I put a div in td and then Code: #desc {
width:"100%";
width::fixed;
overflow:scroll;}
but it is not exactly what I want Hello, I have a form as follows: <form id="New" action="/User/Create" method="post" class="Base"> <fieldset> <legend>User Data</legend> <ol> <li> <label for="Name">Name</label> <input type="text" name="Name" id="Name" value="" /> </li> <li> <label for="City">City</label> <select name="City" id="City"> <option>New York</option> <option>London</option> </select> </li> <li> <label for="CurriculumVitae">Curriculum Vitae</label> <textarea name="CurriculumVitae" rows="10" cols="20" id="CurriculumVitae"></textarea> </li> </ol> </fieldset> </form> And I defined the following: input, select, textarea { width: 520px; } The problem is that the select becomes narrow than the input and textarea. Why? How can I make all the same width? And what is the default width for an input? Is there a way to make its width according to its expected content without needing to use different CSS Classes? Thanks, Miguel Hey guys, I'm now truly understanding why all my tech friends constantly talk about how much they hate IE. Anyways, im working on a site and am trying to add a corner element to one of my divs. It works perfect in firefox... but in IE it pushes the table below it and adds like a 2px wide sliver to the right of the img. Here is the table layout Code:
<div class='wrapp'>
<img src='Images/tr.gif' />
<table style='width:100%;'>
<tbody>
<tr class='time'>
<td colspan='6' style='text-align:left;'>" . date('F d Y',$key[5]) . ", " . date('g A T',$key[5]) . "</td>
</tr>
</tbody>
</table>
[/div]
Then here is the related CSS codes to make the image float to the right. Code:
.wrapp {
margin-bottom:8px;
width:354px;
text-align:center;
}
.wrapp img {
float:right;
display:inline;
}
table {
margin-left:auto;
margin-right:auto;
}
So once again what im trying to do is have the corner img show on the top right corner of the wrapp div. It works perfect in firefox but again it does not work in IE... and I have read about 20 articles on google that talk about these problems but I just can't figure the right combination out to make it work. Thanks in advance for any help! I'm looking for a CSS element that behaves like a table, where the size of the container will always be just big enough to surround the data inside, and will grow or shrink based on the content inside without having to specify any widths or heights. A div (with a border) with no width specified will go on forever horizontally. A table (with a border) with no width will stop as soon as the data inside ends. Is there a way to simulate this table behavior using CSS? Thanks Code: table.community {
background-color:#FFFFFF;
font-size:11px;
font-family:Arial, Helvetica, sans-serif;
color:#414141;
table-layout: fixed;
width: 548px;
margin: 1px;
}
<table class='community_field'> The table is ignoring the width..doesn't stretch the width designated. Percentage doesn't work either.. im trying to make a table have a max width (so it can shrink of the browser window shrinks or the user has a smaller screen resolution) Code:
<STYLE type="text/css">
#max800 { max-width: 800px; text-align: left;}
#max750 { max-width: 750px; text-align: left;}
</STYLE>
thats the css in the header section of my document (which is a .php document but this part is not in <?php ?> tags on a table if i put <table id="max800"> it does not fallow the max width propety i am trying ot give it (or the text align for that matter) instead it shrinks to the smallest possible width like it would nomrally do what am i doing wrong? Hi Is it possible to give a table widths style the ability to have a minimum and maximum width? eg, it has to be 10px to 30px in width? so if content doesnt fill it enough, it will be 10px but if there is loads of content it will only goto 30px in width ? Hello, I have not used CSS very much, so this may be a fairly simple problem. I want a table to be 800px wide, and 'centered' in the screen (like msn page appears when you open it at any resolution greater than 800x600). Then I have a TD whom I want to be 150px wide, how can I achieve this affect just by typing: Code: <table class="masterTable"> and Code: <td class="masterCell"> This code results in a DIV box with 1 pixle borders, with tabs at the top. Code: <html>
<head>
<title>Untitled</title>
<style type="text/css" media="screen">
/* Top Tab Menu */
#navlist
{
border-bottom: 1px solid #ccc;
margin: 0;
padding-bottom: 19px;
padding-left: 10px;
}
#navlist ul, #navlist li
{
display: inline;
list-style-type: none;
margin: 0;
padding: 0;
}
#navlist a:link, #navlist a:visited
{
background: #E8EBF0;
border: 1px solid #ccc;
color: #666;
float: left;
font-weight: normal;
line-height: 14px;
margin-right: 8px;
padding: 2px 10px 2px 10px;
text-decoration: none;
}
#navlist a:link#current, #navlist a:visited#current
{
background: #fff;
border-bottom: 1px solid #fff;
color: #000;
}
#navlist a:hover
{
color: #666;
background: #fff;
}
/* Big Box Below Tabs */
#content_box {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
body {
margin: 10px;
}
</style>
<title>Test</title>
</head>
<body>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Test One</a></li>
<li><a href="#">Test two</a></li>
<li><a href="#">Test three</a></li>
<li><a href="#">Test four</a></li>
<li><a href="#">Test five</a></li>
</ul>
</div>
<div id="content_box">
<table width="100%" border="0" cellpadding="5">
<tr>
<td>
Test<br />Test<br />Test
</td>
</tr>
</table>
</div>
</body>
</html>
In it, is a table with 100% width which will hold row data from a database. It works very well if Firefox. But in IE, the right edge of the DIV box is pushed to the right by two pixles. I believe it is the table doing this. I'm not understading how to have the non fixed width DIV contain a non fixed width table. See the real thing at Siliconsatan.com/example.php See a close up image below. |
|||||||