CSS - Rendered Tables With Strange Tags Break !!
Similar TutorialsHi, What is my CSS file is making my <p></p> tags not break a line? My css file is located he Code: /* Theme Name: U5 Theme URI: (URL address blocked: See forum rules) Description: This theme is form <a href="utombox.com">UtomBox.com</a>. Version: 6.11 Author: Utom Author URI: (URL address blocked: See forum rules) */ * { list-style:none; text-decoration:none; margin:0; padding:0; } blockquote { margin-left:15px; background-color:#F8F5D1; border-left:5px solid #F9CA68; border-right:1px solid #F9CA68; border-bottom:1px solid #F9CA68; border-top:1px solid #F9CA68; margin-right:15px; padding:4px; } .navigation { font-family:"Trebuchet MS", Verdana, sans-serif; margin-bottom:5px; font-size:12px; } .navigation a { color:#3E6697; text-decoration:none; } .navigation a:hover { color:#3E6697; text-decoration:underline; } .navigation .alignleft { float:left; } .navigation .alignright { float:right; } .post { margin-right:10px; clear:both; border-bottom:1px dotted #999999; margin-bottom:5px; padding-bottom:10px; margin-top:10px; } .post h1 { font-size:30px; font-family:"Trebuchet MS", Verdana, sans-serif; } .post h1 a { color:#4374b0; text-decoration:none; padding-left:1px; padding-right:1px; } .post h1 a:hover { color:#4374b0; text-decoration:underline; padding-left:1px; padding-right:1px; } .post h2 { font-size:20px; font-family:"Trebuchet MS", Verdana, sans-serif; } .post h2 a { font-size:20px; color:#4374b0; text-decoration:none; padding-right:1px; margin-top:5px; } .post h2 a:hover { font-size:20px; color:#4374b0; text-decoration:underline; padding-right:1px; margin-top:5px; } .post small { font-size:10px; color:#666666; font-family:Verdana, Arial, Helvetica, sans-serif; } .post small a { color:#3E6697; text-decoration:none; } .post small a:hover { text-decoration:underline; } hr { clear:both; border:0px; background-image:url(/images/hor_div.gif); background-repeat:repeat-x; height:1px; background-color:#FFFFFF; padding:0px; } body { overflow:auto; background:#fff; color:#fff; font-size:11px; line-height:22px; font-family: "Verdana", Lucida Grande, Arial, Helvetica, sans-serif; } p { font-size:11px; margin:0; margin-bottom:15px; } p a { color:#333; text-decoration:none; margin:0; margin-bottom:15px; } p a:hover { color:#333; text-decoration:underline; margin:0; margin-bottom:15px; } h1,h2,h3,h4,h5,h6 { font-family:"Trebuchet MS"; } p,.entry ol,.entry ul { margin:0; } .entry ol,.entry ul { padding:0; } .entry strike{ text-decoration:line-through; } input,textarea { background:#fff; border:1px solid #999; font:11px "Verdana", Arial, Helvetica, sans-serif; color:#333; padding:2px; } input[type=text]:focus,textarea:focus { background:#fff; border:1px solid #666; font:11px/150% "Verdana", Arial, Helvetica, sans-serif; color:#333; } #wrapper { background:#fff url("images/bg.png") repeat-y center center; margin:0 auto; padding:0 5px; } #header { height:100px; } #headerimg { height:100px; } #headerimg h1 a { background:transparent url("images/logo.png") no-repeat 0 0; position:absolute; width:180px; height:100px; overflow:hidden; text-indent:400px; line-height:200px; } #headerimg .description { display:none; } #box { padding:0 20px 20px; } #content,#sidebar { float:left; margin:0 20px 0 0; } #content { width:550px; color:#333; } #content2 { width:550px; color:#333; float:left; margin:0 50px 0 0; } .narrowcolumn a { color:#333; text-decoration:underline; margin:0; margin-bottom:15px; } .narrowcolumn ul.u_datetime { background:#666 url("images/datetime.png") no-repeat 0 0; width:60px; height:60px; float:left; text-align:center; color:#FFF; margin:0 10px 0 0; } .narrowcolumn li.u_month { font-size:10px; line-height:20px; } .narrowcolumn li.u_day { font-size:20px; font-weight:700; line-height:20px; } .narrowcolumn li.u_year { font-size:12px; font-weight:700; line-height:20px; } .narrowcolumn h2 a { color:#4374b0; font-size:20px; margin:0; } .narrowcolumn .u_tag,.narrowcolumn ul.u_postinfo li { line-height:23px; margin:0 10px 0 0; padding:0 0 0 20px; } .narrowcolumn .u_tag { background:transparent url("images/tag_blue.png") no-repeat left center; } .narrowcolumn .u_author { background:transparent url("images/user.png") no-repeat left center; } .narrowcolumn .u_timepost { background:transparent url("images/time.png") no-repeat left center; } .narrowcolumn .u_category { background:transparent url("images/folder.png") no-repeat left center; } .narrowcolumn .u_comment { background:transparent url("images/comments.png") no-repeat left center; } .narrowcolumn .entry { clear:both; padding:10px; overflow : hidden; } .narrowcolumn .entry blockquote { border-left:2px solid #fff; color:#666; margin:0 0 0 2em; padding:0 0 0 2em; overflow:hidden; } .narrowcolumn .entry ol li { list-style:decimal; } .narrowcolumn .entry ul li { list-style:disc; } .narrowcolumn .entry img { margin:5px; } .narrowcolumn .entry a:hover img { border:0px solid #FFF; } .narrowcolumn .navigation { height:20px; margin:0 0 20px; } .narrowcolumn .navigation_page a,.narrowcolumn .navigation_page .utompage{ font-size: 10px; float: left; height: 20px; padding: 0 5px; line-height: 20px; margin: 0 1px 1px 0; } .narrowcolumn .navigation_page a{ background: #fff; border:0px solid #fff; color: #666; } .narrowcolumn .navigation_page a:hover, .narrowcolumn .navigation_page .utompage{ color: #4374b0; background: #fff; border:0px solid #fff; } .narrowcolumn .alignright { float:right; } .narrowcolumn .postmetadata { border-top:1px solid #fff; border-bottom:1px solid #fff; margin:20px 0; padding:10px; } .narrowcolumn .postrss2 a { background:transparent url("images/rss_big.png") no-repeat 0 0; position:absolute; width:80px; height:80px; overflow:hidden; text-indent:400px; line-height:200px; margin:-5px 0 0 400px; } .narrowcolumn .postmetadata li { line-height:23px; padding:0 0 0 20px; } .narrowcolumn .postdatetime { background:transparent url("images/time.png") no-repeat left center; } .narrowcolumn .postcategory { float:left; background:transparent url("images/folder.png") no-repeat left center; margin:0 10px 0 0; } .narrowcolumn .posttag { float:left; background:transparent url("images/tag_blue.png") no-repeat left center; } .narrowcolumn .posttrackback { clear:both; background:transparent url("images/arrow_refresh.png") no-repeat left center; } .narrowcolumn .postedit { clear:both; background:transparent url("images/pencil.png") no-repeat left center; } span.ugr { float:left; width:50px; height:50px; border:0px solid #666; margin:0 3px 3px 0; } .narrowcolumn h3#comments,.narrowcolumn h3#respond { font-size:15px; margin:10px 0; } .narrowcolumn ol.commentlist { border:0px solid #666; border-bottom:none; margin:0 0 20px; } .narrowcolumn ol.commentlist li { border-bottom:0px solid #666; background:#fff; padding:10px; } .narrowcolumn ol.commentlist li.alt { background:#fff; } .narrowcolumn .commentlist .uar,.narrowcolumn .commentlist .uar a { font-size:14px; font-weight:700; color:#333; } .narrowcolumn .spost,.narrowcolumn .commentlist p { clear:both; } .narrowcolumn #comment { width:80%; } My homepage is he Code: tonycai.com As you can see my paragraphs doesn't break a line. Thanks Hi, I've done an English site which works but now I'm doing the language versions..in particular, Arabic, which is read from right-to-left (direction: rtl) http://www.ntcjapan.com/languages/arabic/dindex.html On IE, the page looks fine. On Firefox, however, the <UL> tags (see light blue and normal blue text in middle of page) are being aligned to the right, overlapping the <div id="main"> which is supposed to contain it. Code: #main { width: 590px; padding-top: 115px; padding-left: 4px; padding-right: 5px; background: url(../../../images/0_logo.gif) no-repeat; float: left; margin: 0px 3px 0px 0px; } I do want everything aligned to the right, since Arabic is apparently read that way, but I need the effect as shown on IE. Any ideas how to make this work? Also, if anyone has any recommendations on what I could do to fix the W3C validation errors , please let me know. Thanks very much in advance! Hi, I need to convert a table to plain div tags, and have no idea how to do it. Here is the original code, and the code I need it to look like is after it: Code: <table width="550" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="10" height="29" background="images/table_top_l.PNG"> </td> <td valign="bottom" background="images/table_top.PNG" class="style2"> TITLE</td> <td width="10" background="images/table_top_r.PNG"> </td> </tr> <tr> <td background="images/table_s_l.PNG"> </td> <td><p> </p> <p> </p></td> <td background="images/table_s_r.PNG"> </td> </tr> <tr> <td height="10" background="images/table_bot_l.PNG"></td> <td background="images/table_bot.PNG"></td> <td background="images/table_bot_r.PNG"></td> </tr> </table> Here is what I need that to look like: Code: <div id="left_inner"> </div> Does anyone here know of any good generators for this kind of thing, I have been using tables for years and am stuck because Joomla requires css tags to dynamically generate modules. Any help I could get is appreciated! I have this site http://cahedev.nmsu.edu. If I navigate this site with Firefox, Opera or any MacOs browser, things are fine. It looks good. Then enter Microsoft, IE forgets that there is a css page needing to be viewed with the page. Any ideas? Those asking for clarification, please visit the site with IE and you can see better than me trying to explain it. w3 css-validation tool Quote: context:html body Property word-break doesn't exist : break-all it doesnt validates ,, why?? It changes both attribute in ie and firefox,, I use it because when people choose bigger text sizes my divs mix up because of long words so I use word-break. What do you prefer me?? Live without validation Greetings, I'm hoping to a few more sets of eyes on the problem I'm experiencing as I'm sure there is a simple solution that I am overlooking. Look at http://test.budonk.com/template.php?gn=workwedo in IE 5.5+, Netscape 7, Firefox, Safari - anything but Netscape 6.2 (windows). You will see that everything appears to be in place. Now if you look at the same page in Netscape 6.2, you will see that the text of the buttons below the logo on the left ("strategy development", "visual design", etc.) do not line up on their background as they should. See attached screen shots as well. The spacing between the images is being controlled by the "margin" style. And for some reason, it is rendering more of a top and bottom margin than specified in the stylesheet (see http://test.budonk.com/style.css - .sNavImg). I've had other experiences similar to this in the past that ended up being an issue with the whitespace within the HTML that was sent down to the browser (the images are dynamically added on the server using PHP), but this does not appear to be the case here. Any, I've been racking my brain for 2 days on this to no avail. If anyone could take a look and see if you can find what I'm missing, I'd be most appreciative. Thanks This problem is in Internet Explorer. Here's the first page that looks the way it should: http://www.invistation.com/invite_me/contact.php And here's the other page, that references the same css file, but rendered differently: http://www.invistation.com/invite_me/resetpass.php My CSS File: http://www.invistation.com/invite_me/css/index2.css What gives? It doesn't make any sense why the form on the resetpass page is shifted more to the right than the form on the contact page. I'm using the same div for the two forms. If I use word-break:break-all solves the problem when I enter a word without spaces (for e.g pppppppppppppppppppppppppppppppppppppppppppp), it breaks and coming in line by line like (ppppppp ppppppp ppppp) as I required. If I use word-break-cjk solves the problem when I enter a word without spaces (for e.g Transfer Approval flow- Large value at Notes to Approvers distubs the UI on Approval tracking page.Transfer Approval flow- Large value at Notes to Approvers distubs the UI on Approval tracking page.Transfer Approval flow- La Transfer Approval flow- Large value at Notes to Approvers distubs the UI on Approval tracking page.Transfer Approval flow- Large value at Notes to Approvers distubs the UI on Approval tracking page.Transfer Approval flow- La), it breaks the word as I required. But I need both scenarios should work. Which style I need to use...? I'm not confident enough with CSS to just use it, so I'm mixing it with some tables too. I want a layout with two tables next to each at the top and then another below. The two at the top are working fine, but the one below keeps jumping back up to the top. I've managed to get an ugly fix by putting in a load of <br> but this doesn't work in IE7 (unless I add a lot more, pushing the content way down in other browsers) and isn't much of a solution. The other problem I have is that I want to have the majority of my page with a white background, but to get a surrounding border I've set the body background to be a colour and then placed a div around all the content. I want this div to be the size of the page and so set it's height to 100%, but this makes it too small. Not sure why. Here is my code for my page and CSS. If anyone can help I'd be most grateful. 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=utf-8" /> <title></title> <link href="incl/default.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> <!-- function navon(num) { document.getElementById("nav" + num).style.backgroundColor = '#CDEB8B'; document.getElementById("nav" + num).style.paddingTop = '0px' document.getElementById("nav" + num).style.paddingBottom = '0px'; document.getElementById("nav" + num).style.borderTopWidth = '10px'; document.getElementById("nav" + num).style.borderBottomWidth = '10px'; } function navoff(num) { document.getElementById("nav" + num).style.backgroundColor = '#C3D9FF'; document.getElementById("nav" + num).style.paddingTop = '8px' document.getElementById("nav" + num).style.paddingBottom = '8px'; document.getElementById("nav" + num).style.borderTopWidth = '2px'; document.getElementById("nav" + num).style.borderBottomWidth = '2px'; } //--> </script> </head> <body> <div class="main"> <table width="29%" border="0" cellpadding="2" cellspacing="5" align="left"> <tr> <td><img src="" alt="" width="230" height="80" border="0" /></td> </tr> </table> <table width="70%" height="60px" border="0" cellpadding="2" cellspacing="5" align="right"> <tr> <td width="180px" class="nav" id="nav1" onmouseover="navon('1')" onmouseout="navoff('1')">link</td> <td width="180px" class="nav" id="nav2" onmouseover="navon('2')" onmouseout="navoff('2')">link</td> <td width="180px" class="nav" id="nav3" onmouseover="navon('3')" onmouseout="navoff('3')">link</td> <td width="180px" class="nav" id="nav4" onmouseover="navon('4')" onmouseout="navoff('4')">link</td> <td width="180px" class="nav" id="nav5" onmouseover="navon('5')" onmouseout="navoff('5')">link</td> </tr> </table> <br /><br /><br /><br /><br /><br /> <table width="100%" border="0" cellpadding="2" cellspacing="5" align="center"> <tr> <td width="70%"> some content </td> <td width="30%"> some more content </td> </tr> </table> </div> </body> </html> Code: @charset "utf-8"; /* CSS Document */ body { padding-right: 4%; padding-left: 4%; padding-top: 30px; padding-bottom: 30px; font-family: Arial, Helvetica, sans-serif; font-size: 14px; letter-spacing: 0.1em; color: #000000; background-color: #EEEEEE; } a:link { color: #000000; text-decoration: none; } a:visited { color: #000000; text-decoration: none; } a:active { color: #000000; text-decoration: none; } a:hover { color: #000000; text-decoration: underline; } .main { background:#FFFFFF; border: 10px solid #36393D; width: 89%; padding: 5%; } .nav { padding: 8px; background-color: #C3D9FF; vertical-align: middle; text-align: center; font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 24px; color: #36393D; cursor:pointer; border: 2px solid #36393D; } The question is "what effect will page-break-after have on screen media"? Am I correct when I say that it will have no effect? I believe that page-break-after only affects print media, but I have poor reading comprehension and would just like to double check. Hi, I'm trying to get my XHTML/CSS site to run on a variety of browsers. Right now it works in all my target browsers except IE 5 Mac (untested on IE 5 PC). The problem, as you'll see below, is that the page header ("Web design") isn't put on a separate line from the navbar as it is on Safari, NS, Mozilla, FireFox, OmniWeb, etc. Can anyone help me come up with a solution to this? The page is he http://kazezb-1.res.carleton.edu/~ben/ Ben Anyone know a way to put a page break in a standard html/php webpage? I am printing invoices and need to break to another page after a certain amount of line items are listed. I am wondering if it is possible to include a line break within the content area of the :after pseudo element. I would like to create a class that adds text following an image, i.e. .click_for_larger:after { font-size: 0.8em; content:"<br />- Click for larger version -"; } Of course, in this example the "<br />" would be printed. Is there any way to indicate that there should be a line break before the text is displayed? Cheers - george Can anyone confirm this? It seems to me that page-break-before doesn't work when printing in Landscape in IE7 (you can just look at the page preview, it does seem to work in portrait). Any thoughts for a workaround? Question for the CSS gurus: I have a site that is listing several steps to complete a process, and each step is displayed in a table. The problem is that IE6 (I believe my workplace uses 6, anyway) doesn't want to break it properly - at times it breaks it in the middle of the tables. I don't want to manually enter the page breaks each time (as I know I can do with page-break-xxx: always), because future updates may be done by someone who has absolutely no coding experience. Any thoughts on how to achieve what I'm looking for in IE6? Thanks! How do I create two div blocks that lay side by side from each other? Right now I have two "column" divs (one left and one right), and separate "box" div that contain the content. CSS: Code: div#frame { width: 40%; margin-top: auto; margin-bottom: 50px; margin-left: auto; margin-right: auto; border-style: solid; border-width: 5px; border-right-color: black; border-bottom-color: black; border-left-color: white; border-top-color: white; } div#title { width: 100%; background-color: black; color: white; } div.box { width: 100%; border-style: solid; border-width: 5px; border-right-color: black; border-bottom-color: black; border-left-color: white; border-top-color: white; } div#left { width: 45%; } div#right { width: 45%; margin-left: 50%; } HTML: Code: <div id="frame"> <!---------------------------> <div id="left"> <div class="box"> <div id="title">NEWS</div> fsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jklfsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jklfsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jklfsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jklfsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jkl</div> <div class="box"> <div id="title">RECENT GAMES</div> fsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jkl</div> </div> <!---------------------------> <div id="right"> <div class="box"> <div id="title">NEWS</div> fsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jklfsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jklfsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jklfsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jklfsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jkl</div> <div class="box"> <div id="title">RECENT GAMES</div> fsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jkl</div> </div> </div> Link: http://mushsauce.110mb.com/art.html Hi im having trouble with a padding problem. I have a paragraph with a background color, and I need the paragraph to be on two seperate lines so I add the <br> tag and when i do this happens. http://www.sloweducation.com/la.htm You see, it only does the padding-left on the top line.. is there a way I can make it pad the bottom line also? I dont know what to do at all. Thanks. I am trying to print a table withing a loop. Whenever the loop reaches class = "end" I want the printer to start a new page. Code: <div id = "texter"> <table><td></td> . . . <td class="end">sdfs</td> <td>hh</td> . . . <td class="end">kkk</td> <form> <input type="button" value="Print this page" onClick="window.print()"> </form> </table> </div> Code: @charset "utf-8"; /* CSS Document */ body { font-size: 10pt; font:Arial, Helvetica, sans-serif background-color: #FFFFFF; margin: 0; color:#000000; background-color: #FFFFFF; } #texter { width:auto; height:auto; position:absolute; top:2.6mm; left:3.9mm; background-color:#333333; } input, button { display:none;} #texter.end { page-break-after:always} THANKS Hi all.. I been tried to put page break function inside <div> tag but it still can't take any effect. Am i correct or any others idea? And when i put in page break function and want to print page 2, but it'll also print out some page 1 table field. |