CSS - Phpbb - Two Problems, Text Color And Line Break
I am having two problems with a theme I have for PHPBB3. One problem is the text that you type into textboxes when making a new post, updating your profile, or a few other spots is white on a very light grey background; therefore, hardly showing up.
The second problem is that the page display a white line at the bottom of a few pages (but not others) and the line goes away if you resize the IE window smaller, but reappears again if you full screen it. I know the first problem has to exist in the stylesheet.css file; however, I am not sure where to make these changes as I am not familiar with PHPBB stylesheets. If anyone could help it would be greatly appreciated. Thanks! Forums: Click Here Stylesheet: Click Here Pictures of my problems: Text problem- Line Problem - Similar TutorialsHow 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. This is probably the dumbest question ever, but I hardly ever work on GUI stuff anymore so here it goes... I have some buttons that have their size (height and width) controlled by CSS. The text I'm putting on them is sometimes too long to fit unless it would wrap, but it doesn't want to wrap, it wants to disappear off the side of the button. Is there a way to explicity tell it to wrap if it needs to, or even insert a "new line" character? Thanks! Below is my CSS file for list. Code: li { list-style-position: outside; } ul { list-style-position: outside; list-style-type: disc; margin-left: 15; } ul ul { list-style-position: outside; list-style-type: circle; margin-left: 25px; } ol { list-style-position: outside; list-style-type: upper-alpha; } ol ol { list-style-position: outside; list-style-type: decimal; margin-left: 25px; } ol ol ol { list-style-position: outside; list-style-type: upper-alpha; margin-left: 35px; } Now, here's the problem. When I do this: Code: <b>Section Title</b> <ul><li>List 1</li> <li>List 2</li> <li>List 3</li> </ul> The result showed up like this: Section Title *List 1 *List 2 *List 3 Is there a way to not having the line break after the "Section Title"? I want it to show up like this: Section Title *List 1 *List 2 *List 3 How to I take out the extra line break? Any help is grateful! ljCharlie Hi, 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, folks. I'm having a curious problem with the navigation on my page. I'd like the nav and header to be all on the same line. It works when I just include the nav icons as images directly in the HTML. But when I make the nav icons into links, set each link to display:block, and give it the appropriate background-image, it puts all the icons on a new line. I'm not sure why. Any ideas? You can see the page with the problem and the effect I'm trying to achieve at these two TinyURLs: Problem: TinyURL dotcomslash a8qnky Working: TinyURL dotcomslash 8tj29l (The HTML validates, and the CSS validates except for the IE PNG transparency fix. I'm still experiencing this problem without that fix in place.) Anyway to remove the automatic line break after list items? I'd like to use styles to create roll-over effects in a menu I've used an unordered list to create that menu. But, I'd like a horizontal menu bar rather than a vertical menu column. Thanks! David Goldfeder Hi all, I've created a template in CSS and divs, but when someone puts a word like this_is_a_template - with no spaces in it, it breaks the left nav. Is there any way of making sure words break once they get to the width of the leftnav, even when they don't have spaces in them? Cheers. try to make a UL into a horizontal nav. i want the a's inside the li's to be display:block, so i need a block element around the outside, but that means they wrap to new lines. What is block without new lines? thanks. I have a search box/button I want to keep on a single line in a tool bar on my page in strict XHTML/CSS. The <form> tag produces a line break beforehand. In old HTML I could put the <form> tag outside of the table row or data tags, but XHTML does not allow that (bad nesting). I found in devshed here to use style="display:inline;" which works! But the page does not validate as strict XHTML/CSS (using validator.w3.org). <table><tr><td> <!-- simplified to illustrate!! --> <form method="get" action="..." style="display:inline;"> <input type="text" name="q" size="10" maxlength="255" value="" /> <input type="submit" name="sa" value="go" /> </form> </td></tr></table> The Error and reason given is below. It seems that you can not have a block-level element (<input>) within in inline-level element (<form>). *** document type does not allow element "input" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag. The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element. One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>"). *** Does anyone know how to code this to not have the linebreak and still maintain strict XHTML/CSS code? 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 I'm trying to gain both valid HTML 4.01 and CSS for a site I'm working on. I've completed the HTML without a problem, but I've run intoa problem with the CSS. My CSS file has three 'background-image' lines within it, and w3 is telling me the below: Quote: * Line : 9 (Level : 1) You have no color with your background-color : body * Line : 77 (Level : 1) You have no color with your background-color : #innerbase * Line : 82 (Level : 1) You have no color with your background-color : .c1 The lines mentioned are the lines of the 'background-color' attributes. Those lines consist of, 'background-color: #HEXVALUE;'. I can't find a problem with the line. Here's the full CSS document - if anybody could point out something I'm doing wrong that would cause this error I'd greatly appreciate it. css Code: Original - css Code body { font-family: arial, "lucida console", sans-serif; font-size: 11px; text-align: center; background-image: url("img/back.gif"); background-position: bottom left; background-attachment: scroll; background-repeat: repeat-x; background-color: #FFFFCC } img { vertical-align: bottom; } table { border: 0px; padding: 0px; font-family: arial, "lucida console", sans-serif; font-size: 11px; } #base { border-left: 6px solid #64644c; border-right: 2px solid #64644c; border-bottom: 2px solid #64644c; font-family: arial, "lucida console", sans-serif; font-size: 11px; background-color: #cbcc98; } .mbutton { font-family: sans-serif, arial, 'lucida console'; font-size: 11px; font-weight: bold; width: 20%; padding: 2px; } #sbutton { font-family: sans-serif, arial, 'lucida console'; font-size: 11px; font-weight: bold; width: 20%; background-image: url("img/tab.gif"); background-repeat: no-repeat; padding: 2px; } .obutton { font-family: sans-serif, arial, 'lucida console'; font-size: 11px; font-weight: bold; width: 20%; background-image: url("img/tabover.gif"); background-repeat: no-repeat; padding: 2px; cursor: default; } #mtd { border-top: 1px solid #64644c; font-family: arial, "lucida console", sans-serif; font-size: 11px; padding-top: 20px; padding-bottom: 20px; padding-left: 20px; padding-right: 20px; } #prices td { border: 1px solid #6a6a50; padding: 2px; font-weight: bold; width: 20%; } #prices th { border: 1px solid #6a6a50; padding: 2px; font-weight: bold; width: 40%; text-align: left; } #innerbase { background-color: #99cc33; border: 1px solid #6a6a50; padding: 5px; } .c1 { background-color: #86b32d; } .copyrights { text-align: center; }
i've been trying to get a button that i made with <div> tags to light up when the mouse goes over it, but i cant. Only the link within the <div> tag lights up. Please show me the problems with my ways... thanks Code: <style> .class1, .class1 a { color: blue; } .class2, .class2 a { color: green; } </style> <div class="class1"> <a href="moo.html">This link shows up as blue</a> <a href="moo2.html" class="class2">This link shows up as blue even though it should be green.</a> </div> Anyone know how to get around this without resorting to applying classes to every <a> tag.. ? Like say I want to change the color of a single link while leaving default to all the others.. Hello, I am having a real problem with my template at URL ; when I preview the template it looks great but once i save it and publish it, the scrollbar doesn't appear lilac and the left margins on my posts are too close to the left. I really don't know how to arrange this, I am new to html and of course a newbie to css. So here I include the code and if someone can give me some help i will be really grateful. <!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><meta name="author" content="SOUL" /> <meta name="dc.language" content="en" /> <meta name="copyright" content="This work is licensed under a Creative Commons License. " /> <meta name="description" content="Looking back to the times of cotton fields, coffee engines... and chivalry" /> <meta name="keywords" content="SLAVE,SLAVERY,DOMINANT,DOMINANCE,EROTICA,INTERRACIAL" /> <title><$BlogPageTitle$></title> <$BlogMetaData$> <style type="text/css"> /* ----------------------------------------------- Blogger Template Style Name: Minima Designer: Douglas Bowman URL: URL Date: 26 Feb 2004 ----------------------------------------------- */ body {scrollbar-base-color: #cc99ff; background-color: #f5ecff;} blockquote, p, h1, h3, .blogpost {font-family: "Trebuchet MS", arial, sans-serif; font-size: normal; color: black;} .outerborder {background-color: #f5ecff; width: 285px;} .menuheader {font-family: "Harrington", "Trebuchet MS", arial; background-color: #e7d1fd; color: black; font-size: 18px; font-weight: bold; text-align: center; border-color: #7d00be; border-width: 1px; border-style: dashed; padding-left: 5px; padding-top: 2px; padding-bottom: 3px;} .menutext {background-color: #f5ecff; font-size: 16px; padding-top: 5px; padding-left: 10px;} h2 {font-family: "Harrington","Trebuchet MS", arial;} .dateheader {background-color: #e7d1fd; color: black; text-align: left; border-bottom: 1px dashed #7d00be; border-top: 1px solid #7d00be; padding-left: 5px; padding-top: 2px; padding-bottom: 3px;} .postinfo {font-style: italic; font-weight: bold; color: black;} .contentcell {background-color: white; width: 100%; border-color: #7d00be; border-style: solid; border-right-width: 1px; border-left-width: 1px; border-bottom-width: 1px; border-top-width: 0px;} a:link {color: #7d00be; text-decoration: none;} a:visited {color: mediumpurple; text-decoration: none;} a:active {color: #cc66ff; text-decoration: none;} a:hover {background-color: #cc99ff; color: black; text-decoration: none;} a img { border-width:0; } .blogpost {margin-left: 15px; margin-right: 10px;} blockquote {padding: 5px; font-size: smaller; border-color: #cc99ff; border-width: 1px; border-style: dashed;} .post { margin:.5em 0 1.5em; border-bottom:1px dotted #fff; padding-bottom:1.5em; } .comment-link { font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif; text-transform:uppercase; letter-spacing:.1em; } .comment-link { margin-left:.6em; } .post a { font-weight:bold; } #comments h4 { margin:1em 0; font:bold 78%/1.6em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif; text-transform:uppercase; letter-spacing:.2em; color:#774; } #comments-block dt { margin:.5em 0; } #comments-block dd { margin:.25em 0 0; } #comments-block dd.comment-timestamp { margin:-.25em 0 2em; font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif; text-transform:uppercase; letter-spacing:.1em; } </style> </head> <body> <!-- You may add banner here. --> <center> <img border="0" src="http://www.passionatelove.net/title.JPG" width="385" height="300"><p id="description"> <font face="Antigoni"><$BlogDescription$></font></p> <p id="description"> <!-- Start FastOnlineUsers.com --> <font face="Banjoman Open Bold"> <a href="http://www.fastonlineusers.com"><script src=http://fastonlineusers.com/online.php?d=www.unmerciful-tara.blogspot.com></script> online</a></font><!-- End FastOnlineUsers.com --> </p> <p> </p> </center> <table border="0" cellpadding="5" cellspacing="0" width="100%"> <tr> <td valign="top" width="100%"> <!-- You may move banner here if needed. --> <div class="contentcell"> <Blogger> <BlogDateHeader><h2 class="dateheader"><font face="AucoinLight"><$BlogDateHeaderDate$></font></h2></BlogDateHeader> <!-- Begin .post --> <div class="post"><a name="<$BlogItemNumber$>"></a> <BlogItemTitle> <h3 class="post-title" align="center"> <a href="<$BlogItemUrl$>" title="external link"> <BlogItemUrl></BlogItemUrl> <font size="4" face="AucoinLight"><$BlogItemTitle$> </font> <BlogItemUrl></BlogItemUrl> </a> </h3> </BlogItemTitle> <div class="post-body"> <p style="margin-left: 6"> <font face="Georgia" size="3"> <$BlogItemBody$> </font> </p> </div> <p class="post-footer"> <em><font face="Book Antiqua"> posted by <$BlogItemAuthorNickname$> at </font> <a href="<$BlogItemPermalinkUrl$>" title="permanent link"> <font face="Book Antiqua"><$BlogItemDateTime$></font></a></em><font face="Book Antiqua"> </font> <MainOrArchivePage><BlogItemCommentsEnabled> <a class="comment-link" href="<$BlogItemPermalinkURL$>#comments"> <font face="Book Antiqua"><$BlogItemCommentCount$> comments</font></a><font face="Book Antiqua"> </font> </BlogItemCommentsEnabled></MainOrArchivePage> <font face="Book Antiqua"><$BlogItemControl$> </font> </p> </div> <!-- End .post --> <!-- Begin #comments --> <ItemPage> <div id="comments"> <BlogItemCommentsEnabled><a name="comments"></a> <h4><font size="2" face="Book Antiqua"><$BlogItemCommentCount$> Comments:</font></h4> <dl id="comments-block"> <BlogItemComments> <dt class="comment-poster" id="c<$BlogCommentNumber$>"><a name="c<$BlogCommentNumber$>"></a> <$BlogCommentAuthor$> said... </dt> <dd class="comment-body"> <p><$BlogCommentBody$></p> </dd> <dd class="comment-timestamp"><a href="#<$BlogCommentNumber$>" title="comment permalink"><$BlogCommentDateTime$></a> <$BlogCommentDeleteIcon$> </dd> </BlogItemComments> </dl> <p class="comment-timestamp"> <$BlogItemCreate$> </p> </BlogItemCommentsEnabled> <p class="comment-timestamp"> <a href="<$BlogURL$>"><< Home</a> </p> </div> </ItemPage> <!-- End #comments --> </Blogger> </div></div> <!-- End #main --> <br> </p> </td> <td valign="top" width="300"> <!-- You may add an image here. --> <div class="outerborder"> <div class="menuheader"><font face="AucoinLight">Soul</font></div> <p class="menutext"> <$BlogMemberProfile$></p> <p class="menutext"> <font face="AucoinLight" size="3"> The Irreverent 1700's Governor's Wife</font></p> <ul> <p style="text-align: center"> <b><font size="2" color="#668844" face="Antigoni Light">*some adult content*</font></b></p> <p style="text-align: right"> <a href="http://feeds.archive.org/validator/check.cgi?url=http://unmerciful-tara.blogspot.com/atom.xml"> <img src="http://www.passionatelove.net/valid-atom.png" alt="[Valid Atom]" title="Validate my Atom feed" width="88" height="31" /></a></p> <p style="text-align: right"> <a href="http://www.bloglines.com/sub/http://unmerciful-tara.blogspot.com/"> <img src="http://www.passionatelove.net/sub_modern6.gif" border="0" alt="Subscribe with Bloglines" width="80" height="15" /> </a></p> <p style="text-align: right"><script src="http://blogsnob.simpleads.net/ad/11824" type="text/javascript">blogsnob. show off your websites. http://blogsnob.simpleads.net</script></p> </ul> <div class="menuheader"><font face="AucoinLight">Ledger</font></div> <p class="menutext"> <script type="text/javascript" src="<$BlogArchiveFileName$>"></script> <h2 class="sidebar-title" style="text-align: right"><b> <font size="2" face="Footlight MT Light">Previous Posts</font></b></h2> <ul id="recently"> <BloggerPreviousItems> <li> <p style="text-align: right"><a ETC. ETC.... (THE PROBLEM SEEMS TO BE ABOVE) </body> </html> THANKS FOR YOUR HELP! I've been trying to solve this for many hours. I'm using CSS and transitional tables. I have content with a box of navigation right aligned within the content table. I need to have a gray line in the content area dividing sections. The width of that gray line is dependent on whehter that navigation box is there or not. I've tried two ways to create the line, a table set at 100% with a gray background color and a <hr> tag that is styled in the css. I thought the hr tag was working, but in NS7, the gray line writes over the navigation box. Here's the page: http://www.vma.org/paris/nci-intranet/work-life-services-coachin.html If I use a table width=100%, it starts working in NS7 and Firefox, but stops working in IE. As you can see from the page, the width of the gray line is dependent on the navigation box to the right. The navigation box is a right aligned table floating within the content box. Here's my <hr> definition in the css: hr { border: 0; color: #D5D5D5; background-color: #D5D5D5; height: 1px; text-align: left; padding: 0px; margin: 0px; } Any ideas? Its driving me crazy, I know there's gotta be a simple solution to having the line take up the same amount of space as the text does and no more. Thanks! Hi, Hope someone here can help me, having trouble with IE - there's a surprise! - and block elements, more specifically <p> and <ul>. As you can see from he http://dvxl.servehttp.com/Sites/Development/InfoCAP/Sites/dynamic/ .. the first line of the top paragraph has a larger line height than the rest, same with the top <li> of the <ul>. The xhtml is empty of styles, and the only styles applied to these elements a Code: #main_content p { margin-top: 0px; margin-bottom: 15px; color: #306EB1; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 0.7em; text-align: justify; text-justify: newspaper; } #main_content ul li { color: #306EB1; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 0.7em; list-style-type: square; } #main_content li { line-height: 15px; } In Firefox the line heights are consistant, am I missing something? Thanks Hey, I use div's to create my page structure (you can see it on the screenshot) http://img144.imageshack.us/img144/...tructurege3.jpg The green part is the navigation and the blue part the contents of the page. But as you see the colors both dont fill up till the bottom of the document. And if i set: height: 100%; then it will fill up to the bottom, but when the contents gets to big and a scrollbar is needed, then the part that you scroll down is not filled up with the colors anymore. Does anybody know how to fix this? Thanks in advance. 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 I have this for my td tag: Code: <td bgcolor="#ffffff" onclick="window.location.href='...'" onmouseover="this.style.backgroundColor='#f1ffff'; this.style.cursor='pointer';" onmouseout="this.style.backgroundColor='#ffffff'"> I'd also like to add code to change the text color onmouseover. Can someone post how. Also, why is it different code to change a style when the code is embedded in an event as opposed to an external css file. For example to the change the background color of a <td> from a css file, it would be background-color, but internally its backgroundColor. This seems very conter-intuitive. Where can I find the available style options for the internal style. The W3C site only has for external and <style> tags in the header.Thanks! |