CSS - Ie Centre-aligning Left-styled Text
Hi guys
I'm in the process of getting my site together, and it's coming along fairly well. I've been using Firefox for testing, and haven't noticed anything wrong. However, when I checked it in IE8, text that I have explicitly left-aligned is now sitting centred on my page. I have validated the code, and there are no problems. I'm just confused... Here is my code: Code: <span style="text-align:left;">Jarryd Pearson</span><br /><br /> <table align="left"> <tr class="rule"> <td colspan="2"> <hr /> </td> </tr> <tr> <td class="contact"> Phone: </td> <td class="contact"> #### </td> </tr> <tr class="rule"> <td colspan="2"> <hr /> </td> </tr> <tr> <td class="contact"> Mobile: </td> <td class="contact"> #### </td> </tr> <tr class="rule"> <td colspan="2"> <hr /> </td> </tr> <tr> <td class="contact"> Email: </td> <td class="contact"> #### </td> </tr> <tr class="rule"> <td colspan="2"> <hr /> </td> </tr> <tr> <td class="contact"> Postal Address: </td> <td class="contact"> #### </td> </tr> <tr class="rule"> <td colspan="2"> <hr /> </td> </tr> </table> And here's my CSS: Code: @charset "utf-8"; /* CSS Document */ body { background: #0d1866; color: #CCCCCC; font-family: Arial, Helvetica, sans-serif; font-size: 16px; } a { color: #FFFFFF; text-decoration: underline; } a:hover { color: #FFFFFF; text-decoration: none; } paypal { border: none; } img.footer { border: none; width: 88px; height: 31px } td.contact { vertical-align:top; } tr.rule { padding: 0px; } /* DIVS */ div#main { padding: 2px; margin: 2px; } div#text { width: 650px; height: 370px; vertical-align: top; overflow: auto; padding-left: 10px; padding-right: 10px; padding-top: 5px; padding-bottom: 10px; } I apologise if this has been posted before. I did a search, and couldn't seem to find this particular issue. If someone has already posted this, please point me in their direction! Thanks Jarryd Similar TutorialsI'm having a bit of mental block. How do I achieve the following: 100% width div LEFT SPAN (left aligned) | MIDDLE SPAN (centre aligned) | RIGHT SPAN (right aligned) I thought it was possible in one div rather than having to go the three column layout route? How does one align the text to the left of a div? I have "text-align:left;" specified, however the text is centered when it is too narrow to fill the screen. The URL of the page in question is http://what-is-what.com . If you type an illegal character, such as "=", in the Ask box then the narrow text that is returned appears centered. Other narrow pages on the same site do the same, of course. Tested in Firefox 1.5.0.7 on Ubuntu. Hi. I'm reasonably new to tableless-design, and i've run into the common problem of aligning one bit of text to the left of a line and another to the right. I have searched the web and have found several means of achieving this, but in my case there is an image combined with a inline list (horizontal menu) that needs to be aligned left, and another combination of text and images to the right. | [image] text .... right-side text | This might seem rather simple, but it becomes more complicated: the entire block needs to be padded on the top in order for the text not to appear cramped up at the top, and the left-margin and right-margin of the image is then set to the corresponding negative values in order for it to still be displayed precisely in the top left corner. I have found this to be the only cross-browser compatible method. All the methods I have experimented with to align the two sides on left and right have either resulted in the image and text to be incorrectly (vertically) aligned or be displayed in different lines, even when the image is not used as part of the alignment-method. Any help or suggestions will be greatly appreciated. Thanx Seems 99% of CSS questions are related to centre-aligning content, which does beg the question of why the heck it isn't easier?! Anyway, I have kind of unusual site-layout, which is essentially a set of layout images that form a pie-interface. I've laid it out fine on the left of the page, but I want it to be in the centre of the screen: The page in question is my home-site which I'm re-designing: http://haravikk.com/ Currently the interface spans a couple of HTML pages, but will use AJAX in future with the HTML pages as back-up, but that's another story entirely. So anyway, here's the basic HTML of the page, including the pie "slices": Code: <?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="content-type" content="text/html;charset=ISO-8859-1" /> <meta name="author" content="Haravikk.com" /> <title>Haravikk.com</title> <link rel="stylesheet" href="style/style.css" /> </head> <body> <div class="root"> <div class="main"> <img class="logo" src="style/images/main/logo.png" alt="" /> <a href="menu.html" title="View Menu"> <img class="logoFlame" src="style/images/main/logoFlame.png" alt="" /> </a> </div> <div class="menu"> <a href="soon.html" title="Haravikk's Links"> <img class="links" src="style/images/menu/links.png" alt="" /> </a> <a href="soon.html" title="Contact Haravikk"> <img class="contact" src="style/images/menu/contact.png" alt="" /> </a> <a href="soon.html" title="Haravikk's Gallery"> <img class="gallery" src="style/images/menu/gallery.png" alt="" /> </a> <a href="index.html" title="Close"> <img class="centre" src="style/images/menu/centre.png" alt="" /> </a> <a href="soon.html" title="Haravikk's Projects"> <img class="projects" src="style/images/menu/projects.png" alt="" /> </a> <a href="soon.html" title="About Haravikk"> <img class="about" src="style/images/menu/about.png" alt="" /> </a> <a href="soon.html" title="Read Haravikk's Blog"> <img class="blog" src="style/images/menu/blog.png" alt="" /> </a> </div> </div> </body> </html> I'm hoping people can help without me having to post the lengthy CSS as well, but if you do need it can be found here (WARNING: It's a bit messy!). To try and explain: The root div is a wrapper, with the main div being the primary structure of the site based upon the logo.png image; that image is a large square-aspect-ratio image which has a height of 100%, and automatic width. All other images are designed to layer on top of it when aligned by the top-left corner (i.e - I've trimmed away any transparency to the right or bottom of the image). Ideally I would have positioned them to right or bottom as appropriate so I could trim them more, but I can't get that to work. Can anyone help in figuring out how in the heck I would go about centring this site-layout? I'm shying away from the use of tables, but can use them if I have-to. Also, while all major browsers should work, some may look a little weird; I'll be adding browser-specific style-info later-on. I want to place a styled box with rounded corners around text in a heading. The problem is that the the heading may have one, two or three lines and I can't seem to get my box to adjust. Here is my code: I appreciate any help you can provide! 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"> <head> <title>Title</title> <style type="text/css" media="all"> .specialHeader { background: #F4F1F1 url(http://d9qjx79zqpo3.googlepages.com/specialHeadingA.gif) no-repeat scroll 0 0; padding: 1px 0 0 0; } .specialHeader h2 { display: block; margin: 10px 0 0 0; padding: 0 0 0 10px; background: transparent url(http://d9qjx79zqpo3.googlepages.com/specialHeadingA.gif) no-repeat scroll 0 100%; } .specialHeader span { display: block; margin: 0; width: 100%; padding: 1px; background: transparent url(http://d9qjx79zqpo3.googlepages.com/specialHeadingB.gif) no-repeat scroll 100% 0; } .specialHeader em { text-transform: uppercase; display: block; text-style: normal; margin: 10px 0 0 10px; padding: 0; font-size: 18px; font-family: 'Trebuchet MS', Tahoma, sans-serif; color: #98002E; font-weight: 300; background: transparent url(http://d9qjx79zqpo3.googlepages.com/specialHeadingB.gif) no-repeat scroll 100% 100%; } </style> </head> <body> <div class="specialHeader"><h2><span><em>Hello World</em></span></h2></div> <div style="margin: 50px; width: 600px;"> <div class="specialHeader"><h2><span><em>Two<br />Lines</em></span></h2></div> </div> <div style="margin: 50px; width: 300px;"> <div class="specialHeader"><h2><span><em>This Has<br />Three<br />Lines</em></span></h2></div> </div> </body> </html> Have a look at this and tell me what's causing the navigation not to align. http://n.1asphost.com/wheelofgod/se...t/spokelist.asp Using CSS, is it possible to vertically align centrally text to an image as you can using tables? A simple example using a table would be <table border="0" width="100%"> <tr> <td><img border="0" src="image.gif" width="609"height="115"></td> <td valign="middle">Ray did this</td> </tr> </table> Using CSS so far I've got... <p><img class="imglft" border="0" src="img.jpg" width="434" height="400" alt="my image">Ray did this> The CSS for imglft is... .imglft{ float: left; margin-right: 30px; } I've tried putting the whole lot in a DIV and using text-align: middle and vertical-align: middle but that doesn't work. You can see what I mean by comparing http://brisray.com/grad.htm or http://members.lycos.co.uk/brisray/grad.htm with http://brisray.com/ray/rgrad.htm or http://members.lycos.co.uk/brisray/ray/rgrad.htm Ray Hi, I am pretty new to the whole CSS thing and have had a look around for an answer to no avail. I am trying to align all the widgets for my wordpress theme to the left because my screen resolution is set to 2560 x 1440, they seem to wrap when my browser window is maximised. is there any way to stop this so that they stay underneath one another even when the screen is maximised? my website is at grandfunghi.com thanks in advance, J In my footer I'm having a problem with my links aligning left. I'm not sure how I would go about coding it so that Promotional Kit aligns left underneath Headshot v2. I tried text-align: left in ul, li, and in the footer link section but nothing. I may need to change the layout all together which is fine, but I could use your help. Thanks in advance http://www.lonniebruhn.com/sitelab/ and here is the css code: Code: body, html { font-size: 100%; margin: 0; padding: 0; text-align: center; line-height: 100%; background-color: #000;} #container { margin: 0px auto 90px auto; width: 940px; text-align: left; background-image: url(images/container-bg.jpg); background-repeat: no-repeat; background-color: #1d1d1d;; overflow: hidden} object { display:block; z-index:1} #header { width: 920px; position: relative; top: 5px; margin: 0 auto; background-color: #333; border: 2px #000 solid;} #header h1 {color: #ffffff; font-size: 2em; font-family: Impact, "Arial Black", Trebuchet, sans-serif, "Times New Roman"; line-height: 90%; text-align: center; margin: 0; padding: 10px;} .quote { position: relative; text-align: right; Left:10px; font-family: "Arial Black", Verdana, Helvetica, Arial, sans-serif; color: #ffcc33; font-size: .5em; font-style: italic; } #logo { position: relative; margin:0 auto; background-image: url(images/header-logo.jpg); background-repeat: no-repeat; width:920px; height:120px; border: 2px #000 solid; } #left { margin: 15px 10px 0px 10px; width:180px; position: relative; width: 180px; float: left; border: 2px #000 solid; background-color: #333;} #left h1{ height:20px; margin: 10px auto; color: #ffcc33; font-family: Impact, "Arial Black", Verdana, Helvetica, Arial, sans-serif; font-size: 1.50em; text-align: center; text-decoration: underline; } #dates { position: relative; margin: 0 auto; text-align: left; } #dates ul { margin:0; color: #ffffff; font-family: Verdana, Arial, sans-serif; font-size: .625em; font-weight: bold; position: inherit;} #dates li { padding: 10px 0 5px 5px; list-style-image: url(images/1.gif); display: list-item; margin: 0px 18px 15px -15px; list-style-type: none; text-align:left; border-bottom: 2px #ffcc33 dashed;} #mainbody { position: relative; background-color:#333; width: 480px; min-height:320px; margin: 15px auto; right: 20px; border: 2px #000 solid; } #right { position: relative; width: 220px; background-color: #333; min-height: 320px; float: right; border: 2px #000 solid; margin-top: 15px; margin-right: 10px;} #right h1 { text-align: center; color: #ffcc33; font-family: Verdana, Arial, sans-serif; font-size: 1.25em; margin: 0 auto; padding-top: 10px; padding-bottom: 10px;} #footer-wrap { background-image: url(images/footer-bg.gif); width: 100%; height: 78px; z-index: 2; left: 0; bottom: 0; position: fixed; text-align:left} #footer-left { position:fixed; width: 244px; min-height:68px; margin-top: 5px; border-right: 2px #000 solid; left:-25px; padding-right: 25px; float:left;} #footer-left ul{ display: block; margin:0; width:244px; list-style-type: none; } #footer-left li { display: inline; margin-right:10px; } #footer-wrap a:link, #footer-wrap a:visited, #footer-wrap a:active { color: #000; font-family: Verdana, Helvetica, Arial, sans-serif; font-size: .75em; text-decoration: none; } #footer-wrap a:hover { text-decoration: underline;} #footer-center { position: fixed; } #footer-right { position: fixed; } p { margin:0 25px 25px 25px; font-size: .875em; font-family: Trebuchet, Verdana, Georgia, sans-serif, "Times New Roman"; color: #fff; text-align: justify;} #links{ text-align: right; padding: 2px; } #links a:link, #links a:visited, #links a:active { right:8px; font-weight: bold; font-size: 0.625em; font-family: Verdana, Arial, sans-serif; color: #cccccc; font-family: Verdana, Arial, sans-serif; text-decoration: none; position: relative;} #links a:hover { text-decoration: underline;} #links ul {margin: 0; list-style-type:none} #links li { display: inline; } #menu { height: 15px; width: 920px; height:22px; position: relative; margin: 0 auto; background-color: #333; border-left: 2px #000 solid; border-bottom: 2px #000 solid; border-right: 2px #000 solid;} #menu ul{margin: 0 auto;} #menu li { float: left; margin: 0; padding: 0; list-style: none; } #menu li a { display: block; height: 20px; text-decoration: none; padding: 0 19px 0 19px; border: 2px #000000 solid; text-transform: uppercase; font-size: 0.75em; font-family: Verdana, Helvetica, Arial,sans-serif; color: #ccc; background-color: #666;} #menu li a:hover, #menu li a#selected, #menu li a#selected:hover { border: 2px #000000 solid; background-color: #3f3f3f; } .postdate { display:block; margin: 10px 20px 20px 20px; padding-left: 10px; color: #ffcc33; font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 0.75em; background-color: #000;} .post p { margin: 0px 5px 0px 5px; font-size: .75em; font-family: Trebuchet, Verdana, Georgia, sans-serif, "Times New Roman"; padding: 10px; padding-top: 20px; line-height: 120%; } .post h1 { margin: 0px 5px 0 5px; color: #ffcc33; font-size: 1.2em; font-family: Verdana, Georgia, sans-serif, "Times New Roman"; padding: 10px; text-decoration: underline;} .post h2 { margin: 0px 20px 0 20px; color: #ffcc33; font-size: .6em; font-family: Trebuchet, Verdana, Georgia, sans-serif, "Times New Roman"; padding: 15px 10px 5px 10px; text-transform: uppercase; border-bottom: 8px #666 double;} .blue { color: #3399ff;; margin: 5px 0 10px 0; display: block;} .video { width: 190px; margin: 10px auto 0px auto; z-index: 1} I am a bit new to CSS and am currently in the process of converting a design over to CSS2 and have run into come difficulty. I've created a list based horizontal menu and I want elements to align to both the left and right ends. Simply by adding "float:left" to most of the elements and "float: right" to others, I was able to get it to work, but strangely only in Internet Explorer, not in Firefox. The latter seems to drop my right aligned image onto the next line. For the offending code, please see: http://www.forma3.com/stuff/css/top_menu_v1.html http://www.forma3.com/stuff/css/css/right_menu_v1.css Also, any suggestions on the code would be highly appreciated. I have no doubt its more verbose than needed. Hi I have been battling with this and have tried some solutions on the net but they dont seem to work this may be simple still got my l plates on. My center column wont center in ff its fine in ie my code is as follows body <div class="bgcolumn"> </div> <div class="leftcolumn"> </div> <div class="rightcolumn"> </div> <div class="centrecolumn"> </div> styles .leftcolumn { padding: 10px; width: 20%; float:left; } .centrecolumn { padding: 10px; width: 50%; background-image:url(images/house.png); margin-right:auto; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; text-decoration: none; padding: 0px; text-align: justify; position:relative top; } .rightcolumn { padding: 30px; width: 20%; float: right; position:relative top; } .searchs { float: right; padding: 0px; width: 400px; position: relative; } .bgcolumn { width: 100%; padding: 0px; position: relative; clear: both; } Ok well im new to these forums and ive been looking pretty much everywhere for help, so heres my problem. I bought a joomla template from a company, i got it then installed it, but im having one huge issue i cant seem to fix. The news is piling up next to each other instead of each new news post going above the older one in a nice neat line one post after another. Instead they just moosh together after the first post. I emailed the company and they said i had to edit the css and thats all the help i got. I have no knowledge of css and have no idea how to fix the issue. Any help would be greatly appreciated. A link to my site is below as well as the template css. Please someone help me with this problem. http://almostfinite.info/pku Code: /*------------------------------------------------------------------------ # JA Sanidine II for Joomla 1.5 - Version 1.0 - Licence Owner JA98631 # ------------------------------------------------------------------------ # Copyright (C) 2004-2008 J.O.O.M Solutions Co., Ltd. All Rights Reserved. # @license - Copyrighted Commercial Software # Author: J.O.O.M Solutions Co., Ltd # Websites: http://www.joomlart.com - http://www.joomlancers.com # This file may not be redistributed in whole or significant part. -------------------------------------------------------------------------*/ /* COMMON STYLE --------------------------------------------------------- */ html, body, form, fieldset { margin: 0; padding: 0; } body { background: #FFFFFF; color: #000000; font-family: "Lucida Grande", Arial, Helvetica, sans-serif; line-height: 1.5; } body#bd { color: #333333; background-color: #CCCCCC; background-attachment: fixed; background-repeat: no-repeat; background-position: center top; } body.contentpane { color: #000000; font-size: 12px; line-height: 1.3em; margin: 0; margin: 1em 2em; width: auto; /* Printable Page */ } body.fs1 {font-size: 10px;} body.fs2 {font-size: 11px;} body.fs3 {font-size: 12px;} body.fs4 {font-size: 13px;} body.fs5 {font-size: 14px;} body.fs6 {font-size: 15px;} /* Normal link */ a { color: #D58400; text-decoration: none; } a:hover, a:active, a:focus { color: #D58400; text-decoration: underline; } a img { border: none; } /* Title text */ .contentheading, .componentheading, .blog_more strong, h1, h2, h3, h4 { line-height: normal; } /* Small text */ small, .small, .smalldark, .article-meta, .modifydate, .img_caption p, .site-slogan, #ja-login, a.readon, #ja-botnav, #ja-pathway, #ja-subnav, #ja-contentsl1, #ja-contentsl2, #ja-footer, #ja-col1, #ja-col2, #ja-botsl { font-size: 92%; } img { margin: 0; padding: 0; } .img_caption img { border: 1px solid #CCCCCC; } .img_caption p { text-align: center; color: #666666; } .img_caption.left, .img_caption.right { margin-top: 3px; } .no-caption { margin: 3px 0 3px 5px; border: 1px solid #CCCCCC; } /* Heading */ h1 {font-size: 200%;} h2 {font-size: 175%;} h3 {font-size: 150%;} h4 {font-size: 125%;} p, pre, blockquote, ul, ol, h1, h2, h3, h4, h5, h6 { margin: 1em 0; padding: 0; } ul { list-style: none; } ul li { background: url(../images/bullet.gif) no-repeat 20px 6px; padding-left: 30px; } ol li { margin-left: 35px; } th { font-weight: bold; padding: 7px 8px; text-align: left; } fieldset { padding: 7px 5px 5px !important; border: none; margin: 1em 0 0; background: url(../images/sep.gif) repeat-x top; } fieldset legend { font-weight: bold; background: #FFFFFF; } fieldset a { font-weight: bold; } fieldset.input { padding: 0; background: none; } hr { border-bottom: 0; border-left: 0; border-right: 0; border-top: 1px solid #CCCCCC; height: 1px; } br { height: 1px; font-size: 1px; } td, th, div { font-size: 100%; } /* FORM --------------------------------------------------------- */ form { margin: 0; padding: 0; } form label { cursor: pointer; } input, select, textarea, .inputbox { font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 100%; } textarea, textarea.inputbox { background: #FFFFFF; color: #333333; border: 1px solid #DDDDDD; } .inputbox { padding: 3px 2px; border: 1px solid #DDDDDD; background: url(../images/input-bg.gif) repeat-x top #FFFFFF; color: #333333; font-size: 100%; } .button { padding: 3px 8px 2px; border: 1px outset #CCCCCC; background: url(../images/grad-1.gif) repeat-x top #D58400; color: #FFFFFF; text-transform: uppercase; font-size: 92%; font-weight: bold; } .button:hover { border: 1px inset #CCCCCC; } select#ordering, select#limit { background-image: none; } * html .button { /*IE 6*/ padding: 2px 5px !important; } *+html .button { /*IE 7*/ padding: 2px 5px !important; } /* JOOMLA STYLE --------------------------------------------------------- */ .article_separator, .article_seperator { clear: both; display: block; height: 30px; margin: 0; background: url(../images/sep.gif) repeat-x center; } .column_separator { padding: 0 25px; } /* content tables */ .sectiontableheader { background: url(../images/grad-2.gif) repeat-x top #373737; border: 1px solid #DDDDDD; padding: 6px 8px; color: #FFFFFF; font-weight: bold; } .sectiontableheader a, .sectiontableheader a:hover, .sectiontableheader a:active, .sectiontableheader a:focus { color: #FFFFFF; } tr.sectiontableentry0 td, tr.sectiontableentry1 td, tr.sectiontableentry2 td { padding: 8px; background: url(../images/sep.gif) repeat-x bottom; } table.contentpane { border: none; width: 100%; } table.contentpaneopen { border: none; border-collapse: collapse; border-spacing: 0; } table.contenttoc { margin: 0 0 10px 10px; padding: 0; width: 30%; float: right; } table.contenttoc td { background: url(../images/bullet.gif) no-repeat 12px 8px; padding: 1px 5px 1px 20px; } table.contenttoc th { background: url(../images/sep.gif) repeat-x bottom; padding: 0 0 3px; text-indent: 5px; } table.poll { border-collapse: collapse; padding: 0; width: 100%; } table.pollstableborder { border: none; padding: 0; text-align: left; width: 100%; } table.pollstableborder img { vertical-align: baseline; } table.pollstableborder td { border-collapse: collapse; border-spacing: 0; padding: 4px !important; background: none; } table.pollstableborder tr.sectiontableentry1 td { } table.searchintro { padding: 10px 0; width: 100%; } table.searchintro td { padding: 5px!important; } .blog_more { margin: 15px 0 0; padding: 15px 0 0; background: url(../images/sep.gif) repeat-x top; } .blog_more strong { display: block; margin: 0 0 5px; text-transform: uppercase; } .blog_more ul { margin: 0; padding: 0; } .blog_more ul li { background: url(../images/bullet.gif) no-repeat 4px 8px; margin: 0; padding: 0 0 0 12px; } .category { font-weight: bold; } h1.componentheading, .componentheading { font-size: 250%; margin: 0 0 15px; padding: 0; color: #D58400; } .contentdescription { padding-bottom: 30px; } h2.contentheading, .contentheading { margin: 0; padding: 0; font-size: 200%; color: #008EBF; } table.blog .contentheading { font-size: 135%; } a.contentpagetitle, a.contentpagetitle:hover, a.contentpagetitle:active, a.contentpagetitle:focus { color: #008EBF; } a.readon { font-weight: bold; text-transform: uppercase; } a.readon:hover, a.readon:focus, a.readon:active { } table.contentpaneopen td, table.contentpane td { } table.contentpaneopen, table.contentpane, table.blog { width: 100%; } .moduletable { padding: 0; } ul.pagination { margin: 20px auto; padding: 20px 0 0; color: #666666; } ul.pagination li { background: none; display: inline; margin: 0; padding: 0; } ul.pagination li span { padding: 2px 5px; } ul.pagination a { padding: 2px 5px; text-decoration: none; background: url(../images/grad-4.gif) repeat-x top; color: #666666; border: 1px solid #DDDDDD; } ul.pagination a:hover, ul.pagination a:active, ul.pagination a:focus { background: #D58400; color: #FFFFFF; } .pagenavbar { background: url(../images/icon-pages.gif) no-repeat center left; font-weight: bold; padding-left: 14px; } .pagenavcounter { background: url(../images/icon-pages.gif) no-repeat 0 11px; font-weight: bold; padding: 8px 14px 0 14px; } .smalldark { text-align: left; } div.syndicate div { text-align: center; } .pollstableborder tr.sectiontableentry1 td, .pollstableborder tr.sectiontableentry2 td { background: none; } ul.latestnews a, ul.mostread a { } /* META --------------------------------------------------------- */ .article-toolswrap { display: block; margin: 0 0 10px; padding: 0; position: relative; } .article-tools { display: block; padding: 0 10px 0 0; } .article-meta { width: 70%; float: left; margin-top: 3px; color: #666666; } .createby { font-weight: bold; } .createdate { padding-right: 6px; margin-right: 5px; background: url(../images/vline.gif) no-repeat right; } .createdate-icon { /*for clendar style*/ margin: 0 10px 0 0; display: block; float: left; width: 40px; height: 38px; text-align: center; border: 1px solid #CCCCCC; background: #F8F8F8; color: #666666; } .ja-date { font-size: 15px; font-weight: bold; } .ja-month { color: #666666; font: 9px/14px Arial, Helvetica , sans-serif; text-transform: uppercase; display: block; letter-spacing: 1px; background: url(../images/grad-4.gif) repeat-x top #999999; border-bottom: 1px solid #CCCCCC; } .modifydate { width: 100%; display: block; color: #D58400; margin: 15px 0; } .article-section { padding-left: 6px; margin-left: 5px; background: url(../images/vline.gif) no-repeat left center; } .article-section a { color: #666666; } .article-category a { color: #666666; } div.buttonheading { position: absolute; top: 0; right: 10px; } .buttonheading img { margin: 0 0 0 5px; border: 0; float: right; } /* MAIN LAYOUT DIVS --------------------------------------------------------- */ #ja-wrapper { width: 950px; margin: 0 auto; clear: both; background: url(../images/wrapper-bg.png) repeat-y center; } .narrow #ja-wrapper { width: 750px; background: url(../images/wrapper-bg-n.png) repeat-y center; } #ja-container { padding: 5px 20px; } #ja-mainbody { width: 70%; float: left; } /* PRIMARY COLUMN --------------------------------------------------------- */ #ja-content { clear: both; display: block; float: right; width: 70%; background: url(../images/content-center3.gif) repeat-y center #FFFFFF; } #ja-content-top { background: url(../images/content-top3.gif) no-repeat center top; } #ja-content-bot { background: url(../images/content-bot3.gif) no-repeat center bottom; } .narrow #ja-content { background: url(../images/content-center3-n.gif) repeat-y center #FFFFFF; } .narrow #ja-content-top { background: url(../images/content-top3-n.gif) no-repeat center top; } .narrow #ja-content-bot { background: url(../images/content-bot3-n.gif) no-repeat center bottom; } #ja-current-content { padding: 20px; margin: 0; } /* COLUMNS --------------------------------------------------------- */ #ja-col1 { float: left; overflow: hidden; width: 30%; } #ja-col1 div.ja-innerpad { padding-right: 5px; } #ja-col2 { float: right; overflow: hidden; width: 30%; } #ja-col2 div.ja-innerpad { padding-left: 5px; } /*common style for column*/ /* COLLAPSIBLE LAYOUT --------------------------------------------------------- */ #ja-containerwrap, #ja-containerwrap-fr, #ja-containerwrap-fl, #ja-containerwrap-f { clear: both; } /*content + left*/ #ja-containerwrap-fr #ja-mainbody { width: 100%; } #ja-containerwrap-fr #ja-col1 { width: 22%; } #ja-containerwrap-fr #ja-content { width: 78%; background: url(../images/content-center2.gif) repeat-y center #FFFFFF; } #ja-containerwrap-fr #ja-content-top { background: url(../images/content-top2.gif) no-repeat center top; } #ja-containerwrap-fr #ja-content-bot { background: url(../images/content-bot2.gif) no-repeat center bottom; } .narrow #ja-containerwrap-fr #ja-content { background: url(../images/content-center2-n.gif) repeat-y center #FFFFFF; } .narrow #ja-containerwrap-fr #ja-content-top { background: url(../images/content-top2-n.gif) no-repeat center top; } .narrow #ja-containerwrap-fr #ja-content-bot { background: url(../images/content-bot2-n.gif) no-repeat center bottom; } /*content + right*/ #ja-containerwrap-fl #ja-content { width: 100%; background: url(../images/content-center.gif) repeat-y center #FFFFFF; } #ja-containerwrap-fl #ja-content-top { background: url(../images/content-top.gif) no-repeat center top; } #ja-containerwrap-fl #ja-content-bot { background: url(../images/content-bot.gif) no-repeat center bottom; } .narrow #ja-containerwrap-fl #ja-content { background: url(../images/content-center-n.gif) repeat-y center; } .narrow #ja-containerwrap-fl #ja-content-top { background: url(../images/content-top-n.gif) no-repeat center top; } .narrow #ja-containerwrap-fl #ja-content-bot { background: url(../images/content-bot-n.gif) no-repeat center bottom; } /*full*/ #ja-containerwrap-f #ja-mainbody { width: 100%; } #ja-containerwrap-f #ja-content { width: 100%; background: url(../images/content-center1.gif) repeat-y center #FFFFFF; } #ja-containerwrap-f #ja-content-top { background: url(../images/content-top1.gif) no-repeat center top; } #ja-containerwrap-f #ja-content-bot { background: url(../images/content-bot1.gif) no-repeat center bottom; } #ja-containerwrap-f #ja-current-content { padding-left: 20px; padding-right: 20px; } .narrow #ja-containerwrap-f #ja-content { background: url(../images/content-center1-n.gif) repeat-y center; } .narrow #ja-containerwrap-f #ja-content-top { background: url(../images/content-top1-n.gif) no-repeat center top; } .narrow #ja-containerwrap-f #ja-content-bot { background: url(../images/content-bot1-n.gif) no-repeat center bottom; } /* MODULE --------------------------------------------------------- */ div.moduletable h3 { margin: 0 -8px 10px; padding: 0 0 0 30px; font-size: 100%; height: 28px; line-height: 28px; color: #333333; background: url(../images/h3-bg.gif) no-repeat left; text-transform: uppercase; } div.moduletable h3 span { display: block; height: 28px; background: url(../images/h3-bg.gif) no-repeat right; } div.moduletable { margin: 0; padding: 0 15px; } div.module h3, div.module_text h3, div.module_menu h3, div.module_hilite h3, div.ja-box-br h3 { margin: 0 -6px 10px; padding: 0 0 0 30px; font-size: 100%; height: 28px; line-height: 28px; color: #FFFFFF; background: url(../images/h3-bg.gif) no-repeat left #333333; text-transform: uppercase; } div.module h3 span, div.module_text h3 span, div.module_menu h3 span, div.module_hilite h3 span, div.ja-box-br h3 span { display: block; height: 28px; background: url(../images/h3-bg.gif) no-repeat right; } div.module, div.module_text, div.module_menu, div.module_hilite, div.ja-box-br { padding: 0; float: left; clear: both; width: 100%; background: url(../images/box-br.gif) no-repeat bottom right #FFFFFF; overflow: hidden; margin-bottom: 5px; } div.module div, div.module_text div, div.module_menu div, div.module_hilite div, div.ja-box-bl { margin: 0; padding: 0; background: url(../images/box-bl.gif) no-repeat bottom left; } div.module div div, div.module_text div div, div.module_menu div div, div.module_hilite div div, div.ja-box-tr { padding: 0; margin: 0; background: url(../images/box-tr.gif) no-repeat top right; } div.module div div div, div.module_text div div div, div.module_menu div div div, div.module_hilite div div div, div.ja-box-tl { padding: 15px 20px 15px; background: url(../images/box-tl.gif) no-repeat top left; } div.module div div div div, div.module_text div div div div, div.module_menu div div div div, div.module_hilite div div div div { margin: 0; padding: 0; background: none; } /* mis */ div.banneritem_text { padding: 5px 0 !important; } div.advs { clear: both; display: block; float: left; width: 100%; } div.moduletable li, div.moduletable_menu li, div.moduletable_text li, div.module li, div.module_menu li, div.module_text li { padding-left: 15px; background-position: 5px 7px; } /* HEADER --------------------------------------------------------- */ #ja-header { line-height: normal; position: relative; padding: 0; margin: 0 10px; z-index: 999; height: 127px; background: url(../images/header-bg.gif) repeat-x 0 19px #FFFFFF; border-top: 1px solid #CCCCCC; border-bottom: 3px solid #D58400; } h1.logo, div.logo-text { margin: 0 20px; padding: 0; } h1.logo { width: 330px; height: 70px; position: absolute; top: 10px; } h1.logo a { width: 330px; height: 70px; display: block; background: url(../images/logo.png) no-repeat center; } h1.logo a span { position: absolute; top: -1000px; } div.logo-text { outline: none; position: absolute; top: 20px; } div.logo-text h1 { font-size: 250%; font-weight: bold; letter-spacing: 2px; margin: 0; padding: 0; } div.logo-text h1 a { color: #333333; } .site-slogan { color: #666666; margin: 0; padding: 0; } #ja-topnav { position: absolute; top: 10px; right: 40px; } #ja-topnav ul { margin: 0; padding: 2px 0; } #ja-topbar { background: url(../images/grad-3.gif) repeat-x top #2F2F2F; height: 25px; margin: 0 10px; position: relative; } /* MAIN NAVIGATION --------------------------------------------------------- */ #ja-mainnav { height: 40px; position: absolute !important; bottom: 0px; left: 0; z-index: 999; width: 100%; background: url(../images/mainnav-bg.gif) repeat-x bottom; } #ja-mainnav a, #ja-subnav a { outline: none; line-height: normal; } #ja-subnav { clear: both; background: url(../images/subnav-bg.gif) repeat-x bottom #D58400; margin: 0 10px; padding: 0 10px; height: 30px; } #ja-subnav ul { list-style: none; margin: 0; padding: 0; } #ja-subnav li { background: none; margin: 0; padding: 0; display: inline; } #ja-subnav a { display: block; float: left; outline: none; padding: 0 15px; line-height: 30px; text-decoration: none; color: #FFFFFF; } #ja-subnav a:hover, #ja-subnav a:active, #ja-subnav a:focus { color: #FFFFFF; background: url(../images/subnav-hover.gif) no-repeat center bottom; text-decoration: none; } #ja-subnav li.active a { color: #FFFFFF !important; font-weight: bold; background: url(../images/subnav-hover.gif) no-repeat center bottom; text-decoration: none; } /* breadcrumbs */ #ja-pathway { padding-top: 3px; color: #999999; text-indent: 15px; } #ja-pathway strong { margin-right: 5px; } #ja-pathway img { margin: 1px 5px; } /* Default Joomla! Menu */ ul.menu { list-style: none; margin: 0; padding: 0; display: block; } ul.menu li { display: block; background: url(../images/sep.gif) repeat-x bottom; margin: 0; padding: 0 0 2px; line-height: normal; } ul.menu li a { display: block; outline: none; padding: 8px 2px; margin: 0; text-decoration: none; color: #333333; font-weight: bold; } ul.menu li a:hover, ul.menu li a:active, ul.menu li a:focus { color: #D58400; text-decoration: underline; } ul.menu li.active a { font-weight: bold; } ul.menu li ul { list-style: none; margin: 0; padding: 0; } ul.menu li li { border: none; background: none; padding: 0; } ul.menu li li a { border: none; padding: 2px 5px 8px 15px !important; text-transform: none; font-weight: normal !important; background: url(../images/arrow.png) no-repeat 8px 6px !important; color: #333333; } ul.menu li li a:hover, ul.menu li li a:active, ul.menu li li a:focus { color: #D58400; text-decoration: underline; } ul.menu li li.active a { color: #D58400; font-weight: bold; } ul.menu li li li a { color: #333333 !important; font-weight: normal !important; padding-left: 25px !important; background: url(../images/arrow.png) no-repeat 18px 6px !important; } ul.menu li li li.active a { font-weight: bold !important; } /* SPOTLIGHT --------------------------------------------------------- */ /* Spotlight Box Style */ .ja-box-full, .ja-box-left, .ja-box-center, .ja-box-right { float: left; overflow: hidden; } .ja-box-left div.module, .ja-box-center div.module { } /* Top spotlight */ #ja-topsl { clear: both; margin: 0 10px; padding: 0; height: 310px; background: url(../images/topsl-bg.gif) repeat-x bottom #1D1D1D; overflow: hidden; } #ja-topsl1 { float: left; width: 70%; overflow: hidden; } #ja-topsl1 div#ja-slideshowwrap { margin: 20px 10px; } #ja-topsl2 { float: right; width: 30%; overflow: hidden; } #ja-topsl2 div.moduletable h3, #ja-topsl2 div.moduletable h3 span { background-image: url(../images/h3-bg-d.gif); } #ja-topsl2 div.moduletable { margin: 20px 0 0; } /* Content spotlight */ #ja-contentsl1 { clear: both; width: 100%; padding: 0 0 5px; } #ja-contentsl2 { clear: both; margin: 0; padding: 5px 0; } #ja-contentsl1 div.module, #ja-contentsl2 div.module { margin: 0; } #ja-contentsl1 div.module h3, #ja-contentsl1 div.module h3 span, #ja-contentsl2 div.module h3, #ja-contentsl2 div.module h3 span { background: none; color: #333333; height: auto; line-height: normal; padding-left: 4px; } #ja-contentsl1 ul.latestnews, #ja-contentsl1 ul.mostread { margin: 0; } #ja-contentsl1 li.latestnews a, #ja-contentsl1 li.mostread a { background: url(../images/icon-pages.gif) no-repeat left center; padding-left: 15px; } #ja-contentsl1 li.latestnews, #ja-contentsl1 li.mostread { background: url(../images/sep.gif) repeat-x bottom; padding: 4px 2px 6px; } #ja-contentsl1 li.latestnews a, #ja-contentsl1 li.mostread a { background: url(../images/icon-pages.gif) no-repeat left center; padding-left: 15px; } /* Bottom spotlight */ #ja-botsl { clear: both; margin: 0 10px; padding: 15px 5px; background: url(../images/grad-2.gif) repeat-x top #373737; border-top: 1px solid #1D1D1D; border-bottom: 1px solid #1D1D1D; color: #999999; } #ja-botsl div.moduletable h3, #ja-botsl div.moduletable h3 span { background: none; color: #FFFFFF; height: auto; line-height: normal; padding-left: 4px; } /* FOOTER --------------------------------------------------------- */ #ja-footer { clear: both; position: relative; padding: 8px 20px; margin: 0 10px; color: #666666; text-align: center; border-top: 1px solid #1D1D1D; } #ja-footer small { font-size: 100%; } #ja-botnav { background: #1D1D1D; border-top: 1px solid #333333; border-bottom: 1px solid #333333; clear: both; margin: 0 10px; padding: 5px 0; text-align: center; } #ja-botnav ul { margin: 0; padding: 0; } #ja-botnav li { margin: 0; padding: 0 10px; background: url(../images/vline.gif) no-repeat left center; display: inline; } #ja-botnav li a { color: #999999; } #ja-botnav li a:hover, #ja-botnav li a:active, #ja-botnav li a:focus { color: #FFFFFF; } /* MISCELLANOUS ----------------------------------------------------------- */ ul.accessibility { position: absolute; top: -100%; } li.ja-firstitem { background: none !important; } .padding-none ul.film li { margin-left: 0; } #ja-tabs { margin: 0 0 10px 0; padding: 0; } #ja-tabs div { margin: 0; padding: 0; } #ja-tabs div.module { background: url(../images/box-br-w.gif) no-repeat bottom right #FFFFFF; } #ja-tabs div.module div { background: url(../images/box-bl-w.gif) no-repeat bottom left; } #ja-tabs div.module div div { padding: 0; background: url(../images/box-tr-w.gif) no-repeat top right; } #ja-tabs div.module div div div { background: url(../images/box-tl-w.gif) no-repeat top left; } #ja-tabs div.module div div div div { background: none; } /* Login */ #ja-login { position: absolute; right: 30px; top: 25px; color: #666666; } label.ja-login-user span, label.ja-login-password span { display: block; width: 25px; height: 24px; float: left; text-indent: -5000px; } label.ja-login-user span { background: url(../images/icon-user.png) no-repeat; } label.ja-login-password span { background: url(../images/icon-key.png) no-repeat; } #ja-login label { float: left; } #ja-login form #mod_login_username, #ja-login form #mod_login_password { width: 100px; margin: 2px 0 0 5px; font-size: 11px !important; border: 1px solid #CCCCCC; } #ja-login form #mod_login_password { margin-right: 5px; } #ja-login form .button { margin-top: 2px; } .ja-login-links { display: block; clear: both; padding: 6px 0 0; font-size: 92%; } .ja-login-links a { padding: 0 5px; color: #666666; } /*usertools*/ #ja-usertools { position: absolute; right: 10px; top: 8px; } #ja-usertools ul { margin: 0; padding: 0 10px 0 0; display: inline; } #ja-usertools ul li { margin: 0; padding: 0 2px; float: right; background: none; } /* Search */ #ja-search { background: url(../images/search-bg.gif) no-repeat left; position: absolute; right: 0; top: 0; height: 25px; padding-left: 35px; font-size: 11px; } #ja-search .inputbox { margin: 3px 3px 0 0; width: 150px; background: transparent; border: none; color: #999999; } #ja-search .button { font-size: 11px; } /*others*/ #ja-banner { padding: 5px 0 0; text-align: center; overflow: hidden; width: 100%; clear: both; } div.back_button a, div.back_button a:hover, div.back_button a:active { background: none!important; display: block; margin: 10px 0; text-decoration: none!important; } .clr { clear: both; } .hasTip img { border: none; } div.ja-innerdiv { padding: 8px 0 10px !important; background: url(../images/sep.gif) repeat-x bottom !important; } div.ja-innerdiv img.border { padding: 2px; border: 1px solid #CCCCCC; margin-right: 10px; } div.ja-innerdiv img { margin: 5px 0 0 5px; } div.module blockquote { margin: 0; padding: 0; } div.module span.title { font-weight: bold; display: block; margin: 5px 0; } /* Tooltips */ .tool-tip { background: #FFFFFF; border: 1px solid #CCCCCC; float: left; max-width: 200px; padding: 5px; z-index: 999; color: #333333; } .tool-title { background: url(../../system/images/selector-arrow.png) no-repeat; font-size: 100%; font-weight: bold; margin: 0; margin-top: -15px; padding: 0; padding-bottom: 5px; padding-top: 15px; } .tool-text { font-size: 100%; margin: 0; } #system-message dd.message ul, #system-message dd.error ul, #system-message dd.notice ul { margin: 0 10px; padding: 0; } #system-message dd.message ul li, #system-message dd.error ul li, #system-message dd.notice ul li { background: none; color: #FFFFFF; margin: 0; padding: 5px; } /* System Standard Messages */ #system-message dd.message ul { background: #333333; border: none; } /* System Error Messages */ #system-message dd.error ul { background: #CC0000; border: none; } /* System Notice Messages */ #system-message dd.notice ul { background: #D58400; border: none; } /* Clearfix */ .clearfix:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; } * html > body .clearfix { display: block; width: 100%; } * html .clearfix { height: 1%; } Code: <ul> <li>Some text<div class="right">right</div></li> <li>Some text<div class="right">right</div></li> <li>Some text<div class="right">right</div></li> </ul> I would like to alight the above divs to the right. I tried to do something like: .right { float:right; width: 48%; } But that makes them seem to fall down one line and the stack funny. I also tried to do something line: Code: <ul> <li><div class="left">left</div><div class="right">right</div></li> <li><div class="left">left</div><div class="right">right</div></li> <li><div class="left">left</div><div class="right">right</div></li> </ul> And Code: .left { float:left; width:48%; } .right { float:right; width: 48%; } But they all sorta did wierd things I didn't understand. Then I thought perhaps the LI weren't block elements and so that's why they were getting screwed up. So i wrapped a div around both right and left, but that didn't seem to work either. TIA, Mark hey all, here's my test page http://www.pyesnflpool.com/ at the top... Im trying to get the two links (Register & Recover Your Password) to be beside the arrows and Email Pye beside the mail image it is running off two scripts, one for the links (snippetSideLine)and the other is holding together the header (elementTopPage) As you can see on side-b I was making some effort to align them to the bottom with no success, my thoughts were to align to the bottom and than do a padding-bottom: 15px; or whatever, because I tried padding-top:120px to side-a which put the links in the right spot but left the rest of the page all over the place any help is much appreciated, thanks Code: <!-- snippetSideLine --> <div> <?php if (isset ($this->User) && !empty ($this->User)) { if ($this->User->Type == 1) { ?> <a href="../admin/index.php">Admin Panel</a> <?php } ?> <a href="../members/myaccount.php">My Account</a> <a href="index.php?Logout">Logout</a> <?php } else { ?> <a href="../members/register.php">Register</a> <a href="../members/forgotten.php">Recover Your Password</a> <?php } ?> </div> <!-- End: snippetSideLine --> Code: <!-- start: elementTopPage --> <style type="text/css"> #wrapper { text-align: left; vertical-align: text-bottom; margin: 0px auto; padding: 0px; border:0; width: 850px; } #side-a { float: left; width: 458px; height: 167px; background: url('../images/top_left.jpg') no-repeat; } #side-b { float: right; width: 168px; height: 167px; vertical-align: text-bottom; vertical-align: baseline; background: url('../images/top_right.jpg') no-repeat; } #content { float: left; width: 224px; height: 167px; background: url("../images/top_bg.jpg") repeat; } </style> <!-- elementTopPage --> </head> <body> <div id="wrapper"> <div id="container"> <div id="side-a"> <?php $this->Snippet ('SideLine'); ?> </div> <div id="content"> </div> <div id="side-b"> email pye </div> </div> </div> <!-- End: elementTopPage --> Hi all, I have a pesky little problem that I can not seem to figure out on my own. I have a set up like this PHP Code: <span class='navitem'><a href='index.php'> <img src='myimage.gif'>Go Home</a></span> My Css Code is PHP Code: #leftnavcontent .navitem { border-bottom:1px dotted #DADADA; font-size:12px; font-weight:normal; line-height:16px; } #leftnavcontent .navitem img { margin-right:5px; border:none; } My problem is that the image is not aligning with the text. As in there is just a slight maybe 1 or 2 pixel border bottom from the image that makes it dip just above the navitem box which makes it look a little funky. Any ideas? I have a menu that I'm working on which uses <A> elements for the menu items. I've given these A elements height and width dimensions and background images which works pretty well -- except the text in these A elements is top-aligned. I've tried adding a vertical-align directive in my CSS but this doesn't seem to do anything at all. I'd also like to add a bit of space around the text. Is this possible? here's a bit of my CSS: Code: ul.menu li a { width: 295px; height: 59px; background: url(button_bg.jpg) no-repeat; display: block; padding: 0px; margin: 0px; border: none; } I currently have been trying to align an h1 tag over top of a css background image. I have tried a whole bunch of things but have returned the code back to its most basic form My external css div looks as follows: #content_funny{ width: 315px; height: 51px; background-image:url(images/funnyvideos1.gif); background-repeat:no-repeat; float:left; clear:left; margin:0px 0px 0px 0; display:inline; } My index file is as follows <div id="content_header"><div id="content_funny"><a href="http://www.tokenhumor.com/categories/7/funny_videos.html"><h1>Funny Videos</h1></a></div> For some reason the text in its natural state is laying differently for IE and FF, preventing me from using any positioning lines within my external style sheet. Any help with this is much appreciated, I m pulling my hair out I have a line item where I'm pulling in text and an image from a dB. I would like the text to align at the top and not sure how to do it. Code: <li>Song name <img src="beatles.jpg"> Artist Test page: Played songs I have tried margins but then the image moves and the text is always aligned at the bottom of the image. Thanks for your help! |