Hello SitePoint.
I am designing a website. I am trying to get the divs to show up correctly in IE. Can anyone tell me what I am doing wrong?
Thank you.[URL=“http://chrislupetti.com/trialcss/”]
Post edited to add code tags 
Can you maybe tell us what divs are not showing well in which IE version? Just saw the site in IE 8, FF 3.6.8, Googe Chrome etc but didn’t see any significant difference.
Please take out names, addresses and slogans of website client with in the code before posting. thank you.
Hi Deathshadow60. Thanks for your help. I have a few more questions.
The logo turns up in the wrong place on Google Chrome. It does not move when I minimize the page in IE and Firefox. For some reason I have a thick white line under the banner.
<!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"
lang="en"
xml:lang="en"
><head>
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>
<meta
http-equiv="Content-Language"
content="en"
/>
<link
type="text/css"
rel="stylesheet"
href="stylesheet.css"
media="screen,projection,tv"
/>
<title>
St.XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
</title>
</head><body>
<div id="pageWrapper">
<div id="bannerHolder"><img src="images/stjosephbanner.jpg" alt="" width="900" height="208" /></div>
<div class="schoolName" id="schoolName"><img src="images/schoolnameandslogan.gif" alt="St.XXXXXXXXXXXXXXXXXXXX School" width="808"/></div>
<div>
<ul id="mainMenu">
<li><span class="logoHolder"><img src="images/schoollogo.gif" alt="Logo" width="72" height="90" /></span>
<div class="logoHolder" id="logoHolder"></div>
<a href="#">Curriculum</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Admissions</a></li>
<li><a href="#">Brochure</a></li>
</ul>
<hr />
</div>
<div class="column">
<img
src="images/frontofschool.jpg"
alt="Front of School"
class="plate"
/>
<h2 class="quoteBox"><span>XXXXXXXXXXXXX</span></h2>
<ul id="events">
<li>Events get posted here 09/27/2010</li>
<li>Events get posted here 12/14/2010</li>
</ul><hr />
<h2>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.</h2>
<p>
The school offers a challenging academic curriculum that is rich in XXXXXXXXXXXXXXXXXXXXXXXXX formation as well as the moral values your child will need to succeed in life. With low teacher-student ratios and plenty of personal attention, our school XXXXXXXXXXXXXXXXXXXXXXXXXXthat interests and discover the best in themselves, their classmates and the world.
</p><p>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX offer in a dedication to excellence - an emphasis on rigor and relationship in each classroom that allows each student to achieve. That's why our students consistently score higher on nationally standardized testing than public or charter school counterparts. They have gone XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXns and at least 97% of our graduates eventually go on to attend college after studying at some of the area's finest Catholic and specialized high schools.
</p><hr />
<!-- .column --></div>
<div class="column">
<h2 class="standout">We Look Forward to Hearing From You</h2>
<div class="address">
Saint XXXXXXXXXXXXXXXXXXXXXX School<br />
XXXXXXXXXXXXXXXXXXXXXXX, West <br />
XXXXXXXXX, XX XXXXX<br />
Phone:XXXXXXXX<br />
Fax: XXXXXXXXXX<br />
Email: <a href="mailto:XXXXXXXXXXXXXXXXXXX.com">Principal@SXXXXXXXXXXXXXX.com</a>
<!-- .address --></div><hr />
<h2>Preparing leaders of competence, compassion and character.</h2>
<img
src="images/childrendownslide.jpg"
alt="Children on slide"
class="plate"
/>
<p>
There's no one quite like your child. A bright smile, a tender heart, an inquisitive mind - all combined in the most remarkable person you're ever known. At Saint Joseph of the Palisades Elementary School of the Archdiocese of Newark we recognize that each child is a precious gift from God. XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX as fast as they can or who take as much time as they need. Attention to learning style makes the difference.
</p><hr />
<!-- .column --></div>
<div id="footer">
Saint XXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXX<br />
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX 07093 Phone:XXXXXXXXXXXXXXXXXX<br />
<!-- #footer --></div>
<!-- #pageWrapper --></div>
</body></html>
[/QUOTE]
[QUOTE]/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
margin:0;
padding:0;
}
img,fieldset {
border:none;
}
hr {
display:none; /* I use HR for CSS off users */
}
body {
text-align:center; /* center #pageWrapper IE 5.x */
font:normal 85%/140% arial,helvetica,sans-serif;
background:#0E5EBE;
}
#pageWrapper {
width:900px;
margin:0 auto;
background:#FFF;
}
#bannerHolder{
width:900px;
}
h1 {
position:relative;
overflow:hidden;
width:100%;
padding:211px 0 2px;
background:#DCB000 url(images/h1Banner.jpg) top center no-repeat;
}
h1 span,
h1 small {
width:230px;
float:left;
display:inline;
margin-left:145px;
font:bold 14px/16px arial,helvetica,sans-serif;
text-align:center;
}
h1 b {
position:absolute;
top:209px;
left:-3px;
width:900px;
height:36px;
background:url(images/h1Text.png) 0 0 no-repeat;
}
#schoolName{
background:#DCB000;
}
#mainMenu {
list-style:none;
padding:8px 0 68px;
background:url(images/schoolLogo.png) bottom center no-repeat;
}
#mainMenu li {
display:inline;
padding:0 4px;
}
#mainMenu a {
display:-moz-inline-block;
display:-moz-inline-box;
display:inline-block;
padding:2px 6px;
text-decoration:none;
font-weight:bold;
color:#444;
border:solid #000;
border-width:0 1px;
}
#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover {
color:#000;
background:#ccc;
/* background:#BCD;
*/}
.column {
float:right;
/* display:inline; prevent IE margin doubling */
width:360px;
padding-top:1em;
margin-right:60px;
text-align:left;
top:440px;
}
.column p {
padding-bottom:1em;
}
.quoteBox {
width:214px;
margin:0.5em auto 0;
padding-bottom:20px;
font:normal 14px/16px arial,helvetica,sans-serif;
color:#FFF;
background:#0E5EBE url(images/quoteBox.png) bottom right no-repeat;
}
.logoHolder{
width:72px;
height: 90px;
position:absolute;
top:289px;
left:354px;
margin-left:0px;
overflow: visible;
visibility: visible;
}
.quoteBox span {
display:block;
padding:6px 8px 0;
text-align:center;
background:#0E5EBE url(images/quoteBox.png) top left no-repeat;
}
h2 {
margin-bottom:0.4em;
font:bold 120%/120% arial,helvetica,sans-serif;
}
h2.standout {
padding:4px 8px;
color:#FFF;
background:#0E5EBE;
}
.schoolName span {
padding-bottom:1em;
top:205px;
}
#events {
list-style:none;
text-align:center;
padding-bottom:1em;
}
#footer {
clear:both;
padding:0.5em;
background:#DCB000;
}
.plate {
display:block;
margin:0 auto 0.5em;
}
Well, from the code you just posted I can see why you are having issues, you went back to trying to use the IMG tag for non-content images. Images that shouldn’t even be present when CSS is disabled from my way of thinking. There’s a REASON I didn’t put them in the markup as you are attempting to do, and instead designed it for images off graceful degradation.
This:
<div id="bannerHolder"><img src="images/stjosephbanner.jpg" alt="" width="900" height="208" /></div>
<div class="schoolName" id="schoolName"><img src="images/schoolnameandslogan.gif" alt="St.XXXXXXXXXXXXXXXXXXXX School" width="808"/></div>
<div>
<ul id="mainMenu">
<li><span class="logoHolder"><img src="images/schoollogo.gif" alt="Logo" width="72" height="90" /></span>
<div class="logoHolder" id="logoHolder"></div>
<a href="#">Curriculum</a></li>
I would never, EVER use IMG tags on any of those, nor would I be wasting DIV’s around them for no good reason, NOR would I be even trying to absolute position any of the stuff you’ve added in the CSS. You put the elements in flow, you use margins, padding and floats to place them, NOT absolute positioning.
The only absolute positioning the version I linked to uses is to place the image OVER the images-off/SEO/screen reader text version of the page. (To be brutally honest, I would take a giant axe to the images for text inside the orange banner, even if that means losing the fancy font and text-shadow… it’s not worth the headaches or the accessibility /FAIL/ – images for text BAD!)
Much less most of your containers like #bannerHolder isn’t even doing anything…
Oh, and you might try using CODE instead of QUOTE 
sigghh thanks. Is there a solution on how I can get rid of that thick white line? I just got up so maybe I missed it. I will read it again.
I also want to make the pages longer if I have to add new text. I can’t do any of that now. Any suggestions?
Thanks again.
Thank you. I will.
Here’s what I came up with :
http://www.cutcodedown.com/for_others/gettingBetter/template.html
as with all my examples the directory:
http://www.cutcodedown.com/for_others/gettingBetter
is unlocked for easy access to it’s bits and pieces. Valid XHTML 1.0 Strict, would be valid CSS 2.1 if not for a couple compatibility fixes for legacy versions of Firefox… tested working 100% IE 6, 7 & 8, Opera 10.6, FF 2 and 3, and the latest flavors each of Safari and Chrome. It also works in IE 5.5, though a few elements aren’t centered. (Oh noes). I also re-optimized a few images and changed how a few different sections work cutting down the code size by almost half, and even about 150k of images are gone.
No guarantees, but if I have time later tonight I’ll toss together a breakdown of how it works and the what/why on the choices I made both for markup and CSS.
Hi again,
May I ask that all references in code to my client be eliminated to the code posts.
Thanks.
Now I will read your responses.
deathshadow60 thank you for your responses! I appreciate your help.
Thanks
Normally we do not edit posts on requests as but I have edited it this once for you
In future though you should say beforehand if information is sensitive and that you don’t want it displayed in the forum to avoid the issue.
Well, you’ve got a laundry list of issues there.
First, you’ve got that stupid malfing mm_swap javascript nonsense doing CSS’ job… Which probably means you are using Dreamweaver meaning you’ve not learned anything USEFUL about writing HTML or CSS, and are weighed down with endless bad practices.
Bad practices like using tables for layout, presentational attributes that have no place in modern markup like ‘align’ or ‘width’, presentational images in the markup instead of where they belong which is in the CSS, use of images for large sections of text being an accessibility /FAIL/ and working in a transitional doctype which is for supporting old/outdated/half-assed coding techniques.
Probably not your fault, 90%+ of tutorials online are web rot and 95%+ of books were written like it was still 1998… But it ends up bad enough that one has to ask the question “With this much presentational non-semantic markup, what’s the CSS even there FOR?”. Further exacerbating the issue is that the HTML order doesn’t make the least bit of sense! You’ve got a image that’s between two of your div thrown in at the END, you’ve got stuff going back and forth between columns almost willy-nilly… Lemme guess, using the WYSIWYG part of Dreamweaver to boot? Would explain the use of STRONG and P tags around obvious heading elements.
Good cross browser workable CSS depends a good deal on having good clean semantic markup. For example:
<body onload="MM_preloadImages('images/buttonsOn/curriculumOn.gif','images/buttonsOn/aboutUsOn.gif','images/buttonsOn/admissionsOn.gif','images/buttonsOn/brochureOn.gif','images/buttonsOn/contactusOn.gif')">
<div id="theShell" align="center"><img src="images/stjosephbanner.jpg" alt="St.Joseph School Banner" width="900" height="209" /></div>
<div id="shellTwo" align="center">
<table width="100%"border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="45%" valign="middle" align="center"><img src="images/schooltitle.gif" alt="School Title" width="248" height="36" /></li>
<td width="5%" align="center" valign="middle"> </li>
<td width="50%" align="center" valign="middle"><img src="images/schoolslogan.gif" alt=" Slogan" width="248" height="36" /></li>
</tr>
</table>
</div>
That javascript in BODY is doing CSS’ job. There is NO reason to even be using a table there, the images are for text which means either use text and say “screw the fancy font”, or use an image replacement technique like gilder-levin there for accessibility. Being this is for a SCHOOL, accessibility may take precidence over some fancy font.Oh, and you never close <head>
If I was writing that same section for that exact same appearance, my HTML would look like this:
</head><body>
<div class="pageWrapper">
<h1>
<span>Replacement Text <span></span></span>
<small>Replacement Text <span></span></small>
</h1>
The empty nested spans would be for applying a gilder-levin style image replacement, the span becoming your images and placed over the text version. This way search engines and screen readers get meaningful text, while your screen users get the pretty image version.
The #main area is similaryly plagued with a table for nothing, compounded by javascript for nothing… I’d approach that one of two ways… the first would be to say to blazes with using images there… and marking it up PROPERLY as what a menu is, a LIST. That school logo image I wouldn’t even have in the markup and instead apply it as a background to the list inside some bottom padding.
Basically first approach:
<ul>
<li><a href="#">Curriculum</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Admissions</a></li>
<li><a href="#">Brochure</a></li>
</ul>
Second approach would add classes and gilder levin hooks, which frankly I don’t think I’d bother with given what you are doing for styling. (which is basically nothing)
In general, if I wrote that same page the HTML would look something like this (+/-2%)
<!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"
lang="en"
xml:lang="en"
><head>
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>
<meta
http-equiv="Content-Language"
content="en"
/>
<link
type="text/css"
rel="stylesheet"
href="screen.css"
media="screen,projection,tv"
/>
<title>
Title
</title>
</head><body>
<div id="pageWrapper">
<h1>
<span>heading<span></span></span>
<small>Blurb<span></span></small>
</h1>
<ul id="mainMenu">
<li><a href="#">Curriculum</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Admissions</a></li>
<li><a href="#">Brochure</a></li>
</ul>
<div class="column">
<img src="images/frontofschool.jpg" alt=" School" width="292" height="194" />
<h2 class="quoteBox"><span>Upcoming Events<span></span></span></h2>
<ul id="events">
<li>Events get posted here 09/27/2010</li>
<li>Events get posted here 12/14/2010</li>
</ul>
<h2>Discover excellence xxxxxxxxxxxx xxxxxxx xxxxxxxxxxx.</h2>
<p>
Lorem ipsum text ...........
</p><p>
Lorem ipsum text ............
</p>
<!-- .column --></div>
<div class="column">
<h2 class="standout">We Look Forward to Hearing From You</h2>
Welcome Lorem ipsum text ...........<br />
address <br />
New York<br />
Phone:01 01 0101<br />
Fax: 123-123-123<br />
Email: <a href="mailto:.com">Principal@.com</a>
<h2>Preparing leaders of competence, compassion and character.</h2>
<img
src="images/childrendownslide.jpg"
alt="Children on slide"
class="plate"
/>
<p>
Lorem ipsum text ...........
</p>
<!-- .column --></div>
<div id="footer">
Lorem ipsum text ...........<br />
Lorem ipsum text ...........<br />
<!-- #footer --></div>
<!-- #pageWrapper --></div>
</body></html>
I’ll see if I can belt out the CSS that would go with that as well in a hour or so (after dinner) for you to show you the difference in approach. CSS is only as good as the markup it’s applied to, and in your case you had all the wrong markup for using CSS in the first place.