CSS - Suckerfish Plug-in For Wordpress 3rd Level Nav Mis-aligned In Ie7
Hi Everyone,
I'm new here - have lurked on and off - great forum. I am using a suckerfish wordpress plug-in, it has been working fine until I added 3rd level of pages to the navigation. Still works fine in FF, Safari, Opera & Chrome but mis-aligns (offsets) 3rd level navigation to the right in IE 7 (not tested in IE8 or 6). I have attached screenshots of the problem. Correctly positioned in FF URL Mis-aligned in IE7 URL *Just realised that as a new user the imgage URLs are stripped - so I shall try to describe the problem. In most browsers the 3rd level navigation appears directly adjacent to the second level navigation. In IE it appears 80 or so pixels to the right with a gap in between making it impossible to access the 3rd level menu. The CSS is Code: #suckerfishnav { background:#81aaf2 url(../multi-level-navigation-plugin/images/suckerfish_JP.png) repeat-x; font-size:13px; font-family:verdana,sans-serif; font-weight:bold; width:100%; z-index: 1000; } #suckerfishnav, #suckerfishnav ul { float:left; list-style:none; line-height:34px; padding:0; margin:0; width:100%; } #suckerfishnav a { display:block; color:#dddddd; text-decoration:none; padding:0px 10px; z-index: 1000; } #suckerfishnav li { float:left; padding:0; z-index: 1000; } #suckerfishnav ul { position:absolute; left:-999em; height:auto; width:151px; font-weight:normal; margin:0; line-height:1; border:0; border-top:1px solid #666666; z-index: 1000; } #suckerfishnav li li { width:149px; border-bottom:1px solid #666666; border-left:1px solid #666666; border-right:1px solid #666666; font-weight:bold; font-family:verdana,sans-serif; z-index: 1000; } #suckerfishnav li li a {padding:4px 10px; width:130px;font-size:12px;color:#dddddd;}#suckerfishnav li ul ul {margin:-21px 0 0 150px;} #suckerfishnav li li:hover { background:#81aaf2; } #suckerfishnav li ul li:hover a, #suckerfishnav li ul li li:hover a, #suckerfishnav li ul li li li:hover a, #suckerfishnav li ul li li li:hover a {color:#dddddd;} #suckerfishnav li:hover a, #suckerfishnav li.sfhover a {color:#dddddd;} #suckerfishnav li:hover li a, #suckerfishnav li li:hover li a, #suckerfishnav li li li:hover li a, #suckerfishnav li li li li:hover li a {color:#dddddd;} #suckerfishnav li:hover ul ul, #suckerfishnav li:hover ul ul ul, #suckerfishnav li:hover ul ul ul ul, #suckerfishnav li.sfhover ul ul, #suckerfishnav li.sfhover ul ul ul, #suckerfishnav li.sfhover ul ul ul ul {left:-999em;} #suckerfishnav li:hover ul, #suckerfishnav li li:hover ul, #suckerfishnav li li li:hover ul, #suckerfishnav li li li li:hover ul, #suckerfishnav li.sfhover ul, #suckerfishnav li li.sfhover ul, #suckerfishnav li li li.sfhover ul, #suckerfishnav li li li li.sfhover ul { left:auto; background:#00a33d; } #suckerfishnav li:hover, #suckerfishnav li.sfhover { left:auto; background:#81aaf2; } I think perhaps the 3rd level navigation is inheriting a margin(?) from somewhere but I need someone with a bigger brain than mine to help me see it! Many thanks to anyone who can help. Similar TutorialsI am using the sons of suckerfish drop downs and have managed to produce css code that looks great in all browers, except IE6. In IE6, the top level links stetch all the way across rather than fitting to the text of the link. I figure this is because #nav li is float:left, but #nav li a is display:block which for somereason IE thinks, lets stetch out even though my container says to float. So, can anyone help me keep variable width on top level links and display correctly in all browers? I know in sons of suckerfish they have stated that you must put a fixed width, but thats not an option for me. I don't have enough space to make all of them the same width. So here is the css and some sample code: Code: #nav { padding: 0; margin: 0; list-style:none; } #nav a { } #nav li { float:left; height:34px; line-height:34px; } #nav li a{ background: url(../images/site/nav-li-bg.gif) no-repeat right center; height: 34px; line-height:34px; padding: 0 8px 0 8px; font-weight: bold; font-size: 13px; font-family: "Trebuchet MS",Bitstream Vera Sans,Verdana; color: #626262; display:block; text-decoration:none; text-align:center; } #nav a:hover { text-decoration: none; color:#000; } #nav li ul { position: absolute; width: 200px; left:-999px; background: #fff; border: 1px solid #ADA8A5; list-style:none; margin:0; padding: 0; } #nav li:hover ul, #nav li.sfhover ul { left: auto; z-index:99; } #nav li ul li { width: 200px; margin: 0; padding: 0; z-index:99; } #nav li ul li a { display:block; float:none; font-size: 11px; font-family:verdana; width: 190px; height:auto; padding:5px; margin: 0; line-height:normal; font-weight:normal; color: #000; z-index:99; text-align:left; background: #fff; border-left: none; border-right:none; border-top:none; border-bottom: 1px solid #e7e7e7; } #nav li ul li a:hover { background: #a2c9f4; } Code: <ul id="nav"> <li><a href="">HOME</a> <ul> <li><a href="">Test</a></li> <li><a href="">test</a></li> <li><a href="">test</a></li> </ul> </li> <li><a href="">NEWS</a> <ul> <li><a href="">Latest News</a></li> <li><a href="">Hot News</a></li> <li><a href="">Submit a Story</a></li> </ul> </li> </ul> Hello, In my menu, I'm trying to center the first level of the List Items, and left justify the second level of the List Items. So the Menu will be centered and the pop-up links will be left justified. I know it's probably super simple, but for some reason, I'm missing it! Quote: /*!!!!!!!!!!! Menu Core CSS !!!!!!!!!!!!!*/ .qmmc .qmdivider{display:block;font-size:1px;border-width:0px;border-style:solid;position:relative;z-index:10000;} .qmmc .qmdividery{float:left;width:0px;} .qmmc .qmtitle{display:block;cursor:default;white-space:nowrap;position:relative;z-index:10000;} .qmclear {font-size:1px;height:0px;width:0px;clear:left;line-height:0px;display:block;float:none !important;} .qmmc {position:relative;zoom:1;z-index:10000;} .qmmc a, .qmmc li {float:left;display:block;white-space:nowrap;position:relative;z-index:10000;} .qmmc div a, .qmmc ul a, .qmmc ul li {float:none;} .qmsh div a {float:left;} .qmmc div{visibility:hidden;position:absolute;} .qmmc .qmcbox{cursor:default;display:block;position:relative;z-index:10000;} .qmmc .qmcbox a{display:inline;} .qmmc .qmcbox div{float:none;position:static;visibility:inherit;left:auto;} .qmmc li {z-index:10000;} .qmmc ul {left:-10000px;position:absolute;z-index:10000;} .qmmc, .qmmc ul {list-style:none;padding:0px;margin:0px;} .qmmc li a {float:none} .qmmc li:hover>ul{left:auto;}#qm0 ul {top:100%;}#qm0 ul li:hover>ul{top:0px;left:100%;} I am working on a website for a client and I am having trouble following A List Apart's tutorial (I can't link yet). I have a working css dropdown menu using a css sprite. But what I am trying to do, is when you mouse over a dropdown and go down the dropdown, that the parent menu remains at it's hover state. Currently what is happening is as soon as I mouseout of the parent level it goes back to the normal state. I don't really want to post the link to the test site itself if I don't have to for client privacy. Please help! I'm getting way too frustrated now, I've look at so many examples and nothing seems to work. I don't even need the javascript, I just need it to work. I've experimented with javascript and without. This is the code I am using: javascript: Code: <script type="text/javascript"> <!-- startList = function() { if (document.all&&document.getElementById) { menuRoot = document.getElementById("menu"); for (i=0; i<menuRoot.childNodes.length; i++) { node = menuRoot.childNodes[i]; if (node.nodeName=="LI") { node.onmouseover=function() { this.className+=" over"; } node.onmouseout=function() { this.className=this.className.replace(" over", ""); } } } } } window.onload=startList; //-> </script> HTML Markup: Code: <div id="nav"> <ul id="menu"> <li><a href="index.php" class="home"></a></li> <li><a href="link" class="tour"></a></li> <li><a href="link" class="events"></a> <ul class="drop"> <li><a href="/events/calendar">Calendar</a></li> <li><a href="/events">Ag Science Hall of Fame</a></li> <li><a href="/events/tastes">TASTES</a></li> </ul> </li> <li><a href="news" class="news">News</a> <ul class="drop"> <li><a href="link">Legislation</a></li> <li><a href="news/latest-news">Latest News</a></li> <li><a href="/news/newsletter">Newsletter</a></li> <li><a href="news/in-the-media">In the Media</a></li> </ul> </li> <li><a href="link"></a></li> <li><a href="link"></a></li> </ul> </div> Menu CSS: Code: #nav { position: relative; float:left; width:940px; height:35px; z-index: 9; background: #fff; } #menu, #menu ul { position: relative; padding:0; margin:0; clear:both; float:left; width:455px; z-index: 9; } #menu ul.drop { background:#520006; /* padding:10px;*/ width:inherit; clear:both; float:left; margin-top:35px; z-index: 9; } #menu ul.drop li { width: 130px; clear:both; padding: 5px; z-index: 9; } #menu ul.drop li:hover { background: #c10101; z-index: 9; } #menu ul.drop a { color:#fff; font-size:11px; text-decoration:none; font-weight:normal; clear:both; float:left; z-index: 9; } #menu a { display: block; /*width: 10em;*/ float:left; clear:both; width:130px; } #menu li { float: left; /*width: 10em;*/ } #menu li ul { position: absolute; width: 10em; left: -999em; z-index: 9; } #menu li:hover ul { left: auto; } #menu li:hover ul, #menu li.sfhover ul { left: auto;} /*SPRITE BACKGROUP POSITIONING*/ #menu li a.home, #menu li a.tour, #menu li a.events, #menu li a.news, #menu li a.donate, #menu li a.involved, #menu li a.resources, #menu li a.about, #menu li a.contact { float:left; background:url('images/menu.jpg') no-repeat; height:35px; text-indent:-999999px; } #menu li a.home:hover, #menu li a.home.over {background-position: 0px -35px;} #menu li a.home {width: 62px;} #menu li a.tour:hover {background-position: -62px -35px;} #menu li a.tour {width: 63px; background-position: -62px 0px;} #menu li a.events:hover, #menu li a.events.hover {background-position: -125px -35px;} #menu li a.events {width: 101px; background-position: -125px 0px;} #menu li a.news:hover {background-position: -226px -35px;} #menu li a.news {width: 80px; background-position: -226px 0px;} #menu li a.donate:hover {background-position: -306px -35px;} #menu li a.donate {width: 75px; background-position: -306px 0px;} #menu li a.involved:hover {background-position: -381px -35px;} #menu li a.involved {width: 74px; background-position: -381px 0px;} ul {list-style: none;} Sorry - very easy question I'm sure but we all have to start somewhere...! Could someone just explain why the following page has a gap several pixels high at the very top of the page (greater in IE, less in Firefox - haven't tested others) - it's only a few lines of html but can't work it out.... <html> <head> <style>body{text-align:center}</style> </head> <body text="#000000" bgcolor="#FFFFFF"> <div id="container" style="top:0px;text-align:left;margin:0pt auto;width:780px;background-color:#cccccc;height:100px"> <div id="content" style="width:100%">Some text</div> </div> </body> </html> I'm trying to create a horizontally-centred site so can't use absolute positioning. Thanks a lot. Hi all, Not sure if I'm aligning the container of this page properly: http://ntcjapan.com/languages/arabic/ The page is right-aligned and displaying correctly on all browsers except I.E. 5.0 On IE 5.0, the container remains on the left of your screen, not on the right. Due to arabic text, etc., the direction of the body is rtl The CSS (note the "container" div at the end, plus its margin): Code: body { height:100%; margin: 0px; padding: 0; background: #FFFFFF url(../../../images/0_bg_body.jpg) no-repeat fixed -5px 100px; } body { font-family: "Simplified Arabic", "Arabic Transparent", "Traditional Arabic", "Arial (Arabic)", "Times New Roman (Arabic)", "AGA Arabesque", "NaskhTT", "Akhbar MT", "Courir New (Arabic)", "Decotype Naskh", "Mudir MT", "Simplified Arabic fixed", "Tahoma (Arabic)", "Andalus", "Monotype Koufi", "Decotype Naskh Extension", "Decotype Naskh Special", "Decotype Naskh Swashed", "Decotype Naskh Variants", "Decotype Naskh Thuluth", "Simplified Arabic backslanted", "Traditional Arabic Backslanted", Arial,Helvetica,sans-serif; line-height:19px; font-size: 13pt; font-weight:bold; } p { direction:rtl; } div { text-align:right; direction:rtl; } #container { margin: 0 0 0 auto; text-align: left; width: 762px; background: url(../images/0_bg_right.gif) repeat-y fixed top right; min-height: 100%; height: auto; direction: ltr; } I suppose I need an additional style for IE 5.0 and 5.5 - to tell those browsers to align the container to the right. Any ideas? Thanks in advance! http://206.169.23.2/index3.htm http://206.169.23.2/style3.css The borders are not aligning correctly. Hi everybody, I'm sure there is a very simple solution to this layout problem but I haven't been able to fix it. My design displays perfectly in Firefox but is out of place by 40px in IE. URL The CSS in question is certainly this div: Code: #sub-content ul li a { ... margin-left: -40px; position: relative; } I've tried various IE hacks, such as the ones mentioned on Centricle, e.g: Code: div>#sub-content ul li a { margin-left:0px; } But to no avail. Would a CSS guru mind helping me out? I've had this problem before but figured I'd finally write for suggestions. When tables that are aligned to a certain position of text, say to the right of the text, have style="margin-left: 10px" to avoid running right into the text, in I.E. that margin gets applied to the first line of the text as well. Easier to show: http://wandp.american.edu/community_events.php Notice the indentation in the text in IE that isn't in Firefox. I think what I did as a workaround before is give the table a white left border, or make an extra table column. Would like to avoid either (the border part because I might decide to change the background colo or use this in several apps). Any thoughts? Thanks, Jeremy Hi, i'm working on this search box but I can't get the 3 elements perfectly aligned, the bottom of the elements should be aligned. What I have is: Search: <input> <img> Search is <label>, input is a normal input text box, <img> is used instead of submit. The problem is, that the <img> is about 5px higer than the other two. The Search label and input are middle aligned. Does anyone have a solution for this positioning problem? A link with workarounds would be useful. Thanx. I've been trying to tweak the styling on hxxp://beecycle-co-uk.domain-ref.http.xenon.lon.periodicnetwork.com/Products.aspx?category=2&product=8 for a while now, and for some reason that page's #wrappper is aligned left, not center. I've picked through each element but I can't see any reason for it to do that. Am I missing something? I've had this problem before but figured I'd finally write for suggestions. When tables that are aligned to a certain position of text, say to the right of the text, have style="margin-left: 10px" to avoid running right into the text, in I.E. that margin gets applied to the first line of the text as well. Easier to show: http://wandp.american.edu/community_events.php Notice the indentation in the text in IE that isn't in Firefox. I think what I did as a workaround before is give the table a white left border, or make an extra table column. Would like to avoid either (the border part because I might decide to change the background color or use this in several apps). Any thoughts? Thanks, Jeremy I'm currently creating a simple website using css and its looks fine in IE however the nav bar is not aligned with everything else in Firefox. Sorry i'm new at CSS, thanks for the help in advance. Here is the site: insightchirocare.ca Here is the css code: Code: /* CSS Document */ *{ padding:0; margin:0; width: auto; } body { font-family:Verdana, Arial, Helvetica, sans-serif; background-repeat:repeat-x; background-color:#ffffff; padding:0; margin:0; } #container { width:800px; margin:auto; padding-top: 30px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; } /* HEADER IMAGE */ #header{ background-repeat:no-repeat; background-image: url(images/header.gif); height: 150px; width: 800px; float:left; margin:300 px; padding-top: 0px; padding-right: 0px; padding-bottom: 3px; padding-left: 0px; } /* HEADER BACKGROUND IMAGE END */ /* NAVIGATION */ #nav{ width:800px; float:right; height:30px; margin-top: 0px; margin-left: 0px; margin-bottom: 0px; margin-right: 40px; padding-top: 0px; padding-right: 0px; padding-bottom: 3px; padding-left: 0px; } .menu ul{ padding:0; margin:0; list-style-type:none; list-style:none; display:inline; } .menu li{ padding-right:0px; margin:0 0px 0 0; height:30px; list-style-type:none; list-style:none; display:inline; float:left; } span{ display:none; } #home a{ background:url(images/nav_bar/home.gif); width:74px; height:30px; display:block; } #home a:hover { background:url(images/nav_bar/home_gr.gif); width:74px; height:30px; display:block; } #home a:active { background:url(images/nav_bar/home_gr.gif); width:74px; height:30px; display:block; } #about_us a{ background:url(images/nav_bar/about_us.gif); width:82px; height:30px; display:block; } #about_us a:hover{ background:url(images/nav_bar/about_us_gr.gif); width:82px; height:30px; display:block; } #about_us a:active{ background:url(images/nav_bar/about_us_gr.gif); width:82px; height:30px; display:block; } #first_visit a{ background:url(images/nav_bar/first_visit.gif); width:81px; height:30px; display:block; } #first_visit a:hover{ background:url(images/nav_bar/first_visit_gr.gif); width:81px; height:30px; display:block; } #first_visit a:active{ background:url(images/nav_bar/first_visit_gr.gif); width:81px; height:30px; display:block; } #gonstead_chiro a{ background:url(images/nav_bar/gonstead_chiro.gif); width:162px; height:30px; display:block; } #gonstead_chiro a:hover{ background:url(images/nav_bar/gonstead_chiro_gr.gif); width:162px; height:30px; display:block; } #gonstead_chiro a:active{ background:url(images/nav_bar/gonstead_chiro_gr.gif); width:162px; height:30px; display:block; } #faq a{ background:url(images/nav_bar/faq.gif); width:71px; height:30px; display:block; } #faq a:hover{ background:url(images/nav_bar/faq_gr.gif); width:71px; height:30px; display:block; } #faq a:active{ background:url(images/nav_bar/faq_gr.gif); width:71px; height:30px; display:block; } #kid_chiro a{ background:url(images/nav_bar/kids_chiro.gif); width:124px; height:30px; display:block; } #kid_chiro a:hover{ background:url(images/nav_bar/kids_chiro_gr.gif); width:124px; height:30px; display:block; } #kid_chiro a:active{ background:url(images/nav_bar/kids_chiro_gr.gif); width:124px; height:30px; display:block; } #testimonials a{ background:url(images/nav_bar/testimonials.gif); width:105px; height:30px; display:block; } #testimonials a:hover{ background:url(images/nav_bar/testimonials_gr.gif); width:105px; height:30px; display:block; } #testimonials a:active{ background:url(images/nav_bar/testimonials_gr.gif); width:105px; height:30px; display:block; } #contact_us a{ background:url(images/nav_bar/contact_us.gif); width:101px; height:30px; display:block; } #contact_us a:hover{ background:url(images/nav_bar/contact_us_gr.gif); width:101px; height:30px; display:block; } #contact_us a:active{ background:url(images/nav_bar/contact_us_gr.gif); width:101px; height:30px; display:block; } /* NAVIGATION END*/ /* LEFT_CONTENT*/ #left_content { height: 450px; width: 500px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #757171; margin-top: 0px; margin-left: 0px; float: left; margin-right: 5px; background-color:ffffff; } /* LEFT_CONTENT END*/ /* REG_CONTENT*/ #reg_content { height: auto; width: 800px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #757171; margin-top: 0px; margin-left: 0px; background-color:#ffffff; } /* REG_CONTENT END*/ /* RIGHT_CONTNET*/ #right_content{ height: 450px; width: auto; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #757171; padding: 0; margin-top: 0px; margin-left: 0px; margin-bottom: 0px; margin-right: 0px; background-color:#e3e3e3; } /* RIGHT_CONTENT END*/ h1 { padding:0; margin:0; font-size:16px; color:#008bcf; font-family: Verdana; font-weight: normal; } h2 { padding:0; margin:0; font-size:12px; color:#008bcf; font-family: Verdana; font-weight: normal; } p { padding:0; margin:0; font-size:12px; color:#757171; font-family: Verdana; } /* FOOTER*/ #footer { padding : 0; width: 800px; height: 40px; background: url(images/footer.gif); margin-top: 2px; margin-right: auto; margin-bottom: 30px; margin-left: auto; } /* FOOTER END*/ .clearfloats {clear:both;} A:link { text-decoration: underline; color: #008BCF; } A:visited { text-decoration: underline; color: #008BCF; } A:active { text-decoration: underline; color: #18fa07; } A:hover { text-decoration: underline; color: #18fa07; } Hi there! About a week ago I posted here about an issue, and I received an immense amount of support, so I figured I'd come back here with anything I ran into! My website, in its current state, can be found here. You'll notice that the right column is stuck below the main content area. This is undesirable. Ideally, that gray box would align with the top of the content area, thus creating a simple 2-column layout. In IE (at least version 7), the gray box is shown BELOW the main content area, but still completely inside the #contentwrap div. In Opera and Firefox, however, the gray box is partially in and partially out of the #contentwrap div. I'm not sure what this is due to, (perhaps something weird in my coding?), but either way I just need to get that column to align with the top of the main content area. My code validated fine (but of course that doesn't make it perfect...), and I have provided the complete code for both the (X)HTML and the CSS below: Code: xhtml <!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 http-equiv="Content-type" content="text/html; charset=UTF-8" /> <title>Function T .:. Home</title> <style type="text/css" media="all">@import "css/master.css";</style> </head> <body> <div id="entire-page"> <div id="page-container"> <div id="ghost"></div> <div id="header"></div> <div id="navigation"> <ul id="linkmenu"> <li class="n-home"><a href="#"><span>Home</span></a></li> <li class="n-bio"><a href="#"><span>Bio</span></a></li> <li class="n-media"><a href="#"><span>Media</span></a></li> <li class="n-contact"><a href="#"><span>Contact</span></a></li> <li class="n-reviews"><a href="#"><span>Reviews</span></a></li> <li class="n-tutorials"><a href="#"><span>Tutorials::</span></a></li> <li class="n-charts"><a href="#"><span>Charts::</span></a></li> <li class="n-links"><a href="#"><span>Links</span></a></li> </ul> </div> <div id="contentwrap"> <div id="content"> <h1>New Website Launched!</h1> <h2>10.01.2008</h2> Lorem ipsum debet tritani forensibus et nam, ex solet splendide mea, at cum menandri consetetur conclusionemque. Ocurreret persecuti eum at, intellegat temporibus cu sea. Tale modus mei cu, mucius offendit id mea, id consul urbanitas vis. Ius te alii deseruisse, at mea veri illum perfecto. Per iudico commodo blandit ea, mel eu illum sonet efficiantur, tota delenit splendide at qui.<br/><br/> No vel ridens labores percipitur. Ad eum homero percipitur. Sit stet vero ex. In nec volumus explicari.<br/><br/> Pro puto tempor cu, vix in populo doming legendos, ut has regione suavitate. Nec ea movet omnium assentior, ius solum feugiat no, ut est quem putant mollis. Eu simul suscipiantur has, equidem ornatus ea vel. Cu noluisse placerat nec, nostrum probatus eloquentiam cu sed. Lorem di**** et pri, magna ubique no sed, in solum decore quidam pro.<br/><br/> Ad blandit antiopam pri. Meliore necessitatibus et quo. Qui fabellas torquatos an. Id vel tantas recusabo, ex eos natum simul mentitum. Ea nostrud takimata iudicabit vel. <br/><br/> <h1>This is Only a Test</h1> <h2>10.01.2008</h2> Id sit minimum patrioque ullamcorper, vix prompta intellegat at. Mea vidisse admodum denique in, at eam graecis expetendis referrentur, ancillae prodesset ut eam. Meliore luptatum appellantur duo eu. Cu dicam invenire has, ex affert pertinacia vis, ut impetus mandamus sea. Pri nisl atomorum ex, nam te eripuit numquam docendi. <br/><br/> Est stet albucius maluisset id, et habeo graece molestie mel, adhuc nonumy eloquentiam ea vel. Ubique takimata persequeris ne his, pro an augue feugiat efficiendi, eu eam unum nominavi mediocritatem. Corpora disputando eloquentiam ex quo, cu prima choro salutandi his. Has eirmod regione accumsan eu. Cum ea wisi scripta, veritus assentior complectitur pro ea, mea cu aeterno vocibus eligendi. Ei eam maiorum perfecto. <br/><br/> Et eam eius nostro. In alienum definitiones nec, sed wisi mentitum incorrupte ea, ei per quando appetere. Eu dicta vitae ignota vel. Eu qui quot aperiri adipiscing, eu vim novum deleniti, quod kasd eu has. Copiosae incorrupte neglegentur mea cu, sit adolescens elaboraret constituam te, ea sea tamquam molestie definiebas. Rebum harum labore pro ex, ex soluta contentiones vix, no usu esse nominati mandamus. <br/><br/> Et pro aliquando expetendis theophrastus. Mei ne errem consequat, mei ut sonet singulis indoctum. Alia nihil civibus per ei. Ei sed mucius perfecto elaboraret, invidunt neglegentur ei mel, at vide tota quo. <br/><br/> <h1>New Site Coming Soon!</h1> <h2>09.29.2008</h2> Id placerat phaedrum per. Nec ut persius legimus conceptam, ius no ludus clita consul. At atomorum voluptatum cum, duo cibo putant reprimique ne. Ea mei hinc eros noluisse, ad sea ipsum di****, alii debet tamquam te nam. <br/><br/> Essent labores explicari cu duo. Ius causae copiosae an. Ex omnium diceret maluisset vim. Ad mel vivendo disputationi. Hendrerit democritum id cum, quodsi molestiae duo te. </div> <div id="rightbar"> <h2>THIS IS A TEST</h2> I am trying to see if I can get this column to align to the top of my browser content-wrapper div!<br/><br/> Unfortunately, I can't seem to get it to work!<br/> </div> </div> <div id="content-bottom"></div> <div id="footer"> Home - Bio - Media - Contact - Reviews - Tutorials - Charts - Links <br/> All information Copyright 2008 Tom Winchester unless otherwise specified. All original artists <br/> and labels retain their full respective rights and royalties to all copyrighted material. Mixes are presented <br/> for promotional purposes only. Duplication of any material in part or in whole without the <br/> express written consent of Tom Winchester is strictly prohibited. </div> </div> </div> </body> </html> Code: css html, body { margin: 0px; padding: 0px; background: url(../images/bgpattern.gif); } #entire-page { } #page-container { margin: auto; width: 750px; } #ghost { height: 15px; } #header { height: 110px; background: url(../images/headers/rotator.php); background-repeat: no-repeat; } #navigation { width: 750px; height: 40px; background: url(../images/navigation.gif); background-repeat: no-repeat; } ul#linkmenu, #linkmenu li { padding: 0px; margin: 0px; list-style: none; } ul#linkmenu { float: left; height: 0; } #linkmenu li { font-family: "Times New Roman", Times, Georgia, sans-serif; position: relative; width: 10px; } .n-home { top: 7px; left: 30px; font-size: 22px; } .n-bio { top: -18px; left: 116px; font-size: 22px; } .n-media { top: -43px; left: 179px; font-size: 22px; } .n-contact { top: -70px; left: 271px; font-size: 24px; } .n-reviews { top: -95px; left: 392px; font-size: 22px; } .n-tutorials { top: -120px; left: 485px; font-size: 22px; } .n-charts { top: -145px; left: 592px; font-size: 22px; } .n-links { top: -170px; left: 678px; font-size: 22px; } #linkmenu li a { text-decoration: none; background: none; } #linkmenu li a span { visibility: hidden; } #contentwrap { background-image: url(../images/contentbg.gif); background-repeat: repeat-y; width: 750px; padding-top: 0px; padding-left: 0px; padding-right: 0px; padding-bottom: 0px; } #content { width: 495px; padding-right: 245px; padding-left: 10px; padding-top: 0px; padding-bottom: 0px; font-family: "Trebuchet MS", Verdana, Helvetica, Arial, Times; font-style: normal; font-size: 12px; color: #858585; } #rightbar { float: right; width: 225px; margin-left: 505px; margin-right: 10px; background: gray; text-align: center; font-family: "Trebuchet MS", Verdana, Helvetica, Arial, Times; font-style: normal; font-size: 12px; color: #000000; } #content-bottom { height: 5px; background-image: url(../images/contentbgbottom.gif); background-repeat: no-repeat; } #footer { height: 80px; padding: 5px; text-align: center; font-family: "Trebuchet MS", Verdana, Helvetica, Arial, Times; font-style: normal; font-size: 11px; color: #cfcfcf; } h1 { margin-top: 0px; margin-bottom: 0px; font-family: "Trebuchet MS", Verdana, Helvetica, Arial, Times; font-size: 24px; font-weight: 200; color: #1c2939; } h2 { margin-top: 0px; margin-bottom: 7px; font-family: "Trebuchet MS", Verdana, Helvetica, Arial, Times; font-size: 12px; font-weight: 200; color: #c49271; } THANK YOU!!!! -Tom Winchester- Wow I REALLY hate CSS. For hours I have been trying to figure this out: Here is some HTML Code: <td> <div class="linksbar"> <div class="linkstext"> link - link - link - link <img src="imagelink.jpg"> <img src="imagelink2.jpg"> </div> </div> </td> [CODE] the CSS [CODE] .linksbar { height: 28px; background-image: url(bg.jpg); } .linkstext { vertical-align: middle; line-height: 28px; font-weight: bold; color: white; } First problem: in Chrome, the text rests at the bottom of the div. I want it in the middle. Second problem: in IE it looks like a mess. The text is sort of in the middle (more towards the bottom). the image links are at the very top. The image link height is like 20 or something. Hi guys, I've trawled the web for this query and have found many solutions, some work, some do not. Some are quite complex, some are fairly simple. I haven't quite found a technique I'm happy with just yet - or that I can get to work properly. Please download the attached .zip and open the index.html in a browser. Basically, that page will show a big main div tag container with 6 smaller divs within it, containing different sized backgound images, with text. I would like the text to be right aligned (which it is)... but also vertically aligned in the middle (and here lies the problem). With table cells it was easy, you aligned items right : middle. Not quite so easy with divs.... grrrrr.... they really shoulda sorted that aspect out ! Nevermind. I've written down the Background pixel heights of the images to save people time - as I suspect the solution may lie with something to do with calculating the heights of the div tags (?) If someone could perhaps jiggle the code and CSS a bit to help create the perfect, working vertically-aligned solution that'd be great - and then paste up either the full HTML code or full CSS code, or both please.... thanks a lot ! Cheers, Andy Is there any way to make some text vertically aligned inside a DIV? Just like you would do inside a cell? Code: <table><td valign="middle" height="100">This text is vertically aligned</td></table> Apparently, the vertically-align CSS property only works if it is relative to other DIVs. What I want is some vertically aligned text inside a DIV. Thanks for the help. Hi, I am making a site and it is important the text is always positioned over the background image in the same place. I have managed to do this. When I zoom out the text stays in the correct position however when I zoom in (as if I am looking on a smaller screen) the text re positions to the edge of the browser. How can I keep the text in the same position on all monitors? Here is what I have so far (I am very new to css): #content { text-align: left; width: 1060px; padding: 0px 30px 0px 30px; margin-left: auto; margin-right: auto; } Thanks Cameron hi, i'm wondering whether anyone here knows something that i don't about this... here's some code: Code: <div style="position:absolute; left:30px; top:90px; width:380px; height:80px; border: 3px double #000000; padding:10px; padding-top:5px; line-height:150%"> <table width="380" height="80" border=0 cellspacing=0 cellpadding=0> <tr> <td valign="middle"> <div align="center" style="width:380px;"> <span style="font-size:11px; text-align:left;"> aligned to the left.<BR> but is it centered?<BR> i think not.<BR> </span> </div> </td> </tr> </table> </div> i'm able to achieve vertically centered text in the table cell, and i can center it or align it to the left, but so far in my experimenting i haven't found a way to have text that is aligned to the left, centered in the div. i could always just add a bunch of padding-left on the div so that the text is pushed over and looks nicer although it is not centered, but i'm wondering whether there's a way to do it the way i originally planned to.. thanks very much for looking at this. Sounds weird, but you know us designers are always looking for fresh ways to present content. I've not actually managed to make this work, even though it seems ridiculously simple; in effect it would just be full justification except any orphaned lines would be right-justified, not left. Any ideas? |