5 replies [Last post]
York
York's picture
Offline
Regular
Los Angeles
Last seen: 14 years 6 weeks ago
Los Angeles
Timezone: GMT-8
Joined: 2007-01-29
Posts: 44
Points: 0

Visit my site using Firefox 2 (FF2) to see the layout I would like to achieve, then look at it in IE6 to see the error.

The post title ("WELCOME TO YORKRULES3 BETA") and date line ("March 10, 2007 | Leave a Comment") should stack on top of one another, but to the right (not below) of the category icon (the small white "YR" image).

This is the relevant CSS that I started with:

#contentmiddle .contenttitle img {
border: none;
margin: 0px 10px 0px 0px;
width: 32px;
height: 32px;
float: left;
}

That was enough to get the page to display properly in FF2, but not in IE6. I presumed that because the title (an H1 element) and the date line (a P element) were block-level elements, IE6 was pushing them below the category icon. Thus I tried various combinations of declarations on the three elements (display: inline, display: block, clear: right, float: left, etc.), eventually getting to this:

#contentmiddle .contenttitle h1 {
display: inline;
float: left;
clear: right;
}
#contentmiddle .contenttitle p {
display: inline;
float: left;
clear: right;
}
#contentmiddle .contenttitle img {
border: none;
margin: 0px 10px 0px 0px;
width: 32px;
height: 32px;
float: left;
display: inline;
}

Which made things worse in both FF2 and IE6.

I can't use positioning to solve this, because the number of category icons won't always be just one, as it is currently. Sometimes there will be two or more icons to the left of the title and date, so the text will need to move to accommodate them.

If you can spot my error(Drunk, or suggest a fix, I'd appreciate it. Thank you.

York

Here's my entire current CSS:

/*
Theme Name: yorkrules
Author: Royal York Funston
Author URI: http://www.yorkrules.com/
*/

/******************************************************************* Global Styles */
html {
margin: 0px;
padding: 0px;
background-attachment: fixed;
background-color: #353535;
background-image: url(images/backgroundGradient.jpg);
background-repeat: repeat-x;
color: #CCC;
text-align: center;
}
body {
font: 11px "Trebuchet MS", Arial, Helvetica, sans-serif;
line-height: 1.75;
margin: 0px auto;
text-align: left;
width: 728px;
}
#wrap {
margin: 0px auto;
padding: 0px;
}
#banner {
margin: 104px 0px 0px 0px;
line-height: 0px;
}

/******************************************************************* Headings */
h1 {
display: block;
color: #FFF;
font-size: 11px;
text-transform: uppercase;
margin: 0;
padding: 0;
}
h2 {
text-transform: uppercase;
color: #999;
font-size: 10px;
letter-spacing: 0.1em;
margin: 0;
padding: 10px 0 5px;
}

/******************************************************************* Hyperlinks */
#footer a {
color: #CCC;
}
a img {
border: none;
}
a:link {
color: #F1AC02;
text-decoration: none;
}
#l_sidebar a:link,
#r_sidebar a:link {
color: #CCC;
}
.contenttitle h1 a:link {
color: #FFF;
}
a:visited {
color: #89A5B1;
text-decoration: none;
}
.contenttitle h1 a:visited {
color: #FFF;
text-decoration: none;
}
a:hover,
#l_sidebar a:hover,
#r_sidebar a:hover,
#p7menubar li a:hover {
color: #FFF;
}

/******************************************************************* Lists */
#wrap ol, #wrap ul {
margin: 0;
padding: 0px 0px 15px 20px;
}
#wrap p + ol, #wrap p + ul {
margin-top: -10px;
}
#wrap ul {
list-style: square;
}
ol#commentlist {
list-style-type: none;
margin: 0px;
padding: 5px 0px;
}

