This page looks fine in IE8 but not IE7 cannot figure it out.

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • chanshaw
    New Member
    • Nov 2008
    • 67
    #1

    This page looks fine in IE8 but not IE7 cannot figure it out.

    Alright I've been playing around with this for awhile and I can't seem to figure it out. The page looks fine in IE8 but IE7 does not seem to want to drop the margin of the background image for me.

    HTML
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
		<script type="text/javascript" language="JavaScript" src="scripts/jquery.js"></script>
		<script type="text/javascript" language="JavaScript" src="scripts/jquery.cookie.js"></script>
		<script type="text/javascript" language="JavaScript" src="scripts/ddmenu.js"></script>
		<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
		<link rel="stylesheet" type="text/css" href="style.css"/>
		<title>My page</title>
	</head>
	<body>
		<div id='site_container'>
			<div id='header_container'>
				<div id='logo_container'>
					<a href='#'><img alt='320 East Logo' src='images/logo.png'/></a>
				</div>
				<div id='menu_container'>
					<div style='margin-left: 50px; height: 74px; text-align: center;'>
						<a href='#'><img class='menu_item' alt='Home' src='images/home_link.png'/></a>
						<a href='#'><img class='menu_item' alt='About Us' src='images/about_link.png'/></a>
						<a href='#'><img class='menu_item' alt='Estimate' src='images/estimate_link.png'/></a>
						<a href='#'><img class='menu_item' alt='Contact Us' src='images/contact_link.png'/></a>
					</div>
				</div>
				<div class='clearit'>
				</div>
			</div>
</div>
</body>
</html>
    CSS
    Code:
    html
{
	margin-top: 30px;
	font: Arial;
}

body
{
	background-repeat: repeat-x; background-image: url("images/headerbackg.jpg"); margin: 0px auto; width: 100%;
}

a
{
	border-style: none;
}

a img
{
	border-style: none;
}

#site_container
{
	margin-top: -30px; width: 960px; margin-left: auto; margin-right: auto;
}

#logo_container
{
	float: left;
	width: 267px;
}

#menu_container
{
	width: 693px;
	margin-top: 30px;
	float: right;
	height: 74px;
}

.menu_item:hover
{
	background-color: #67a2c7;
}
    Any help would be appreciated. Thank you for your time.
    Tags: None
    • drhowarddrfine
      Recognized Expert Expert
      • Sep 2006
      • 7434
      #2
      Can you put this online? Without the images, it's difficult to see the problem.

      Does it work correctly in any modern browser? You should always test first in anything but IE to make sure your markup displays correctly. Also, IE8 does not work like IE7 which doesn't work like IE6 which won't work like IE9 and none of them work correctly.

      'font' is a CSS shorthand property. To only select a font family, use 'font-family'.

      margins do not affect background images.

        Comment

        • AutumnsDecay
          New Member
          • Mar 2008
          • 170
          #3
          As drhowarddrfine said, we'd need to see a live demo.

          Any reason you have 'auto' as one of your <body> margins? Try moving that and just have: margin:0px;

            Comment

            Previous template Next
            Working...