CSS - Ie Layout Not Working Right
Hi Folks,
I'm trying to merge my template into my asp.net storefront css file and somewhere there seems to be a conflict. the result I'm going for is a centered page that slides over the background if the page is resized. In Firefox I get what I want. In IE my content wrapper seems to be tacked to the upper left corner of the screen. There are a lot of styles in the sheet I'm trying to modify, but I can't id which one(s) are causing my problem. I made a template page that works as I'd like that is here eliteportraits.com/teetest/template.htm the page that doesn't seem to produce what I want is pinkgolftees.com/default.aspx?skinid=9 any ideas on where to start? also, with the merge, everything seems to validate except the moz-overflow line...is that a real problem? I don't know if it's really needed by the storefront or not. thanks a bunch Mark Similar TutorialsI'm working on tidying up my wiki's Main Page. You can see the progress here; it seems to work fine in FireFox, but in IE the yellow div gets pushed below the two green div's floated to the right of the page. If you don't have firefox, then the top of the yellow div should line up with the top of the green div. The source is too big to post here, just view it from the page I llinked to... Any idea why this is happening? Thanks for your time, -Ross [edit] Nevermind, sorted it cannot get my css layout to work on my php page, it works fine if I change to a HTML extension on my file. Is there is difference in how we code when working with php?? Or can someone see what I am doing wrong? Just using a simple layout My css code: Code: /* ----------container to center the layout-------------- */ #wrapper{width:1200px; background-color: #cfc;} #header {width:1200px; background-color: #ccc; border: 1px solid #ccc; height: 100px;} #leftcolumn{border: 1px solid #ccc; width:800px; background-color: #cff; float: left;} #rightcolumn{float:right; width:400px;} #footer {width:1200px; background-color: #ccc; border: 1px solid #ccc; height: 10px;} #form {float:left; width:800px; background-color: #fcc;} #nav2 {float:left; width:800px;}/ php/html code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link href="admin.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" media="print" type="text/css" href="../print.css" /> <title>The Art Database - Admin Console</title> </head> <body> <?php include("../library/login.php"); login(); ?> <div id='container'> <div id='header'><h3>The Backend</h3></div> <div id='wrapper'> <div id='leftcolumn'> <div id='nav'>Navigation</div> <div id='form'>Left Form Pink</div> </div> <div id='rightcolumn'>Right</div> </div> <div align="center">Footer</div> </div> </body></html> I have also tried to enclose it in php tags Code: <?php session_start(); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link href="admin.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" media="print" type="text/css" href="../print.css" /> <title>The Art Database - Admin Console</title> </head> <body> <?php echo "<div id='wrapper'>"; echo "<div id='header'>This is the Header</div>"; echo "<div id='leftcolumn'>Left</div>"; echo "<div id='rightcolumn'>Right</div>"; echo "</div>"; echo "<div id='footer'>footer</div>"; ?> </body></html> Any ideas why it doesn't work? In it I meld Tonico Strasser's brilliant "Flexible Layout" (http://www.webproducer.at/flexible-layout ) with Stu Nicholls' mega-cool "How to Use CSS to Solve min-width Problems in Internet Explorer" (http://www.webreference.com/programming/min-width/ ). From a geek perspective this is a pretty cool layout: fully flexible source ordered pure CSS three (or two or one) full column layout with headers and footers and no javascript. It should look pretty much the same on any modern browser and should scale up and down smoothly as the font sizes are changed by the user. I'm curious how it works on real world browsers. Does it jerk or flicker as it is loaded or the browser window is resized? Does it scale up and down smoothly as you change the font size? Are the contents of the side columns always visible as you play with the browser window and font size? Do the side columns maintain their size and the center column shrink as the browser window shrinks until a minimum center column size is reached? Does it do anything funky? I've already found some minor funkiness on older versions of modern browsers running on Macs, but nothing awful, and the funkiness is due to browser bugs about which I can't do anything (data table captions, for example, don't seem to be understood well by Opera 6 for Macs . . . but then this is a data table caption issue, not a layout issue . . .). How does this layout work for you? In addition to the feedback, let me know the browser and platform you are using (eg., Firefox 1.0.6 on Windows XP). I'm particularly interested in feedback from folks testing it over a modem. Thanks! Here's the link to my test page: http://www.econinformation.com/layout_test.htm -- RS Hi there, I am trying to use a 3 column css layout. It works fine in IE7, but the divs just appear under each other in FF. This is my css: PHP Code: #1_left { float:left; width:250px; background-color: #f6f6f6; } #1_right { float:right; width:250px; margin:0; padding:0; background-color: #f6f6f6; } #1_middle { margin:0 250px; background-color: #f6f6f6; } and this is my HTML: PHP Code: <div id="1_left">text</div> <div id="1_right">text</div> <div id="1_middle">text</div> Any ideas? Hi. I'm making a slightly unusual layout at the moment, and I could do with some help. I've seen it done before, but I don't know how they did it and cant find the site any more. Its probably easier for me to explain this is pictures: Wide Screen: Smaller Screen. Note that the last column as flowed onto the next row since there isn't enough space (this is perfect): However, it doesn't fill up the available space. This is an example image I photoshopped to show how I want it. Notice how the block on the bottom row fills the wasted space: This is a link to my site so you can try it out for yourself if you are interested: http://www.zombiemod.com/blog/?cat=1 The source is all there too, but I can post that here if it helps. How can I achieve this? Is it something to do with the overflow function? Thanks for any help you can give! James Hi, I am trying to code a new verwsion of my site which has a style sheet switcher. The main page includes a home file (by php) and the home file is just divs. I want the thin column on the left for one style and on the right for the other. The layouts are now messed up . Page is here The two css files are here and here . I'd appreciate any help in sorting this out. Also there are gaps at the end of the navbar, I don't know why!! Thanks Bye Hi I've never posted on a forum before but I am having some css layout issues. Here is an example: URL Basically, only some of the links on the side of the page work. Some just can't be clicked on at all. I have noticed that the ones that can't be clicked on all seem to be parallel with text in the middle column that wraps. It's almost as if the text isn't wrapping in the middle column and carrying straight on and covering the links on the right so they cannot be clicked on. I'm assuming this is something to do with the css as it happens all over the site where the same situation occurs. Has anyone come accross this before or knows how to stop this from happening? Any help would be much appreciated. Also, this only happens in IE not in Firefox. If you need to see the code or the css let me know what you need and i'll post it. Thanks in advance, Bruce Sorry I can't be more descriptive about my problems, but I am really not that great at CSS/PHP/coding in general. I barely passed my Matlab/C++ class freshman year of college, lol. Anyway...my friend and I just started a blog but neither of us know anything about CSS. I followed a tutorial for creating Wordpress Themes using PHP and CSS. I've been working on the blog (hosted locally) for a while now, and finally decided to FTP it to my host server to do the browser snaps on it, etc. thepennydreadful.com That's the URL and right now there is a gigantic white gap between the footer and the container....I thought if I adjusted the padding it might fix the problem because that's how I fixed it when there was a gigantic white gap between the header and the container...but yeah. I've heard from my friend that in his browser (latest vers of firefox) that the sidebar doesn't go to the side like it's supposed to either. I'm using the latest version of Google Chrome, if that matters. Any help or suggestions on how to fix the problem would be greatly appreciated. I've been following the W3 school's pages on CSS too, but I haven't had any formal instruction on CSS so most of what I am doing is pretty much just poking around in the dark. :'( PS: I did validate my CSS like it says to do in the sticky at the top of the forum page and it validates alright.... Code: /* Theme Name: The Penny Dreadful Theme URI: http://www.thepennydreadful.com Description: The layout for the gothic and lolita blog "The Penny Dreadful." Version: 1.0 Author: Kate Bartlett Author URI: http://nozomiwhitewolf.livejournal.com/ */ body{ margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 0; font-family: Arial, Helvetica, Georgia, Sans-serif; font-size: 12px; text-align:left; vertical-align: top; /* background-color: #29001E; */ } div#content{ padding:180px; width: 400px; float:left; } /*Header, Container, Footer*/ div#header{ background-image: url('Top.png'); background-repeat:no-repeat; height: 519px; } div#container{ background-image: url('Middle.png'); background-repeat: repeat; margin-right: 639px; height: 476px; text-align: left; padding: 1px; } div#footer{ background-image: url('Bottom.png'); background-repeat:no-repeat; clear:both; float: left; width: 1050px; text-align: left; padding: 160px; height: 360px; } /* End of file. */ I was looking for ways to make the layout work with header, body and footer that work in IE, Gecko, Safari, etc.. I thought I found a good solution via Google surfing and it looked great. Then I discovered that it doesn't have the "<!DOCTYPE ...>" tag, so I added it and now it is thrown out of wack in most browsers. Does anyone know of a valid css layout that would include the header, the body and the footer that work. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <style type="text/css"> /* colored borders put on for visual effect only */ body{ height: 100%; margin: 0; padding: 0; } #spacer{ height: 95%; float: left; width: 1px; font-size: 1px; /* to make sure width is not overridden */ padding: 0; margin: 0; background-color: red; /* visual effect only */ } #contentwrap{ width: 100%; text-align: center; padding: 0; margin: 0; } #content{ padding: 30px; border-width: 1px; border-style: solid; border-color: blue; } #footer{ clear: both; height: 5%; border-width: 1px 0 0 0; border-style: solid; border-color: red; vertical-align: middle; padding: 0; margin: 0; } </style> </head> <body> <div id="spacer"></div> <div id="contentwrap"> <div id="content"> <p>this is the content div</p> <p> </p> <p>more content</p> <p> </p> <p>and even more</p> <p> </p> <p> </p> </div><!-- content --> </div><!-- contentwrap --> <div id="footer">footer</div> </body> </html> I thought I can do this but it doesn't really work as the footer doesn't go all the way down to the bottom when needed... Code: <div id="header"> .... </div> <div id="main"> .... </div> <div id="footer"> .... </div> Thanks, FletchSOD Hello, I am using an OS Commerce layout for a client's website. On this page - www.mts-diesel.com you will see how I have the homepage laid out in anticipation of design, with 3 divs of varying colors. One div with an id of #hp_left is where I want to put a nice jquery code. But when I insert that into #hp_left it breaks the whole layout, was seen here www.mts-diesel.com/index2.php I'm not sure what in the css in the code for this script is breaking my layout but Ithought someone here might be willing to shed some light. A big thank you. Tom I am working on the new home page which is based on a template. The left sideColumn is working fine, however I am having a few problems with the mainColumn layout. Here is a static image to show what I want it to look like Here are the problems I am having: 1) The #scroll box is place where I want it in IE but in foxfire it is right up against the left side of the #sideColumn partially hidden. There will be text that scrolls into this box and stops. I haven't started on the part yet - in case that makes a difference. Not my choice, but that is what the bosses want. 2) I want the image centered horizontal within the #mainColumn. Here is what I have for the css: #home img { margin: 5px auto 5px auto; } which I thought would do the trick, but it's not. 3) I want the p text to have a 40px margin on the right and left side like the .large does. Here is what I have for the css: #home p, .large { margin: auto 40px auto 40px; } It works for the .large (Welcome to Vitalograph), but not for the text below it. At one point I had it working, but after addtional changes fixing other problems, now it doesn't and I can't figure out why. Here is the xhtml starting at the 2 column part (wrapper): Code: <!--begin wrapper--> <div id="wrapper"> <!--begin side column --> <div id="sideColumn"> <span class="category">Products</span> <ul> <li><a href="/products/spirometers.html">Spirometers</a></li> <li><a href="/products/clinical_trials.html">Clinical Trials</a></li> <li><a href="/products/asthma_copd.html">Asthma & COPD</a></li> <li><a href="/products/smoking_cessation.html">Smoking Cessation</a></li> <li><a href="/products/resuscitaion.html">Resuscitation</a></li> </ul> <span class="category">Resources</span> <ul> <li><a href="/resources/contact_us.html">Customer Support</a></li> <li><a href="/resources/training_services.html">Training & Services</a></li> <li><a href="/resources/exhibitions.html">Exhibitions</a></li> <li><a href="/resources/newsletters.html">Newsletters</a></li> <li><a href="/resources/downloads.html">Downloads</a></li> <li><a href="/resources/useful_links.html">Useful Links</a></li> <li><a href="/resources/industry_information.html">Industry Information</a></li> <li><a href="/resources/industry_information.html">Sitemap</a></li> </ul> </div> <!--end of side column --> <!--begin main column --> <div id="mainColumn"> <!-- InstanceBeginEditable name="Main_Section" --> <div id="home"> <div id="scroll"><span>scrolling news will go hear and stop</span></div> <img src="/images/boys_bubbles.gif" width="485" height="333" alt="boys and bubbles" /> <span class="large">Welcome to Vitalograph</span> <p>Vitalgraph offers a wide range of spirometers along with other asthma management equipment with over 40 years experience. From simple hand-held units to sophisticated Windows based spirometry systems, we have it all. Check out our full line of respiratory equipment under the product category.</p> <p><a href="/about_us/about_us.html">more about us...</a></p> </div> <!-- InstanceEndEditable --> </div> <!--end of main column --> </div> <!--end of wrapper--> Here is the vitalograph_master.css: Code: body { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 12px; text-align: center; background-color: #ffffff; color: #515151; margin:0px; padding:10px; } /*page container settings*/ #page { width: 750px; height: 600px; border: 1px solid #5094F9; background-color: #FFFFFF; overflow: hidden; margin: auto; padding: 10px 10px 10px 10px; text-align: left; } /*logo header and tag settings*/ #header { margin: 0; padding-bottom: 5px; width: 450px; height: 36px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: #5094F9; text-align: left; } #header img { vertical-align: -7px; } .tagline { color: #5094F9; font-size: 16; font-style: italic; font-weight: bold; display: inline; clear: both; line-height: 20px; margin-left: 10px; } /*top bar settings*/ #topbar { float: top; height: 20px; background-color: #5094f9; clear: both; padding-left: 10px; text-align: left; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: #FFFFFF; font-size: 12px; font-weight: bold; } #topbar a:link, #topbar a:visited { background-color: inherit; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; text-decoration: none; color: #FFFFFF; font-size: 12px; font-weight: bold; } #topbar a:hover, #topbar a:active { background-color: #FFFFFF; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; text-decoration: none; color: #5094F9; font-size: 12px; font-weight: bold; } #topbar ul { list-style: none; margin: 0; padding-top: 2px; } #topbar li { display: inline; margin-right: 160px; } /*Main Section two columns under top section*/ #wrapper{ padding: 10px 10px 10px 0px; width: 100%; height: 100%; } #sideColumn { float:left; width:155px; height: 78%; background-color: #5094F9; padding-top: 50px; padding-left:10px; padding-bottom:10px; pading-right: 10px; margin-right: 10px; text-align: left; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: #FFFFFF; font-weight: bold; line-height: 20px; } .category { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: #FFFFFF; font-size: 16px; font-weight: bold; letter-spacing: 5px; } #sideColumn a:link, #sideColumn a:visited { background-color: inherit; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; text-decoration: none; color: #FFFFFF; font-size: 12px; font-weight: bold; } #sideColumn a:hover, #sideColumn a:active { background-color: #FFFFFF; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; text-decoration: none; color: #5094F9; font-size: 12px; font-weight: bold; } #sideColumn ul { list-style: none; padding: 15px 0px 15px 10px; margin: 0px; } #mainColumn { padding: 0px; } /*footer*/ .footer { font-family: "Times New Roman", Times, serif; font-size: 9px; color: #999999; } /*text*/ .large { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: #5094F9; font-size: 18px; font-weight: bold; margin-bottom: 15px; } Here is the home.css: Code: /*home page*/ #home { margin: auto; } #home img { margin: 5px auto 5px auto; } #home p, .large { margin: auto 40px auto 40px; } #home a:link, #home a:visited { background-color: inherit; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; text-decoration: none; color: #5094F9; font-size: 12px; font-weight: bold; } #home a:hover, #home a:active { background-color: inherit; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; text-decoration: none; color: #990099; font-size: 12px; font-weight: bold; } #scroll { width: 560px; padding: 5px; background-color: inherit; border: 1px solid #5094F9; margin-bottom: 5px; } Any help or suggestions are greatly appreciated. Hi there and thanks for reading & helping! I am new to this site, but here is my question: I need to build about a 20 page website. I have been told I should do the "layout" for each page using CSS. Is it possible for each page to "link" to one CSS file for layout instructions? I have found suitable CSS layout templates but am unsure how to link each page to the external CSS file for a basic "header, 2 column, footer" layout, or if it is even possible? I am having a hard time grasping this and would really appreciate some help. I think if you look at this code, my problem is obvious. I want a layout with a nav column down the left side, a banner area, and a content area. I have played around with this for hours, tons of trial and error. I almost had it in IE, but in NS it looks like crap. Also, in the container <div> that someone kindly gave me, what is the -350px do? Here is my code, thanks so much. <!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> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> <title>Full Height</title> <style type="text/css"> /*<![CDATA[*/ body { height: 100%; margin: 0; } #container { position: absolute; top: 0; left: 50%; margin-left: -350px; width: 700px; height: 100%; background-color: #fff; border: 1px solid red; background-image: url('images/keybg.jpg'); background-repeat: no-repeat; } #nav{ width:135px; position:absolute; background-color:#000; left:0px; height:100%; float:left; clear:right; top:0px; margin-top:0px; } #banner{ width:565px; position:absolute; background-color:#f00; left:135px; height:125px; float:right; } #content{ width:565px; position:absolute; margin-top:125px; background-color:#00f; left:0px; height:100%; float:right; clear:left; } /*]]>*/ </style> </head> <body> <div id="container"> <div id="nav"> </div> <div id="banner" </div> <div id="content"> </div> </div> </body> </html> So I'm trying to get a semi-liquid layout that has the side benefit of allowing the HTML page content to be organized in a way that losing the stylesheet won't kill it. Ideally, the HTML page would be: LOGO BREADCRUMBS CONTENT MENU RIGHTSIDE CONTENT FOOTER Unfortunately, I've had to move the rightside content up in the page order since I can't seem to configure my CSS in a way that makes it work the other way. This is as far as I've gotten, and I can't get the footer to properly begin at the end of the longest element. I know it's a side effect of the absolute positioning of the Logo and Menu, but I can't think of a way to layer this stuff any better. Help! If you can help me get this up and running, I'll be sure to thank you and hit you back with a link on my site when it's done. Since I can't link directly to anything yet, here's the image of what the layout should look like. I want the footer to fall under the scroll bar if there is one, I don't want a ever-present footer. Code: www.ctechsinc.com/temp3/mockupb.gif Code: * { padding-left: 0px; margin:0px; } table { border-collapse:collapse; } img { border:none; } #container { width:100%; } .logo { float: left; height: 260px; width: 200px; background-color: #0099CC; } .menu { background-color: #996699; width: 200px; height: 150px; float: left; position: absolute; top: 260px; left: 0px; } .greenwrap { background-color: #006633; margin-left: 230px; margin-top: 10px; /* this can be deleted once implemented; it's only here to help align things */ } .breadcrumb { background-color: #99CCCC; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } .content { min-width:220px; height:100px; background-color: #00CCCC; float: left; } .contentwrap { background-color: #00FF99; float: left; } .sidebar { width: 200px; background-color: #3399FF; float: none; right: 0px; position: absolute; } .box1 { background-color: #00FFFF; min-width:220px; margin-top: 20px; margin-right: 220px; margin-bottom: 20px; margin-left: 20px; } .qlink { margin: 20px; } .footer { margin:0px; width: 100%; float: left; clear: none; } Code: <html> <head> <link href="screen2.css" rel="stylesheet" type="text/css"> </head> <body> <div> <div class="logo"> Logo </div> </div> <!-- content, RH --> <div> <div class="greenwrap"> <div class="breadcrumb"> <h1>BREADCRUMBS</h1><br> </div> <!-- <div class="content"> --> <div class="contentwrap"> <div class="box1"> <h2>heading!</h2> <p>Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. </p> </div> <div class="box1"> <h2>heading!</h2> <p>Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. </p> </div> </div> <div class="sidebar"> <div class="qlink"> <p>boring content boring contentboring content boring contentboring content boring contentboring content boring contentboring content boring content </p> </div> </div> <!-- </div> --> </div> <div class="menu"> <p>Menu</p><p>Menu</p><p>Menu</p> </div> <div class="footer"> <p>Fooooooooooooooooooooooooooooooooooooooterrrrr!</p> </div> </div> <!-- menu --> </body> </html> I'm trying to get this layout to work, but just can't seem to. I'd like to be able to do this in tableless fashion but if I have to use tables I'll do so. Basically, the header and the main content areas need to be centered and a fixed width at all times. however, there are 2 bars that need to be fluid and positioned in relation to the header and content areas. I couldn't think of a way to explain it that it would make sense, so I've attached an image that represents what I'm talking about. I'm anxious to hear whether this can be acheived or not. Thanks! -B thanks Hi, How do I position "new.gif" on the same line as text "some subject here" ? Right now "new.gif" appears on right side as intended but underneath text. Code: <td><a href="">some subject here<span style="float:right"><img src="new.gif" alt="New" width="30" height="10" align="middle" /></span></a></td> Thank you. My layout is pretty simple. 1 large columb in the center that should extend the full length of the browser(minimum) regardless of how much text is in it. 1 column on either side of it for other content. I cannot get the middle column to extend to 100%. it stops at the data. Here is my CSS. Code: body { margin: 0; padding: 0; font-size: 12px; font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif; background-color: #C10E0E; } #leftcolumn { display: inline; float: left; left: 15%; width: 150px; } #centercolumn { float: left; width: 511px; height: 100%; margin-left: 2px; padding: 8px; border-left: 1px solid #494949; border-right: 1px solid #494949; background: url(/images/bg.png) no-repeat top left; background-color: #FFDCAA; } #rightcolumn { float: left; width: 150px; margin-left: 1px; } #mainnav { width: 150px; padding: 0 0 0 0; font-size: 12px; font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif; background-color: #C10E0E; color: #FFDCAA; } #mainnav ul { list-style: none; margin: 0; padding: 0; border: none; } #mainnav li { margin: 0 0 0 0; border-left: 7px solid #C10E0E; padding: 0 5px 0 0; } #mainnav li a { display: block; height: 15px; vertical-align: middle; padding: 0 0 0 0; margin: 0 0 0 0; background-color: #C10E0E; color: #FFDCAA; text-decoration: none; text-align: right; } html>body #mainnav li a { width: auto; padding: 0; margin: 0; } #mainnav li a:hover { background-color: #C10E0E; border-left: 7px solid #FFDCAA; color: #FFF; padding: 0; margin: 0; } #mainnav h3 { padding-left: 5px; font-size: 14px; font-weight: bold; color: #F6D4A4; font-style: italic; } thanks! Hi there. I need help creating a certain layout. I need div borders around my layout, but without content inside them the background image is not seen. How could I resolve this without changing height:auto Thanks in advance Hi, Happy New Year This is a continuation of a thread begun in the javascript forum. I'm continuing it here because I think I've solved/avoided some of the javascript aspects of the problem by tackling the design in a slightly different way. I'm struggling with what should be the simplest part of this problem, which is to make the li elements arrange themselves like the attached image rather than the way they presently appear on my site. Furthermore, ideally, I'd like it all to work with the smoothness of Isotope or Quicksand, but maybe that's a problem for another day... As always, any and all help gratefully appreciated! (Also, I'm baffled as to why the thumbnails show up fine on my home PC, but not at all on my work one !?!? Oh, now it's working - this is too bizarre!?!?) |