Log in

View Full Version : Divs misaligned in IE, but fine in FF.


Conger
07-23-2008, 05:44 AM
First off, I must state that I'm fairly new to web design, so please bear with me. Also, it might be obvious by looking at my code that I download templates and customize them to my liking... Not sure if that's frowned upon, but it's helped me learn a lot.

Now to the problem at hand. I just recently redesigned my site, and realized today that the changes I made caused it to look awful in IE. I'm pretty sure it's a CSS problem, but I can't pinpoint it.

Here's the site:
http://www.congerart.com

and here's the CSS:
http://congerart.com/default.css

It looks perfect in Firefox, but for some reason the "content" div is screwed up in IE. Oh... and "doodad" (I was too lazy to think of a good name) is a bit different between browsers, but that doesn't bother me. I just want to fix "content."

Also, I've already done a little work on the CSS to get it where it is now. The rest of my site is using an older file until I fix it completely, so stick to the main page...

Thanks for your time, and any suggestions you may have.


P.S. If you have any comments about my actual portfolio, those would be appreciated too. :)
jscheuer1
07-23-2008, 09:06 AM
The wrapper (only 130px wide) isn't wide enough to fit the 690px + padding wide content div. So it wraps to the next line. I found that increasing wrapper to 860px took care of this but messed up the look of the right edge, it wasn't a continuous line top to bottom. So I made the wrapper 850px, and made content's right padding 0, That made it all appear to fit.

What I did:


. . . .style20 {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #CCCCCC;
font-size: 14px;
font-style: italic;
}
#wrapper {
width:850px;
}
#content {
padding-right:0;
}
-->
</style>
</head>

<body>
<div id="header">
</div>
<div id="doodad">
<hr class="st . . .

This seemed fine in other browsers as well. You would probably want to make the change in your main styles though:


#wrapper {
width: 850px;
height: 507px;
margin-left: 20px;
background: #000000;
}

and:


#content {
width: 690px;
border: 0px;
height: 492px;
margin-left: 130px;
background-color: #000000;
padding: 0 0 15px 10px;

}

I just realized that for IE 6 (I was testing in 7), you also need to remove the p element from the footer and make the image it contains display:block;


<div id="footer">
<img style="display:block;" id="frontphoto" src="/images/footer1.jpg" width="850" height="40" />
</div>

This was still fine in other browsers.
Conger
07-23-2008, 03:13 PM
Holy crap, you're a life saver!

Thank you so much! :D