Background not showing up and margins/padding screwed up in IE
newbie
Posted: Tue, 2008-05-20 17:15
I've run into a bit of a snafu. The page I'm working on looks perfect in Firefox:
http://www.carbonfibergear.com/dpit for reference
In IE6/7, the section for the right content underneath the image doesn't show the brown background, and the orange line between each image doesn't show up. Any ideas how I can get this fixed and make it look like Firefox? Code is below:
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>dpitMedia</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<div id="header">
<a href=""><img src="images/logo.gif" alt="" /></a>
</div>
<div id="container">
<div id="featured-image">
<h1>Ideas. We're full of em. dpitMedia is the company behind the companies of David Pitlyuk.</h1>
</div>
<div id="left-content">
<ul>
<li>
<h2>About dpitMedia</h2>
<p>dpitMedia is the umbrella company for the productions of David Pitlyuk. Some of the projects are public and highlighted here, while others are private.</p>
<p>dpitMedia also offers web design services, <a href="#">contact us</a> for more information. Prices start at $2,000 for a basic design.</p>
<p>You can find more information about our public projects on this page.</p>
</li>
<li>
<h2>Who Is David Pitlyuk?</h2>
<p>David Pitlyuk is a serial entrepreneur, taking on a variety of projects both online and offline. He's been doing it since the age of 16.</p>
<p>David has a <a href="#">personal blog</a> where he covers topics related to entrepreneurs, as well as miscellaneous ramblings of things that interest him.</p>
</li>
<li>
<h2>Contact Us</h2>
<form action="">
<table>
<tr>
<td>Name:</td>
<td><input /></td>
</tr>
<tr>
<td>E-Mail:</td>
<td><input /></td>
</tr>
<tr>
<td>Reason For Contact:</td>
<td>
<select name="">
<option value=""></option>
<option value="">Project Idea</option>
<option value="">Web Design</option>
<option value="">Other</option>
</select>
</td>
</tr>
<tr>
<td valign="top">Comments:</td>
<td><textarea rows="10" cols="10"></textarea></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" value="Submit" class="submit" /></td>
</tr>
</table>
</form>
</li>
</ul>
</div>
<div id="right-content">
<h2>Public Projects</h2>
<ul>
<li>
<ul>
<li><img src="images/project_dp.gif" alt="DavidPitlyuk.com" /></li>
<li class="projname"><h3>DavidPitlyuk.com</h3></li>
<li class="projdesc">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed luctus commodo tellus. Morbi sit amet nunc bibendum puru.</li>
<hr class="clear" />
</ul>
</li>
<li>
<ul>
<li><img src="images/project_cfg.gif" alt="Carbon Fiber Gear" /></li>
<li class="projname"><h3>Carbon Fiber Gear</h3></li>
<li class="projdesc">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed luctus commodo tellus. Morbi sit amet nunc bibendum puru.</li>
<hr class="clear" />
</ul>
</li>
<li>
<ul>
<li><img src="images/project_at.gif" alt="ActiveTuning, LLC" /></li>
<li class="projname"><h3>ActiveTuning, LLC</h3></li>
<li class="projdesc">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed luctus commodo tellus. Morbi sit amet nunc bibendum puru.</li>
<hr class="clear" />
</ul>
</li>
<li class="last">
<ul>
<li><img src="images/project_tm.jpg" alt="Tri Megatech, LLC" /></li>
<li class="projname"><h3>Tri Megatech, LLC</h3></li>
<li class="projdesc">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed luctus commodo tellus. Morbi sit amet nunc bibendum puru.</li>
<hr class="clear" />
</ul>
</li>
</ul>
</div>
<div id="footer">
</div>
</div>
</body>
</html>CSS
body {
margin: 0;
padding: 0;
background-color: #e7da4d;
font-family: georgia, times new roman, arial, sans-serif;
font-size: .9em;
}
img {
border: 0;
}
h2 {
font-size: 25px;
font-weight: bold;
font-style: italic;
color: #cb8406;
margin: 0 0 10px 0;
padding: 0;
}
p {
margin-top: 0;
}
.clear {
clear: both;
visibility: hidden;
margin: 0;
padding: 0;
}
#header {
background-image: url('images/background_top.gif');
background-repeat: repeat-x;
text-align: center;
}
#container {
margin-right: auto;
margin-left: auto;
width: 982px;
}
#featured-image {
width: 982px;
height: 310px;
border-top: #c3561d solid 7px;
background-image: url('images/featured-image.gif');
background-repeat: no-repeat;
margin: 20px 0 20px 0;
}
#featured-image h1 {
font-size: 72px;
color: #44474d;
line-height: .7em;
letter-spacing: .001em;
text-indent: -5000px;
}
/************** Left Content **************/
#left-content {
width: 332px;
margin: 0 0 0 10px;
display: inline; /*Fixes IE6 double margin bug */
float: left;
}
#left-content ul {
margin: 0;
padding: 0;
}
#left-content ul li {
margin: 0 0 15px 0;
list-style: none;
padding: 10px;
background-color: #f6ea65;
}
#left-content ul li p {
line-height: 1.3em;
}
#left-content ul li a {
color: #c3561d;
background-color: #e7da4d;
text-decoration: none;
}
#left-content ul li a:hover {
background-color: #f6ea65;
text-decoration: underline;
}
#left-content ul li input,select,textarea,dropdown {
font-family: georgia, times new roman, arial, sans-serif;
}
#left-content ul li input,select,textarea {
background-color: #e7da4d;
border: 1px solid #d7c937;
margin-left: 5px;
}
#left-content ul li input,textarea {
width: 160px;
}
#left-content ul li textarea {
height: 100px;
}
#left-content ul li input.submit {
color: #f6ea65;
background-color: #cb8406;
width: 6em;
font-weight: bold;
border: 2px solid #c3561d;
font-size: 1.3em;
font-style: italic;
}
/************** End Left Content **************/
/************** Right Content **************/
#right-content {
width: 600px;
margin: 10px 10px 0 0;
display: inline; /*Fixes IE6 double margin bug */
float: right;
}
#right-content ul {
margin: 0;
padding: 0;
}
#right-content ul li {
margin: 0 0 20px 0;
list-style: none;
border-bottom: 5px solid #cb8406;
}
#right-content ul li.last {
border: 0;
margin: 0;
}
#right-content ul li ul{
padding: 0 0 10px 0;
margin-bottom: 20px;
background-color: #928443;
}
#right-content ul li ul li {
display: inline;
border: 0;
}
#right-content ul li ul li img {
padding: 3px 3px 10px 3px;
}
#right-content ul li ul li h3 {
margin: 0;
padding: 0;
font-size: 17px;
font-weight: bold;
font-style: italic;
color: #e7da4d;
}
#right-content ul li ul li.projname {
float: left;
width: 200px;
border-bottom: 0;
text-align: center;
margin: 0;
padding: 0;
}
#right-content ul li ul li.projdesc {
float: left;
width: 375px;
border-left: 2px solid #e7da4d;
border-bottom: 0;
font-family: verdana, arial, sans-serif;
font-size: .7em;
color: #fdf6ad;
margin: 0;
padding: 0 0 0 15px;
}
/************** End Right Content **************/
#footer {
clear: both;
width: 982px;
height: 151px;
border-top: #c3561d solid 7px;
background-image: url('images/background_footer.jpg');
background-repeat: no-repeat;
margin-top: 20px;
}
Regular
Posts: 26
Joined: 2007-06-08
Location: San Diego
Well, it seems as if all of
Posted: Tue, 2008-05-20 18:19
Well, it seems as if all of the nested ul's could be causing a problem. You might want to try using a definition list instead of an unordered one for those elements.
HTML
<dl id="project-list"><dt>Project 1</dt>
<dd>Description</dd>
<dt>Project 2</dt>
<dd>Description</dd>
</dl>
CSS
#project-list {
margin:0px;
padding:0px;
}
#project-list dt { /* place image in this one; you can either do that statically, or using css through a class to make for better seo purposes */
background-color:#928443;
padding:2px 2px 10px 2px;
}
#project-list dd {
background-color:#928443;
padding-bottom:10px;
}
#project-list dd h3 {
float:left;
border-right:2px solid #e7da4d;
width:XXXpx; /* you can set a width of the H tag so the border will always start at the same place */
}
#project-list dd p {
margin:0px 40px;
}
That should get you the basic layout and beyond what I have there, would just be some typical styling of colors n stuff. You might also need to set some dimensions for the dt's and dd's though... I didn't actually test it, I just did it in my head like I usually start off laying a page out
I hope that helps or gets you goin in the right direction
newbie
Posts: 3
Joined: 2008-05-20
I'm not too sure I
Posted: Tue, 2008-05-20 23:39
I'm not too sure I understand your solution or how that would work over what I'm doing?
If anything, I'm just curious why it's doing what it's doing in IE now?
Regular
Posts: 26
Joined: 2007-06-08
Location: San Diego
Well, I can't really tell
Posted: Wed, 2008-05-21 00:24
Well, I can't really tell you why. I don't know WHY IE6 measures margin different than other browsers and all the other crap it does. I know in cases what it does and how to fix/workaround it, but to know WHY, you'd have to contact Microsoft.
Using nested ul's when there isn't much reason to doesn't make sense to me. Unless you give each level ul a class or id so you can specify different properties, you're going to run into cascading style issues, which in turn IE for example doesn't compensate or understand as well. The reason I suggested a definition list is because that's pretty much what you have going there and a dl consists of 2 separate elements per item.
What I mean by that is because you have a main image [think of it as a term in a dictionary], and a description below [the definition to the term]. So logically, it makes sense.
Plus, less code with the same result is always better
By the way, IE sucks, so you sometimes have to compensate and code accordingly. Sorry I couldn't help much
newbie
Posts: 3
Joined: 2008-05-20
stinkysGTI wrote:Well, I
Posted: Wed, 2008-05-21 00:45
Ok that makes sense, but I guess I wasn't sure how I could use the DL in order to do what I wanted. My setup is:
Image
Name (floated left) | description (floated right)
yellow spacing
Orange Line
yellow spacing
REPEAT
The whole thing is wrapped in one "box" to give it a unified look. I'm just having trouble figuring out how to use DL to do the above without wrapping it in another DL for example. This is the closest concept I could get to this (using inline styles just for ease of use reference), and I'm still running into issues:
<div id="right-content"><h2>Public Projects</h2>
<dl style="background-color: red; padding: 3px; background-image: url('images/project_dp.gif'); background-repeat: no-repeat;">
<dt style="float: left; width: 200px; margin-top: 249px;">Test</dt>
<dd style="float: left; margin-left: 220px; width: 300px;">Test</dd>
<hr class="clear" />
</dl>
</div>
Regular
Posts: 26
Joined: 2007-06-08
Location: San Diego
Definition lists don't get
Posted: Wed, 2008-05-21 16:56
Definition lists don't get used much and I don't think many people know it even exists. Sometimes it can be very useful though.
When I had written that css into my first reply, I actually had your site open next to the page and was sampling colors and everything, so if you copy that, it should at least get the layout going.
Then use this:
<dl id="project-list">
<dt class="first"><img src="" alt="" /></dt>
<dd><h3>DavidPitlyuk.com</h3><p>David Pitlyuk's personal blog. Developed in conjunction with Suffolk Software, using a completely custom Wordpress integration.</p></dd>
<dt><img src="" alt="" /></dt>
<dd><h3>Carbon Fiber Gear</h3><p>An experiment in affiliate marketing featuring a variety of "cool" products made with or out of carbon fiber.</p></dd>
</dl>
You can use a single dl and just repeat the dt/dd combos all the way down. I set it up in the previous css so nothing but the list and content were needed. I noticed though, I forgot ONE thing:
#project-list dt { /* you're gonna need to add the border here */
border-top:5px solid #cb8406;
margin-top:15px;
}
#project-list dt.first { /* then, create a class for the first one that cancels out the border and margin */
border:none;
margin-top:0px;
}
#project-list dd p {
float:left;
margin:0px 40px;
}
If you combine that previous css with this chunk, and use this html, it should be pretty close to being there besides some text styles and layout tweaking.