Member Avatar for alexgv14

Does anybody know an easy fix for this button issue in IE 7? if you look at it in IE 7 the buttons are not aligned correctly and the rollovers don't work.

Edited by alexgv14 because: n/a
  • 2 Contributors
  • 2 Replies
  • 129 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Member #120589

Dani AI

Generated

The CSS posted by points to the usual IE7 culprits: anchors that are both floated and declared display:inline, nested floated spans with negative margins, and sprite rollovers that depend on hover areas that may not cover the floated parts. seeing it "fine" on their machine strongly suggests an environment difference (doctype/compatibility mode or an IE7-standalone vs IE8/9 in IE7 mode issue), not necessarily a universal bug in the CSS.

A pragmatic set of fixes that works in IE7 without re-architecting the markup:

  • Stop relying on floated anchors. Give the anchor layout explicitly so IE7 will respond to :hover across the whole button. This can be done by making the anchor inline-block and forcing hasLayout in IE7:
span.button a {
  display:inline-block;
  *display:inline; /* IE6/7 inline-block hack */
  zoom:1;          /* triggers hasLayout in IE7 */
}
  • Replace the floated right-side span with absolute positioning inside a relatively positioned container so the hover/positioning are consistent across browsers:
span.button { position:relative; }
span.button a span.right { position:absolute; right:0; top:0; }

Troubleshooting checklist (quick, targeted checks):

  • Confirm the page is rendering in IE7 standards mode (valid DOCTYPE) and not in Compatibility View or Quirks.
  • Temporarily add contrasting background colors to the anchor and the nested span to see which areas are hit by hover and clicks.
  • Remove negative margins and floats incrementally to isolate the problematic rule.
  • Verify that the sprite image dimensions and background-position offsets are correct for the hover frames.

Note: IE7 has many layout quirks; these fixes are aimed at retaining the current markup while restoring hover coverage and alignment. If full modern compatibility is an option, switching to simpler block/absolute layouts (or dropping IE7 support) will remove most of these special-case fixes.

Recommended Answers

All 2 Replies

Member Avatar for alexgv14

Here is the CSS code for the button.

span.button a {
background:url("images/button.png") no-repeat scroll left top transparent;
float:left;
font:bold 16px/22px Arial,Helvetica,sans-serif;
margin:0;
padding:8px 0 10px 20px;
text-align:left;
text-shadow:0 1px 0 #DEEF97;
text-transform:uppercase;
width:auto;
display:inline;
color:#2d91db;
}

span.button a span.right {
padding:2px 45px 10px 0;
text-align:left;
text-shadow:0 1px 0 #DEEF97;
text-transform:uppercase;
background:url("images/button.png") no-repeat scroll right top transparent;
float:right;
height:29px;
margin:-8px -45px -9px 60px;
}

#main span.button a {
	background:url("images/button-content.png") no-repeat scroll left top transparent;
float:left;
font:bold 16px/22px Arial,Helvetica,sans-serif;
margin:0;
padding:8px 0 10px 20px;
text-align:left;
text-shadow:0 1px 0 #DEEF97;
text-transform:uppercase;
width:auto;
color:#ffffff;
}

#main span.button a:hover {
color:#ffffff !important;
}

#main span.button a span.right {
padding:2px 45px 10px 0;
text-align:left;
text-shadow:0 1px 0 #DEEF97;
text-transform:uppercase;
background:url("images/button-content.png") no-repeat scroll right top transparent;
float:right;
height:29px;
margin:-8px -45px -9px 60px;
}



#main span.button a:hover, span.button a:hover {background-position:left bottom; }
#main span.button a:hover span.right, span.button a:hover span.right {background-position:right -42px;}
Member Avatar for Member #120589

Took the time to check it and it looks fine to me in Chrome and IE7.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.