Forums

droll13

I'm updating my Art League's website, and trying to add some minor style improvements. I've uploaded this simplified, broken version here:

http://hbartleague.com/hidden/faux/SIMP ... G_PAGE.htm

Inconsistent results displaying faux Columns in different browsers.

Strangely enough, it's IE that displays as intended (even though Firefox is my deevelopment browser).

In the following, I've replaced the many images and other elements with paragraphs of text. Both the XHTML and CSS validate.

The background graphic is on the #container_wrap div; the right-hand sidebar column should have a full-height left border and a gradient effect.

IE6 and IE7 display the faux column correctly. (Although IE7 adds a huge amount of space above the footer, but that's another issue.)

Firefox (3.04 and 3.08) show the vertically-repeated graphic, but only part of the way down the column. Safari 3.22 and Opera 9.64 don't display it at all. IE6 and IE7 do display it properly.

I'm stumped!

Markup:
=======

<!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>SIMPLIFIED MEETING PAGE STRUCTURE</title>

<link type=\"text/css\" rel=\"stylesheet\" href=\"./styles/basic_SIMPLIFIED.css\" />

<!--[if IE 7]>
<link href=\"./styles/ie7_only.css\" rel=\"stylesheet\" type=\"text/css\" />
<![endif]-->

</head>
<body id=\"pg_meetings\">

<div id=\"header\">
<a href=\"index.htm\"><img src=\"./images/hbal_logo_MD.gif\" alt=\"HBAL home logo link\" />
</a>

<h1 id=\"hbal_title_offset\">Huntington Beach Art League</h1>

<h1 id=\"hbal_title\">Huntington Beach Art League</h1>

<h6 id=\"tagline\">serving local artists since 1962</h6>
</div> <!-- close header -->

<div class=\"top_nav_text\">

<ul class=\"nav\">
  <li><a href=\"./index.htm\">Home</a></li>

  <li><a href=\"./demonstrator.htm\">Demonstrator</a></li>
  <li><a href=\"./artists.htm\">Artists</a></li>
  <li><a href=\"./shows.htm\">Shows</a></li>
  <li><a href=\"./gallery.htm\">Galleries</a></li> 
  <li><a href=\"./members.htm\">Membership</a></li>
  <li><a href=\"./meetings.htm\" class=\"link_on\">Meetings</a></li>
  <li><a href=\"./history.htm\">History </a></li>
</ul>

</div> <!-- close top_nav_text -->

<div id=\"content_wrap\">
<div id=\"content\">

<p>Members can enter our monthly show at the general meetings. Our guest demonstrator 
for the evening judges the entries prior to his/her demonstration.</p>
<p>Single Ribbons are awarded for Best of Show, Master - Oil/Acrylic, Master - Watercolor, plus First, Second, Third Place, 

and Honorable Mention in each of 7 categories.</p>
<p>Members can enter our monthly show at the general meetings. Our guest demonstrator 
for the evening judges the entries prior to his/her demonstration.</p>
<p>Single Ribbons are awarded for Best of Show, Master - Oil/Acrylic, Master - Watercolor, plus First, Second, Third Place, 

and Honorable Mention in each of 7 categories.</p>
<p>Members can enter our monthly show at the general meetings. Our guest demonstrator 
for the evening judges the entries prior to his/her demonstration.</p>
<p>Single Ribbons are awarded for Best of Show, Master - Oil/Acrylic, Master - Watercolor, plus First, Second, Third Place, 

and Honorable Mention in each of 7 categories.</p>
<p>Members can enter our monthly show at the general meetings. Our guest demonstrator 
for the evening judges the entries prior to his/her demonstration.</p>
<p>Single Ribbons are awarded for Best of Show, Master - Oil/Acrylic, Master - Watercolor, plus First, Second, Third Place, 

and Honorable Mention in each of 7 categories.</p>
<p>Members can enter our monthly show at the general meetings. Our guest demonstrator 
for the evening judges the entries prior to his/her demonstration.</p>
<p>Single Ribbons are awarded for Best of Show, Master - Oil/Acrylic, Master - Watercolor, plus First, Second, Third Place, 

and Honorable Mention in each of 7 categories.</p>
<p>Members can enter our monthly show at the general meetings. Our guest demonstrator 
for the evening judges the entries prior to his/her demonstration.</p>
<p>Single Ribbons are awarded for Best of Show, Master - Oil/Acrylic, Master - Watercolor, plus First, Second, Third Place, 

and Honorable Mention in each of 7 categories.</p>
<p>Members can enter our monthly show at the general meetings. Our guest demonstrator 
for the evening judges the entries prior to his/her demonstration.</p>
<p>Single Ribbons are awarded for Best of Show, Master - Oil/Acrylic, Master - Watercolor, plus First, Second, Third Place, 

and Honorable Mention in each of 7 categories.</p>
<p>Members can enter our monthly show at the general meetings. Our guest demonstrator 
for the evening judges the entries prior to his/her demonstration.</p>
<p>Single Ribbons are awarded for Best of Show, Master - Oil/Acrylic, Master - Watercolor, plus First, Second, Third Place, 

and Honorable Mention in each of 7 categories.</p>
<p>Members can enter our monthly show at the general meetings. Our guest demonstrator 
for the evening judges the entries prior to his/her demonstration.</p>
<p>Single Ribbons are awarded for Best of Show, Master - Oil/Acrylic, Master - Watercolor, plus First, Second, Third Place, 

and Honorable Mention in each of 7 categories.</p>
<p>Members can enter our monthly show at the general meetings. Our guest demonstrator 
for the evening judges the entries prior to his/her demonstration.</p>
<p>Single Ribbons are awarded for Best of Show, Master - Oil/Acrylic, Master - Watercolor, plus First, Second, Third Place, 

and Honorable Mention in each of 7 categories.</p>
<p>Members can enter our monthly show at the general meetings. Our guest demonstrator 
for the evening judges the entries prior to his/her demonstration.</p>
<p>Single Ribbons are awarded for Best of Show, Master - Oil/Acrylic, Master - Watercolor, plus First, Second, Third Place, 

and Honorable Mention in each of 7 categories.</p>

</div>  <!-- close \"content\" -->

<div id=\"sidebar\">
  <h3>About our meetings</h3>
   <p>A lot of hard work goes into putting on our monthly meetings.</p>
   <p>First, we need a demonstrator. Jane Ice does a great job at securing talented and entertaining demonstrators for each 
monthly meeting.</p>
   <p>We need a number of folks to main the check-in table: accepting, documenting and tagging your entries tagging your 
entries, and distributing raffle tickets.</p>
  <p>Of course, it takes a bit of planning and effort to have the refreshments at each meeting. Rose Glasgow has been doing 
this exceptionally well for years.</p>
   <p>An HBAL officer accompanies our demonstrator as he/she judges the member entries for the monthly competition, 
documening the decisions of the judge</p>
   <p>Then the Dempseys take the documentation, and while the rest of us are enjoying the demonstration, theygo around and put rubbons on the artwork selectd by the demonstrator.</p>
   <p>Jackie Dvorman takes many photos at each meeting; most of these end up in the newsletter and here on the website.</p>   
</div> <!-- close \"sidebar -->

</div> <!-- close content_wrap -->

<div id=\"footer\">
<div id=\"footer_1\">

<ul>
<li>&copy; 2009, Huntington Beach Art League; All Rights Reserved</li>
</ul>
</div> <!-- close footer_1 -->

<div id=\"footer_2\">
<ul>
<li>
contact the webmaster: <a href=\"mailto:webmaster@hbartleague.com?Subject=from the HBAL website\">webmaster@hbartleague.com</a>
</li>
</ul>
</div>  <!-- close \"footer_2\" -->

</div> <!-- close footer -->

<!-- START Google Analytics code -->
<!--   added 03/27/09     -->

<script type=\"text/javascript\">
var gaJsHost = ((\"https:\" == document.location.protocol) ? \"https://ssl.\" : \"http://www.\");
document.write(unescape(\"%3Cscript src='\" + gaJsHost + \"google-analytics.com/ga.js' 

type='text/javascript'%3E%3C/script%3E\"));
</script>
<script type=\"text/javascript\">
try {
var pageTracker = _gat._getTracker(\"UA-8108377-1\");
pageTracker._trackPageview();
} catch(err) {}</script>

<!-- END Google Analytics code -->

</body>
</html>

CSS:
====

/*** BEGIN STYLE SHEET ***/

/* zeroing out some browser defaults */
body {
   margin: 0;
	 padding: 0;
		}
p, h1, h2, h3, h4, ul, li {
   margin: 0;
   padding: 0;
   }
	 
img {
   border: none;
   }

body {
   font-family: Verdana, sans-serif;
   font-size: small;
   background: #fff;
   }
	 
h1#hbal_title {
   font-family: 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
   font-size: 360%;
   color: #0B397F;
   margin: -60px 0 0 100px;
   }

h1#hbal_title_offset {
   font-family: 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
   font-size: 360%;
   color: #0B397F;
   color: #9CE0F7;
   margin: -60px 0 0 102px; 
   border-bottom: 1px solid #0B397F; 
   }
	 
#tagline {
   margin: 6px 0 -20px 100px;
   color: #0B397F;
   font-size: 1.0em;
   text-transform: uppercase;
   letter-spacing: 0.2em;
   }

h2 {
   margin: .5em 0 .2em 0;
   font-family: Georgia, serif;
   color: #0F68BA;
   color: #000080;
   }
	 
h3 {
   margin: .5em 0 0 0;
   font-family: Georgia, serif;
   color: #19419d;
   }

p {
   margin: 0 0 1em 0;
   }

dl {
   text-align: left;
   }
	 
#header {
   width: 980px;
   margin: 20px 0 -20px 20px;
   }
	 
#header p {
   position: relative;
   margin: -1em 0 -1em 6.6em;
   color: #0B397F;
   font-family: Georgia, serif;
   font-size: 130%;
   }
	 
#content_wrap {
   width: 1000px; 
   background: #fff url(../images_pres/wrap_faux_bg.gif) repeat-y;
   }
	 
