Jump to content

IE6 Padding Problem


Hartley

Recommended Posts

Code in Question: http://andrewhartley.com/cb-test/

 

In all other browsers, the code displays fine. The area I'm looking at is the navigation bar with "Home, Scribe, Community". To minimize HTTP requests, I have one image that contains the map of header images, which is why it looks double buggy when it breaks. I don't know how to fix this, but it seems that the padding or initial position of the div container isn't the same as what it is in the other browsers. Here are the segments of code for these areas:

 

	<!--start header-->
<div id="header">
	<!--logo-->
	<h1 class="logo"><a href="#" class="logo">CastBuzz</a></h1>

	<!--top panel-->
	<div class="member">
		<div class="member-right"></div>
		<ul class="member-info">
			<li><p>Hello, Andy</p></li>
			<li><a href="profile.php?p=edit">Edit Site Profile</a></li>
			<li><a href="#">Log Out</a></li>
		</ul>
		<div class="member-left"></div>

		<!--top tabs-->
		<div class="tab">1</div>
		<div class="tab">2</div>
	</div>

	<!--top navigation-->
	<div class="topnav">
		<ul id="nav-menu">
			<li><a href="#" class="nav-home">Home</a></li>
			<li><a href="#" class="nav-scribe">Scribe</a></li>
			<li><a href="#" class="nav-community">Community</a></li>
		</ul>
	</div>
</div>
<!--end header-->

 

/* id components */
#header {
height:101px;
width:970px;
margin:0 auto;
background:url("../images/site/main/banner-sheet.jpg") no-repeat;
}

/* logo */
h1.logo {
height:100px;
width:300px;
margin:0 0 0 15px;
display:inline;
float:left;
position:relative;
text-indent:-9999px;
}

.logo a {
height:100px;
width:300px;
display:block;
}

/* header content */
.member {
height:30px;
padding:0 15px 0 10px;
float:right;
}

.member-left {
height:30px;
width:5px;
background:url("../images/site/header-tabs/left-50.png") no-repeat;
float:right;
}

.member-right {
height:30px;
width:5px;
background:url("../images/site/header-tabs/right-50.png") no-repeat;
float:right;
}

.member-info {
height:30px;
background:url("../images/site/header-tabs/middle-50.png") repeat-x;
float:right;
}
.member-info li {
	padding:7px 10px 0 10px;
	background:url("../images/site/header-tabs/separator.jpg") no-repeat 0 10px;
	float:left;
}
	.member-info li:first-child { background:none; }
	.member-info li p {
		color:#fff;
		font:11px Verdana;
	}
	.member-info li a {
		color:#fff;
		font:11px Verdana;
		float:left;
		text-decoration:none;
	}
		.member-info li a:hover { text-decoration:underline; }

.tab {
height:30px;
width:40px;
margin:0 20px 0 0;
background:url("../images/site/header-tabs/tab.png") no-repeat;
float:right;
}

/* menu */
.topnav {
height:54px;
margin:17px 0 0 186px;
float:left;
position:relative;
}

#nav-menu {
width:447px;
list-style:none;
}
#nav-menu li {
	margin:0 0 0 14px;
	float:left;
	position:relative;
}
	#nav-menu li:hover ul, #nav-menu li.hover ul { display:block; }
	#nav-menu li a {
		float:left;
		height:54px;
		text-indent:-9999px;
	}

	#nav-menu li a.nav-home {
		background:url("../images/site/main/banner-sheet.jpg") no-repeat -515px -101px;
		width:114px;
	}
		#nav-menu li a.nav-home:hover { background:url("../images/site/main/banner-sheet.jpg") no-repeat -515px -155px; }

	#nav-menu li a.nav-scribe {
		background:url("../images/site/main/banner-sheet.jpg") no-repeat -643px -101px;
		width:124px;
	}
		#nav-menu li a.nav-scribe:hover { background:url("../images/site/main/banner-sheet.jpg") no-repeat -643px -155px; }

	#nav-menu li a.nav-community {
		background:url("../images/site/main/banner-sheet.jpg") no-repeat -781px -101px;
		width:167px;
	}
		#nav-menu li a.nav-community:hover { background:url("../images/site/main/banner-sheet.jpg") no-repeat -781px -155px; }

 

Thanks in advance for any assistance! :)

Link to comment
Share on other sites

Smashing magazine just had an article on CSS sprites, and there's probably a lot of references to code you can look at there:

 

http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/

 

I noticed while reading some of the tutorials that IE does have issues, so some reading should point out the problem so you can fix it.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.