- This topic is empty.
-
AuthorPosts
-
May 25, 2009 at 9:06 pm #24955droll13Member
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:
=======Code:
SIMPLIFIED MEETING PAGE STRUCTURE
Members can enter our monthly show at the general meetings. Our guest demonstrator
for the evening judges the entries prior to his/her demonstration.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.
Members can enter our monthly show at the general meetings. Our guest demonstrator
for the evening judges the entries prior to his/her demonstration.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.
Members can enter our monthly show at the general meetings. Our guest demonstrator
for the evening judges the entries prior to his/her demonstration.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.
Members can enter our monthly show at the general meetings. Our guest demonstrator
for the evening judges the entries prior to his/her demonstration.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.
Members can enter our monthly show at the general meetings. Our guest demonstrator
for the evening judges the entries prior to his/her demonstration.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.
Members can enter our monthly show at the general meetings. Our guest demonstrator
for the evening judges the entries prior to his/her demonstration.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.
Members can enter our monthly show at the general meetings. Our guest demonstrator
for the evening judges the entries prior to his/her demonstration.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.
Members can enter our monthly show at the general meetings. Our guest demonstrator
for the evening judges the entries prior to his/her demonstration.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.
Members can enter our monthly show at the general meetings. Our guest demonstrator
for the evening judges the entries prior to his/her demonstration.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.
Members can enter our monthly show at the general meetings. Our guest demonstrator
for the evening judges the entries prior to his/her demonstration.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.
Members can enter our monthly show at the general meetings. Our guest demonstrator
for the evening judges the entries prior to his/her demonstration.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.
About our meetings
A lot of hard work goes into putting on our monthly meetings.
First, we need a demonstrator. Jane Ice does a great job at securing talented and entertaining demonstrators for each
monthly meeting.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.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.An HBAL officer accompanies our demonstrator as he/she judges the member entries for the monthly competition,
documening the decisions of the judgeThen 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.
Jackie Dvorman takes many photos at each meeting; most of these end up in the newsletter and here on the website.
CSS:
====Code:/*** 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.
May 25, 2009 at 11:00 pm #58161Chris CoyierKeymasterLooks 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.
May 26, 2009 at 12:02 am #58170droll13MemberThank 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.
May 26, 2009 at 5:13 am #58180apostropheParticipantJust remove the 5em top margin from footer_1 and footer_2.
May 26, 2009 at 1:14 pm #58200droll13MemberThanks, 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.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.