CSS - Table Doesn't Like Css
I have a table. It's a nice table, presenting its data in a clean, semantic manner. Great, so I wanted it to be a pretty table too. And I did that (problematic lines commented out for comparison):
Table with some CSS (Link no longer active). Then I thought about function again. I wanted a scrolling table (Note that this was never meant to work in the obsolete IE). I added "height: 100px; overflow: auto;" to the tbody's CSS. That's when I ran into problems: Table with only two lines of CSS added (Link no longer active). Problems: There is a horizontal scrollbar. It appears to be making up for the space that the vertical scrollbar takes up. My nice cell borders are no longer in the tbody, but instead stick out of the table, overlapping anything that comes after. Interestingly enough, although the height declaration is required in order to show scrollbars, if I only add the overflow style, I still get that nasty border chaos. I am using Firefox. Any ideas on how to fix/overcome/avoid these problems? This is really bugging me. Similar TutorialsI've taken out a snippet of the code thats not working and put it into a page here, both validate (sorry I didn't make them links as I'm a new user and it won't allow me to): ucair.cs.uiuc.edu/pdovyda2/test.html ucair.cs.uiuc.edu/pdovyda2/test.html Basically there should be 8px of padding on the table with class 'innerbox', and it works fine in FF but in IE it ignores the padding completely. I can't seem to figure out what the issue is, it seems like it should work just fine, any ideas? Thanks! I'd like to create a table that'll scroll so I can control the on-screen size and have buttons visible below the rows, and so on. I found an example, that appears to have the CSS to make it work in IE (at least that's what the comment say), but although it looks fine in Firefox, I can't get it to work at all in IE 8. Can someone take a look and tell me if there's some simple change that needed, of if this just plain is NOT going to work in IE, or what? I put the whole thing in here, so if you grab it and dump it in an html file, it should run... 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> <style type="text/css"> <!-- /* Terence Ordona, portal[AT]imaputz[DOT]com */ /* http://creativecommons.org/licenses/by-sa/2.0/ */ /* begin some basic styling here */ body { background: #FFF; color: #000; font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif; margin: 10px; padding: 0 } table, td, a { color: #000; font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif } h1 { font: normal normal 18px Verdana, Geneva, Arial, Helvetica, sans-serif; margin: 0 0 5px 0 } h2 { font: normal normal 16px Verdana, Geneva, Arial, Helvetica, sans-serif; margin: 0 0 5px 0 } h3 { font: normal normal 13px Verdana, Geneva, Arial, Helvetica, sans-serif; color: #008000; margin: 0 0 15px 0 } /* end basic styling */ /* define height and width of scrollable area. Add 16px to width for scrollbar */ div.tableContainer { clear: both; border: 1px solid #963; height: 285px; overflow: auto; width: 756px } /* Reset overflow value to hidden for all non-IE browsers. */ html>body div.tableContainer { overflow: hidden; width: 756px } /* define width of table. IE browsers only */ div.tableContainer table { float: left; width: 740px } /* define width of table. Add 16px to width for scrollbar. */ /* All other non-IE browsers. */ html>body div.tableContainer table { width: 756px } /* set table header to a fixed position. WinIE 6.x only */ /* In WinIE 6.x, any element with a position property set to relative and is a child of */ /* an element that has an overflow property set, the relative value translates into fixed. */ /* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto */ thead.fixedHeader tr { position: relative } /* set THEAD element to have block level attributes. All other non-IE browsers */ /* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */ html>body thead.fixedHeader tr { display: block } /* make the TH elements pretty */ thead.fixedHeader th { background: #C96; border-left: 1px solid #EB8; border-right: 1px solid #B74; border-top: 1px solid #EB8; font-weight: normal; padding: 4px 3px; text-align: left } /* make the A elements pretty. makes for nice clickable headers */ thead.fixedHeader a, thead.fixedHeader a:link, thead.fixedHeader a:visited { color: #FFF; display: block; text-decoration: none; width: 100% } /* make the A elements pretty. makes for nice clickable headers */ /* WARNING: swapping the background on hover may cause problems in WinIE 6.x */ thead.fixedHeader a:hover { color: #FFF; display: block; text-decoration: underline; width: 100% } /* define the table content to be scrollable */ /* set TBODY element to have block level attributes. All other non-IE browsers */ /* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */ /* induced side effect is that child TDs no longer accept width: auto */ html>body tbody.scrollContent { display: block; height: 262px; overflow: auto; width: 100% } /* make TD elements pretty. Provide alternating classes for striping the table */ /* http://www.alistapart.com/articles/zebratables/ */ tbody.scrollContent td, tbody.scrollContent tr.normalRow td { background: #FFF; border-bottom: none; border-left: none; border-right: 1px solid #CCC; border-top: 1px solid #DDD; padding: 2px 3px 3px 4px } tbody.scrollContent tr.alternateRow td { background: #EEE; border-bottom: none; border-left: none; border-right: 1px solid #CCC; border-top: 1px solid #DDD; padding: 2px 3px 3px 4px } /* define width of TH elements: 1st, 2nd, and 3rd respectively. */ /* Add 16px to last TH for scrollbar padding. All other non-IE browsers. */ /* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors */ html>body thead.fixedHeader th { width: 200px } html>body thead.fixedHeader th + th { width: 240px } html>body thead.fixedHeader th + th + th { width: 316px } /* define width of TD elements: 1st, 2nd, and 3rd respectively. */ /* All other non-IE browsers. */ /* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors */ html>body tbody.scrollContent td { width: 200px } html>body tbody.scrollContent td + td { width: 240px } html>body tbody.scrollContent td + td + td { width: 300px } --> </style> </head> <body> <div id="tableContainer" class="tableContainer"> <table border="0" cellpadding="0" cellspacing="0" width="100%" class="scrollTable"> <thead class="fixedHeader"> <tr> <th><a href="#">Header 1</a></th> <th><a href="#">Header 2</a></th> <th><a href="#">Header 3</a></th> </tr> </thead> <tbody class="scrollContent"> <tr><td>CellContent1</td><td>CellContent2</td><td>CellContent3</td></tr> <tr><td>MoreCellContent1</td><td>MoreCellContent2</td><td>MoreCellContent3</td></tr> <tr><td>EvenMoreCellContent1</td><td>EvenMoreCellContent2</td><td>EvenMoreCellContent3</td></tr> <tr><td>AndRepeat1</td><td>AndRepeat2</td><td>AndRepeat3</td></tr> <tr><td>CellContent1</td><td>CellContent2</td><td>CellContent3</td></tr> <tr><td>MoreCellContent1</td><td>MoreCellContent2</td><td>MoreCellContent3</td></tr> <tr><td>EvenMoreCellContent1</td><td>EvenMoreCellContent2</td><td>EvenMoreCellContent3</td></tr> <tr><td>AndRepeat1</td><td>AndRepeat2</td><td>AndRepeat3</td></tr> <tr><td>CellContent1</td><td>CellContent2</td><td>CellContent3</td></tr> <tr><td>MoreCellContent1</td><td>MoreCellContent2</td><td>MoreCellContent3</td></tr> <tr><td>EvenMoreCellContent1</td><td>EvenMoreCellContent2</td><td>EvenMoreCellContent3</td></tr> <tr><td>AndRepeat1</td><td>AndRepeat2</td><td>AndRepeat3</td></tr> <tr><td>CellContent1</td><td>CellContent2</td><td>CellContent3</td></tr> <tr><td>MoreCellContent1</td><td>MoreCellContent2</td><td>MoreCellContent3</td></tr> <tr><td>EvenMoreCellContent1</td><td>EvenMoreCellContent2</td><td>EvenMoreCellContent3</td></tr> <tr><td>AndRepeat1</td><td>AndRepeat2</td><td>AndRepeat3</td></tr> <tr><td>CellContent1</td><td>CellContent2</td><td>CellContent3</td></tr> <tr><td>MoreCellContent1</td><td>MoreCellContent2</td><td>MoreCellContent3</td></tr> <tr><td>EvenMoreCellContent1</td><td>EvenMoreCellContent2</td><td>EvenMoreCellContent3</td></tr> <tr><td>AndRepeat1</td><td>AndRepeat2</td><td>AndRepeat3</td></tr> <tr><td>CellContent1</td><td>CellContent2</td><td>CellContent3</td></tr> <tr><td>MoreCellContent1</td><td>MoreCellContent2</td><td>MoreCellContent3</td></tr> <tr><td>EvenMoreCellContent1</td><td>EvenMoreCellContent2</td><td>EvenMoreCellContent3</td></tr> </tbody> </table> </div> <div><br /></div> </body> </html> Exactly that question. I got this menu from a website. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <link rel="stylesheet" media="all" type="text/css" href="http://www.cssplay.co.uk/css/menus.css" /> <title>Godly Menus</title> <style type="text/css"> #menu {list-style-type:none; padding:0; margin:0; width:150px; z-index:100; float:left; height:360px; background:#000;} #menu ul {list-style-type:none; padding:0; margin:0;} #menu li {float:left; background:#fff url(http://www.cssplay.co.uk/menus/slide_fly/slide/slide_0.gif) no-repeat;} #menu li.sub {background:#fff url(http://www.cssplay.co.uk/menus/slide_fly/slide/slide_0.gif) no-repeat;} #menu li, #menu li a {display:block; color:#fff; font-family:arial, sans-serif; font-size:11px; line-height:30px; width:150px; text-decoration:none; cursor:pointer; font-weight:bold; text-align:center;} #menu table {border-collapse:collapse; padding:0; margin:0 -1px -1px;} #menu ul, #menu :hover ul ul, #menu :hover ul :hover ul ul {position:absolute; left:-9999px; width:150px;} #menu :hover {color:#ff0; background:#fff url(http://www.cssplay.co.uk/menus/slide_fly/slide/slide_1.gif) no-repeat; z-index:500; white-space:nowrap;} #menu :hover > a {color:#ff0; background:#fff url(http://www.cssplay.co.uk/menus/slide_fly/slide/slide_1.gif) no-repeat; z-index:500; white-space:nowrap;} #menu :hover ul {position:static; height:180px; margin-top:-1px; background:#383838;} #menu :hover ul :hover ul, #menu :hover ul :hover ul :hover ul {display:block; position:absolute; left:130px; top:0; height:auto; z-index:500; border:1px solid #fff;} #menu :hover ul li, #menu :hover ul li a {background:#383838; text-align:left; text-indent:10px; } #menu :hover ul li.fly a {background: #383838 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif) no-repeat 120px center;} #menu :hover ul :hover {background:#255fa3; position:relative; z-index:100;} #menu a:hover ul li.fly a:hover {background:#255fa3 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif) no-repeat 120px center; color:#ff0;} #menu :hover ul li.fly:hover > a {background:#255fa3 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif) no-repeat 120px center; color:#ff0;} #menu :hover ul :hover ul li, #menu :hover ul :hover ul li a {background:#666;} #menu :hover ul :hover ul :hover ul li {background:#666; z-index:500;} #menu :hover ul :hover ul li.fly a {background: #626262 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif) no-repeat 120px center;} #menu :hover ul :hover ul :hover {z-index:500; background:#0d72c0; color:#ff0;} #menu a:hover ul a:hover ul li.fly a:hover {background:#0d72c0 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif) no-repeat 120px center; color:#ff0;} #menu :hover ul :hover ul li.fly:hover > a {background:#0d72c0 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif) no-repeat 120px center; color:#ff0;} #menu :hover ul :hover ul :hover ul li, #menu :hover ul :hover ul :hover ul li a {background:#888;} #menu :hover ul :hover ul :hover ul :hover {background:#5184b8; color:#ff0;} #menu :hover ul :hover ul :hover ul :hover a {color:#ff0;} .menu_text {float:left; width:500px; font: 11px verdana, arial, sans-serif; border:1px solid #000; height:358px;} .menu_text img {display:block;} .menu_text p {margin:0; padding:5px 10px; line-height:15px;} </style> </head> <body> <div id="info"> <ul id="menu"> <li><a href="#nogo">Home</a></li> <li><a href="#nogo">Privacy Policy</a></li> <li class="sub"><a href="#nogo">Types<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="#nogo">European</a></li> <li><a href="#nogo">Indian</a></li> <li><a href="#nogo">North Africa</a></li> <li class="fly"><a href="#nogo">American<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="#nogo">South American</a></li> <li class="fly"><a href="#nogo">North American<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="#nogo">Grey tree frog</a></li> <li><a href="#nogo">Green tree frog</a></li> <li><a href="#nogo">Spring peeper</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li><a href="#nogo">Japanese</a></li> <li><a href="#nogo">Chinese</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="sub"><a href="#nogo">Classifications<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li class="fly"><a href="#nogo">Pelodryadinae<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="#nogo">Cyclorana</a></li> <li><a href="#nogo">Litoria</a></li> <li><a href="#nogo">Nyctimystes</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="fly"><a href="#nogo7">Phyllomedusinae<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="#nogo">Agalychnis</a></li> <li><a href="#nogo">Cruziohyla</a></li> <li><a href="#nogo">Hylomantis</a></li> <li><a href="#nogo">Pachymedusa</a></li> <li><a href="#nogo">Phasmahyla</a></li> <li><a href="#nogo">Phrynomedusa</a></li> <li><a href="#nogo">Phyllomedusa</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="fly"><a href="#nogo">Hemiphractinae<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="#nogo">Cryptobatrachus</a></li> <li><a href="#nogo">Flectonotus</a></li> <li><a href="#nogo">Gastrotheca</a></li> <li><a href="#nogo">Hemiphractus</a></li> <li><a href="#nogo">Stefania</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="fly"><a href="#nogo">Hylinae<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="#nogo">Acris</a></li> <li><a href="#nogo">Anotheca</a></li> <li><a href="#nogo">Bokermannohyla</a></li> <li><a href="#nogo">Corythomantis</a></li> <li><a href="#nogo">Ecnomiohyla</a></li> <li><a href="#nogo">Hyloscirtus</a></li> <li><a href="#nogo">Megastomatohyla</a></li> <li><a href="#nogo">Osteocephalus</a></li> <li><a href="#nogo">Pseudacris</a></li> <li><a href="#nogo">Sphaenorhynchus</a></li> <li><a href="#nogo">Trachycephalus</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="fly"><a href="#nogo9">Rhacophorinae<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="#nogo">Boophis</a></li> <li><a href="#nogo">Callixalus</a></li> <li><a href="#nogo">Chiromantis</a></li> <li><a href="#nogo">Cryptothylax</a></li> <li><a href="#nogo">Mantidactylus</a></li> <li><a href="#nogo">Rhacophorus</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="fly"><a href="#nogo">Buergeriinae<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="#nogo">Buergeria</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="sub"><a href="#nogo">References<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="http://en.wikipedia.org/wiki/Tree_frog">Wikipedia</a></li> <li><a href="#nogo11">Encyclopedia</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="sub"><a href="#nogo">Links<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="#nogo">Complete treefrog</a></li> <li><a href="#nogo">Old World treefrogs</a></li> <li><a href="#nogo">Amphibian Species</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> </ul> <div class="menu_text"><img src="http://www.cssplay.co.uk/menus/slide_fly/slide/frog.jpg" alt="tree frog" title="" /> <p>Tree frogs are frogs of the families Hylidae and Rhacophoridae.</p> <p>There is large variation among tree frog species. Many species are not actually arboreal (do not live in trees), but terrestrial or aquatic (live on the ground or in the water).</p> <p>Many arboreal frogs are green, while terrestrial and aquatic species are duller.</p> <p>They mostly feed on insects and other invertebrates, but some larger species can feed on small vertebrates. The species within the genus Cyclorana are burrowing frogs, sometimes spending many years underground.</p> </div> </div> </body> </html> Any anyway, if I take out the <link> it dissapears!! The CSS in it has nothing to do with the image. Here is the CSS in the <link> tag. Code: #showcase {background:#6f9c6f;} dl.menus_list dt {background:#6f9c6f; font-size:1.5em; margin:3px 0;} #foot {background:#8fbc8f;} dl.menus_list dd.nil {padding:0; margin:0;} I hate to say it but I'm baffled! Goal: Get all the CSS into the same file as the rest of my code. Edit: Gah kravvitz I've been watching your move through your profile and you signed off!! Gay. Well I hope someone else here can help me solve this issue I'm having... I downloaded a free layout and started using it for my club's website. After finishing several pages, I uploaded it to the school's server. However, I realized that after publishing it, the layout does not look right. It is supposed to look like this (I had to insert spaces to get around no URL postings for newbs) https:// netfiles.uiuc. edu/ro/www/Collegiate4HClub/~26/howitssupposedtolook.jpg Unfortunately, it looks like this https:// netfiles.uiuc. edu/ro/www/Collegiate4HClub/~26/index.html As you can see, there are several layout issues. First, the background color inside the white border is not the lighter green color. Also, the border is missing on the right hand side. If anyone can shed some light on this issue, I would greatly appreciate it! In case you can't pull up the CSS document, it is https:// netfiles.uiuc. edu/ro/www/Collegiate4HClub/~26/FlexibleGreen.css (please note, i'm a noob).. What i have right now: ################ HTML: ################ <div id="aboutusimage"></div> ################ CSS: ################ #aboutusimage { width:400px; height:75px; background-image:url(/images/about.jpg); position:relative; left:189px; top: 4px; margin-bottom:30px; } ======================== What i'd like to have: ################ HTML: ################ <div id="banner" class="about"></div> ################ CSS: ################ #banner { width:400px; height:75px; position:relative; left:189px; top: 4px; margin-bottom:30px; } #banner.about { background-image:url(/images/about.jpg); } ====================== For some reason, the image disapears when i do this :\ Any advice? I've just run my site through the W3C CSS validator and I'm getting an error telling me I need to validate my XML document? So, how do I validate my XML document, and where do I put the </link> tag it tells me I need? I fear this is just the start of my problems here's the validator link: http://jigsaw.w3.org/css-validator/...&usermedium=all Once again my developement is stalled with the interactions of my website with the multitude of browsers... Firebird... displays perfectly everytime without a doubt... I'm beginning to wonder why I even bother looking testing it in that browser becuase nothing is ever wrong. Internet Explorer, on the other hand, is a different beast entirely. Basically I'm trying to set up a div element that uses a semi opaque background... something between 75-85%, such that the background of my website shows through. So what I decided to do was make a graphic ( in Interlaced PNG format ) that would match my needs. As mentioned above there are some display issues in IE. I was wondering if there is a way to control the alpha level of element backgrounds without setting up/or using graphics, ( the less bandwidth the better ). Regards, Hi, link to wesbite why doesn't the drop down menu, that works in IE6 not work in Firefox 0.8? It is pure CSS, no Javascript. OK, I know it doesn't validate and don't care too much about that. I know putting tables inside an anchor tag is frowned on but hey, it works and I didn't think it up. I thought IE was the worst when it came to CSS compliance? Any ideas how I can fix it? Thanks, John My site works fine with Opera 7 but refuses to work properly with IE6 and Firefox. There's definately a problem with how each browser renders my CSS. I for one cannot figure out what to change so that the site would work with all three browsers. That being said, would anyone be grateful enough to help me out? Thanks! URL: URL I've included some screenshots of how the site looks like on all three browsers. URL URL URL Hi All, We develoepd an Application for a client. This application uses CSS for all text including drop-down menu text and input box text. My client is using XP as their OS and he tells me (sent a screen capture as well) he CANNOT read the drop-down boxes. Text is too small. On our machines (Win 98) there are no problems. Have tested on about 15 different client computers with no problems. Browser is not an issue as its the same for him on both Netscape and IE. Does ANYONE have a clue how to fix this? Doesn't seem logical to me - one OS should be the same as the other. However, we're talkin about MS products and who knows with them. Need urgent help on this one.. please.. anyone with ideas help me! thanks all. Peace. Aaron I built an image gallery with a 1px border and 5px padding around the thumbnails. Looks fine in Safari and IE5 for the Mac. But IE 6 ignores the padding completely. <img src="'.$thumb_path.$row->thumb.'" style="margin-bottom:5px;padding:5px;border:1px solid #cccccc;" > Any ideas are appeciated !! http://www.komta.com/iris.new/browse.php Just getting a rough layout idea for a client, so none of the links work, I know that much. I'm trying to go without tables, so the thumbnails are floated. The weird thing is, IE does it the way I expect, and FF is messing up...go look. For those who don't feel like it, Firefox is floating the thumbs, wrapping them correctly...but about 500 px south of where they should be in the document...and not in the containing element. Anyone have an idea? I'm going to go work on other aspects of the site, and hope you geniuses can save my ***...again. Thanks, and I appreciate the help! MPEDrummer On my re-design of www.samuraiblog.com , I have a DIV that has quite a bit of text in it. I have it set to 100%, but it only goes about 1/4 of the way. You can see what I mean here, on a test server, http://samuraiblog.dreamhost.com/index.php Thanks, -Sam Hello--I'm trying to solve a problem that I've never been able to reproduce, but my client insists that it happens for them all the time. We've just launched a new site built on PHP and Smarty Templates (I'm posting on this board because I don't think it's a PHP problem...let me know if I'm wrong about that), but with lots of javascript and css. My client sent me a screenshot (attached) which shows that all of the stylesheet-formatted text is rendered without formatting...it's coming up Times New Roman with default colors. (Please ignore the blue boxes...I masked the identifying features of the image to protect the innocent :-) ). This goes away upon refresh, but it seems to happen (though never to me) often enough that we're worried about it. Has anyone ever seen anything like this? I'll be happy to reproduce any code that anyone's interested in, but I wasn't sure where to start and I didn't want to have to display a bunch of irrelevant code. I searched the boards but couldn't find anything. Thanks in advance. Michael Schmidt Hi there, Sorry for being silly and pathetic and crap at CSS, but I'm having an issue with a site I've been working on. Site URL is here, and the issue that I am having is as follows: I have a layer with a cloud as it's background. It's the one in the centre, called layer1 because I didn't bother renaming it. Because of the background being a cloud, the edges are curved, like a fluffy cloud would be. Obviously any text in this layer will overrun the edges of the cloud, and so I thought it would make sense to use padding to trim the text area down so it would all fit on the cloud. Now the problem that I am having is that while padding the left side works, padding the right side appears to have no effect :-( If anyone's got any hints or tips that might solve my proble, I'd be reeeeally grateful! Regards, Lawrence I don't have much experience using CSS, but I flatter myself that I can at least code a sheet which is readable by my HTML pages. I've uploaded a stylesheet for my page at http://noblecarrots.com/index.php at http://noblecarrots.com/stylesheet.css rather than coding CSS in the HTML itself as I had done previously. The problem is that, during the transition, all of my styling has vanished. See for yourself - my links all check out, my CSS validates, and everything else seems fine, but you're still staring at Times New Roman and whitespace on my homepage. If this turns out to be down to a typo or something similar, then I apologize in advance. I can only imagine how much of that kind of canooli you get on this forum. Oh, and in case it makes things easier, here's my CSS. I think you'll agree it's just fine: Code: body { font-family: Garamond, Georgia, serif; background-color: #c9c299; color: #41383C; width: 30em; text-align: justify; margin: auto; } img:link { border: none; } a:link { color: #41383C; text-decoration: none; font-weight: bold; } a:visited { color: #41383C; text-decoration: none; font-weight: bold; } a:hover { text-decoration: underline; font-weight: bold; } a:active { color: #41383C; } .logo { width: 16em; float: left; margin: auto; position: relative; top: 0px; } .about { width: 13em; font-size: 0.9em; float: right; margin: auto; position: relative; top: 15px; text-align: left; } .briefs { position: relative; text-align: justify; line-height: 100%; margin: auto; } .quote { width: 25em; text-align: justify; line-height: 100%; } ul { width: 22em; text-align: justify; line-height: 125%; } .star { text-align: center; line-height: 100%; word-spacing: 2em; font-size: 2em; font-family: "MS Gothic"; } .footer { width: 40em; font-size: 0.9em; } .footer a:link, .footer a:visited, .footer a:hover, .footer a:active { font-weight: bold; } h2 { font-size: 3.75em; line-height: 5%; } h3 { font-size: 1.25em; } Hi Guys, we're having some problems with common versions of IE (some versions work, some doesn't). In other browsers site works perfect. Link 1 Link 2 (forum) Screenshot Problem is, that IE stops rendering page at some point (half of the page). It just shows blank white space. We don't have any ideas what and why that happens. I think problem is somewhere in CSS file. Link to CSS file Where could be the problem? p.s. Refreshing site doesn't help, but changing IE window size (or setting to full screen mode), helps even without refreshing. Then page just loads. Hi guys Look here www DOT clickemarketing DOT com The date, before each article, should show at right. This date uses the .createdate css class, which is this Code: .createdate { color: #A9A9A9; vertical-align: top; padding-bottom:2px; float: right; font-size: 11px; } I don't know why IE shows it at left... FF shows ok Is there any way to correct this class, and make date show at right in this pseudo browser, worm collector, spyware downloader called IE ? Thanks Converting a site layout from tables to CSS. The files validate as XHTML 1.0 transitional (html and css files validate), and appear identicle on IE7 and FFox3.5. However, when printing the page, Firefox prints the nav block correctly (page 1, upperleft, as both browsers show onscreen), but IE7 prints this block on page 3 (beside the footer). Same result on different printers, so I presume the factor lies within IE7. Can't seem to find a solution, any help welcome. Page is live at: "foggymountain.com/black-bear-hunting-notables-022410.shtml" Thanks. |