|
CSS - Container Appears Smaller Than Contents... Why?
Hi,
I've a problem with a layout, I don't understand why div container appears smaller than input field contained. PHP Code: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css" > body { margin : 10px; background-color : gray; } .container{ background-color : orange; border : 3px solid black; padding : 40px; } </style> </head> <body > <div class="container"> <input name="prova" value="Look to the right -----> -----> -----> -----> -----> " type="text" style="width:2000px;"> </div> </body> </html> ps. Verified with Firefox 2.0.0.4 and mozilla 1.7.13 Any hint? Similar TutorialsHi All, I am trying to get the container div to contain the contents of the page, so that if someone has a lower res browser / reduces the size of the page, the whole thing colapses inwards. I simplly cannot get it to work! In IE it does not shrink, in FF the container shrinks, but the elements inside it dont. Charlie Hey guys I'm creating a website as a favor for my boss and I've been trying to do the speed crunch on it and already, one day in I hit a big road block... I can't seem to get the content container and background div to resize with content inside the "content" div. And also, I can't get the footer image for the content container (bottom of the color w/ rounded edges) to float to the bottom of the container. Here is the page in question: http://srh.com/taxgirl/ There are 3 style sheets used so far (as this is a complex website and I want some parts to show on all pages and others to only show on certain pages. Here are the CSS links: http://www.srh.com/taxgirl/srh2008.css http://www.srh.com/taxgirl/css/mainsrh.css http://www.srh.com/taxgirl/css/srh_index.css Code: #contentcontainer {
position: absolute;
z-index: 3;
width: 740px;
left: 11px;
top: 505px;
right: 11px;
height: auto;
margin-bottom: 70px;
overflow: visible;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
text-align: left;
}
Code: #contentbg {
background-image: url(../images2/required/layout/contentbg.png);
background-repeat: repeat-y;
background-position: center top;
overflow: visible;
position: relative;
width: 760px;
top: 55px;
height: 900px;
left: 1px;
right: 0px;
bottom: 65px;
z-index: 2;
margin-bottom: 63;
}
#contentcontainterfooter {
height: 15px;
width: 760px;
position: relative;
left: 1px;
right: 0px;
z-index:3;
}
Here is the HTML: Code: <div class="contentbg" id="contentbg"> <div class="contentcontainer" id="contentcontainer">CONTENTS THAT NEEDS The Content bg to be relative to.</div></div> <div class="contentcontainterfooter" id="contentcontainterfooter"><img src="images2/required/layout/content_bottom.png" width="760" height="15"></div> The text I threw in the DIV is just sample text so please disregard any unlisted or unused class tags, etc. This text will be removed after the issue is solved. If anyone could help I would be forever greatful Please take a look and let me know if you have any advice. Thanks you so--o much! ~beth. ps. This is a side concern, but if anyone knows how to make a png background compatable with IE, please do tell. This isn't too big of a concern for me because if I need to I can just use a gif, but if you know, the knowledge would be welcome and thanked for To all that read: Have a fantastic day and thank you for your time. Thanks for taking the time to read my question. I have a container that has a bunch of stuff in it. In IE the container grows (I know it shouldn't) with the content. FF the content doesn't. I want to use the same container on each page in my site, but each page will have different amounts of content making the page longer or shorter. I need the container to match the contents, and I would like to do it without making duplicates of the container in the CSS and changing only the height. For an example check out warrenpersowich.com Look at the home page and the Seminars page. See how the content is differen, but the container is the same. Thanks, Brad Hi guys, I'm having a real problem with CSS on this page. The page views fine in IE, but in firefox I cannot get the green box (div id=maincontent) to extend down to the bottom of the black box... as you can see the black box simply flows out. The green box is extending down to the bottom of the white box, but it stops there. Can anyone think of any obvious ways to fix this? I tried placing a clear:both div at the bottom of main content (which is the red bar you can see) , but that too only actually clears the white box, not the black one. Here's the main bits of css... Code:
#maincontent
{
position:relative;
width:762px;
margin-top:0px;
background-image:url(contentbkg.jpg);
background-repeat:no-repeat;
padding-top:10px;
text-align:left;
}
#left
{
font-size:12px;
color:#FFFFFF;
float:left;
margin-left:5px;
margin-top:10px;
}
#right
{
color:#FFFFFF;
float:right;
margin-right:10px;
margin-top:10px;
position:absolute;
#position:relative;
}
#translucentblack {
width: 150px;
float:right;
background-color: #000000;
filter:alpha(opacity=40);
-moz-opacity:0.4;
opacity: 0.4;
font-family:Verdana, Arial, Helvetica, sans-serif;
padding:5px;
}
#opaqueblack {
width: 150px;
background-color: transparent;
float:right;
position:absolute;
margin-left:592px;
#margin-left:22px;
z-index: 2;
font-family:Verdana, Arial, Helvetica, sans-serif;
padding:5px;
}
#translucentbkg {
color:#FFFFFF;
font-size:12px;
width: 566px;
background-color:#FFFFFF ;
filter:alpha(opacity=80);
-moz-opacity:0.8;
opacity: 0.8;
padding:5px;
text-align:left;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#opaquetext
{
color:#006600;
font-size:12px;
width: 566px;
background-color: transparent;
position:absolute;
z-index: 2;
padding:5px;
text-align:left;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
basically left and right sit inside maincontent, then opaquetext and translucentbkg sit inside left, whilst opaqueblack and translucentblack sit inside right! phew The reason for opaque and translucent divs is that I'm using mozilla's tip here http://developer.mozilla.org/en/docs/Useful_CSS_tips:Color_and_Background mirroring content and positioning one div over another to get semi transparent backgrounds. Hope that all made sense... any help would be incredible!!! thanks! i have a webpage that the layout looks perfectly fine when looking on a monitor larger than 1024x768. when i look at it on that screen size everything inside of a div that is absolutly positioned gets put over it as if it is smaller than it is on the larger screen size. has anyone else come across this problem and know how to resolve it. please ask for more info if needed. many thanks in advance. i have attached an image with the problem showing RESOLVED: i redid my javascript Hi There - Have a simple container div containing two other divs, top and content. My problem is that I can't get the colorboxtop to stick to the top of its container. There's a wayward space. Can't find any stray margins or padding hanging around. Perhaps fresh eyes can see what I cannot. Please let me know. Any help you can give me would be greatly appreciated. Thanks! Code:
<body>
<div class="colorbox">
<div class="colorboxtop">
<h2>title goes here</h2>
</div><!-- /colorboxtop -->
<div class="boxcontent">
<p>You should read this and <a href="#">Click Here</a>.</p>
<a title="Go Here!" href="#">[button]</a>
</div><!-- /boxcontent -->
</div><!-- /colorbox -->
</body>
No great complexity there...here's the CSS: Code:
body {
color:#666666;
font-family:Lucida Grande,Verdana,sans;
font-size:10px;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:13px;
}
.colorbox {
margin-bottom:9px;
padding-bottom:15px;
width:300px;
border:thin solid #CCCCCC;
}
.colorbox h2 {
color:#FFCC33;
}
.colorbox {
color:#CC6633;
padding:0px 20px 15px;
margin-top:0;
margin-bottom:10px;
}
.colorboxtop {
background-color: #dddddd;
height:50px;
color:#666666;
background-image: url(images/bg_Tiles/stripe-dk-blue-green.png);
padding:auto 20px;
}
.colorbox a {
color:#C5DBE9;
font-weight:bold;
text-decoration:none;
}
I want to create a line break in my text, but the <BR> command's is too big. Is there a way in CSS to dictate how large of a break I want? However, I only want to apply it to certain parts of a the page, but not the whole thing. How can I do this? Is there a command in CSS that can determine the height of a line break instead of the default which is way too big? I can forsee having display issues on smaller screens and idk how to prepare for this. For example if i use the margin or padding property to say..center an image or align text. Keeping in mind that for example my wrapper div is coded in percent(other things too). So smaller screens=shrinkage, but the code thats not percent values will stay the same. The code is kind of a mess the most used components are at the top. Code:
body {background:#white;
}
#wrap {margin-left:20%;
margin-right:20%;
}
#header {border: 2px solid grey;
background:white;
}
#titlearea {
height:100px;
padding:4px;
font-family:Verdana;
}
#belowimg {background:#6a7c63;
margin:0px;
height:40px;
border-top:2px solid grey;
}
.link {float:left;
margin-top:8px;
margin-left:5px;
background:#6a7c63;
border-right:1px solid #681300;
height:20px;
width:100px;
text-align:center;
text-decoration:none;
font-family:Lucida Grande;
padding-right:3px;
margin-bottom:8px
}
.linklast {float:left;
margin-top:8px;
margin-left:0px;
background:#6a7c63;
height:20px;
width:100px;
text-align:center;
text-decoration:none;
font-family:Lucida Grande;
padding-right:3px;
margin-bottom:8px
}
#main {border:1px solid grey;
background:tan;
padding:10px;
padding-right:0px;
margin-top:0px;
font-size:.80em;
font-family:Verdana;
color:#000000;
height:100%;
}
#rightcontent {float:right;
border-left:1px dashed grey;
padding-left:0px;
padding-right:0px;
height:90%;
width:230px;
font-size:small;
margin-left:8px;
background:white;
}
.button {
font-size:small;
font-family:Verdana;
border-top:1px solid grey;
padding:8px;
margin:0px;
padding-bottom:0px;
background:white;
}
.button.center {
padding-left:23px;
text-align:center;
}
.button.right {float:right;
border:1px solid red;
padding:2px;
background:blue;
}
#imagescroller{width:530px;
float:left;
margin-right:10px;
margin-left:10px;
height:300px;
padding:4px;
border-top:2px solid #f1e1b8;
border-left:2px solid #f1e1b8;
border-right:2px solid #f1e1b8;
border-bottom:2px solid #f1e1b8;
background:blue;
}
#bottom {background:blue;
border-bottom:2px solid red;
border-right:2px solid #f1e1b8;
border-left:2px solid #f1e1b8;
height:30px;
padding:0px;
color:grey;
margin-top:0px;
width:600px;
height:30px;
}
.box {
padding-top:0px;
margin:1px;
font-size:.80em;
font-style:strong;
float:left;
color:grey;
background:white;
font-family:Lucida Grande;
line-height:1px;
margin-top:196px;
}
.left {float:left;
padding-right:20px;
padding-bottom:0px;
margin-bottom:0px;
}
.right {float:right;
border-left:1px solid grey;
border-bottom:1px solid grey;
background:white;
}
.inside {border-top:1px solid white;
padding-left:3px;
padding-right:3px;
background:#ffa812;
font-family:Verdana;
font-size:.70em;
height:20px;
background:#EEC900;
color: #000000;
}
.bottom {height:10px;
background:#DEECFF;
border-top:1px solid grey;
}
.imagebottom {background:white;
border-bottom:2px double #f1e1b8;
padding:3px;
color:grey;
}
#blockquote {margin-left:18%;
font-size:.60em;
padding-left:40px;
color:brown;
font-family:Verdana;
font-style:italic;
background:white;
border-left:4px dotted orange;
}
#topping {border-bottom:1px solid grey;
margin-left:1px;
margin-top:4px;
}
#bottomborder {border-bottom:1px solid grey;
margin-left:1px;
}
#footer {border:1px solid grey;
height:30px;
margin-top:5px;
}
#test {height:20px;}
.test1 {margin-top:3px;
border-top:1px solid #fcfcfc;
height:0px;
}
.test2 {height:0px;
border-top:1px solid #f5f5f5;
}
.test3 {height:0px;
border-top:1px solid #ededed;
}
.test4 {height:0px;
border-top:1px solid #e5e5e5;
}
.test5 {height:0px;
border-top:1px solid #dedede;
}
.test6 {height:0px;
border-top:1px solid #d9d9d9;
}
.test7{height:0px;
border-top:1px solid #d3d3d3;
}
.test8 {height:0px;
border-top:1px solid #cfcfcf;
}
.test9 {height:0px;
border-top:1px solid #c9c9c9;
}
.test10{height:0px;
border-top:1px solid #c2c2c2;
}
#testy{height:20px;
color:000000;
}
h2 {font-size: 1.571em} /* 22px */
h3 {font-size: 1.429em} /* 20px */
h4 {font-size: 1.286em} /* 18px */
h5 {font-size: 1.143em;} /* 16px */
h6 {font-size: 1em; font-family:Verdana;color:brown;} /* 14px */
h2, h3, h4, h5, h6 {
font-weight: 400;
line-height: 1.1;
margin-bottom: .8em;
}
/* Anchors */
a {outline: 0;}
a img {border: 0px; text-decoration: none;}
a:link, a:visited {
color: #c7a01e;
padding: 0 1px;
text-decoration: none;
}
a:hover, a:active {
/*background-color: #C74350;*/
color: #f09419;
text-decoration: underline;
text-shadow: 1px 1px 1px #333;
}
strong, b {font-weight: bold;}
060 em, i {font-style:
Thanks I am not experienced in CSS or any web design for that matter. I am trying to make a very simple web site using CSS and I am being frustrated by some positioning problems. I would appreciate your help! Problem: When I restore the browser window to a smaller size, "things" in my web page start to overlap eachother. The smaller the window, the greater the overlap. What I have done: I have validated everything, guess and checked multiple positioning elements, fiddled with margins, and have browsed through multiple CSS sites looking for help. What I would like fixed: When the browser is in a smaller window, there will be a scrollbar that appears preserving the size of the web page instead of scrunching it all together. Graphical Representation: Full-Screen Smaller Window - Overlapping I Like This - Note the Scrollbar on the bottom Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>Chapel</title> <style type="text/css"> @import "layout.css"; </style> </head> <body> <div id="chapell"> <img src="graphics\chapel1.jpg" alt="chapel"> </div> <div id="news"> <a href="news.html"> <img src="graphics\news.jpg" alt="news"> </a> </div> <div id="us"> <a href="index.html"> <img src="graphics\us.jpg" alt="us"> </a> </div> <div id="directions"> <a href="directions.html"> <img src="graphics\directions.jpg" alt="directions"> </a> </div> <div id="contact"> <a href="contact.html"> <img src="graphics\contact.jpg" alt="contact"> </a> </div> <div id="schedule"> <a href="schedule.html"> <img src="graphics\schedule.jpg" alt="schedule"> </a> </div> <div id="myspace"> <a href="http://www.myspace.com" target="_blank"> <img src="graphics\myspace.jpg" alt="myspace"> </a> </div> <div id="art"> <a href="art.html"> <img src="graphics\art.jpg" alt="artistry"> </a> </div> <div id="messages"> <a href="messages.html"> <img src="graphics\messages.jpg" alt="messages"> </a> </div> <div id="scoop"> <img src="graphics\scoop.jpg" alt="scoop"> </div> <div class="roundcont"> <div class="roundtop"> <img src="tl.gif" alt="" width="15" height="15" class="corner" style="display: none" /> </div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br><br> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <div class="roundbottom"> <img src="bl.gif" alt="" width="15" height="15" class="corner" style="display: none" /> </div> </div> </body> </html> Code:
body {
color: white;
background-color: #FDF8DF
}
#chapell img {
position: absolute;
left: 21.5%;
top: 34%;
border: none;
margin-bottom: 10%;
margin-right: 10%;
}
#news img {
position: absolute;
left: 20%;
top: 38%;
border: none;
margin-bottom: 10%;
margin-right: 10%;
}
#us img {
position: absolute;
left: 20%;
top: 42%;
border: none;
margin-bottom: 10%;
margin-right: 10%;
}
#directions img {
position: absolute;
left: 20%;
top: 46%;
border: none;
margin-bottom: 10%;
margin-right: 10%;
}
#contact img {
position: absolute;
left: 20%;
top: 50%;
border: none;
margin-bottom: 10%;
margin-right: 10%;
}
#schedule img {
position: absolute;
left: 20%;
top: 54%;
border: none;
margin-bottom: 10%;
margin-right: 10%;
}
#myspace img {
position: absolute;
left: 20%;
top: 58%;
border: none;
margin-bottom: 10%;
margin-right: 10%;
}
#art img {
position: absolute;
left: 20%;
top: 62%;
border: none;
margin-bottom: 10%;
margin-right: 10%;
}
#messages img {
position: absolute;
left: 20%;
top: 66%;
border: none;
margin-bottom: 10%;
margin-right: 10%;
}
#whoarewe img {
position: absolute;
left: 37%;
top: 25%;
}
#scoop img {
position: absolute;
left: 36%;
top: 25%;
margin-bottom: 10%;
margin-right: 10%;
}
#findus img {
position: absolute;
left: 40%;
top: 25%;
}
#banter img {
position: absolute;
left: 32.5%;
top: 25%;
}
#docket img {
position: absolute;
left: 39%;
top: 25%;
}
#expressions img {
position: absolute;
left: 37%;
top: 25%;
}
#listen img {
position: absolute;
left: 39%;
top: 25%;
}
.roundcont {
top: 35%;
right: 35%;
width: 35%;
background: white;
color: black;
position: absolute;
margin-left: 10%;
margin-top: 0%;
}
.roundcont p {
margin: 0 3%;
font: 12px arial, tahoma, serif;
}
.roundtop {
background: url(tr.gif) no-repeat top right;
}
.roundbottom {
background: url(br.gif) no-repeat top right;
}
img.corner {
width: 3%;
height: 15px;
border: none;
display: block !important;
}
Thank you, Daniel My Question is... When I put an image in a stylesheet, when does it get loaded? Does it get loaded when the style sheet gets loaded or does it get loaded only if I'm using the style on the page that has the image? The reason I ask... I have a lot of images in my style sheet, and I'm concerned about performance. Only some of the images in the style sheet are used on each page, but never all of them at once. I'm wondering if I should split up my style sheet into smaller style sheets, so that I will never be loading images for a page that I'm not going to be using on that page. (this would require the inclusion of 2 smaller style sheets on each page instead of 1 big style sheet). My style sheet is over 200 kb right now, and that does not include the image file sizes. Please advise. Hello there, first post, just need a quick fix. Hope you don't mind. So I'm trying to make myself a new portfolio site, but there's this 'error' I can't seem to fix... (Can't post a link in my first post, so just copy/paste "hellspike.thanez.org/newsite" in the addybar.) Basically that 150*300 infobar is supposed to be right next to the image, but it always ends up above or below the container. <!--AK47--> <div id="imgcont0"> <div id="imgcont1"><img src="images/ak47/1.jpg"></div> <div id="imgcont2"><img src="images/ak47/info.jpg"></div> </div> <!--/AK47--> imgcont0 is a 825*300 container, in which imcont1 (render) and 2 (infobar) are supposed to be. Stylesheet: #imgcont0 { width: 825px; height: 300px; margin-left: auto; margin-right: auto; } #imgcont1 { width: 650px; } #imgcont2 { margin-left: 675px; width: 150px; } As you see the code is simple, yet I can't seem to fix this problem. Ideas? Hi, I'm not an expert on making things work in IE, so I'm looking for someone who is. So, this is how my page looks in IE6: (No, I'm not French, I used browsershots.org.) This is how it should look: http://timvdalen.nl/atwork The relevant code for this is: html4strict Code: Original - html4strict Code <div id="rb-bar"> <div id="bar-button"></div> <div id="bar-end"></div> </div><!--rb-bar-->
css Code: Original - css Code #rb-bar{ height: 33px; background: url('./imgs/3dbalk.gif'); width: 100%; margin-top: 10px; float: left; margin-bottom: 30px; } #bar-button{ height: 33px; float: left; background: url('./imgs/button.gif'); width: 121px; } #bar-end{ height: 33px; background: url('./imgs/bar-end.gif'); width: 3px; margin-left: 920px; margin-right: 0px; }
It seems that the bar-end div is showing up below where it's supposed to be, making the whole bar repeat it's bg for another 'row'. Another important thing to mention is that it's safe to say that 99,5% to 100% of the visits will come from IE6, this is out of my control. Any replies will be greatly appreciated, Tim Any ideas that would help me out... http://www.countrystampinangel.com/ The Sub Menu is on the Products button http://www.countrystampinangel.com/angel.css I just installed Internet Explorer 8 to view my website in the newest internet explorer version. The browser leaves a huge space right after the upper menu. Could someone tell me why and how to fix it. Thank you. http://www.refinethetaste.com/html/ Well this is VERY weird. I don't even know what to do about this one. Take a look at this site in IE... FIXED Now notice the footer at the bottom. For me every couple times I refresh it the whole page goes out of whack... and then a couple refreshes later it seems ok again. I can't honestly figure out what is going on here. I have a body, a container div, and inside the container div, a head, navigation, content, and footer div. I have the background of the body filled in with a repeating background image .. and I have the footer div with clear: both, so it will show up below the content div, rather than just underneath it. The problem is the body background does not extend past the lower portion of the footer. How can I fix this? Link to Website Hello, I a horizontal navigation within <ul><li> tags. Here is the css for the navigation <ul><li> and the first button. Code: #nav li{
display:inline;
}
a#aboutrollover {
background-image:url(images/nav/about_off.gif);
background-repeat:no-repeat;
width:77px;
height:18px;
display:block;
}
a#aboutrollover span { display:none; }
a#aboutrollover:hover {
background-image:url(images/nav/about_on.gif);
background-repeat:no-repeat;
width:77px;
height:18px;
}
You'll notice that for the button, I have display set to "block." Well, if I set it as "inline" or don't put a display, the span text shows. But the block makes the <li>'s stack upon each other. Here's the navigation code :: Code: <ul id="nav" name="nav"> <li> <a onclick="updateWithAbout()" href="#" id="aboutrollover"><span>About Cats Meow</span></a> </li> <li> <a onclick="updateWithGuest()" href="#" id="guestrollover"><span>Guest Pics</span></a> </li> <li> <a onclick="updateWithStaff()" href="#" id="staffrollover"><span>Cats Staff</span></a> </li> <li> <a href="#" id="webcamsrollover"><span>Cat's webcams</span></a> </li> <li> <a onclick="updateWithParties()" href="#" id="partiesrollover"><span>Cat's Meow Parties</span></a> </li> <li> <a onclick="updateWithContact()" href="#" id="contactrollover"><span>Contact Cats Meow</span></a> </li> </ul> I also tried display: run-in; and display:compact; instead of display:block;. But the first 2 options would make my navigation dissapear. Here is the site:: http://www.catskaraoke.com/index2.php Is there a simple solution to displaying the navigation horizontally? I know I can make it work, but it's a bit of excessive code for something that should be easy. thanks I have a data table within my content div. It appears fine on my screen in several browsers, however, coworkers have a large (full screen) of white space where the table should be. They have to scroll down a full screen to get to the table. I have everything on the site set up using CSS. The table contains the dates, times and municipalities for Trick or Treat events. I have a vertical-align:top on the table. Here is the CSS: Code: table#halloween {
margin-left: 2px;
text-align:center; margin-right:auto; width:100%;
vertical-align:top;
font-size:12px;
padding: 3px;
width:100%;
border: solid #000000;
}
td.halloweencell {
border-color: #000;
border-style: solid;
}
Here is a sample of the HTML : Code:
<table width="100%" id="halloween" summary="Table of municipalities, date of trick or treat and times for trick or treat">
<tr>
<th width="50%" class="rowcoloryellow"><strong>MUNICIPALITY</strong></th>
<th width="20%" class="rowcoloryellow"><strong>DATE</strong></th>
<th width="30%" class="rowcoloryellow"><strong>HOURS</strong></th>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td class="halloweencell" width="50%">City of Hartford </td>
<td class="halloweencell" width="20%">October 30th </td>
<td class="halloweencell" width="30%">4:00 p.m. - 6:00 p.m. </td>
</tr>
<tr>
<td class="rowcolororange">City of West Bend </td>
<td class="rowcolororange">October 30th </td>
<td class="rowcolororange">4:00 p.m.- 6:00 p.m. </td>
</tr>
<tr>
<td class="halloweencell">Town of Addison </td>
<td class="halloweencell">October 30th </td>
<td class="halloweencell">3:00 p.m. - 6:00 p.m. </td>
</tr>
<tr>
<td class="rowcolororange">Town of Barton </td>
<td class="rowcolororange">October 30th </td>
<td class="rowcolororange">4:00 p.m. - 6:00 p.m. </td>
</tr>
<tr>
<td class="halloweencell">Town of Erin </td>
<td class="halloweencell">No Set Schedule </td>
<td class="halloweencell"> </td>
</tr>
</table>
It is located at: www.washingtoncountysheriffwi.org/halloween.php Any suggestions? Thanks! Helen |
|||||||