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

My page is displaying correctly in FF2, but in IE6, the spacing above and below the blog post titles and dates is significantly more than it should be.

I presume this is caused by an IE6 bug related to margins and paddings, but I'm not familiar with IE6 bugs and the best practices for correcting them.

My initial online research suggested adding

display: inline;

to floated elements (the two images in the post are each floated left). I tried this, without success.

Also in error in IE6, the hyperlinks in the first post ignore their CSS :link rules (they're gray like the standard text color, not the colors of the hyperlinks in the following posts.)

If you could suggest a fix for either or both of these issues, I'd appreciate it.

Thanks,

York

My CSS

/******************************************************************* Global Styles */
html {
margin: 0px;
padding: 0px;
background-attachment: fixed;
background-color: #353535;
background-image: url(http://www.yorkrules.com/yorkrules3/global/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;
background-color: transparent;
font-size: 11px;
text-transform: uppercase;
margin: 0;
padding: 0;
}
h2 {
display: block;
color: #999;
background-color: transparent;
font-size: 11px;
text-transform: uppercase;
margin: 0;
padding: 10px 0px 5px 0px;
}
h3 { /*post date and comments*/
vertical-align: baseline;
display: block;
font-size: 10px;
color: #999;
}

/******************************************************************* Hyperlinks */
a img {
border: none;
}
a:link,
a:visited {
color: #CCC;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: #FFF;
background-color: transparent;
text-decoration: none;
}

/******************************************************************* 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 {
display: block;
width: 104px;
overflow: hidden;
}
#p7menubar li li {
height: auto;
}
#p7menubar li ul {
width: 104px;
position: relative;
display: none;
color: inherit;
background-color: #FFFFFF;
}
#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(http://www.yorkrules.com/yorkrules3/global/images/nav/navIndexColor.jpg);
}
body#learnPage li#learn {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navLearnColor.jpg);
}
body#lookPage li#look {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navLookColor.jpg);
}
body#playPage li#play {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navPlayColor.jpg);
}
body#readPage li#read {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navReadColor.jpg);
}
body#sharePage li#share {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navShareColor.jpg);
}
body#shopPage li#shop {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navShopColor.jpg);
}
#index {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navIndexGray.jpg);
}
#learn {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navLearnGray.jpg);
}
#look {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navLookGray.jpg);
}
#play {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navPlayGray.jpg);
}
#read {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navReadGray.jpg);
}
#share {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navShareGray.jpg);
}
#shop {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navShopGray.jpg);
}
#index:hover a, #index a:focus, #index a:active, #index.p7hvr a {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navIndexColor.jpg);
}
#learn:hover a, #learn a:focus, #learn a:active, #learn.p7hvr a {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navLearnColor.jpg);
}
#look:hover a, #look a:focus, #look a:active, #look.p7hvr a {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navLookColor.jpg);
}
#play:hover a, #play a:focus, #play a:active, #play.p7hvr a {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navPlayColor.jpg);
}
#read:hover a, #read a:focus, #read a:active, #read.p7hvr a {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navReadColor.jpg);
}
#share:hover a, #share a:focus, #share a:active, #share.p7hvr a {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navShareColor.jpg);
}
#shop:hover a, #shop a:focus, #shop a:active, #shop.p7hvr a {
background-image: url(http://www.yorkrules.com/yorkrules3/global/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(http://www.yorkrules.com/yorkrules3/global/images/nav/navMenuGray.jpg);
}
#index ul li a:hover {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navMenuIndex.jpg);
}
#learn ul li a:hover {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navMenuLearn.jpg);
}
#look ul li a:hover {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navMenuLook.jpg);
}
#play ul li a:hover {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navMenuPlay.jpg);
}
#read ul li a:hover {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navMenuRead.jpg);
}
#share ul li a:hover {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navMenuShare.jpg);
}
#shop ul li a:hover {
background-image: url(http://www.yorkrules.com/yorkrules3/global/images/nav/navMenuShop.jpg);
}
.clearit {
clear: both;
height: 0;
line-height: 0;
font-size: 0;
}

/******************************************************************* Left Sidebar */
#l_sidebar {
float: left;
width: 160px;
margin: 0px;
padding: 0px;
}
#l_sidebar ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#l_sidebar li {
list-style: none;
margin: 0px;
padding: 0px;
}
#l_sidebar li ul {
padding-bottom: 10px;
border-bottom: 1px solid #666;
}
#l_sidebar ul li {
margin: 0px;
padding: 0px;
}

