|
CSS - Tables Do Not Render "correctly" Text Overflows
Hi All,
Developed a weird issue in FF and IE8 and am not sure what to do with it. I have some tables that will just not display correct, the table is rendering a little too small and making the text overflow the cells. Its really odd and not sure what to do about it? I took a screen shot in IE, but the have happens in FF. Anyone any ides? Similar TutorialsIf you go here company.com layout It looks correct in IE or Firefox But in Chrome/Opera the text is a different Font and is bigger and it messes stuff up. Here is the CSS where font is defined for body. All other elements are defined with the same Font declaration. body { background: #e3edc2; color: #333; font: .8em, arial, helvetica, sans-serif; margin: auto; padding:0px; } I'm taking over a departmental web page that has a whole bunch of Code: <body topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0"> in the web pages. Does anyone know how to put this in a stylesheet so that I don't have to put this code in every <body> tag when I create a new page? I've searched all over and can't find a reasonable resolution. Thanks what is the equivilant to <table border="1" cellpadding="2" cellspacing="0"> in css? i've tried PHP Code: table { border-spacing: 0px; padding: 0px; border-colapse: colapse; border-style: solid; border-width: 1px; } td { border-style: solid; border-width: 1px; padding: 2px; } That makes the width 2px wide though. I want it to only be one. And the padding seems to be messed up as well. I would appreciate any advise as to whether this degrades properly as the browser is narrowed. I didn't post this in the "critique" forum because my only concern (right now) is related to CSS. There is a separate style sheet for handhelds, so if you have one I would appreciate a look from there also. Most links are still inactive. Liquid design TIA, Rob I'm using the CakePHP framework to build my site. I hope I'm not asking an impossible question and being since I'm new an all.. Anyways I finished a simple design well I thought it was simple anyway until I tried to make the content box to be a fluid width. Here's what it's supposed to look like. http://planet-rpg(dot)com/PR_style.png // yes I know I'm a new user.. Here's what I currently have. http://planet-rpg(dot)com Here's my coding. html Code:
<?php echo $html->docType('xhtml-trans'); ?>
<html>
<head>
<title>Planet RPG::. Imagine a creative universe : <?php echo $title_for_layout; ?></title>
<?php echo $html->css('styles'); ?>
</head>
<body>
<div id="top_bar">
<p>top bar</p>
</div>
<div id="body">
<div id="header">
<p>Header</p>
</div>
<div id="page-wrap">
<ul id="navigation">
<li class="first"><a href="/games/">Games</a></li>
</ul>
<div id="frame">
<div id="container">
<div id="main_content">
<p>Content area</p>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<p>footer coding</p>
</div>
</body>
</html>
css Code:
html {
background: #2b435d;
}
html, body {
margin: 0;
}
body, table {
color: #303030;
}
img { border: 0; }
#body {
background: #d8dde8;
padding: 0 0 16px;
}
#page-wrap {
min-width: auto;
margin: 10px auto;
}
#frame {
margin: 0 auto;
padding: 0px 1170px 0px 220px;
margin-top: -17px;
}
#main_content {
background-color: #fff;
}
#header {
background: url("../img/header.png") repeat-x bottom left;
height: 64px;
margin-top: 36px;
}
#navigation {
background: url("../img/navigation.png") repeat-x bottom left;
height: 31px;
margin-top: -20px;
font-family: "Arial", sans-serif !important;
font-size: 14px;
color: #fff;
text-shadow:-1px -1px 0 black;
list-style-type: none;
padding:1px 5px 1px 220px;
}
#navigation li {
float: left;
}
#navigation li a {
border-left: 2px solid #303030;
text-shadow:-1px -1px 0 black;
color: #D0D0D0;
font-size: 14px;
font-weight: bold;
text-decoration: none;
display: block;
height: 21px;
padding: 6px 12px 1px;
}
#navigation li a:hover {
color: white;
text-shadow:-1px -1px 0 black;
}
#navigation li.first {
padding-left: 236px;
margin-left: -236px;
text-shadow:-1px -1px 0 black;
}
#navigation li.first a {
background: url("../img/cursor.png")bottom center no-repeat; height:24px;
color: #6193c7;
border: 0;
text-shadow:-1px -1px 0 black;
}
#logo {
width: 166px;
height: 50px;
margin-top: -32px;
margin-left: 20px;
position: absolute;
z-index: 2;
}
#footer {
background: #607080 url("../img/footer.png") repeat-x;
height: 60px;
padding: 30px 0;
clear: both;
}
#top_bar {
background: url("../img/top_bar.png") repeat-x bottom left;
height: 36px;
font-family: "Arial", sans-serif !important;
font-size: 12px !important;
font-weight: normal !important;
height: 36px;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 5;
}
I haven't used CSS/html in awhile but if anyone can help me either "fix" the content box so it appears like mockup which would be centered on my screen as my resolution is 2560X1600(30") and just repeat the <div's> when needed. Hope someone can help me with my question. http://stuweb.cms.gre.ac.uk/~as234/full/full.htm some problems: in IE the menu at the top is "block" level but i want it to be in a line? whereas in ff its ok! in ff, one of the menu image (called "main" on the left of review) doesnt appear but if u hover over it, u will see the rollover image! the background colour should be grayish however that DOESNT happen! ok, i just read something about how css is so much better than tables. could someone explain to me why? i mean in terms of organization. it said its simpler etc. i guess thats true if you're doing dotted tables and stuff like that. another q, if im doing a table that basically makes a border out of images, should i redo it in css? whats the difference, in my case i mean, with the code im using? heres basically what my code is if you want to see it. still working on how to load the border after the content. Code: <table background=outerborderimage> <tr><td><image here>text here </td></tr> <tr><td background=topborderimage></td></tr> <tr><td background=middleimage> <table align=left cellpadding=0 cellpadding=0 border=0><tr><td> main text </td><td>more text </td></tr></table> </td></tr> <tr><td background=bottomimage></td></tr> </table><br> I know how to position regular text using the in-line style "text-align:right", but when I try to do that with a link I get nowhere. Simplified example: Code: <html> <body> <td><p style="text-align:right">Google</p></td> <td><a href="http://www.google.com" style="text-align:right">Google</a></td> <td><a style="text-align:right" href="http://www.google.com">Google</a></td> <td><span style="text-align:right"><a href="http://www.google.com">Google</a></span></td> <td style="text-align:right"><a href="http://www.google.com" style="text-align:right">Google</a></td> <span style="text-align:right"><td><a href="http://www.google.com" style="text-align:right">Google</a></td></span> </body> </html> The first body line works fine to move the text to the right, but the link in lines 2-5 of the body are stuck on the left. Any suggestions? (My actual code invokes a class from a css page in a particular <td> and I'm trying to force a link in that <td> to the right using an in-line style; while I can do that for regular text I haven't found the secret of doing that for a link.) (I originally posted this at the end of another of my topics but I don't think it was seen). I have just noticed this problem in firefox (may happen in other browsers) but I couldnt make it happen in IE6. After the first load of the page or after a "hard refresh" (ctrl + F5) the middle and right column do not "shift up" and leave a gap. (see attached picture). But if I refresh (just F5) firefox shifts them up to display the page as it should be seen. Example Picture The site itself. Any ideas? I am using the following code. In firefox the input box (including the border) fits a nice box of 83 by 15. In IE it seems to not be so well, and is bothering things near it. Any ideas on how to rectify this? Code:
<td><input type="text" class="loginbox" size="13" /></td>
.loginbox
{
border: 1px;
border-style: solid;
border-color: #9AA8C3;
padding: 0;
margin: 0;
text-decoration: none;
font-size: 11px;
color: #40668C;
}
Okay here's the problem, I have used px instead of % and I have a feeling it's ruined my whole site because of the fact that users can set their font size custom which TOTALLY messes up margins and things that I have set so precisely. Here is my site: www.msredimp.000webhost.info At small it works perfectly and the forms stay all normal, but when it's increased or decreased it totally ruins it. Is there a way to force the settings in Mozilla to normal size? Or any other way? Thank you, and sorry for being such a newbie. Hi guys, For a pure CSS site, is it still necessary to have height="82" and width="82" in <img ... /> ? Moreover, is it depreciated to have a size="25" tag in <input elements? (I know it could ba handled in CSS but nice to have directly in the html). Thank you Hi, I'm trying to build a nav using css, I need to style each <li> within the nav becuase they need to be different lengths on the page. I have had it working fine on IE but I can'#t get it working for for any other browser. Does soneone know how I can style each of my list items accordingly, notice the different block lengths for each one which is very important. I have tried both id="Style" and class="Style" and no joy, I have also tried #nav ul li li li li li a:hover in my style without id or class in my HTML Here is my Html PHP Code: <DIV id="nav"> <ul> <li id="1"><a href="Home">Home</a></li> <li id="2"><a href="About-us">About us</a></li> <li id="3"><a href="FlexNews">FlexNews</A></li> <li id="4"><a href="Careers">Careers</A></li> <li id="5"><a href="Contact">Contact</A></li> </ul> </div> Pretty straight forward, now my css PHP Code: #nav { width:1005px; vertical-align: middle; text-align: left; } #nav ul { list-style: none; padding: 0; margin: 0; } #nav li { float: left; text-align: left; } #1 a{ line-height: 20px; float: left; width: 215px; display: block; color: #000000; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #1 a:hover { line-height: 20px; float: left; width: 215px; display: block; color: #FFFFFF; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; background-color: #33A02C; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #2 a{ line-height: 20px; float: left; width: 211px; display: block; color: #000000; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #2 a:hover { line-height: 20px; float: left; width: 211px; display: block; color: #FFFFFF; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; background-color: #33A02C; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #3 a { line-height: 20px; float: left; width: 211px; display: block; color: #000000; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #3 a:hover { line-height: 20px; float: left; width: 211px; display: block; color: #FFFFFF; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; background-color: #33A02C; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #4 a { line-height: 20px; float: left; width: 184px; display: block; color: #000000; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #4 a:hover { line-height: 20px; float: left; width: 184px; display: block; color: #FFFFFF; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; background-color: #33A02C; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #5 a { line-height: 20px; float: left; width: 183px; display: block; color: #000000; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-indent: 17px; } #5 a:hover { line-height: 20px; float: left; width: 183px; display: block; color: #FFFFFF; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; background-color: #33A02C; text-indent: 17px; } Here is an exmple link http://dev.121design.co.uk/flextrade2/ Works fine in IE but not in Firefox, heres hopling someone can help. Thanks in Advance, tried so many different methods and none seem to work. Cheers, Stuart Hi, I'm using XHTML & CSS (strict dtd) and using one large table to format my pages. Within the table I have different alignments and any other sort of thing that you would find in a table. W3.org says my XHTML --AND-- CSS are VALID, so why does the main table render off to the left of the page in Netscape?? Everything within the table is great, but the table itself is not centered. I'm using CSS in the following manner to try to center it currently Code: <!-- All the doctype stuff and head tags go here...--> <body style="text-align:center"> <!-- Rest of the document --> It works greate in IE (but what doesen't), so is this the wrong attribute to use to center the documents content in Netscape. As you may know "<center>" is not defined in the XHTML strict dtd so that options out. Thanks for any help or suggestions, Kalan I only have IE 6, so Im not sure if I have the same trouble in other versions of IE. The site looks great in FF 2 though! View: http://www.angelsar.org/development/funding.php - in FF then in IE6 and you cant miss what I'm talking about. Here is the CSS that came with the template I'm using: Code: body {
background: url(bg.png);
background-repeat: repeat-x;
background-attachment: fixed;
margin: 0 0 0 0 ;
}
div.top {
height: 50px;
background-color: blue;
border-bottom: 2px solid #eaeaea;
color: #fff;
}
div.top h1 {
letter-spacing: -2px;
font-size: 40px;
margin: -5px 0 5px 0;
padding-left: 10px;
}
div.top h1 a { text-decoration: none; color: white; }
div.body {
padding: 10px;
font-family: tahoma;
}
div.left h2, div.right h2 {
border-bottom: 1px dotted;
font-size: 16px;
padding: 10px;
margin-top: -0px;
}
div.right h5 {
margin-left: 10px;
margin-top: 0px;
}
div.left {
background-color: #fff;
padding: 5px;
float: left;
min-height: 400px;
width: 200px;
border-top: 1px solid #808080;
border-left: 1px solid #808080;
}
div.right {
background-color: #fff;
padding: 5px;
min-height: 400px;
margin-left: 220px;
border: 1px solid #fff;
border-top: 1px solid #808080;
border-left: 1px solid #808080;
}
div.footer {
clear: all;
margin-top: 15px;
border: 1px solid #fff;
font-size: 90%;
}
ul.menu {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
ul.menu li {
border-bottom: 1px solid white;
padding: 1px;
}
blockquote {
padding: 10px;
border-left: 1px dotted blue;
}
ul.menu li a {
padding: 5px;
display: block;
text-decoration: none;
border-bottom: 1px dotted;
border-left: 1px dotted;
padding-left: 15px;
font-size: 85%;
}
ul.menu li a:hover {
background-color: #eaeaea;
border-left: 10px solid blue;
padding-left: 6px;
}
p {
padding: 5px;
font-size: 90%;
}
img.rightBorder { float: right; border: 1px solid #808080; padding: 5px; margin: 5px;}
img.leftBorder { float: left; border: 1px solid #808080; padding: 5px; margin: 5px;}
img.border { border: 1px solid #808080; padding: 5px; margin: 5px; }
span.gray { color: #808080; }
span.gray a { color: #808080; text-decoration: none; }
The only thing that doesn't validate is clear: all; under div.footer but even when removing that, it doesn't solve my problem. Any help would be appreciated! Thanks! Hi guys!! W3 discourages empty <p>s. Should I put <p title="something">text</p> instead? Please refer to: http://www.w3.org/TR/html401/struct/text.html#h-9.3.1 Thanl you Hi, I'm not overly accomplished when it comes to CSS so here's my question. I've got the following HTML code: Code: <input type="text" name="field1" value="value1" style="width:100%"> I'm preloading a value into this text field which may run past the visible length of the textbox. The text box is situated inside a table cell. The text box fills the table cell space completely whilst the text inside it does not run over but once the text is more than can be displayed in the space provided by the table cell, it forces the textbox to grow. My question is, is there a way around this so that I can still instruct the textbox to be 100% width of the table cell without expanding when the text overflows. Thanks. How do I get a seperate scroll bar for the text on my website? that is basically the question. I have a main div, where content will dynamically be placed, so it will change height frequently. However, It has rounded corners, so either side of it I have 3 images, 2 of which are the corners, and one is a repeating y image. If i set a fixed size for the containing div's height(<div id="submaincontainer">), everything will jump to that.(everything else is set to inherit) However, if it's height is set to auto (which is really what I want) everything will be 1px tall. (URL address blocked: See forum rules)/cv/cv.html This is my first project with trying to strictly use div tags and CSS rather than a table. A table seems like it would be incredibly easier. Anyone know how to make this work? Heya, i've made dis treeview type "component", and sumthing is bugging me. I used divisions and addEventListener("click", wutevafunc, false) + the setTimeout funtion to enable users to expand a subnode-containing-division by double clicking the node in the tree which contains dis.. the script works.. but you double click the actual text, it gets highlighted (like, if you where to click and drag it, to copy it). Wrapping a span round the text, makes it a lill neater, since it won get highlighted if you do the double click next to the text (the containing div is wider than the text).. I tried scripting out of this too, by calling the click method on another element when the doubleclick was confirmed. so, question, is it possible to make text non-highlightable with css? i cant seem to find a css-"knob" for that anywhere.. |
|||||||