PDA

View Full Version : IE7 Displaying page incorrectly (6&8 ok)



hawkeye619
Apr 23rd, 2010, 01:07 AM
I snagged a free template and I am trying to get it up and running. The problem I am having is that the page is not displaying correctly (text overlaps a portion of the page) in IE7 but looks fine in IE8 and IE6. I think the problem I am having is in this section of the CSS:

/* =SUB HEADER
----------------------------------------------- */
#sub-header { background: url('../images/layout/subheader.png') bottom repeat-x; padding-bottom: 22px; position: relative; z-index: 1000; }
#sub-header-inner { background: url('../images/layout/subheader_inner.gif') top repeat-x; height: 187px; }
#sub-header-inner img { margin: 14px 38px 0 53px; float: left; }
#sub-header-inner .content { background: url('../images/layout/subheader_content.gif') right top no-repeat; width: 655px; float: left; padding-top: 52px; margin-top: 1px; }
#sub-header-inner .content h2 { font-size: 30px; font-weight: bold; color: #666; margin: -10px 0 12px 0; }
#sub-header-inner .content h2 strong { color: #888; }
#sub-header-inner .content p { font-size: 12px; color: #666; line-height: 1.6; }


The applicable section of the HTML that is not displaying correctly is:


<!-- //#header -->


<div id="sub-header">
<div id="sub-header-inner">
<div class="container"> <img src="images/other/subheader_pic.jpg" alt="" />

<div class="content">
<h2>Nam tempus <strong>consequat</strong> sapien</h2>
<p>Samus sit amet, consectetur adipiscing elit. Nam tempus consequat sapien, cras eu quam at felis placerat
eleifend. Maecenas ullamcorper ornare tellus. Maecenas molestie porta mi. Fusce mattis, neque sit amet ullamcorper gravida, lorem est dapibus ante, ut scelerisque arcu nulla sed lorem. Sit donec laoreet sollicitudin nisl. Donec quis pede. Integer at risus quis felis ultricies vestibulum.</p>
</div>

</div>
</div>
</div>
<!-- //#sub-header -->


<div id="content" class="clearfix">
<div class="container">

<div class="column wide">
<h2>Sit amet consectetur adispicing elit</h2>
<p>Suspendisse et tortor at tellus ornare accumsan. Proin pellentesque diam at nibh. Phasellus sit amet quam.</p>
<div class="image-holder"><img src="images/other/image-1.jpg" alt="" /></div>
<p>Nam sit amet est. Morbi in dui sed dui gravida acilisis. Curabitur orci lectus, pharetra vel, nterdum non, pulvinar non, eros. In tristique aoreet ante. Pellentesque eu metus. Proin pellentesque diam at nibh.</p>


I included a screen shot so you can see what I am referring. I think I know I need a CSS hack/filter to get this displaying correctly, but I haven't figured it out. Any help a guru can provide is greatly appreciated!

met
Apr 23rd, 2010, 01:21 AM
try adding

overflow:auto;

to

#sub-header-inner { }

a link to the page would be handy

hawkeye619
Apr 23rd, 2010, 01:41 AM
Thanks for the fast reply. That solved one problem, but caused another. Nothing is overlapping, but I now have a scroll bar to read part of the text. the page is purple-chopper.com.

met
Apr 23rd, 2010, 01:44 AM
overflow:hidden instead then

edit - that removes the scrollbar, but you have absolutely massive text in that div...what are you trying to achieve exactly?

hawkeye619
Apr 23rd, 2010, 01:54 AM
That was the default on the template.

hawkeye619
Apr 23rd, 2010, 02:05 AM
Hidden, well, hides the text I need.

I am using KompoZer and it seems to want to put in <strong> hundreds of times, even when I delete. I don't think that is related to this problem, but just in case you noticed that tag. I'll delete in a different editor later.

met
Apr 23rd, 2010, 02:16 AM
well whatevers generating that code is doing a horrible job at it ~



<h1 style="font-weight: bold; text-align: left; color: rgb(204, 51, 204); font-family: Comic Sans MS;"><big><big><big><big><big><span style="left: 6px; width: 249px;"><small style="font-style: italic;"><small><a name="Purple_Chopper_LLC_Deland"><big><big style="color: rgb(172, 57, 172);"><big>&nbsp;&nbsp; Purple
Chopper, LLC</big></big></big><


wayyy too many nested tags

the template is restricted to ~190px in that white area, so if you have too much content its just going to overflow all over the place.

Remove all those inline style tags and see if that improves the design to what you're after. bear in mind i don't know what you want to achieve, if you have a screenshot or something of how you'd like the page to look i can probably help more

hawkeye619
Apr 23rd, 2010, 02:37 AM
Here is a screen shot from my computer. This is what it looks like on IE8 or IE6.