|
CSS - Menu Not Showing Correctly
I am not literate in CSS at all. I can change numbers and so forth, but to write my own css I can not do. I am confused on why this page is showing incorrectly on some versions and correctly on others. I am not asking for the solution, just a suggestion on what I should be looking for. I want to learn this so I am not spending more time correcting things than I am now! My pc shows it displayed correctly, however, my client's doesnt. Her menu on the left is displayed well below everything else on the page. I have used this template from one of the free template sites and modified to fit our needs.
I hope I can contribute in other fields of this group some way.. and appreciate any assistance with this I can get! Toni CSS BELOW: Code: /* Globals */ html,body{margin:0;padding:0} body{font: 76% arial,sans-serif;text-align:center; background-color: #ccc; background-image:url(images/plaidbg.gif)} a{ color: #981793;padding:10px;} /* Primary Divs */ div#header { height: 4em; color:#000; border-bottom: 2px solid #A9A9A9;} div#wrapper { margin-top: 5px; } div#container{text-align:left} div#content p{line-height:1.4} div#navigation{background:#FFFFAC} div#extra{background:#FFFFAC} div#footer{background: #FFFFAC;color: #000; border-top: 2px solid #A9A9A9; } div#footer p{margin:0;padding:5px 10px} div#container{width:700px;margin:0 auto; } div#bgwrap { background: #FFFFAC url(images/brushbg.gif); width: 800px; margin: 0 auto;} div#content{float:right;width:545px} div#calendar{float:inherit;width:inherit} div#navigation{float:left;width:150px} div#extra{float:left;clear:left;width:150px;} div#footer{clear:both;width:100%} /* TABLES */ table {border: 2px solid #FFFF84; border-collapse:collapse; width:90%; margin-left: 3ex; } td {padding:3px; border: 1px solid #ccc; color:#000;} th {text-align:left;border: 1px solid #fff} thead th {color:#000; font-size:1.5em; background-color: #990 ; padding: 10px 6px} tbody th {color:#000; font-size:1.15em; background-color: #FFFF84 ; padding: 6px} tbody th.sub {font-size: .90em; color:#fff; background-color: #336; padding: 6px} /* TEXT STYLES */ div#content a:link, div#content a:visited { padding:0; color:#600; text-decoration:none; border-bottom: 1px solid #FFFF84; } div#content a:hover {background-color: #990; color:#fff; } div#content h1 { font-size: 2em; color:#000; margin-top: 0; text-transform:uppercase; letter-spacing: 1px;} div#content h2 { font-size: 2em; color: #000; line-height: 1.3em; letter-spacing: -1px;} div#content h3 { font-size: 1.5em; color: #990;} div#content h4 { font-size: 1.25em; color: #966;} div#content h5 {font-size: 1em; font-weight:bold;} div#content h1,h2,h3,h4,h5 {padding:0 5px 0px;} acronym {border-bottom: 1px dotted #966; cursor:help; } form,submit { padding:0; margin:0; } /* removes extraneous padding around the form */ code { border: 1px dotted #FFFF84; background-color: #990; color:#fff; margin-left: 3ex;} blockquote { border: 1px solid #FFFF84; background-color: #990; color:#fff; margin: 3ex; font-style:italic;} /* Horizontal Navigation Menu */ #header ul { margin:0; text-align: right; padding-top: 1.6em; padding-bottom:0;} #header ul li { list-style-type:none; display:inline;} #header ul li a:link, #header ul li a:visited { display:inline; padding-top: 3em; text-decoration:none; color:gray; border-left: 2px solid gray;} #header ul li a:hover { border-bottom: 1px solid gray; background: #FFFFAC url(images/arrow2.gif) center center no-repeat;} .skiplink a:link, .skiplink a:visited { visibility: hidden;} /* Vertical Navigation Menu */ #navigation { margin-bottom: 15px; } #navigation ul { list-style-type:none; margin:0; padding:0; } #navigation ul li {line-height: 4px; border-bottom: 1px solid gray;} #navigation ul li a:link,#navigation ul li a:visited { text-decoration:none; color:#000; text-transform:uppercase; display:block; } #navigation ul li a:hover { background: #FFFFAC url(images/arrow.gif) left center no-repeat; padding-left: 25px; font-weight:bold; } #navigation p{margin:0 10px 10px} /* Logobox */ #logobox {background-image:url(images/plaidbg.gif); width: 150px; border: 1px solid #FFFFAC; text-align:center;} #logobox h1 { border-top: 1px solid #600; } #logobox h1, #logobox h2 { background-color: #A9A9A9; color: #FFFF84; margin: 5px; margin-bottom: 0; padding: 8px; font-size: 1.3em; text-transform: uppercase; border-right: 1px solid #600; border-left: 1px solid #600;} #logobox h2 { margin-top: 0; margin-bottom: 5px; font-size: 1em; border-bottom: 1px solid #600;} /* Main pic area above content */ div#mainpicbox { height: 400px; border: 1px solid #A9A9A9; margin-left: 10px; padding: 10px; margin-bottom: 15px;} div#mainpic { height: 400px; background: url(images/blockdesign.gif) top center repeat-y; color:white; } div#mainpic h2 { color:#fff; font-size: 2.75em; margin-top:0; padding-top: 2em; padding-left: 20px; margin-bottom:0; } div#mainpic h3 { padding-left: 20px; color:#330;} div#mainpic p, div#mainpic a:link, div#mainpic a:visited { display:inline; margin:0; color:#fff; margin-left: 10px;font-weight:bold; font-size: 1.2em; text-decoration:none; } div#mainpic a:hover {color:#600; background-color:inherit; } /* Extra section */ .stripnav { background-color: #A9A9A9; width: 130px; border: 1px solid #A9A9A9; text-align:center;} div#extra p {margin-left: 0; } div#extra h2 { background-color: #A9A9A9; color: #FFFF84; margin-bottom: 0; padding: 8px; font-size: 1em; text-transform: uppercase; border: 1px #000;} div#extra p a:link, div#extra p a:visited { padding:0; color: #600; font-weight:bold; padding-bottom: 1px; text-decoration:none;} div#extra p a:hover { text-decoration:underline;} /* Photo Gallery Area */ div#gallery { border-top: 2px solid #A9A9A9; padding-top: 15px;} div#gallery img {width: 50px; height: 50px; padding: 2px; border:1px solid #A9A9A9;} div#gallery ul { list-style-type:none; margin:0; padding:0;} div#gallery ul li {display:inline;} div#gallery ul li a:link, div#gallery ul li a:visited {display:inline; border-bottom:0;} div#gallery ul li a:hover {background-color:inherit;} /* Footer Area */ div#footer ul { list-style-type:none; margin:0; padding:0; padding-top: 2px; text-align:right; font-size: .8em; } div#footer ul li { list-style-type:none; display:inline; border-left: 1px solid gray;} div#footer ul li a:link,#footer ul li a:visited { display:inline; text-decoration:none; color:#000; text-transform:uppercase;} div#footer ul li a:hover {text-decoration:underline;} div#footer p {text-align:center; margin-top: 5px;} /* Content Area */ div#content img { border: 1px solid #A9A9A9; padding: 2px; margin: 3px; margin-left: none; } div#content p {padding-left: 5px;} /* Bonus Styles */ p.rightsidelink { text-align:right;} .rightsidelink a:link, .rightsidelink a:visited { padding:0; color:#600; font-weight:bold; text-decoration:none;} .rightsidelink a:hover {text-decoration:underline;} .entrytext { margin-top: 0; font-size:larger; font-weight:bold;} .bright { font-size: 1.5em; color:#600; text-transform:uppercase;}
Then page text/layout he Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<div id="bgwrap">
<div id="container">
<div id="header">
<ul>
<li class="skiplink"><a href="#content">Skip to Content</a></li>
<li class="skiplink"><a href="#navigation">Skip to Navigation</a></li>
<li><a href="/shop">Shopping</a></li>
<li><a href="http://members.ebay.com/ws/eBayISAPI.dll?ViewUserPage&userid=" target="_blank">Ebay</a></li>
<li><a href="contact_us.shtml">Contact Us </a></li>
<li><a href="index.shtml">Main Page </a></li>
</ul>
</div>
<div id="wrapper">
<div id="content">
<div id="mainpicbox">
<div id="mainpic">
<h2> </h2>
</div>
</div>
<h1 align="center"> Welcome to </h1>
<h1 align="center"> </h1>
<p align="center">A painting studio featuring artwork for sale </p>
<p align="center">and<br />
<br />
offering instruction for those who would like to create their own </p>
<p align="center">landscape or floral paintings in oils.</p>
<p align="center"> </p>
<p align="center">If you would like to be notified of new classes or items for sale, </p>
<p align="center">please be sure to join our mailing list.</p>
<p align="center">No purchase is necessary to register.<br />
</p>
<p class="rightsidelink"> </p>
<div id="gallery">
<p class="entrytext"> </p>
</div>
</div>
</div>
<div id="logobox">
<h1> </h1>
<h2>Explore your creativity</h2>
</div>
<p><!--#include file="menu.html" -->
</p>
</div>
<div id="footer">
<ul>
<li><a href="index.shtml">Main Page</a></li>
<li><a href="about.shtml">About Us</a></li>
<li><a href="/shop">Shopping</a></li>
<li><a href="/shop/index.php?main_page=index&cPath=7">Classes</a></li>
<li><a href="contact_us.shtml">Contacts</a></li>
</ul>
<p>Copyright 2007 - | Site designed and hosted by<a href="http://www..com" target="_blank"></a> </p>
</div>
</div>
</div>
</body>
</html>
Then Menu.html file he Code: <link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
</style>
<div id="navigation">
<ul>
<li><a href="index.shtml">Home</a></li>
<li><a href="about.shtml">About Us</a></li>
<li><a href="contact_us.shtml">Contact us </a></li>
<li><a href="calendar.shtml">Calendar</a></li>
<li><a href="classes.shtml">Classes</a></li>
<li><a href="events.shtml">Other Events </a></li>
</ul>
</div>
<div id="extra">
<h2 class="stripnav">Shopping</h2>
<p>Here we will show a single item from each category in your shopping area that will be linked to it.. </p>
<p><a href="#">Pattern Packets </a><br />
Photo goes here </p>
<p><a href="#">Glass</a><br />
Photo goes here </p>
<p><a href="#">Paintings</a><br />
Photo goes here</p>
<p><a href="#">Wood</a><br />
Photo goes here </p>
<p><a href="#">Other</a><br />
Photo goes here </p>
<p><a href="#">Supplies</a><br />
Photo goes here </p>
</div>
Similar Tutorialsdevwebsites.com/sitedevs/ Anyway, FF3 and Safari show up fine. I used conditional comments to get rid of what Opera is showing, and to make it look like FF3. However since Opera is displaying this behavior I guess I need to figure out what the actual problem is. Any input on it? The following code works in most browsers but not so well in IE, there seems to be an extra block of css shading in the last box in the row. this is what we really want removed. has anyone got any ideas how the issue IE can be fixed. thanks in advance for your help. Code:
<style type="text/css">
<!--
.menucontainer { background:#799BD9; margin:0 5px;}
.menurtop1, .menurbottom1{ display:block; background:#125892; }
.menurtop1 *, .menurbottom1 *{ display: block; height: 1px; overflow: hidden; background:#799BD9; }
.r1{ margin: 0 5px}
.r2{ margin: 0 3px}
.r3{ margin: 0 2px}
.r4{ margin: 0 1px; height: 2px }
a.one:link { color: #000; }
a.one:visited { color: #000; }
a.one:hover { color: #fff; }
a.one:active { color: #000; }
a.one { text-decoration: none; }
h1 { text-align: left; font: small tahoma; font-size: 12px; font-weight: bold; margin: 0 0; padding: 5; }
h2 { text-align: left; font: small tahoma; font-size: 12px; font-weight: bold; margin: 0 5; padding: 5; }
-->
</style>
<style>
<!--
A {color:#000000; font-weight: normal;}
A:hover {color: #0066FF; font-weight: normal;}
-->
</style>
<body bgcolor="#003399">
<table width="100%" style="border-collapse:collapse;">
<tr>
<td width="0%" height="21">
<div class="menucontainer" align="center">
<b class="menurtop1"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<table width="100%" style="border-collapse:collapse;" dwcopytype="CopyTableColumn">
<tr>
<td NOWRAP> <div align="center"><a href="http://<?=$siteurl;?>/?ac=a" STYLE="text-decoration: none"><font color="#FFFFFF" face="Tahoma"> l1</font></a> </div></td>
<td NOWRAP> <div align="center"><a href="http://<?=$siteurl;?>/members/index.php?ac=s" STYLE="text-decoration: none"><font color="#FFFFFF" face="Tahoma"> l2</font></a> </div></td>
<td NOWRAP> <div align="center"><a href="http://<?=$siteurl;?>/members/index.php" STYLE="text-decoration: none"><font color="#FFFFFF" face="Tahoma"> l3</font></a> </div></td>
<td NOWRAP> <div align="center"><a href="http://<?=$siteurl;?>/?ac=f" STYLE="text-decoration: none"><font color="#FFFFFF" face="Tahoma"> l4</font></a> </div></td>
<td NOWRAP> <div align="center"><a href="http://<?=$siteurl;?>/?ac=c" STYLE="text-decoration: none"><font color="#FFFFFF" face="Tahoma"> l5</font></a> </div></td>
<td NOWRAP> <div align="center"><a class="bm" title="link me" href="http://<?=$siteurl;?>/?ac=b" STYLE="text-decoration: none"><font color="#FFFFFF" face="Tahoma"> l6</font></a> </div></td>
<td NOWRAP> <div align="center"><a href="http://<?=$siteurl;?>/?ac=s" STYLE="text-decoration: none"><font color="#FFFFFF" face="Tahoma"> l7</font></a> </div></td>
</tr>
</table>
<b class="menurbottom1"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b></div>
</td>
<td width="5%" NOWRAP><div align="center"><font color="#FFFFFF" size="2" face="Tahoma">123456</font></div></td>
</tr>
</table>
Index.php code: Code: <div id="Wrapper">
<div id="Content">
<div id="Header">
<div id="Logo"></div>
<div id="Title"></div>
<div id="Navigation">
<ul>
<li><a href="(url blocked)">Home</a></li>
<li><a href="specials.html">Specials</a></li>
<li><a href="">Inventory</a>
<ul>
<li><a href="inventory-weapons.html">Weapons</a></li>
<li><a href="inventory-accessories.html">Accessories</a></li>
<li><a href="inventory-ammunition.html">Ammunition</a></li>
</ul>
</li>
<li><a href="manufacturers-links.html">Manufacturers</a></li>
<li><a href="about-us.html">About Us</a></li>
<li><a href="contact-us.html">Contact</a></li>
</ul>
</div>
</div>
And my css file: Code: #Title {
width: 425px;
height: 75px;
background: url(../images/Title.png) no-repeat;
padding: 0px;
margin: 0px;
position: absolute;
top: 3%;
left: 35%;
}
Code: #Welcome_Letter {
margin-right: 18%;
margin-left: 3%;
position: absolute;
top: 190px;
}
Code: #Navigation {
position: absolute;
top: 15%;
left: 30%;
width: 580px;
}
The problem is the absolute positioning of the Title and Menu, and the margins of the first paragraph. On 4 out of the 5 computers I've tested it on, its shown properly (In Firefox, yes I know I need to fix the paragraph for IE.) But on the one computer, even in Firefox, the Title, Menu, and margins of the first paragraph are way off, and I can't figure out why. I've tried doing it in px, em, and currently its in percent, which has been the closest so far. But why is it not showing up perfect? This is what its supposed to look like: i27.tinypic.com/9ihfza.jpg This is what it shows up as on the 1 computer: i28.tinypic.com/swwu49.jpg Help please! Thank you Edit: Fixed url's hi guys, i've modified a script that i found on the web that creates a CSS dropdown menu (without using any javascript whatsoever). The menu's work flawlessly in Google Chrome, Firefox and IE 7/8. However, IE 6 like usual is giving me a problem. However, it is only a minor problem but i cant seem to fix it. Please find attached a copy of my HTML and CSS code. Please note:- The css code in the test.txt file is used for styling in all browsers. The css code found in the test_dropdown_ie.txt file is for IE 6 only. If you create these files and open test.html in IE 6 then it will appear fine at first. But if you hover over one of the menu's in the middle, then you will notice that the left hand border of the resultant dropdown menu does not display. However, it does display when you hover over one of the options on the resultant dropdown menu. I need the left hand side border to appear at all times. I did manage to get it working by changing the following CSS rule:- Code:
.menu ul li a:hover ul
{
left: -1px;
}
I changed this to:- Code:
.menu ul li a:hover ul
{
left: 0;
}
This solved the disppearing left hand side border issue but it threw up an even worse issue. If you make this fix and hover over the first or last menu item, you will notice the border of the dropdown menu does not line up with the top menu. I do not like this and find it less acceptable than the initial problem. What i need to do is find a way of lining up the top menu's border with the resultant dropdown menu's border and stop the disappearing left hand side border issue. Any help would be greatly appreciated. Thanks. 1. top and bottom images are collapsing, i cant get them to display correctly without filling the html with either breaks or text 2. I cant get the images submenuedivider and submenuemarker to display simultaneously when i hover the links in the list. 3. Right now my soltuion to not display the divider image below the last element in the list is through the code: <li><a style="background-image: none;" href="x.html">SOmething</a></li> </ul> However, this also causes the mrker to not be seen above the list element as well, which isn't exactly what I wanted to happen, so what do I do? I'm stuck The CSS: Code: .leftCol
{
width: 190px;
margin-top: 10px;
margin-bottom: 10px;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 10px;
float: left;
}
.leftCol body {font-size:100%; color: #FFF;}
.leftCol h1 {font-size:1.1em; font-weight:bold; color: #FFF;}
.leftCol h2 {font-size:1.0em; color: #FFF;}
.leftCol h3 {font-size:1.0em; color: #FFF;}
.leftCol p {font-size:0.875em color: #FFF;}
.submenue
{
width: 188px;
margin-top: 0px;
margin-bottom: 0px;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
float: left;
background-image: url(images/submenue/submenuefiller.jpg);
background-repeat: repeat-y;
text-indent:25px;
}
.submenue ul {list-style-type: none; margin: auto;}
.submenue ul a {padding-bottom: 10px; background: url(images/Submenue/submenuedivider.png); background-repeat: no-repeat; background-position: bottom; display: block; line-height: 25px; text-decoration: none; font-family: "Lucida Grande", "Lucida Sans", Arial, sans-serif; color: #FFF;}
.submenue ul a:hover {background-image: url(images/Submenue/submenuemarker.jpg);}
.submenuetop
{
width: 188px;
hight: 54px;
padding-top: 0px;
padding-bottom: 0px;
background-image: url(images/Submenue/top.jpg);
background-size: 100%;
background-repeat: no-repeat;
margin: 0;
float: left;
}
.submenuebottom
{
width: 188px;
hight: 60px;
background-image: url(images/Submenue/bottom.jpg);
background-position: left top;
background-repeat: no-repeat;
margin-top: 54;
float: left;
}
The HTML: Code: <div class="leftCol"> <div class="submenuetop"></br><h1>something</h1></div> <div class="submenue"> <ul> <h3>Listing</h3> <li><a href="1.html">1</a></li> <li><a href="2.html">2</a></li> <li><a style="background-image: none;" href="3.html">5</a></li> </br> <h3>Produkt</h3> <li><a href="1.html">1</a></li> <li><a href="2.html">2</a></li> <li><a style="background-image: none;" href="3">something</a></li> </ul> </div> <div class="submenuebottom"></br></br></br></br></div> </div> I have a menu that is built using css/html that shows up fine in firefox but doesnt in IE. The rollover buttons work but the submenu that should appear when the rollover is active, doesnt. [submenu is only for 'products' and 'about us'] the site is he http://soem.batcave.net the css for the navmenu is he http://soem.batcave.net/navstyle.css Any help on why this is happening [or not as is the case] would be greatly appreciated. Thanks Hi all, I have this headache problem ... check it out here on my site You see that menu ? it should be all over the #bar, but it just minimizes it to that small size. It should be all over the #bar Thanks !!! Any ideas why the text isn't showing up in the main site menu (top left hand side of screen): http://www.thepartyparty.ca Take a look in Firefox and then IE. Firefox works wonderfully (surprise), IE shows no text. Any suggestions? Ryan I am having the same problem as a few other posters regarding Spry menu bars. I was wondering if someone here could help us. The link is The problem link Thanks Hi, I had this working but somehow it's not working again. The problem I am having is that scroll bars are showing up in my iframe in Firefox, Opera, and Safari, but not IE7 and IE6. Here is the link: http://www.caillouette.com/NewCatsMeow/ I know I need to tighten up my style sheet, but if someone could tell me how to solve this, I would be very happy. Here's the iframe code in the index page: Code: <div id="bodyInfo"> <iframe name="mainBody" width="770" height="602" src ="body.html" scrollbars="NO" border="0"> </iframe> <!-- end #bodyInfo --></div> hello all, my site is at waxmuseumplus dot ie css file is on the top level called layout.css I've put my site up and it works fine except that sometimes when you go to another page and comeback to the homepage the swf files don't position correctly. The real bizarre thing is that if you reload the page (maybe not on the first try but maybe the second try) it appears fine again. there are 6 swf files at the bottom right corner of the blue boxes across the page. They create the page curl animation at the bottom right. 9 out of 10 times they all load in position correctly but sometimes they don't. They appear further down the page. I think the fix is in the "a" link which i've wrapped around the div pagecurl and div textabove. I had this original set to 100% height. But i have now given it a 150px height. This doesn't fix anything though? The problem is that it is intermittent. Of course it looks fine my FF3 and when i test on others but when the client checks she sees errors. Please help I'm tearing my hair out and the site is already live! Surprise, surprise. I'm using a very simple example of a tabbed interface. Each tab is its own div with a border and a bgcolor. As you will see, IE is displaying the tabs such that they hang 1px over their background container while FF displays as expected. I'm thinking it has something to do with the float but can't seem to figure it out. Any ideas? Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.hdr {
background-color: #ccc;
}
.tab {
padding: 0px 5px;
background-color: #666;
border: 1px solid #000;
border-bottom: none;
color: #fff;
float: left;
}
.tab.active {
background-color: #fff;
color: #000;
margin: 0px 3px 0px 3px;
}
</style>
</head>
<body>
<div class="hdr">
<div class="tab active">tab 1</div>
<div class="tab">tab 2</div>
<br style="clear: both" />
</div>
</body>
</html>
Hello Gang! First off, thank you for taking your time to help a noob. Here is my problem: With what I think is the same coding, the page is displaying two different ways. (see image). The left-hand column is made by using <?php include("news.htm"); ?> so I know for sure there are no differences between the pages (at least is that section). Can anyone spot why the pages render 2 different ways? LINK 1 LINK 2 Thank you for your time. Can anyone tell me why the navigation does not align with the logo on the left? I would like the bottom of each element to be along the same line. I can't figure out what is pushing it up. Thanks I can hardly believe my eyes. Maybe I'm doing something wrong... I have a div with 5px borders and 5px padding on each side. My php does a browser detect, and pulls the appropriate css file. In the IE stylesheet, I have the div's width set to 820px (800px + 5px + 5px +5px + 5px = 820px) as described as part of the Tan Box Hack (which wasn't working right for some reason). In the Mozilla stylesheet, I have the width set to 800px, because, well, that's how wide it's supposed to be. Now, when I open IE6 and Firefox, and send them both to the page, IE renders the box somewhat larger than the box in FF. What's even stranger is, when I set the width in the IE stylesheet to 800px, it renders correctly, matching the width rendered by FF. Any thoughts on this? I can post my code if you really wanna see it, but I figured you'd all understand what I'm trying to describe... Howdy. I have a div layer acting as the container for the contents of a page. Its contents basically include one div with a long paragraph of text, and one div with a small picture and some miscellaneous information underneath it -- this div is floated to the left. I am running into a problem though. Provided the paragraph div is longer than the floated div, the container resizes to fit all of the information. However, if the paragraph div is too short and the floated div extends longer on the page, the container does not resize. Any thoughts? Thanks! Maybe I'm just missing something here, but I can't get the right column of the search box to align at the top. At first I thought it had something to do with the specified widths, but that did not work. I'm sure this is a quick fix, I can't seem to figure it out though. Thanks. The site Code:
<div id="searchbox">
<h2 id="searchbox_header">Browse Bus Rates and Amenities</h2>
<p style="padding-left: 5px; ">Search by Bus Type:<br />
<select name="bustype">
<option selected value="">All Bus Types</option>
<option value="1" >Deluxe Motor Coach</option>
<option value="7" >Double Decker</option>
<option value="4" >Entertainer</option>
<option value="5" >Executive</option>
<option value="9" >Limo Bus</option>
<option value="2" >Minibus</option>
<option value="3" >School Bus</option>
<option value="0" >Tour Operator</option>
<option value="6" >Trolley</option>
<option value="8" >Van</option>
</select></p>
<p style="padding-left: 5px; ">Departure State / Province:<br />
<select name="state" onChange="buildCity('','');"><option selected value=""> - No state selected - </option>
</select></p>
<p style="padding-left: 5px; ">Departure City / Metro Area:<br />
<select name="city">
<option value="">Entire State</option>
</select></p>
<div id="searchboxrightcol">
<p>Or search by Zipcode:<br /><input type="text" name="zip" size="15"></p>
<p>Browse local rates & inventory. Locate specific bus types</p>
<p><a href="#">Search</a></p>
</div>
<div id="searchbox_footer">
<p>BusRates.com does its best to screen out brokers but cannot guarantee this.</p>
</div>
</div>
CSS: #searchbox { width: 400px; margin: 0; padding: 0; border: 1px solid #003366; background: #CCCCFF; } #searchboxrightcol { padding: 0; margin: 0; margin-left: 170px; padding-left: 5px; } #searchboxleftcol { width: 160px; float: left; padding: 0; vertical-align: top; border-right: 1px solid black; } #searchbox p { padding-left: 5px; padding-right: 5px; width: auto; height: auto; } #searchbox_header { text-align: center; color: white; background: #003366; padding: 0px; margin: 0px; width: auto; } #searchbox_footer { width: 400px; text-align: center; color: black; padding: 0px; margin: 0px; } #searchbox a, #searchbox a:visited { background: #336699; text-align: center; padding: 5px 50px 5px 50px; border: 2px solid #003366; color: white; font-weight: bold; text-decoration: none; } #searchbox a:hover { background: #FC7400; text-align: center; padding: 5px 50px 5px 50px; border: 2px solid #003366; text-decoration: none; font-weight: bold; } http://206.169.23.2/index3.htm http://206.169.23.2/style3.css The borders are not aligning correctly. |
|||||||