/******************************************************************* Navbar */
#p7menubar {
padding: 0px;
margin: 0px;
position: absolute;
top: 0px;
clear: both;
z-index: 10;
font-size: 9px;
list-style: none;
}
#p7menubar a {
display: block;
width: 104px;
height: 104px;
}
#p7menubar li {
width: 104px;
height: 104px;
float: left;
text-indent: -9999px;
background-repeat: no-repeat;
}
#p7menubar li a {
color: #CCC;
display: block;
width: 104px;
overflow: hidden;
}
#p7menubar li li {
height: auto;
}
#p7menubar li ul {
width: 104px;
position: relative;
display: none;
color: inherit;
background-color: #666;
}
#p7menubar ul {
padding: 0px;
margin: 0px;
list-style: none;
}
#p7menubar ul li {
width: 104px;
}
#p7menubar ul li a {
line-height: 2em;
height: 2em;
text-align: right;
padding-right: 9px;
width: 95px;
text-decoration: none;
}
#p7menubar li:hover ul, #p7menubar li.p7hvr ul {
display: block;
}
body#indexPage li#index {
background-image: url(images/nav/navIndexColor.jpg);
}
body#learnPage li#learn {
background-image: url(images/nav/navLearnColor.jpg);
}
body#lookPage li#look {
background-image: url(images/nav/navLookColor.jpg);
}
body#playPage li#play {
background-image: url(images/nav/navPlayColor.jpg);
}
body#readPage li#read {
background-image: url(images/nav/navReadColor.jpg);
}
body#sharePage li#share {
background-image: url(images/nav/navShareColor.jpg);
}
body#shopPage li#shop {
background-image: url(images/nav/navShopColor.jpg);
}
#index {
background-image: url(images/nav/navIndexGray.jpg);
}
#learn {
background-image: url(images/nav/navLearnGray.jpg);
}
#look {
background-image: url(images/nav/navLookGray.jpg);
}
#play {
background-image: url(images/nav/navPlayGray.jpg);
}
#read {
background-image: url(images/nav/navReadGray.jpg);
}
#share {
background-image: url(images/nav/navShareGray.jpg);
}
#shop {
background-image: url(images/nav/navShopGray.jpg);
}
#index:hover a, #index a:focus, #index a:active, #index.p7hvr a {
background-image: url(images/nav/navIndexColor.jpg);
}
#learn:hover a, #learn a:focus, #learn a:active, #learn.p7hvr a {
background-image: url(images/nav/navLearnColor.jpg);
}
#look:hover a, #look a:focus, #look a:active, #look.p7hvr a {
background-image: url(images/nav/navLookColor.jpg);
}
#play:hover a, #play a:focus, #play a:active, #play.p7hvr a {
background-image: url(images/nav/navPlayColor.jpg);
}
#read:hover a, #read a:focus, #read a:active, #read.p7hvr a {
background-image: url(images/nav/navReadColor.jpg);
}
#share:hover a, #share a:focus, #share a:active, #share.p7hvr a {
background-image: url(images/nav/navShareColor.jpg);
}
#shop:hover a, #shop a:focus, #shop a:active, #shop.p7hvr a {
background-image: url(images/nav/navShopColor.jpg);
}
#p7menubar li:hover ul a, #p7menubar li:focus ul a, #p7menubar li:active ul a, #p7menubar li.p7hvr ul a {
background-image: url(images/nav/navMenuGray.jpg);
}
#index ul li a:hover {
background-image: url(images/nav/navMenuIndex.jpg);
}
#learn ul li a:hover {
background-image: url(images/nav/navMenuLearn.jpg);
}
#look ul li a:hover {
background-image: url(images/nav/navMenuLook.jpg);
}
#play ul li a:hover {
background-image: url(images/nav/navMenuPlay.jpg);
}
#read ul li a:hover {
background-image: url(images/nav/navMenuRead.jpg);
}
#share ul li a:hover {
background-image: url(images/nav/navMenuShare.jpg);
}
#shop ul li a:hover {
background-image: url(images/nav/navMenuShop.jpg);
}
.clearit {
clear: both;
height: 0;
line-height: 0;
font-size: 0;
}

/******************************************************************* Sidebars */
#l_sidebar {
float: left;
width: 160px;
margin: 0px;
padding: 0px;
}
#r_sidebar {
float: right;
width: 160px;
margin: 0px;
padding: 0px;
}
#l_sidebar ul,
#r_sidebar ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#l_sidebar li,
#r_sidebar li {
list-style: none;
margin: 0px;
padding: 0px;
}
#l_sidebar li ul,
#r_sidebar li ul,
.textwidget {
padding-bottom: 10px;
border-bottom: 1px solid #666;
}
#l_sidebar ul li,
#r_sidebar ul li {
margin: 0px;
padding: 0px;
}

/******************************************************************* Widgets */
#r_sidebar h2 a:link,
#r_sidebar h2 a:link {
color: #999;
}
a.rsswidget img {
margin: 0 4px 0 0 !important;
border: none !important;
vertical-align: middle;
position: relative;
top: -2px;
}

