CSS - Cannot Figure Out Css Layout Error: Sos
- For some reason the content to the right of the vertical line does not all stay to the right, and the border does not go all the way down.
A quick glance at the code will demonstrate what I'm trying to accomplish. Please help, I do not understand what I'm doing wrong here. CSS: Code: /* Please define the rules of CSS. What takes precedence, inheritance and how specific to define something + shortcuts. Define what a parent ellement is. Define float property. */ div.container { width: 100%; margin: 0px; padding: 0px; border: 1px solid black; border-top: 0px; } h1 { font-family: verdana; font-size: 1.5em; font-style: bold; margin: 0px; padding: 0px; } h2 { font-family: verdana; font-size: 1.1em; font-style: bold; margin: 0px; padding: 0px; } h2.center { text-align: center; } h3 { font-family: verdana; font-size: .8em; font-style: bold; } div.header, div.footer { background-color: black; color: white; } div.left_aircraft_index { width:25%; float: left; margin: 0; padding: 0; border-right: 1px solid black; } div.search_content { width: 75%; color: black; font-style: normal; font-family: verdana; margin: 0; padding: 0; } HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Aircraft Database v1.0 - A complete database of known aircraft.</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div class="container"> <div class="header"><h1>UASO :: Aircraft Database</h1></div> <div class="left_aircraft_index"><h2 class="center">Aircraft Index</h2></div> <div class="search_content"><h2 class="center">Search For Aircraft</h2> <p> <form action="searchDatabase.php" method="post"> The search interface will go here. </form> </p> </div> </div> </body> </html> Similar TutorialsSo, I've been making a lot of sites, and keep trying to learn and use divs as you all always recommend. But I always encounter problems, so revert back to tables. Well I'm working on a site using divs right now, but for some reason, it's not working properly. In IE6, there's a gray border between the logo and banner. In FF, the left navigation menu is on the right. Here's the CSS I'm using: Code: .spacer {width:150px; float:left; background-color:yellow; height:35px; } body {background-color:#cccccc; margin:0; font-family:Times New Roman; } .width780 {width:780px; } .sitelinks div{background-color:green; float:left; padding:5px; width:93px; border-right:2px solid black; border-bottom:2px solid black; border-top:2px solid black; } .sitelinks a{display:block; background-color:green; text-align:center; text-decoration:none; color:black; } .sitelinks a:hover{background-color:orange; } .leftnav {width:150px; height:500px; background-color:yellow; } .logo {background-color:yellow; width:150px; height:150px; float:left; } .banner {background-color:pink; height:150px; } .content {background-color:white; vertical-align:top; padding:5px; } Here's the html: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Page Title</title> <link rel="stylesheet" type="text/css" href="realty.css" /> </head> <body> <div class="width780"> <div class="logo"> Logo </div> <div class="banner"> Banner </div> </div> <div class="width780"> <div class="spacer"> </div> <!-- Navigational Bar --> <div class="sitelinks"> <div> <a href="#">Cat 1</a> </div> <div> <a href="#">Cat 2</a> </div> <div> <a href="#">Cat 3</a> </div> <div> <a href="#">Cat 4</a> </div> <div> <a href="#">Cat 5</a> </div> <div> <a href="#">Cat 6</a> </div> </div> </div> <!-- End Navigational Bar --> <!-- Left Navigation --> <div style="float:none;"> <div class="leftnav" style="float:left;"> Left menu </div> <!-- End Left Navigation --> <!-- Content Box --> <div style="width:600px;"> <div class="content" style="height:500px;"> <!-- Content goes in here --> Content Goes here <!-- End Content --> </div> </div> </div> <!-- End Content Box --> Here's the site: 805chesapeake.com (Ignore the colors.. i know they're ugly) Hey guys, I'm new (So I hope this will be posted in the right place). I'm working on this website for a friend, but for the life of me I can't figure out how to get this main table's bg color to either have a lower opacity, or display a png that's been modified with a lower opacity. I've tried everything. Whenever I put in a white background and use the lower opacity (for both EI and Firefox) it fades both the background and the text. When I try to put in the png, nothing shows up at all. I know HTML a lot better than I do CSS, but I used a template this time around so that the side navigation bar would actually work (And the template uses CSS). The website's link is: (52ndstreetjewelry . com) The current background in there is a light pink, but it's not that great looking. Anyone have any ideas? (If that made any sense at all?) ...of this funkiness. So hi, folks - I'm a longtime listener, first-time caller. I'm currently building my first CSS/XHTML storefront coded entirely by hand, and have run into some difficulties with--you guessed it--Internet Explorer. The issue is with the Nav Bar - IE seems to want to squash the items up, which makes the bar much taller than it should be. Here's a screenshot of what it looks like in IE6 (or what it DID look like, before I added the AlphaImageLoader filter. Now it looks the same, only the logo is transparent). Here's the same page in Safari. And here's a look at the dev site, in case you want to see it in action yourselves. (We're not live yet, so please don't make an order, thanks.) Ignoring all the other major funkiness (I know the code is a little sloppy, in places - I'm just trying to work through the problems, one at a time, before I go about doing some cleaning), any idea what the deal might be with the Nav Bar? I should mention the following: The Nav items are in an un-ordered list, and floated to line them up. There's some funkiness with IDs - each item in the list is meant to have a distinct ID (was gonna use this for a CSS-based 'you are here' functionality, but got hasty and entered the same ID for all the items. Plan to fix it). As it is, it isn't currently to standards...but I don't think that's what's causing the funky layout. Here's the HTML: Code: <!-- MainNav --> <ul id="MainNav"> <li id="Nav-Shirts"><a href="/store/mens/">Shirts</a></li> <li id="Nav-Shirts"><a href="#">Info</a></li> <li id="Nav-Shirts"><a href="#">About Us</a></li> <li id="Nav-Shirts"><a href="#">Affiliates</a></li> <li id="Nav-Shirts"><a href="#">E-List</a></li> </ul> Here's the CSS: Code: #MainNav { margin: 25px 50px 0px 0px; padding: 0px 0px 0px 287px; background: #b9b18d; list-style: none; width: 450px; float: left; display: inline; } #MainNav li { float: left; display: inline; } #MainNav a { padding: 0px 9px; line-height: 20px; font-size: 12px; letter-spacing: -.1em; text-decoration: none; text-transform: uppercase; font-weight: lighter; color: #695030; float: left; display: inline; } #MainNav a:visited { color: #695030; } #MainNav a:hover { color: #ebe9c2; } I originally thought it was the double-margin float bug...but as you can see, I added 'display:inline' to all of the CSS elements, and it still doesn't solve the problem. I also thought about giving them each a defined width, as I vaguely remember some IE bug that prefers that sort of thing...but I'm not sure that that would help with this problem, given the way the items are squashed. Anyway, I'm more than a little lost at this point, because I can't figure out which bug in particular is causing this problem (almost all of the IE positioning bugs I've read up on sound like they could be the problem...but since I have no way of seeing what the margins look like in IE (there's no Xyle Scope on Windows, and trial-and-erroring it seems like it would kill me), I can't figure out exactly what's happening to cause it). If I knew the problem I could find a solution. But...alas. Any thoughts? Anyone dealt with this sort of thing before? Could it be the three-pixel text jog bug? What am I missing? (And if you do look at it and know exactly what the problem is, how would you recommend going about fixing it?) Thanks for reading! L 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 a registration page... I am some what new but I am confused b/c this is the source page for the registration but there is no form per se in the html that I can see (or even any content). I am supposed to do some PHP but I'm not sure how to have the form interact with PHP when again there is no form... (unfortunately, I don't think if I can actually show the page since it's not published yet but it has all the fields of form and again this is the source page behind it)... can someone clue me in on this??? <title>Registration</title> <link rel="stylesheet" type="text/css" href="shared.css" /> <link rel="stylesheet" type="text/css" href="registration.css" /> </head> <body> <div id="background"> <div id="shape1"></div> <div id="header"></div> <div id="ds"></div> <div id="home"><a href="index.html" ></a></div> <div id="pby"></div> <div id="id303"><a href="id303.html" ></a></div> <div id="layer3"></div> <div id="layer22"></div> <div id="layer1C"></div> <div id="regOnce"></div> <div id="register"></div> <div id="ty"></div> <div id="x"></div> <div id="p"></div> <div id="register"><a href="register.html" ></a></div> <div id="tour"><a href="tour.html"></a></div> <div id="sched"><a href="sched.html"> </a></div> <div id="yz"><a href="yz.html" ></a></div> <div id="sponsors"><a href="sponsors.html"></a></div> <div id="follow"><a href="follow.html" ></a></div> <div id="layer5"></div> Thank you! I'm wracking my brain, and I can't figure out why my content (which was fine when I just had it sitting in my empty graphical box) is now spaced half-way down the page. My work in progress is at "www *dot* deepwaterchurch *dot* com *slash* next" I'd really appreciate any help. Thanks so much in advance. P.S. The code is below (inline CSS for ease of fiddling): Code: <!-- *,html{margin:0;padding:0;} body{ background:black url("images/water.jpg") repeat-x top left; color:white; font:12pt verdana,arial,helvetica,geneva,sans-serif; width:100%; height:auto; } #container { width: 960px; position:relative; margin:0 auto; /*overflow:hidden;*/ } #logo { position: absolute; background-image: url(images/logo.jpg); right: 52px; top: 15px; width: 250px; height: 131px; } #top { background:url(images/top.png) no-repeat; width: 956px; height: 646px; } #content-container { background:url(images/boxmiddlerepeatable.png); position:relative; width:852px; overflow:hidden; margin:0 auto; margin-top:-631px; top:0px; left:-2px; } #content{ position:relative; margin:10px auto 0; width:805px; left:10px; top:0; min-height:646px; } #bottom { background-image:url(images/boxbottom.png); position:relative; height:12px; width:851px; top:5px; } a:link { color: #3f7ba3; text-decoration: none; } a:visited { text-decoration: none; color:#3f7ba3; } a:hover { text-decoration: none; color: #FFCC33; } a:active { text-decoration: none; } h1 { font-size: 9px; text-transform: uppercase; color:#666666; } h2 { font-size: 13px; font-weight:900; color:#FFFFFF; } h3 { color:#999999; font-weight:400; font-size:12px; } #logo { position: absolute; background-image: url(images/logo.jpg); right: 52px; top: 15px; width: 250px; height: 131px; } .clear{clear:both;height:15px; } #navtabs { width:462px; height:60px; position:absolute; top:-10px; left:5px; } #navtabs ul { display: inline; margin: 0; padding: 0; } #navtabs li { display: inline; list-style: none; margin: 0; padding: 0; float: left; position: relative; width: auto; } #navtabs li ul { position: absolute; width: 10em; left: -999em; } #navtabs li:hover ul { left: auto; } #navtabs li:hover ul, #navtabs li.sfhover ul { left: auto; } li.whoweare a { background-color:#000000; background: url(images/navigation/whoweare.jpg); display: block; width: 77px; height: 67px; text-indent: -999999px; overflow: hidden; } li.whoweare a:hover { background-color:#000001; background: url(images/navigation/whoweare.jpg); background-position: -77px 0; } li.whatwedo a { background-color:#000000; background: url(images/navigation/whatwedo.jpg); display: block; width: 77px; height: 67px; text-indent: -999999px; overflow: hidden; } li.whatwedo a:hover { background-color:#000001; background: url(images/navigation/whatwedo.jpg); background-position: -77px 0; } li.whatwedodown a { background-color:#000002; background: url(images/navigation/whatwedo.jpg); display: block; width: 77px; height: 67px; text-indent: -999999px; overflow: hidden; background-position:-77px 0; } li.beforeyoucome a { background-color:#000000; background: url(images/navigation/beforeyoucome.jpg); display: block; width: 77px; height: 67px; text-indent: -999999px; overflow: hidden; } li.beforeyoucome a:hover { background-color:#000001; background: url(images/navigation/beforeyoucome.jpg); background-position: -77px 0; } li.beforeyoucomedown a { background-color:#000002; background: url(images/navigation/beforeyoucome.jpg); display: block; width: 77px; height: 67px; text-indent: -999999px; overflow: hidden; background-position:-77px 0; } li.onceyourehere a { background-color:#000000; background: url(images/navigation/onceyourehere.jpg); display: block; width: 77px; height: 67px; text-indent: -999999px; overflow: hidden; } li.onceyourehere a:hover { background-color:#000001; background: url(images/navigation/onceyourehere.jpg); background-position: -77px 0; } li.onceyoureheredown a { background-color:#000002; background: url(images/navigation/onceyourehere.jpg); display: block; width: 77px; height: 67px; text-indent: -999999px; overflow: hidden; background-position:-77px 0; } li.faq a { background-color:#000000; background: url(images/navigation/faq.jpg); display: block; width: 77px; height: 67px; text-indent: -999999px; overflow: hidden; } li.faq a:hover { background-color:#000001; background: url(images/navigation/faq.jpg); background-position: -77px 0; } li.faqdown a { background-color:#000002; background: url(images/navigation/faq.jpg); display: block; width: 77px; height: 67px; text-indent: -999999px; overflow: hidden; background-position:-77px 0; } li.contactus a { background-color:#000000; background: url(images/navigation/contactus.jpg); display: block; width: 77px; height: 67px; text-indent: -999999px; overflow: hidden; } li.contactus a:hover { background-color:#000001; background: url(images/navigation/contactus.jpg); background-position: -77px 0; } li.contactusdown a { background-color:#000002; background: url(images/navigation/contactus.jpg); display: block; width: 77px; height: 67px; text-indent: -999999px; overflow: hidden; background-position:-77px 0; } --> </style> </head> <body> <div id="container"> <div id="top"></div><!--end top--> <div id="content-container"> <div id="content"><!--START ENTERING CONTENT HERE--> <div id="logo"></div> <div id="navtabs"> <ul id ="nav"> <li class="whoweare"><a href="whoweare">WHO WE ARE</a></li> <li class="whatwedo"><a href="whatwedo">WHAT WE DO</a></li> <li class="beforeyoucome"><a href="beforeyoucome">BEFORE YOU COME</a></li> <li class="onceyourehere"><a href="onceyourehere">ONCE YOU'RE HERE</a></li> <li class="faq"><a href="faq">FAQ</a></li> <li class="contactus"><a href="contactus">CONTACT US</a></li> </ul></div><!--end navigation--> <div id="wrap"> <div id="controller" class="hidden"> <span class="jFlowControl">Current Series</span> <span class="jFlowControl">We're Social</span> <span class="jFlowControl">Compassion</span> </div> <div id="prevNext" class="hidden"> <img src="images/prev.png" alt="Previous Tab" class="jFlowPrev" align="left"/> <img src="images/next.png" alt="Next Tab" class="jFlowNext" align="right"/> </div> <div id="slides"> <div><img class="cushycms" src="images/currentseries.jpg" height="289" alt="Current Series Graphic" width="462" /><p class="slideshow">Current Series</p></div> <div><a href="social"><img src="images/weresocial.jpg" alt="We're Social" usemap="#social" border="0"></a> <map name="social"><area shape="rect" coords="21,86,232,258" href="http://www.facebook.com/group.php?gid=8981012794&ref=ts" /> <area shape="rect" coords="252,97,426,271" href="http://twitter.com/deepwaterchurch" /></map> </div> <div><img src="images/luv.jpg" alt="show a little luv" class="cushycms"/></div> </div> </div> <div id="overlay" style="z-index:3; position:relative; top:-209px; left:10px; width:462px; height:289px;"><img src="images/slideoverlay.png" /></div> <!-- end slideshow --> <div id="tagline" style="position:relative; top:-390px; left:492px;"><img src="images/tagline.jpg" /></div> CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br /> </div><!--end content--> <div id="bottom"></div><!--end bottom--> </div><!--end content-container--> <div class="clear"></div><!--end clearing div--> </div><!--end container--> Hi, Please take a look at: [Popup Page] http://67.18.220.222/~duoboots/2005/popup_calfwidth.php That's actually a popup page from the main website. An example 'main' page is: [Main Page] http://67.18.220.222/~duoboots/2005/latest_news.php There's a big difference on Firefox with the <ul> list - on the Main page - the list displays fine, and the bullets are small. No problems. However, on the popup page (Firefox) - the bullets are bigger. (This isnt the only problem with the list but I have simplified this page to demonstrate the above) My question is... why? There's no UL / LI definitions in my stylesheet, except for the left vertical menu. The main / popup pages have their own similar CSS 'white boxes' which include padding, and the text is displayed in these white boxes. But for some reason, the UL list on the popup page gets messed up on Firefox..... (The stylesheet can be located at: http://67.18.220.222/~duoboots/2005/styles/style.css any ideas? Thanks a lot! I used to make websites. LONG time ago, and I can't seem to recall a lot of what I used to know. So my problem is... I can not get the two div layers on the left and right moved up to meet the middle div. I've tried pretty much everything I can think of, Reordered them, but then the middle div goes too low or the first div goes wonky. Can anyone please help me figure this out? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> <style type="text/css"> <!-- body { background-color:black; background: #000000; background-image:url background-position:center; background-repeat:repeat-y; } body, table, div { font-family:Verdana; font-size:8pt; } a:link {color:white; font-size:6pt; font-weight:bold; text-transform:uppercase; decoration:none;} a:visited {color:white; font-size:6pt; font-weight:bold; text-transform:uppercase;} a:hover {color:#8a99c2; font-size:6pt; font-weight:bold; text-transform:uppercase;} a:active {color:white; font-size:6pt; font-weight:bold; text-transform:uppercase;} scrollbar {visibility:collapse !important; } browser { overflow: hidden !important; } .indent { margin-right: 2%; margin-left: 2% } div {position:relative;} * { margin: 0; padding: 0; } p { margin: 1em 0; } #wrapper { width: 800px; margin: 0 auto; } #header { height: 100px; z-index: 2; } #right-col { border:1px; background:#29334d; font-size:6pt; text-transform:uppercase; border-style:solid; border-color:black; width: 154px; float:right; z-index: 2; margin-right:16px; } #left-col { width: 154px; z-index: 4; left:6px; border:1px; background:#29334d; font-size:6pt; text-transform:uppercase; border-style:solid; border-color:black; } #content { margin-left: 179px; z-index:3; top:204px; width:430px; } #footer { height: 78px; clear: both; z-index: 2; top:152px; padding: 5px; width:350px; } --> </style> </head> <body> <div id="wrapper"> <div id="header"><map name="map1"> <area href="" alt="Contacts" title="Contacts" shape="RECT" coords="13,233,67,249"> <area href="http://rumormillnewsradio.com/guestbios/insidersloungefree/ByDate.html" alt="Products" title="Products" shape="RECT" coords="82,233,135,249"> <area href="hl" alt="New!" title="New!" shape="RECT" coords="150,233,203,249"> </map> <img height="538" src="" width="790" usemap="#map1" style="z-index:1; border="0"></div> <div id="footer"> <iframe width="100%" height="100%" name="about" src="news.html" frameborder=0 ALLOWTRANSPARENCY="true"></iframe></div> <div id="content"><table bgcolor="#3b4974" width="100%"><tr><td> </div><p><font color="#8a99c2"> <p class="indent"> Your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. </p></font> </td></tr></table></div> <div id="right-col"><font color="#59637d"> <br> <b> Shows last week:</b><br><br> <iframe width="100%" height="100%" name="Lastweekshow" src="" frameborder=0 ALLOWTRANSPARENCY="true"></iframe></div> <div id="left-col"> <br> <br> <b> <a href="http://">Link</a></b> <br><center>.....................................</center><br> <br> <br> <b> <a href="http://">Link</a></b> <br><center>.....................................</center><br> <br> <br> <b> <a href="http://">Link</a></b> <br><center>.....................................</center><br> <br> <br> <b> <a href="http://">Link</a></b> <br><center>.....................................</center><br> <br> <br> <b> <a href="http://">Link</a></b> <br><center>.....................................</center><br> <br> <br> <b> <a href="http://">Link</a></b> <br><center>.....................................</center><br> <br> <br> <b> <a href="http://">Link</a></b> <br><center>.....................................</center><br> </font></div> </div> </body> </html> 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. Hello, First off, if you know of a way to make round cornered boxes (that stretch hor and vert) in css using less than 6 divs, please be my guest. Now the problem I'm having is IE specific, when i load up the IE DOM inspector, i see that all the divs before the bottomleft div have a height that too big. i don't know what this could be from because i never set a height attribute for any of the divs. http://72.29.74.19/~majdkgf/tangerine/ NOTE: this doesn't happen to the last box Apologies if this is in the wrong section guys but it's a combo of CSS, JS and HTML. On my site I want to have a thumbnail (horizontal) scroller, which when clicked on a thumbnail uses the Lightbox style script to open an image. I'd prefer that over a block of say 20 thumbnails to call upon. However, I'm totally stumped of how to do this. Hey, This site looks fine in all the sane browsers, but IE totally screws it up, nothing is where it belongs. Anyone mind having a look and seeing what might be causing this? Very much appreciated. http://www.sansommedia.com/test/todd.html Thanks 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? Hello. My page looks fine in IE7 & FireFox, but in IE6 there's a big white gap on the page. Here's screenshots of how it should look (in IE7 & FireFox) and then how it shouldn't look (in IE6), and then below it is a description of the CSS code I'm using. Any help would be greatly appreciated. Thanks!!! IE7/FireFox: IE6: That whole category on the right that has the "Business Management" heading and the table is in a div with the ID "main" like this: Code: #main { float: right; width: 535px; margin: 8px; } Then the navigation bar on the left side is in a div with the ID "sidebar" like this: Code: #sidebar p { margin: 15px; } Both the "sidebar" and "main" divs are in a div with the ID "container" like this: Code: #container { width: 698px; border: 4px double #095AA6; background-color: #FFF; text-align: center; margin: 0 auto; } Now, here's kind of another problem. At the top of the page (also within the "container" div) are two more divs with the IDs "header" and "nav". Here's those codes: Code: #header { padding: 0; margin: 0; width: 100%; height: 55px; background: url(../images/header.jpg) no-repeat; color: #FFF; } #nav { padding: 0; margin: 0; height: 17px; border-width: 5px 0 5px 0; border-color: #FFCC00; border-style: solid; background-color: #9CBCDA; color: #330066; } Now, I tried decreasing the "width" attribute in the "main" ID from 535 to 525, and that cleared up the big white gap, but then it left a white gap on the top-right (next to the "header" and "nav"). This is only (again) in IE6, and can be seen in this screenshot: Any ideas anyone??? Thanks!!! I am getting a CSS validation error It is: 251 * Parse Error / textarea { border: 1px solid silver; width: 80%; } If I comment the CSS in question out, it gives me another CSS error a little bit farther down in the stylesheet... not sure why it is doing that or how to just fix this validation error, as the ones that come up after it are similar. My end goal is to make the page look normal in FF2. Currently in FF2 some of the text in the purple "Sesame Street" box is blocked out. I didn't create this page, but have been asked to figure out why it looks like this in FF2. I am no CSS expert, but would love to hear from one! Thanks for your help. Hello Fellas: http://global.espritwebdesign.com/muros.html This webpage will display correctly on IE, Chrome and Safari But not on Firefox 11 What strikes me the most is the error is very odd. Im Clueless. Can you visite the web page see it for yourself, and maybe give me a hint what could be? Any clues? 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! |