Click to See Complete Forum and Search --> : Problems with a CSS Layout


spaceguy46
08-16-2007, 05:40 PM
Hi,

I have a problem with a CSS layout, specifically, the tabs that are in the layout. I downloaded the tabs and modified them for my layout. While they look ok overall, I'm running into the following problems. I'd like the tabs to display as a solid color running from the left edge of the browser to the right edge. You can view what I've done here: http://www.islandnet.com/~d_king/willies/index-test.html

When I display the tabs in Firefox, they appear centered in the browser, but there's an even space to the right and left of the menubar. As I mentioned earlier, I'd like the menubar to span the layout.

The second problem is that when I display the layout in IE6, the tabs become left justified and I wind up with a blank space on the right.

I'd appreciate any advice on how I can fix these problems.

Thanks,

SG.

WebJoel
08-16-2007, 05:48 PM
What is "del"?....<body class="oneColFixCtrHdr">

<div id="container">
<div id="header">
<h1 align="center"><img src="imgs/williesbakery_logo.gif" width="242" height="86" /></h1>
<del class="container">....

spaceguy46
08-16-2007, 05:51 PM
It's part of the script that I downloaded. It also appears in the list as: <del class="container">

WebJoel
08-16-2007, 07:47 PM
I had a few minutes, decided to have a tweak at this one..

I removed alot of your browser-targeting cruft: this really isn't needed.

I got this workable now for IE6 and Fx 2.0.0.6, and removed some deprecated coding. There are a still a few 'warnings' in place, and some proprietary/deprecated stuff still.

If you're still coding to support IE5.5... to the two or three people whom are still using it: -upgrade! I'll even pay for it (it's FREE). :D<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Willie's Bakery &amp; Cafe'</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<script type="text/javascript" language="JavaScript1.2" src="menu.js"></script>
<style type="text/css">
<!--
* body, html {margin:0; padding:0;}

body {font:13px Arial Narrow; letter-spacing:1px;}

#mainContent {margin-top:25px;}
#mainContent p {font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;font-size: 12px; padding:2px 15px;}
#mainContent h2 {padding:2px 15px;}

.small {font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 9px;}

.medium {font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 14px;}
.H3 {font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;font-size: 18px;}
.H2, .H1 {font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 22px;}

.style1 {font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 9px; color: #333333; }

#menu2 {width:auto; list-style-type:none; background-color:#903; list-style-type:none;}
#menu2 ul {width:100%; display:inline; }
#menu2 ul li {list-style-type:none;float:left;}

#menu2 ul li a { padding:1px 4px; color:#fff; background-color:#903; border:1px solid #000; text-decoration:none; display:inline; }

#menu2 ul li a:hover {color:#000; background-color:#fcf; }


-->
</style>

<base href="http://www.islandnet.com/~d_king/willies/" />
</head>

<body>

<div id="container" style="width:771px; height:auto; border:1px solid gray; margin:10px auto;">

<div id="header" style="height:87px;">
<h1 style="margin:0 auto; text-align:center;"><img src="imgs/williesbakery_logo.gif" style="width:242px; height:86px;;" /></h1>
</div><!-- end HEADER -->

<div id="menu2">
<ul>
<li><a href="Home.html">Home</a></li>
<li><a href="willies-bakery-then-now.html">Then / Now</a></li>
<li><a href="willies-bakery-museum-cafe.html">Museum Cafe'</a></li>
<li><a href="willies-bakery-kiosk.html">Kiosk</a></li>
<li><a href="willies-bakery-gallery.html">Gallery</a></li>
<li><a href="willies-bakery-isabella-suites.html">Isabella Suites</a></li>
<li><a href="willies-bakery-menus.html">Menus</a></li>
<li><a href="willies-bakery-art.html">Willie's Art</a></li>
<li><a href="willies-bakery-catering.html">Catering</a></li>
<li><a href="willies-bakery-contact-us.html">Contact Us</a></li>
<li id="current"><a href="willies-bakery-resources.html">Resources</a></li>
<li><a href="willies-bakery-wholesale.html">Wholesale</a></li>
</ul>
</div>

<div id="mainContent">
<h1 style="margin:10px auto;"><img src="imgs/wil-cartoon-small.gif" ALT="Willies Bakery" width="197" height="219" hspace="10" vspace="5" BORDER=0 align="right" bordercolor="#ffffff" /></h1>
<h2>Willie's Bakery &amp; Cafe'</h2>


<p> Willies Bakery, which was founded in this building in 1887, is British Columbia's oldest bakery. It was operated by the Wille family until 1976. In 1998 the building underwent a thorough renovation. The patio and Isabella's Guest Suites were added, as was an &quot;i&quot; to the name.</p>
<p>In addition to baking the fresh baked goods sold in Willies, goods are sold wholesale to other coffee shops in Victoria and to the Royal BC Museum Cafe and the Royal Coffee Cart at the Museum entrance, both of which are operated by Willies.</p>

<p>Willie's offers hearty breakfasts and lunches with an emphasis on local organic produce. We use free run eggs, chicken and cold cured West Coast Tuna and Lox (wild Salmon - ours is from the Queen Charlottes). Some of our menu favorites include: Free Run Eggs Benedict for breakfast and Free Range Chicken or West Coast Seafood Clubhouse for lunch, all served on our own fresh bread. </p>

<p>Upstairs from the restaurant are the Isabella suites ~ Two private, richly appointed, guest rooms with full amenities. These were the original residence of the Wille family and still retain much of 1800’s character. Information and photographs can be found on the <a href="http://www.isabellasbb.com/">Isabella Suites</a> web site.</p>

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<!-- end #mainContent -->
</div>
<div id="footer">
<p align="center" class="style1">&copy; Willie's Bakery and Cafe' 2007</p>
<!-- end #footer --></div>
<!-- end #container --></div>

</body>
</html>

spaceguy46
08-16-2007, 08:24 PM
Hi,

That made quite a difference. There are still some things I have to put back in, but the code is really streamlined and a lot easier to read.

Thanks very much. I'll tweak it a bit more for some of the other things I need back in the layout, but I have a better understanding of what's going on now.

SG

spaceguy46
08-16-2007, 08:52 PM
Hi Again,

I had a closer look at your new layout and while it's made quite a difference, now some important elements are missing, namely the background image behind the logo (and the spacing I put there) and the gray footer. The footer is probably easy to solve, but I spent all my time trying to get the background to work, to no avail. If you look at my original layout http://www.islandnet.com/~d_king/willies/index-test.html you'll see those elements there. How do I get them back?

I admit to being a CSS newbie. I've been working at it pretty intensively for the last while, but man, it's been really hard. Nothing seems to make sense in an obvious way to me.

Regards,

SG