/******************************************************************* Right Sidebar */
#r_sidebar {
float: right;
width: 160px;
margin: 0px;
padding: 0px;
}
#r_sidebar ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#r_sidebar li {
list-style: none;
margin: 0px;
padding: 0px;
}
#r_sidebar li ul {
padding-bottom: 10px;
border-bottom: 1px solid #666;
}
#r_sidebar ul li {
margin: 0px;
padding: 0px;
}

/******************************************************************* Content */
#content {
margin: 0px auto;
padding: 0px;
width: 728px;
}
#content p {
margin: 0px 0px 15px;
padding: 0px;
}
#content img {
border: 1px solid #666;
margin: 10px 0px;
}
#content img.first {
position: relative;
float: left;
top: 5px;
margin: 0px 10px 0px 0px;
}
blockquote {
border-left: 2px dotted #666;
color: #CCC;
background-color: transparent;
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 {
float: left;
margin: 6px 0px 5px 0px;
padding: 0px;
width: 100%;
height: 32px;
line-height: 1;
}
.contenttitle img {
border: none !important;
margin: 0px 10px 0px 0px !important;
float: left;
}
#contentmiddle a:link {
color: #F1AC02;
background-color: transparent;
text-decoration: none;
}
#contentmiddle a:hover {
color: #FFF;
background-color: transparent;
text-decoration: none;
}
#contentmiddle h1 a:link {
display: block;
color: #FFF;
background-color: transparent;
font-size: 11px;
text-transform: uppercase;
}
#contentmiddle h1 a:hover {
display: block;
color: #949200;
background-color: transparent;
font-size: 11px;
text-transform: uppercase;
}
/*#contentmiddle h2 {
margin: 0px;
padding: 10px 0px 0px 0px;
}*/
#contentmiddle ol {
margin: 0px;
padding: 0px 0px 15px 20px;
}
#contentmiddle ul {
list-style: square;
margin: 0px;
padding: 0px 0px 15px 20px;
}
#contentmiddle ul li {
margin: 0px;
padding: 5px 0px 0px 0px;
}
#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: 344px;
}
ol#commentlist {
list-style-type: none;
margin: 0px;
padding: 5px 0px;
}
.commentdate {
padding-left: 0px;
}
#commentlist li p {
line-height: 20px;
margin-bottom: 8px;
padding: 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: 344px;
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: 10px -2px 0px 0px;
float: right;
}
p#login {
padding-bottom: 5px;
}

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

It could be because you

It could be because you haven't killed off the margins on the h3 (I wouldn't actually use a heading tag for the date, just use a <p> instead) or maybe you need to take the floated image out of the h1 and have it sitting above the h1 & h3 (or p) in the source.

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 29 weeks ago
Los Angeles
Timezone: GMT-8
Joined: 2007-01-29
Posts: 44
Points: 0

I pulled the image out of

I pulled the image out of the <h1> tag and changed the <h3> to <p>, but the excess vertical spacing remained.

After some more troubleshooting, I determined that the following CSS rule worked:

.contenttitle {
padding: 0;
margin: 15px 0px 16px 0px;
line-height: 1;
display: block;
}

I deleted height: 32px; and width: 100%;, and I set line-height to 1, because in the original rule, they all seemed to cause the problem, whether together or on their own.

One thing I don't understand: in order to get 10px of vertical space between the category icon (the 32px colored square) and the posting image (the portrait of the girl), I had to set the bottom margin of the rule to 16px. If I set it to anything less (0px to 15px), the vertical space would remain exactly 9px. Any idea why that might be?

Now that I've got the vertical spacing under control, though, I need to move the date and comments link (the <p> tag element of the .contenttitle) down.

Is it best to do this by setting the <p> tag position to relative and then adjusting its vertical position with a bottom value? I can't change the line-height value without screwing up the whole thing again. Your advice? Thanks.

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

Have you tried to add some

Have you tried to add some margin to .contenttitle p? You'll need to make the rule more specific - #content .contenttitle p - to override the margin settings on #content p.

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 29 weeks ago
Los Angeles
Timezone: GMT-8
Joined: 2007-01-29
Posts: 44
Points: 0

That worked. Thanks for the

That worked. Thanks for the tip, Tyssen.