#content {
   float: left;
   margin: 10px;
   padding: 20px 10px 0 10px;
   width: 740px;
   font-size: 95%;
   line-height: 1.5em;
   color: #333;
   display: inline; /* fixes IE/Win double-margin bug */
   }

#sidebar {
   width: 210px;
   float: left;
   margin: 20px 10px 0 0;
   padding-top: 20px;
   display: inline; /* fixes IE/Win double-margin bug */
   }

#sidebar h3 {
   text-align: left;
   margin: 0;
   color: #00f;
   font-size: 100%;
   padding: 0 0 0 1em;
   }
	 
#sidebar p {
   padding: 0 1em 0 1em;
   font-size: .9em;
   }
	
#footer {
   position: relative;
   width: 100%;
   height: 100px;	 
   clear: both;
   }

#footer_1 {
   float: left;
   position: relative;
   clear: both;
   width: 49%;
   background: #fff url(../images/footer-1_BG.jpg) repeat-y left top;
   font-size: 70%;
   font-weight: bolder;
   line-height: 1.2em;
   padding: .5em;
   color: #036;
   margin-top: 5em;
   border-top: 1px solid #acb8d0;
   }
	 
#footer_1 a {
   color: #0000C0;
   }
	 
#footer_2 {
   float: right;
   float: left;
   position: relative;
   width: 49%;
   background: #fff url(../images/footer-2_BG.jpg) repeat-y right top;	 
   text-align: right;
   font-size: 70%;
   font-weight: bolder;
   line-height: 1.2em;
   padding: .5em;
   color: #036;
   margin-top: 5em;
   border-top: 1px solid #acb8d0;
   }
	 
