- This topic is empty.
-
AuthorPosts
-
December 7, 2009 at 2:45 am #27104Ian GParticipant
Hello again folks
I’m cleaning up the last bits of trouble on my site and I’m to the point of check cross browser compatibility of my CSS. Everything seems to be fine except for one big thing; my main navigation on my front page. I’m trying a new effect where, if the user highlights a menu item, the link and background change giving it more emphasis and a transparency effect. Everything looks groovy in Firefox, but switching to IE and Safari, the alignment of the images is off on the second and third menu items when highlighted.
I’m assuming that I am going to have to try and fix this using conditional stylesheets to target fixes for each browser. Before dig into figuring out how to do that, I want to make sure my code is as good as it can be so I am not heaping fixes on top of garbage. I ran my site through the W3 Validator like Chris C. advises in the forums and cleaned up some junk that I wrote first. Now I was hoping to get some other eyes on what I wrote to make sure I’m not causing myself any extra grief.
Here is my HTML creating the links and divs
Code:and here is the CSS to style the mouseover effects
Code:#block-block-6{
background: url(images/Fullbanner_0.png) no-repeat scroll 25px 29px;
min-height: 320px;
padding: 3px 0px;
}#block-block-6 .red a:hover {
background-position: -24px 14px;
}
#block-block-6 .red a:hover{
background-image:url(images/Fullbanner_0.png);
background-repeat:no-repeat;
}#block-block-6 h3 a {
-moz-border-radius-bottomright:30px;
-moz-border-radius-topleft:30px;
font-size:150%;
height:66px;
padding:0px 0px 0px 30px;
}
.red a:hover, a.red:hover {
background:#5E2510 none repeat scroll 0 0;
color:#FFFFFF;
}.red a, .red cite strong {
color:#843418;
}/*Green DIV*/
#block-block-6 .green a:hover {
background-position: -25px -76px;
}
#block-block-6 .green a:hover{
background-image:url(images/Fullbanner_0.png);
background-repeat:no-repeat;
}.green a:hover, a.green:hover {
background:#4F5C4E none repeat scroll 0 0;
color:#FFFFFF;
}
.green a, .green cite strong {
color:#7B8D78;
}/*Yellow DIV */
#block-block-6 .yellow a:hover {
background-position: -25px -166px;
}
#block-block-6 .yellow a:hover{
background-image:url(images/Fullbanner_2.png);
background-repeat:no-repeat;
}.yellow a:hover, a.yellow:hover {
background:#777237 none repeat scroll 0 0;
color:#FFFFFF;
}
.yellow a, .yellow cite strong {
color:#FFFFFF;
}#block-block-6[id] h3 a {
height:auto;
min-height:66px;
}#block-block-6 h3 a {
display:block;
text-decoration:none;
}#block-block-6 h3 cite {
font-size:50%;
padding:3px 0 1em;
}/*end mainbanner CSS*/
Any suggestions on clean up or tips for the conditional stylesheet if you see them would be appreciated, or if you like the effect and just want to swipe the code (like I did) feel free to let me know. You can see the effect on my site here: ecoevolution .org , just mouse over the primary links in the big graphic.
December 7, 2009 at 3:13 am #67650Ian GParticipantYup Yup sorry.
http://www.ecoevolution . org
December 7, 2009 at 3:35 am #67652AshtonSandersParticipantHmmm… yea. So the problem is that IE and Firefox display some types of margin/padding combinations differently. The best way to avoid this is to have as few margins and paddings as possible.
It looks like the problem is from your h3’s top and bottom margin. I hit a slight dead end there, but I would start by giving all h3’s a margin:0, and see if IE and FF are "broken the same"… and then work from there.
Hope that helps,
December 7, 2009 at 4:59 am #67653Ian GParticipantLooks like a good place to start. I updated my CSS with
Code:#block-block-6 h3{
margin: 0;
}and just eyeballing it, it looks like the image moved to ::nearly:: the same position in Safari, IE and Firefox. I’ll try repositioning from there like you suggest using padding and see what I come up with. If anything, clearing the margins so I just have to conditional stylesheet the padding would be good, not trying to tweak two things at once.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.