Jump to content

border-top in IE


Steven

Recommended Posts

I searched around the forums for anyone who had a similar problem, but either I didn't search far enough or no one else has encountered this.I had to make a conditional statement for a separate IE CSS file because of another issue (header/footer positioning). My problem is in the IE CSS file. To help explain here is the page: http://www.theudo.net/walkonleather/index.php, but you have to view it using IE of course. For the sake of helping you see the problem, I made the "bottomlegal" <div> with a white background and a 2px border, though it will eventually be a 1px border. But notice how the whole <div> has the 2px border but not the top (it will eventually be just the top border - view it in Firefox to see what it has to look like).Here is the div code:

#bottomlegal {	border-top: 1px solid #afa172;	position: relative;	right: 6px; }

And here is any relevant code to #bottomlegal:Here is the full CSS: http://www.theudo.net/walkonleather/main-ie.css

#left-bar {	float: left;	margin: 6px 0 6px 0;	padding: 6px;	border-right: 1px solid #afa172;	width: 170px;	height: 100%;	font: 10px/1.5em Verdana, Arial, Helvetica, sans-serif;	color: #6B6B6B;	text-align: left;	}#left-bar h2 {	background: url(images/arrow.gif) no-repeat 0 30%;	padding-left: 15px;	clear: both;	}#left-bar a { color: #84733c; text-decoration: none; }#left-bar a:hover {	border-bottom: 1px solid #60573a; }#content {	margin-left: 185px;	padding: 12px 19px 0 12px;	text-align: left;	}#content p { text-indent:20px; }#container {	width: 657px;	height: 100%;	}

Here is the markup:

<center><div id="container"><div id="heading"><div id="nav-horiz">	<ul id="minitabs">		<li><a href="index.html" class="active">home</a></li>		<li><a href="shipping.html">shipping</a></li>		<li><a href="contact.html">contact</a></li>	</ul></div><!-- #nav-horiz --></div><!-- #heading --><div id="left-bar">	<h1>Items Made</h1>		<h2>saddles</h2>		All leather saddles on rawhide trees. <a href="saddles.html">More...</a>		<h2>driving harness</h2>		Flexible harnesses with all leather and quality hardware. <a href="driving_harness.html">More...</a>		<h2>briefcase</h2>		Long-lasting briefcases for laptop or book use, or any other use. <a href="briefcases.html">More...</a>		<h2>handbags</h2>		A number of different handbags available: tote bags, purses, and belly bags. <a href="handbags.html">More...</a>		<h2>mukluks</h2>		Light weight and warm footwear for cold winter wear. <a href="mukluks.html">More...</a>		<h2>guitar straps</h2>		Long-lasting straps with accents and custom slots for varying length adjustments. <a href="guitar_straps.html">More...</a></div><!-- #left-bar --><div id="content">	<div id="welcome-box">		<h2>Walk on Leather Goods</h2>		<br />		<img src="images/hand-icon.gif" class="wbox-img" alt=" " />		<b>Shop Hours:</b> 9:00am - 6:00pm (Monday - Friday), 10:00am - 3:00pm (Saturday)<br />		<b>Phone:</b> (507) 238-4578<br />		<b>Email:</b> reed@walkonleather.com	</div>	<img src="reed.jpg" class="reed" alt=" " /><h1>Work History</h1><p>The leather work started for me in 1989 at a saddle shop in Boise, Idaho.  I learned in-depth the repairing and building of the western saddle with Bud Shaul.  We also made such things as tack and chaps.</p><p>1992 brought me back to Minnesota where I continued to build western saddles and tack.  I continued the riding of horses and started driving in harness which led to building harness.  1996 took me to work in shoe repair shops, this allowed the experience of working on a lot of variety.  I also began the building of briefcases and handbags.  I continued building a variety of items and have decided to offer the list at the top left of this page.</p><p>Over the years many a jobs have been through my hands, and I have learned from each of them.  The hours on the bench can be long, but I will forever look forward to the development of the craftsman and individual He has created me to be.</p><p>Sincerely,<br />J. Reed Walters.</p><br /></div><!-- #content --><p /><div id="bottomlegal">Subject to change</div></div><!-- #container -->

Now, I'm sure this could be easily solved with an image background, but it still does not make sense to me for the top border to not show up. I have tried adding margin, padding, and overflow, but to no avail.Thoughts?Thanks in advance,Steven

Link to comment
Share on other sites

Nice thinking, thanks!Here's the CSS that worked:

#bottomlegal {	border-top: 1px solid #afa172;	position: relative;	right: 7px; }#bottomleagal p {line-height:200%}

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...