CSS - Error On Page
I'm not sure what settings I changed, but now my page doesn't display properly on IE 5.0 Win. My right column is getting pushed to the bottom and I get that error on page message on IE 5.0. IF anyone has that browser installed, can you take a look and see if you notice any glaring problems?? It looks fine in IE 6, Mozilla, Firefox, and Opera. But, I'd like it to work in IE 5.0 as well, or at least well enough. But, the right column dropping down doesn't look good. Thanks in advance. The site is http://www.marginalspace.com and I am using Wordpress for the index.php page. I don't think it's a php error. At least I don't think so.
Thanks! Amit Similar TutorialsI'm working on a new design for my family site and I'm having trouble with the centering of the page. The Site I love the way it looks so far, but if you adjust the size of your browser(any browser, doesn't matter...) window horizontally, certain elements fail to line up properly due to what appears to be a "remainder" error on the centering, i.e. whether there is an even or odd number of pixels to work with. Any idea how to solve this issue? I did find this at Position is Everything, but I'm not exactly clear on how to implement the proposed "solution" or if it would even work in my case... Note that the linked css in the page, is actually just a place holder, all the css is embedded at the top. Thanks... BTW - I'm just getting going on the family site now (even though I've had the domain for a while) because my wife and I just found out we are having a baby!!!! I am getting a CSS validation error It is: 251 * Parse Error / textarea { border: 1px solid silver; width: 80%; } If I comment the CSS in question out, it gives me another CSS error a little bit farther down in the stylesheet... not sure why it is doing that or how to just fix this validation error, as the ones that come up after it are similar. My end goal is to make the page look normal in FF2. Currently in FF2 some of the text in the purple "Sesame Street" box is blocked out. I didn't create this page, but have been asked to figure out why it looks like this in FF2. I am no CSS expert, but would love to hear from one! Thanks for your help. I am generating a list with PHP that is going to be printed out and hung up for display. I would prefer if the following weren't printed. 1) Top Left - Page Title (I know I can have this disappear by having a blank title, but I would prefer to have one) 2) Top Right - Page URL 3) Bottom Left - Page number (ex: 1 of 2) 4) Bottom Right - Date Is there any way to print the list without these? I wasn't sure if there is some css I can use, or if this is something that the printer prints automatically. Thanks Hello Fellas: http://global.espritwebdesign.com/muros.html This webpage will display correctly on IE, Chrome and Safari But not on Firefox 11 What strikes me the most is the error is very odd. Im Clueless. Can you visite the web page see it for yourself, and maybe give me a hint what could be? Any clues? Hi All : Currently i'm running in .NET platform together with VB.net and ASP. I faced a problem regarding to the PAGE BREAK html tag. The problem is when i want to print out a report, it will show with scroll bar and the report is very long. So what i have to do is to apply Page-Break-After/Before into the HTML. how am i know if the report already apply the Page Break function or not? And the only style i can use is CSS. Anyone familiar with this? It's urgent !! Hope can get anyone help asap. Regards, JeFFery Howcome: html, body { color: #06F; background-color: #000; font-size: 16px; text-align: center; width: 768px; } Doesn't center the page in the browser? How can I center it? Output example on my website here. I am trying to make a pattern tile the full height of the page and match up with an image at the top. It's a little bit hard to explain and a lot easier to show, so I've documented my first two attempts below. Failed Solution 1 - Pattern as a part of a div set at height: 100%; with outer divs also set at height: 100%; See attempt 1: Code: http://www.hesterdesigns.com/Web2/yellow.html Problem is that the divs aren't growing to the height of the page, and so the pattern isn't tiling the whole height of the page. Failed Solution 2 - The Pattern is part of the body background which tiles on y. See attempt 2: Code: http://www.hesterdesigns.com/Web2/index.html Any suggestions? I'm hoping to find a way to do this using only CSS and without having to resort to Javascript solutions. Hello everyone, I've been working on my school website for some time now - but I recently started over where the markup and style sheets are concerned. Both my html and css validate. This is my html source: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Secondary School</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="style.css" rel="stylesheet" type="text/css"> <script type="text/javascript"> <!-- function view_event(url) { window.open(url, 'event', 'top=100, left=100, width=200, height=350'); return false; } //--> </script> </head> <body> <div id="container"> <h1> Secondary.School. </h1> <div id="nav"> <ul> <li> <a href="index.php"> Homepage </a> </li> <li> <a href="#"> School Information </a> </li> <li> <a href="departments.html"> Departments </a> </li> <li> <a href="#"> Clubs </a> </li> <li> <a href="#"> SCC </a> </li> <li> <a href="#"> Resources </a> </li> </ul> </div> <div id="primaryRail" class="rail"> <h2> Contact information </h2> <p> <b> 127 Maple Street Testo, Orbuk, H58 435 </b> <br /> <b> Telephone: </b> (456) 245-5677 <br /> <b> Fax: </b> (456) 456-4567 </p> </div> <div id="secondaryRail" class="rail"> <h2> Our administration </h2> <p> <b> Principal: </b> <i> Alan N </i> <br /> <b> Vice-Principal: </b> <i> Lucy S </i> <br /> <b> Vice-Principal: </b> <i> Candice H </i> </p> </div> <div id="primaryContent" class="content"> <h3> Welcome to the Secondary School website! </h3> <p><b>XHTML TESTING</b><br /> April 11, 2007<br /> Posted by : <b>admin</b><br /> Pellentesque sit amet mauris. Nullam non lacus. Etiam auctor. In purus. Nulla dolor lectus, posuere et, cursus a, tincidunt non, mi. Vestibulum interdum turpis in erat vehicula consequat. Vivamus sit amet turpis vitae massa tristique auctor. Mauris quis turpis. Quisque at mi. Suspendisse consequat faucibus elit. Morbi scelerisque porttitor ligula. Vestibulum non purus. <a href="#"> link testing </a><br /> <a href="#top">Top</a></p><p><b>admin</b><br /> April 11, 2007<br /> Posted by : <b>admin</b><br /> Pellentesque sit amet mauris. Nullam non lacus. Etiam auctor. In purus. Nulla dolor lectus, posuere et, cursus a, tincidunt non, mi. Vestibulum interdum turpis in erat vehicula consequat. Vivamus sit amet turpis vitae massa tristique auctor. Mauris quis turpis. Quisque at mi. Suspendisse consequat faucibus elit. Morbi scelerisque porttitor ligula. Vestibulum non purus. <br /> <a href="#top">Top</a></p><p><b>test</b><br /> April 10, 2007<br /> Posted by : <b>mr.southern</b><br /> test<br /> <a href="#top">Top</a></p><p><b>test</b><br /> April 10, 2007<br /> Posted by : <b>mr.s</b><br /> test<br /> <a href="#top">Top</a></p><p><b>Testing</b><br /> April 09, 2007<br /> Posted by : <b>Jonathan</b><br /> This is just a test message.<br /> <a href="#top">Top</a></p><p><b>test</b><br /> April 05, 2007<br /> Posted by : <b>test</b><br /> test<br /> <a href="#top">Top</a></p><p><b>Test</b><br /> April 05, 2007<br /> Posted by : <b>Jonathan</b><br /> Test.<br /> <a href="#top">Top</a></p><p><b>Another test post.</b><br /> April 05, 2007<br /> Posted by : <b>Jonathan</b><br /> Just another test.<br /> <a href="#top">Top</a></p><p><b>Lorem ipsum dolar et sit</b><br /> April 05, 2007<br /> Posted by : <b>Jonathan</b><br /> This is just a test post.<br /> <a href="#top">Top</a></p><p><b>Lorem ipsum dolar et sit</b><br /> April 05, 2007<br /> Posted by : <b>Jonathan</b><br /> This is just a test post.<br /> <a href="#top">Top</a></p> </div> <div id="secondaryContent" class="content"> <h2>Calendar for April 2007</h2> <table> <tr class="days"><td>Su</td> <td>Mo</td> <td>Tu</td> <td>We</td> <td>Th</td> <td>Fr</td> <td>Sa</td> </tr> <tr><td class="week" title="Sun, 01st April 2007">1</td> <td class="week" title="Mon, 02nd April 2007">2</td> <td class="week" title="Tue, 03rd April 2007">3</td> <td class="week" title="Wed, 04th April 2007">4</td> <td class="week" title="Thu, 05th April 2007">5</td> <td class="week" title="Fri, 06th April 2007">6</td> <td class="week" title="Sat, 07th April 2007">7</td> </tr><tr> <td class="week" title="Sun, 08th April 2007">8</td> <td class="week" title="Mon, 09th April 2007">9</td> <td class="week" title="Tue, 10th April 2007">10</td> <td class="week" title="Wed, 11th April 2007">11</td> <td class="week" title="Thu, 12th April 2007">12</td> <td class="week" title="Fri, 13th April 2007">13</td> <td class="week" title="Sat, 14th April 2007">14</td> </tr><tr> <td class="week" title="Sun, 15th April 2007">15</td> <td class="week" title="Mon, 16th April 2007"><a href="calendar.php?dateline=1176699600" style="padding: 0px;" onclick="return view_event(this.href);"><span style="color: red; font-weight: bold;">16</span></a></td> <td class="week" title="Tue, 17th April 2007">17</td> <td class="week" title="Wed, 18th April 2007">18</td> <td class="week" title="Thu, 19th April 2007">19</td> <td class="week" title="Fri, 20th April 2007">20</td> <td class="week" title="Sat, 21st April 2007">21</td> </tr><tr> <td class="week" title="Sun, 22nd April 2007">22</td> <td class="week" title="Mon, 23rd April 2007">23</td> <td class="week" title="Tue, 24th April 2007">24</td> <td class="week" title="Wed, 25th April 2007">25</td> <td class="week" title="Thu, 26th April 2007">26</td> <td class="week" title="Fri, 27th April 2007">27</td> <td class="week" title="Sat, 28th April 2007">28</td> </tr><tr> <td class="week" title="Sun, 29th April 2007">29</td> <td class="week" title="Mon, 30th April 2007">30</td> <td class="week"> </td> <td class="week"> </td> <td class="week"> </td> <td class="week"> </td> <td class="week"> </td> </tr> </table> <a href="index.php?m=3">Previous month</a> <a href="index.php?m=5">Next month</a> <p style="font-weight: bold;">XHTML TESTING</p> <p style="font-weight: bold;">admin</p> <p style="font-weight: bold;">test</p> <p style="font-weight: bold;">test</p> <p style="font-weight: bold;">Testing</p> <p style="font-weight: bold;">test</p> <p style="font-weight: bold;">Test</p> <p style="font-weight: bold;">Another test post.</p> <p style="font-weight: bold;">Lorem ipsum dolar et sit</p> <p style="font-weight: bold;">Lorem ipsum dolar et sit</p> <p>Pellentesque sit amet mauris. Nullam non lacus. Etiam auctor. In purus. Nulla dolor lectus, posuere et, cursus a, tincidunt non, mi. Vestibulum interdum turpis in erat vehicula consequat. Vivamus sit amet turpis vitae massa tristique auctor. Mauris quis turpis. Quisque at mi. Suspendisse consequat faucibus elit. Morbi scelerisque porttitor ligula. Vestibulum non purus. </p> </div> </div> <div id="footer"> <p> <img src="images/tiger.jpg" alt="tiger logo" style="float: left;" /> | <a href="#"> homepage </a> | <a href="#"> school information </a> | <a href="#"> departments </a> | <a href="#"> clubs </a> | <a href="#"> scc </a> | <a href="#"> resources </a> | <br /> Copyright <span style="font-size: x-small;"> 2007 </span> Secondary School. </p> </div> </body> </html> And this is my style sheet: Code: /* Secondary School CSS Document /* Page and Link Formatting ---------------------------- */ a { text-decoration: underline; font-family: Georgia; padding-bottom: 3px; color: #FF42B1; } #nav a { text-decoration: none; font-family: Georgia; font-size: 12px; padding: 12px 10px 8px 10px; color: #F9F9F9; } #nav a:hover { background: #454545; } #nav li { display: inline; } body { background: url('images/header.png') repeat-x; margin: 0px; padding: 0px; text-align:center; } /* Divs etc... ---------------------------- */ #container { margin:0px auto; width: 700px; text-align: left; } #container h1 { margin-top: 60px; } #primaryRail { width: 350px; float: left; } #secondaryRail { width: 350px; float: left; } #primaryContent { margin: 55px 0px 0px 0px; width: 500px; float: left; } #secondaryContent { margin: 55px 0px 0px 25px; width: 175px; float: left; } #footer { clear: both; text-align: center; background: #EDEDED; border: #E2E2E2 2px solid; } /* Standard Elements ---------------------------- */ h1 { font-family: Georgia; font-weight: normal; font-size: 2em; color: #F9F9F9; } h2 { font-family: Georgia; font-weight: normal; font-size: 1.5em; color: #454545; } h3 { font-family: Georgia; font-weight: normal; font-size: 1.5em; color: #812F2F; } .rail h2 { color: #FFD11B; } p { font-family: Georgia; font-size: .85em; color: #454545; } .rail p { color: #F9F9F9; } .content p { line-height: 1.5em; } ul { padding: 0px; } li { list-style: none; } table { color: #AFAFAF; } td { padding: 5px; padding-top: 2px; padding-bottom: 2px; } .days { background: #DCDCDC; font-weight: bold; font-size: .75em; } .week { background: #FFFFFF; font-size: .75em; } .nomonth { background: #FAFAFA; } #swd_info { display: none; font-family: Verdana, Arial, Helvetica, sans-serif; position: absolute; width: 180px; background-color: #FFFF99; color: #000000; border: 1px solid #000000; padding: 3px; font-size: 10px; text-align: justify; } This is how it looks in FF, and that is how I would like to to be in FF, and any common browser that the user may be operating: img133.imageshack.us/my.php?image=ffexampletx6.jpg Thank you! Alright... I give up on this one. The copyright moves up and down by a pixel or two between different pages. Go from the Home page to the Diabetes page and look at the footer and you will see. I have tried changing the margins, padding, and line-height on the text in the footer. I can get it to temporarily work but as soon as I change anything above the copyright (i.e. in the #content div) like line-height, add text, and etc it moves the copyright between pages again. Basically the content div is pushing down on the copyright differently depending on the amount of text that is in the article. Because other than the text all the articles pages code is exactly the same. All the footer text is a PHP include if that makes a difference. Thanks for looking at it because I have been working on this for quite a few days now and it is buggin the ba-jesus out of me? I have a theory, the footer (thats where the copyright is) is absolute positioned. Therefore it is taken out of the flow of the document. Could this be the cause of my problem? So if I were to place all the copyright and footer links within another div within the footer div would that bring those back into flow? Like if I gave that new div a position of static or something? Or is it out of the flow regardless because it's sitting inside of an absolute positioned div? Thanks a lot - here is the site in question Hi, I have a front page which is one image only, no text. The image is centered horizontally (i.e. a simply text-align: center; ). My question is - how do I centre it vertically? (no matter what the resolution of the website visitor is). i.e. Currently the image is at the top of my screen. I would like it to be in the centre, both horizontally and vertically. Many thanks! I could do this using Frames but I absolutely loathe them so I need to do it in CSS I have an A-Z across the top of the page which stays there while the results scroll below. Unfortunately, while I can do basic CSS, complicated stuff like this is way beyond me! Help would be most appreciated! Dear all I need page height vary from page to page. But I cannot do this , please send your comments for this You can access my css , Other question is , different appear for firefox and IE , some time footer overlap I need to set pages height for their contents, can I do it with one , it is difficult to do all pages for separate styles This is my link "www. kawdoco. com/ test /" Thanks asanka Hey guys. You can run an image, a border, text, whatever you want off the top of the page, but can you do it with the bottom of the page. Code: .top { position: relative; left: 0px; top: -75px; } That will of course run an image off the top of the page, but Code: .bottom { position: relative; left: 0px; bottom: -250px; } this line of code will simply but the image relative to the top image and it's completely visible, meaning the user can view the entire image simply by scrolling down. I'm placing my <id>'s in tables right now, but I'm open to whatever. I simply want an image consistently, running off the top of the page and the bottom of the page at all times. Any ideas? Thanks in advance. When I start my page layout, it always starts around an inch down from the top of the browser. Ive seen websites, like techeblog.com that start all the way from the top. How do i do that? Thanks. I'm getting an error on IE5 for Mac on one of my pages, and I've been unable to figure out how to fix it. Here's the page (the problem is in the MPI Status Bar area): http://medieval.shadowedrealm.com/mpi/index.php If you have Firefox or IE6 on your computer, I'm sure it works fine. The problem seems to only be on IE5 for mac, where the browser stretches each of the <li>s all the way across the page, making the page extremely wide. Basically, I tried to set my CSS so that there are 6 rows of three columns each. I'm pretty sure that this has to do with the strictness of the IE5 mac browser, and I've read articles about trying to fix similar problems to this one on various sites, but I still can't figure out how to fix this specific problem. Here's my CSS code for the status bar: Code: .statusbar {width: 532px; margin-left: 10px; opacity: .60; filter: alpha(opacity=60); -moz-opacity: .60; display: block; text-align: left; background: #000000; border: 4px ridge #2B5E17; } .titleback{height: 20px; width: 528px; background: #00032F; border-top: 1px solid #16570B; border-bottom: 1px solid #16570B; border-left: 1px solid #114E6F; border-right: 1px solid #114E6F; } .titleback ul{padding: 0; margin: 0; list-style-type: none; width: 526px; } .titleback li {width: 240px; float: left; margin-left: 2px; margin-top: 2px; text-align: center; font-weight: bold; font-size: 12px; } .title{color: #FF0000; height: 20px; width: 520px; padding: 2px; font-weight: bold; margin-left: 2px; text-align: left; font-size: 13px; } .text{width: 520px; height: 96px; font-weight: bold; font-size: 9px; margin-left: 1px; } .text ul{padding: 0; margin: 0; list-style-type: none; width: 520px; margin-left: 2px; } .text li {width: 168px; height: 16px; display: inline-block; float: left; margin-left: 1px; border-left: 1px solid #808080; border-right: 1px solid #808080; } .category {width: 168px; margin-left: 2px; margin-top: 1px; } .mostrecent{width: 528px; height: 15px; padding: 1px; background: #1F1F1F; border-top: 1px solid #16570B; border-left: 1px solid #114E6F; border-right: 1px solid #114E6F; text-align: center; font-weight: bold; font-size: 9px; } Here's the HTML for the status bar, minus the php code: Code: <div class="statusbar"> <div class="titleback"> <div class="title"> MPI Status Bar </div> </div> <div class="text"> <ul> <li> <div class="category"> <a href="http://medieval.shadowedrealm.com/mpi/category.php?Category=Agriculture"> Agriculture</a> <?php //PHP code ?> </div> </li> This code repeats for two more similar <li>s before I close off the <ul> tag, and then I repeat with similar <ul>s five more times before I close off the title <div>. Hopefully this makes sense. Does anyone know how I can correct for this error within my CSS code? hello..i have just started to learn css over the web..& was testing out my page in IE & FireFox..& came across same error , my styles are gone in Firefox.. how can i fix it? Site link is provided below. Thanks -------- testing ------ http://midnite-pandaz.com/visionmag/ For those of you using BETA IE7 you will not see this error, which makes me believe that it is just IE6 being retarded. But because there are very few out there viewing sites with IE7 I have a problem. becuase I cannot post the code, unless you want my entire stylesheet and all my source, because I literally have no idea what is causing this error, but I will post the code relating to it. http://www.unlimitedgamer.net/area51/ this is a beta page for the layout I am working on, if you scroll down you will see the news becomes gradually more and more distorted, the site is 100% valid, I just ran it through the w3.org validator. code relating to problem HTML Code: <div id="wrapper" class="clearfix" > <div id="twocols" class="clearfix"> <div class="maincol" > /////////////////////////ONE OF THE NEWS POST////////// <div class="entry"> <div class="entrydate"> <div class="entrymonth">February<br /> 2006</div> <div class="entrynumber">23</div> </div> <div class="entrytitle"> <h1 id="post-215">[<span class="comment_color">2</span>] <a href="http://www.unlimitedgamer.net/23/the-focus-on-black/" rel="bookmark" title="Permanent Link: The Focus on Black">The Focus on Black</a> - <i>Death God</i></h1> </div> <div class="entrybody"> <p>TEXT TEXT </p> <div class="news_footer"> <img src="http://www.unlimitedgamer.net/wp-content/themes/gespaa_v2/images/file.gif" title="file" alt="*" /> <a href="http://www.unlimitedgamer.net/category/xbox/" title="View all posts in Xbox" rel="category tag">Xbox</a>, <a href="http://www.unlimitedgamer.net/category/playstation-2/" title="View all posts in Playstation 2" rel="category tag">Playstation 2</a>, <a href="http://www.unlimitedgamer.net/category/black/" title="View all posts in BLACK" rel="category tag">BLACK</a> </div> </div> </div> /////////////////////////END OF THE NEWS POST////////// </div> </div> <div id="leftcol" > <div class="Box"> <h3>Welcome to Unlimited Gamer</h3> <p> TEXT TEXT</p> </div> </div> </div> I only posted one of the news post because the code doesn't change depending on the news post... now for the css of all those classes and ids CSS Code: #wrapper { overflow: hidden; } #wrapper { float: middle; float/**/: none; } #leftcol{ width:149px; float:left; position:relative; font-size: 8pt; color: #e16c72 'Lucida Grande',verdana,arial,sans-serif; text-decoration: none; } #twocols{ width:630px; float:right; position:relative; } .maincol{ background-color: #FFFFFF; float: left; font-size: 8.5pt; position: relative; width:630px; } #maincol{ background-color: #FFFFFF; float: left; font-size: 9px; position: relative; width:630px; } /* *** Float containers fix: http://www.csscreator.com/attributes/containedfloat.php *** */ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix{display: inline-table;} /* Hides from IE-mac \*/ * html .clearfix{height: 1%;} .clearfix{display: block;} /* End hide from IE-mac */ /*printer styles*/ @media print{ /*hide the left column when printing*/ #leftcol{display:none;} /*hide the right column when printing*/ #rightcol{display:none;} #twocols, #maincol{width:100%; float:none;} } /*********************************************************************** * Entry * ***********************************************************************/ .entrybody p, form p, .commentbody p{ margin-top:0px; margin-left: 0px; padding-left:0px; } h1{ font-size: 24px; color: #385abe; } h2.entrydate { font-weight: normal; font-size: 16px; color: #888; margin-bottom:3px; padding-top: 3px; } entrytitle { font-family: "Century Gothic", "Lucida Grande", arial, Tahoma, Verdana,helvetica, sans-serif; margin:0px; font-weight: normal; font-size: 24px; padding-top: 5px; } .entrybody{ color: #424d53; font-size: 12px; padding-bottom: 10px; margin-bottom: 25px; border-bottom: 1px dotted #6d6d6f; padding-left:3px; padding-top: 5px; } I think thats everything, but you really need to see it for yourself to understand the error, it doesn't occur in firefox though :/ thanks for any help. I have created my first css and all has worked well, but when I try to validate it I get the message: Parse error - Unrecognized : <style type="text/css"> body { margin:10px 10px 0px 10px; padding:0px; } Can someone please explain what I'm doing wrong and how do I fix it? Desperately a student, I'm teaching myself CSS and enjoying it, but I run into problems every now and then that I'm having troubles with. In my table I call <td class="corner">, but the bgcolor tag I set in my CSS sheet is not being picked up. I've run my code through the validator and it tells me that my line Quote: property bgcolor doesn't exist : #666666 This is my CSS code: Code: td.corner { bgcolor: 666666; height: 30px; width: 15px; } I've played around with this, it seems simple but can't see what I'm missing. ANy help would be appreciated! Thanks! |