#footer_2 a {
   color: #0000C0;
   }
	 
#footer_2 a:hover {
   background-color: #222;
   color: #FFF;
   }
	 
#footer_1 ul, #footer_2 ul {
   display: block;
   list-style: none;
   font-weight: normal;
   margin: -2px 0 0 0;
   }
		
.top_nav_text {
   position: relative;
   width: 1000px;
   float: left;
   margin-top: 3em;
   margin-left: 0em;
   list-style: none;
   background: #0F68BA;
   display: inline; /* fixes IE/Win double-margin bug */
   }
	 
.top_nav_text li {
   float: left;
   margin: 0;
   padding: 0;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 75%;
   font-weight: bold;
   list-style: none;
   border-right: 1px solid white;
   display: inline; /* fixes IE/Win double-margin bug */	 
   }
	 
.top_nav_text a {
   float: left;
   display: block;
   margin: 0 1px 0 0;
   padding: 4px 8px;
   text-decoration: none;
   border-bottom: none;
   color: #9CE0F7;
   color: #80FFFF;
   display: inline; /* fixes IE/Win double-margin bug */
   }
		
.nav a:hover {
   background: #ccc;
   color: #285598;
   font-size: 100%;
   }
	 
a.link_on {
   color: #289FE3;
   color: #152D49;
   text-decoration: none;
   font-size: 100%;  
   }
		
.rogers_map {
   position: relative;
   clear: both;
   margin-left: 0px;
   margin-top: 30px;
   }
	 
.galrow {
   width: 680px; 
/*   clear: both; */
   float: left;
   margin-top: 20px;
   }

I'm not used to seeing Firefox have problems while IE works as intended. Go figure...

Anyway, thanks in advance.

chriscoyier

Looks like a classic float clearing problem. Your content_wrap has two floated elements in it, so it's collapsing to a zero height. Try setting overflow: hidden; on it and it should expand and show the gradient background you have on it.

droll13

Thank you Chris,

That did indeed let the background-image appear.

However, it also introduced a gap between the bottom of the #content_wrap and the footer, noticeable because the graphic stops just above of the footer. I can get around this by applying a negative margin to the #content_wrap, but that will break if the user changes font-size.

Still, it's much improved, and I can live with it.

Thanks again for the quick & effective response.

apostrophe

Just remove the 5em top margin from footer_1 and footer_2.

droll13

Thanks, apostrophe.

To update the status a little:

Since adding overflow: hidden; to the #content_wrap on my simplified test page worked, I eagerly replaced the text content with my real content, which consists of rows of image/text units. (I'm using a class of galrow, which is floated left; inside each .galrow are two image/text units (.column 1 floated left and .column2 floated right) using definition lists.)

Well, I still have some work to do, because most of the page (everything below the first .galrow) doesn't display at all. No scrollbars to get to this content which should be further down the page.

After some thought, I figured it might be the same as my original problem - floated elements inside floated elements - so I tried the overflow: hidden; declaration on the .galrow divs.

This didn't change anything - talk about "one step forward, two steps back." So I'll look for another solution. If/when I solve this, I'll update this thread.

treehouse : what would you like to learn today?

Forums

faux column display problems (IE works, others don't)