/******************************************************************* Content */
#content {
margin: 0px auto;
padding: 0px;
width: 728px;
}
#content p {
margin: 0px 0px 15px;
padding: 0px;
}
#content img {
border: 1px solid #666;
max-width: 100%; /*Not supported by IE6*/
margin: 8px;
}
#content img.thumb {
position: relative;
float: left;
top: 5px;
margin: 0px 8px 8px 0px;
max-height: 104px;
}
blockquote {
border-left: 2px dotted #666;
color: #CCC;
font-style: italic;
margin: 0px 0px 0px 10px;
padding: 0px 20px 0px 10px;
}
#content blockquote p {
margin: 0px 0px 16px 0px;
padding: 0px;
}
#contentmiddle {
float: left;
margin: 0px 7px 0px 8px;
padding: 0px 8px 0px 9px;
width: 374px;
}
.contenttitle {
padding: 0;
margin: 15px 0px 6px 0px;
line-height: 1;
display: block;
}
#content .contenttitle p { /*post date and comments*/
margin-top: 10px;
margin-bottom: 0px;
font-size: 10px;
color: #999;
}
/*#contentmiddle .contenttitle h1 {
display: inline;
float: left;
clear: right;
}
#contentmiddle .contenttitle p {
display: inline;
float: left;
clear: right;
}*/
#contentmiddle .contenttitle img {
border: none;
margin: 0px 10px 0px 0px;
width: 32px;
height: 32px;
float: left;
display: inline;
}
#content img.wp-smiley,
#content img.wp-wink {
border: none;
float: none;
margin: 0px;
padding: 0px;
}
.postspace {
margin: 0px 0px 10px;
padding: 0px;
border-bottom: 1px solid #666;
}

/******************************************************************* Footer */
#footer {
border-top: 1px solid #666;
margin: 20px auto;
padding: 10px 0px;
text-align: center;
width: 728px;
}

/******************************************************************* Search Form */
#searchdiv {
margin: 0px;
padding: 0px;
}
#searchform {
margin: 6px 0px 0px 0px;
padding: 0px;
overflow: hidden;
padding-bottom: 15px;
border-bottom: 1px solid #666;
}
#s {
border: 1px solid #666;
padding: 3px;
width: 152px;
}

/******************************************************************* Comments */
#commentblock {
background: #515151;
border: 1px solid #666;
color: #CCC;
float: left;
margin: 10px 0px;
padding: 15px;
width: 340px;
}
.commentdate {
padding-left: 0px;
}
.commentname {
margin: 0px;
padding: 45px 45px 45px 0px;
}
.commentinfo {
clear: both;
}
.commenttext,
.commenttext-admin {
color: inherit;
background: #515151;
clear: both;
margin: 5px 0px 15px;
width: 340px;
padding: 0px 0px 9px 0px;
border-bottom: 1px solid #666;
}
#commentsform,
#commentsform form {
margin: 0px;
padding: 0px;
text-align: left;
}
#commentsform p {
margin: 0px;
}
#commentsform form textarea {
width: 99%;
}
p.comments_link img {
margin: 0px;
padding: 0px;
}
#hbutt {
margin: 0px -3px 0px 0px;
float: right;
}
p#login {
padding-bottom: 5px;
}
#s4 {
margin: 19px 0;
}

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

I thought we'd done this

I thought we'd done this already?

Just float the image and give the h1 and p a margin-left wider than the image.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

York
York's picture
Offline
Regular
Los Angeles
Last seen: 14 years 6 weeks ago
Los Angeles
Timezone: GMT-8
Joined: 2007-01-29
Posts: 44
Points: 0

This is a new issue with an

This is a new issue with an area we've dealt with before. The image is already floated left, and as I mentioned in the original post, using margins to move the text to the right isn't appropriate because the left margin will be different lengths depending on the number of icons displayed (which is dynamically determined by WordPress based on how many categories the post belongs to.)

This seems to be more of an IE6 bug in handling block-level elements. Other ideas? Thanks for your help.

York

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

You're not going to have an

You're not going to have an unending list of categories/icons - create different classes based on how wide the image is.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

York
York's picture
Offline
Regular
Los Angeles
Last seen: 14 years 6 weeks ago
Los Angeles
Timezone: GMT-8
Joined: 2007-01-29
Posts: 44
Points: 0

PNGs, or more likely

PNGs, or more likely pngfix.js, were causing the layout problems. I had originally used GIFs for the category icons and all worked as expected, but when I switched to using PNGs, so that I could have transparency, the title and date lines were forced below the category icon. When I switched to using JPEG icons, the layout corrected itself.

Of course, I'd still like to have the ability to use PNG icons, so if you have an idea as to why this javascript might be altering the CSS layout, educate me.

Thanks,

York

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

I don't know how or why the

I don't know how or why the js would be causing the problem, but if it is and you want to use other PNGs throughout your site, then I'd leave it out. You're only using it for the bg-images on the nav, right? Then just apply a CSS-only fix for those images, e.g.:

#elementWithTransparentPNG { background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='yourImage.png',sizingMethod='scale'); }

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference