CSS - Table Wider Than Containing Div
I have a data table that has many rows and columns. When it is rendered in IE, it falls down below the left-hand navigation, as it is wider than its containing div.
In firefox, it simply grows wider (to the right) than it's containing div. How do I replicate the firefox rendering in IE6? Any help much appreciated. RB Similar TutorialsThis is the line in my index.html: PHP Code: <PRE class=yup>blah blah blah and more blah blah blahblah more blah blah blah yes yes blah blah</PRE> This is my PRE code in style.css: PHP Code: PRE { BORDER-RIGHT: #2f6fab 1px dashed; PADDING-RIGHT: 1em; BORDER-TOP: #2f6fab 1px dashed; PADDING-LEFT: 1em; PADDING-BOTTOM: 1em; BORDER-LEFT: #2f6fab 1px dashed; COLOR: #000000; LINE-HEIGHT: 1.1em; PADDING-TOP: 1em; BORDER-BOTTOM: #2f6fab 1px dashed; BACKGROUND-COLOR: #f9f9f9; width: 90%; } PRE.yup { COLOR: #000000; FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; FONT-SIZE: 12px; text-align: left; width: 80%; margin: 12px auto; } The PRE tag is in a table and i want the long text the same lenght as the short text, but i have no clue how to do it. Any ideas? I could use some help testing out a css box that's been breaking on large screen res's. Its a sliding door effect as the page gets wider made with 800px wide images. I added max-width: 1600px to my container I'm hoping that fixed it. Quote: #container{ width: 100%; margin-left: auto; margin-right: auto; margin-top: 100px; max-width: 1600px; } I've just stripped a design, due to PNG 24 transparency rendering issues in IE ~ and now have a brand new IE related problem. In order to make the page readable prior to design elements loading, the container div has a different background color to the dark body background. In IE only [up to & inc. version 6], once the page is fully loaded, the background of that div is wider than the elements it contains, leading to an ugly white strip down the right edge of it. This is only happening in IE. Does anyone know how I can get rid of the white strip? Thank you The main body text in IE stays within the width I gave it, but in Firefox, it just goes off the div, its all not showing becasue I have the containing div overflow:hidden, but why won't it stay in the fixed width div, 603px, in Firefox like it does in IE? mediacontour.com/TCS/frequently-asked-questions.php For some reason, FF is displaying the web pages bigger than chrome or IE. I'm reviewing the site CSS with firebug on both FF and chrome but can't seem to find why its pages are different sizes on different browsers. It seems the seems either FF is scaling it up or IE and Chrome are scaling it done. The other question is, which browser(s) are displaying the real size of the webpage? Any help would be greatly appreciated! http://50.116.66.243/~ab27853/ Thanks. hi. I built a flash website with a resolution of 1920x1200. The background of this web is 1920x1200 and my actual website with menu and stuff is in the middle of it with a resolution of 1024x768. How can i upload this website and in the browser to shown always the middle of the flash? I hope this is possible. thanks! I have a problem with this site - shop dot meenola dot com (Sorry - i am a new member and therefore cannot post a proper URL) - In FF the page is always scrollable to the right although there is nothing there and as far as i can tell the HTML ends in the initially viewable area. Not usually a problem for most - but using a macbook scrollpad, you tend to fly "offscreen" rather easily. Have tested in Chrome, IE, Opera and Safari - all of which display correctly (The page ends when the HTML does). Any ideas? Thanks /Adam Has anyone else experienced this? I have a div with a specified width of 503px. If I fill it with text, after about a screens worth it's physically 506px in IE (it's fine in every other browser). Anyone any ideas what could be causing this, or a solution to this problem? Many thanks Hi, Instead of organising an image sprite as follows: image image image image image image i'm wondering if there are any negative effects to organising the images in a linear fashion as follows image image image image image image I know that Flash will only render images that are a certain width or height but is there any such limitations when using css sprites? Thanks Just like the title says, the child is wider than the parent, and i want it automatically centered, so t hat the centers of both divs are inline with each other. I tried the Code: margin 0px auto; which works if the child is smaller, but it doesn't seem to work in this case, any other ideas? 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 hi every one... How can I display static headers in a table, so that headers remain visible while user scrolls the table body? This is not working in IE 7 any working example please 2. iam having a column which holds data around some 100 to 200 characters... by default i want to display some 50 characters and rest of the characters can be viewed by moving the column... if this is possible let me know how to do it with some sample code......i dont know much about CSS 3. One more problem iam facing is with the number of columns displayed in the table. I have to display around 15 to 20 columns in a table... with this 15 to 20 columns in a table, i can see scrollbar to the page ....but i dont want scrollbar to the page, instead i want want scroll bar to the table (so that it doesnot effect the design of the page) I need a fixed table width and height and also fixed column width and height..... Note: I dont mind if columns are not visible (thru scrool bar i should see the hide columns) Alright, this is probably a simple fix but I can not find the solution anywhere. I'm trying to highlight a table cell with a 2px solid red border when it is clicked. Is there a way to get this to happen with out changing the size of the cell? I hope this makes sense. Basically the cell is expanding by 1 px causing movement in the table. I have a dynamic table that is in the cell of another table. For the life of me I cant get it to stick to the top of the cell. It wants to sit at the midline of it vertically. Thanks for reading. -------------------------------------------------------------------------------- Hello, Not exactly sure where to post this question... but: I'm having a bit of trouble keeping a table at a fixed height. What I have is a Small 200x80px table above my an input form. As users type data into the input form, javascript code dynamically updates the contents of the table. I have the table width properly fixed, and the input fields have character limitations... however if a user inputs a lot of capital letters or other wide characters, the table automatically increases in height when the text wraps. It's pretty much necessary that the text wraps for the middle lines of the table, and on the other two lines I have used the javascript to remove wrapping, but I never want the table to grow longer than 80px no matter how much is typed in the fields. Is there a way that I can constrain the table height? Thanks in advance! I'm trying to get a table inside another table which completely fills the parent table, but I cannot get it to work. The simple piece of code illustrates my problem. The red table is inside the blue table but does not cover the entire cell from top to bottom, but only the centre. I want this table to be streched. Obviously height: 100% doesn't work. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html> <body> <table> <tbody> <tr> <td> 1<br>2<br>3<br>4<br>5<br> </td> <td style="background: blue;"> <table style="height: 100%; background: red;"> <tbody> <tr> <td style="vertical-align: bottom"> Test </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </body> </html> Hi all, what i want is to customise the borders of a table... i know that <div>'s can have custom borders but, for the way that the page works i used table tags <table>. (very little experience of using <div>) is there a way that css can manipulate the borders of a table? i tried using this css: .nmhead { border-color:#cccccc; border-top:border-top-style:none; border-left:border-left-style:none; border-right:border-right-style:double; border-bottom:border-bottom-width:5px; } and then in the table doing this: <td class='nmhead'> but it didnt work (attached is what i want it to look like) any ideas? Hi, CSS whizz needed! I'm currently formatting a pre-determined HTML website using CSS. The website has been formatted with ID's for all tables and cells so I can specify which colour I'd like the background of the cells. The HTML is like this: Code: <table id="Description"> <tr><th class="title">Text</th></tr> <tr><td class="data"><div class="ggcode">Text</div></td></tr> </table> So I've been formatting it like this: Code: div#Main table#Description .title { border-color:#F0E68C; background-color:#F0E68C; } div#Main table#Description td.data { border-color:#F0E68C; background-color:#F0E68C; } However the last table is like this: Code: <table id="recentPosts"> <tr> <th class="title"> Recent Forum Posts </th> </tr> <tr> <td> <table class="data"> <tr> <th>Topic</th> <th>User</th> <th>Posted At</th> </tr> <tr> <td class="clickable forumTitle"><a href="link">Text></td> <td class="username">Text</td> <td class="date">Text12/04/2009 03:25 PM</td> </tr> <tr> <td class="clickable forumTitle"><a href="link">Text</a></td> <td class="username">Text</td> <td class="date">Text</td> </tr> </table> </td> </tr> </table> I'm able to format the cells within the <table id="recentPosts">, but I can't alter the cells within <table class="data"> - the table within the table. Any ideas how I would go about doing this? Thanks in advance hi all ! Im having a little bit of problem to make a header and the table body match in a correct way. My header is declared as <table align="center" class="style36" id="header"> and the CSS controlling it is Code: table.style36 { width: 1000px; vertical-align:middle; } .style36 td{ font-family: Arial, Helvetica, sans-serif; font-size: 12px; vertical-align:middle; } And the table wich is declared as Code: <div class="scrollingDiv"> <table border="1" bordercolor="#000000" align="center" bgcolor="#FFFFFF" class="style13" id="tableBody" > And the CSS controlling it Code: div.scrollingDiv { height:420px; overflow:scroll; vertical-align:middle; width:1024px; } table.style13 { width: 1000px; vertical-align:middle; } /* Since the table has a class of style13, all td elements under that style can be selected as below... no need for more style definitions... */ .style13 td { vertical-align:middle; } .style13 th { vertical-align:middle; } My first idea was to declare a width for each td, something like: Code: <td width="30" bgcolor="#${color2}"><div align="center">${fila.sHoraent_Citas}</div></td> <td width="120" bgcolor="#${color2}"><div align="center"><a href="SvMedPro?boton=Info&idPaciente=${fila.idPaciente_Citas}">${fila.nom_Paciente}</a></div></td> AND match the header too, dosent seem to work, Im pretty new to web programing so any help is appreciated. Thanks! I have a table with a specified background color (specified in CSS). The content part of the table (a cell) uses information from a downloaded script (wordpress.com) to load information. I want the table background to shine through everything. How can I accomplish this (I suspect it is in the script CSS, but I don't know what). URL The 'home' page is how I want it (basically that background effect). But the other pages come out funny with no background. Could someone solve this, or alternatively reccommend another way. |