CODEWITHSUNDEEP
cssinternet-explorer
kia4567
kia4567

Reputation: 603

Styling for IE 7

I have a browserstack account and looked at my newish website I'm making for a client, however I've never really been one for developing for older browsers. I don't need it to be perfectly laid out in older browsers but it would be nice to at least have it viewable. I viewed it on Windows XP on IE 7.

Here is the website link

I've provided a screenshot below enter image description here

This the HTML for the 3 boxes that should be under the banner

<div id="ez-home-middle-container" class="ez-home-container-area clearfix">

<div id="ez-home-middle-1" class="widget-area ez-widget-area one-third first">
<section id="black-studio-tinymce-4" class="widget widget_black_studio_tinymce"><div class="widget-wrap"><h4 class="widget-title widgettitle">SEO</h4>
Strategic approach, driving traffic with Search Engine Optimization.
<div class="su-button-center">Read More</div></section>
</div><!-- end #ez-home-middle-1 -->

<div id="ez-home-middle-2" class="widget-area ez-widget-area one-third">
<section id="black-studio-tinymce-6" class="widget widget_black_studio_tinymce"><div class="widget-wrap"><h4 class="widget-title widgettitle">Website Audits &amp; Competitive Analysis</h4>
Online health check &amp; how you measure up to your competitors.

<div class="su-button-center"> Read More</div></section>
</div><!-- end #ez-home-middle-2 -->

<div id="ez-home-middle-3" class="widget-area ez-widget-area one-third">
<section id="black-studio-tinymce-5" class="widget widget_black_studio_tinymce"><div class="widget-wrap"><h4 class="widget-title widgettitle">Local Search</h4>


<div class="su-button-center">Read More</div></section>
</div><!-- end #ez-home-middle-3 -->

</div><!-- end #ez-home-middle-container -->

Here is the CSS

div#ez-home-middle-container {
    margin-top: 27em;
}

#ez-home-middle-1, #ez-home-middle-2, #ez-home-middle-3 { 
    position: relative; 
    text-align: center; 
    background: url(images/melissa-box-bg.jpg) repeat; 
    padding: 1.5em 2em; 
    border-top:.3em solid #d0d0d0; 
    min-height: 250px; 
    margin-bottom: 1.5em;
}

#ez-home-middle-1 .su-button span, 
#ez-home-middle-2 .su-button span, 
#ez-home-middle-3 .su-button span { 
    width: 100px; 
    position: absolute; 
    bottom: 1em; 
    left: 50%; 
    margin-left: -70px;
}

Here is my JSFiddle - http://jsfiddle.net/yagbsfua/

It's kind of like it's ignoring the margin-top:27em on the #ez-home-middle-container and then the widths are too big?

Another small thing. Does IE have a bug with the display:none; property? It shows up in both IE 7 & IE 8. My "=Menu" isn't supposed to show until it hits 768px wide (but right now it's always visible.

Thanks for any guidance or help!

UPDATE:

SORRY for the delay in communication with the few of you who are trying to help out! Mr. Annoymous had a great suggestion about floatign the ex-home-container so that made it follow under the banner but the widths of the #ez-home-middle sections aren't fitting in that row still in IE 7, IE 8 it looks great but is there something else I can do for IE 7? I can put in the conditional stylesheet for IE 7 in the header and then have the widths smaller for IE 7 right?

This is what it looks like in IE 7 with the ez-home-container floated (the width: 27% didn't seem to do anything though. I of course removed it because it made those sections smaller all around (or is that where the condtional stylehseet come in?)

enter image description here

As for the suggestion by pchan-ie, the widths of the middle sections are still weird, but as you suggested I should do a conditional stylesheet which is something I'll be looking into do very soon.

ALSO, what happened with the bounty, do I need to still give it to someone or did that automatically o to someone when it expired? If I can get this corrected I'll still give more points to who can finish this up with me, extra points if I can get this "=Menu" issue fixed as well.

Upvotes: 1

Views: 315

Answers (3)

user488187
user488187

Reputation:

Target the following to IE7 using the Paul Irish approach or some other:

  1. IE7 has been known to ignore top margin on element following an absolutely positioned element. You can work around this by using IE7-specific style to add padding to the top of the surrounding container:

    .ez-home-middle-container { padding-top: 27em; }

  2. IE7 does not support border-box, so you need an IE7-specific style to adjust the width of the .widget-areas to compensate for the padding. The most robust is probably to make the left and right padding also a percentage, e.g:

    .ex-widget-area { width: 26%; padding: 1.5em 2.5%; }

Upvotes: 1

tizzick
tizzick

Reputation: 5532

I wasnt able to reproduce this error locally, so don't know if this will work. It looks there are two issues, the first is the ez-home-middle-1, ez-home-middle-2, ez-home-middle-3 divs are not respecting the margin of their container ez-home-middle-container. The second problem is the widths of ez-home-middle-1, ez-home-middle-2, ez-home-middle-3 are more than one third wide of their container that defines their maximum total width, causing the browser to wrap them inside their container. First problem You could try removing the position:relative style from the ez-home-middle-1, ez-home-middle-2, ez-home-middle-3 tags. I believe it is ignoring the margin and setting the div with top:0 by default.

see updated ez-home-middle css below.

If that didn't work try removing the margin from the container and setting the relative top attribute of the ez-home-middle-1, ez-home-middle-2, ez-home-middle-3 tages to 432px or 27em. If you do this you will also need to set the top of the ez-home-bottome-container as that will jump up.

Second issue There appears to be more that one css class defining width. IE7 is using the right one but you should remove the class with 100%. There are several other classes like one-sixth and one-half that have the same problem.

.one-third {
    MARGIN: 0px; WIDTH: 100%
}
.one-third {
    WIDTH: 31.62%
}

The site-inner class defines the width that the three ez-home-middle boxes must fit into as 800px. You will need to change the width of these boxes to be less that 800px/3 or 260px. There width is set as 31.6% but IE7 reads that as 31.6% of the total page width not the container width. I think the width is coming from the one-third class, this should be removed from the div and a new width specified in the ez-home-middle classes.

this is the css with the relative position for issue one removed and width for issue 2 added.

#ez-home-middle-1 {
    PADDING-RIGHT: 2em; BORDER-TOP: #d0d0d0 0.3em solid; PADDING-LEFT: 2em; MIN-HEIGHT: 250px; BACKGROUND: url(images/melissa-box-bg.jpg); MARGIN-BOTTOM: 1.5em; PADDING-BOTTOM: 1.5em; PADDING-TOP: 1.5em; TEXT-ALIGN: center; width:260px;
}
#ez-home-middle-2 {
    PADDING-RIGHT: 2em; BORDER-TOP: #d0d0d0 0.3em solid; PADDING-LEFT: 2em; MIN-HEIGHT: 250px; BACKGROUND: url(images/melissa-box-bg.jpg); MARGIN-BOTTOM: 1.5em; PADDING-BOTTOM: 1.5em; PADDING-TOP: 1.5em; TEXT-ALIGN: center; width:260px;
}
#ez-home-middle-3 {
    PADDING-RIGHT: 2em; BORDER-TOP: #d0d0d0 0.3em solid; PADDING-LEFT: 2em; MIN-HEIGHT: 250px; BACKGROUND: url(images/melissa-box-bg.jpg); MARGIN-BOTTOM: 1.5em; PADDING-BOTTOM: 1.5em; PADDING-TOP: 1.5em; TEXT-ALIGN: center; width:260px;
}

The html minus the one-third classes

<DIV class="ez-home-container-area clearfix" id=ez-home-middle-container>
<DIV class="widget-area ez-widget-area first" 
id=ez-home-middle-1><SECTION class="widget widget_black_studio_tinymce" 
id=black-studio-tinymce-4>
<DIV class=widget-wrap>
<H4 class="widget-title widgettitle">SEO</H4>
<DIV class=textwidget><A title="Search Engine Optimization (SEO)" 
href="http://melissamerriam.com/onlinedraft/onlinedraft/seo/">Strategic 
approach, driving traffic with Search Engine Optimization.</A> 
<DIV class=su-button-center><A class="su-button su-button-style-soft" 
style="BORDER-LEFT-COLOR: #b7b7b7; BORDER-BOTTOM-COLOR: #b7b7b7; COLOR: #505050; BORDER-TOP-COLOR: #b7b7b7; BACKGROUND-COLOR: #e5e5e5; BORDER-RIGHT-COLOR: #b7b7b7; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px" 
href="http://melissamerriam.com/onlinedraft/onlinedraft/seo/" target=_self><SPAN 
style="PADDING-RIGHT: 20px; PADDING-LEFT: 20px; FONT-SIZE: 16px; BORDER-LEFT-COLOR: #ededed; BORDER-BOTTOM-COLOR: #ededed; PADDING-BOTTOM: 0px; COLOR: #505050; BORDER-TOP-COLOR: #ededed; LINE-HEIGHT: 32px; PADDING-TOP: 0px; BORDER-RIGHT-COLOR: #ededed; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; text-shadow: none; -moz-text-shadow: none; -webkit-text-shadow: none">Read 
More</SPAN></A></DIV></DIV></DIV></SECTION></DIV><!-- end #ez-home-middle-1 -->
<DIV class="widget-area ez-widget-area " id=ez-home-middle-2><SECTION 
class="widget widget_black_studio_tinymce" id=black-studio-tinymce-6>
<DIV class=widget-wrap>
<H4 class="widget-title widgettitle">Website Audits &amp; Competitive 
Analysis</H4>
<DIV class=textwidget><A title="Website Audits &amp; Evaluations" 
href="http://melissamerriam.com/onlinedraft/onlinedraft/website-audits/">Online 
health check &amp; how you measure up to your competitors.</A> 
<DIV class=su-button-center><A class="su-button su-button-style-soft" 
style="BORDER-LEFT-COLOR: #b7b7b7; BORDER-BOTTOM-COLOR: #b7b7b7; COLOR: #505050; BORDER-TOP-COLOR: #b7b7b7; BACKGROUND-COLOR: #e5e5e5; BORDER-RIGHT-COLOR: #b7b7b7; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px" 
href="http://melissamerriam.com/onlinedraft/onlinedraft/website-audits/" 
target=_self><SPAN 
style="PADDING-RIGHT: 20px; PADDING-LEFT: 20px; FONT-SIZE: 16px; BORDER-LEFT-COLOR: #ededed; BORDER-BOTTOM-COLOR: #ededed; PADDING-BOTTOM: 0px; COLOR: #505050; BORDER-TOP-COLOR: #ededed; LINE-HEIGHT: 32px; PADDING-TOP: 0px; BORDER-RIGHT-COLOR: #ededed; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; text-shadow: none; -moz-text-shadow: none; -webkit-text-shadow: none">Read 
More</SPAN></A></DIV></DIV></DIV></SECTION></DIV><!-- end #ez-home-middle-2 -->
<DIV class="widget-area ez-widget-area " id=ez-home-middle-3><SECTION 
class="widget widget_black_studio_tinymce" id=black-studio-tinymce-5>
<DIV class=widget-wrap>
<H4 class="widget-title widgettitle">Local Search</H4>
<DIV class=textwidget><A title="Local Search Services" 
href="http://melissamerriam.com/onlinedraft/onlinedraft/local-search/">Be 
prominent in you local market.</A> 
<DIV class=su-button-center><A class="su-button su-button-style-soft" 
style="BORDER-LEFT-COLOR: #b7b7b7; BORDER-BOTTOM-COLOR: #b7b7b7; COLOR: #505050; BORDER-TOP-COLOR: #b7b7b7; BACKGROUND-COLOR: #e5e5e5; BORDER-RIGHT-COLOR: #b7b7b7; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px" 
href="http://melissamerriam.com/onlinedraft/onlinedraft/local-search/" 
target=_self><SPAN 
style="PADDING-RIGHT: 20px; PADDING-LEFT: 20px; FONT-SIZE: 16px; BORDER-LEFT-COLOR: #ededed; BORDER-BOTTOM-COLOR: #ededed; PADDING-BOTTOM: 0px; COLOR: #505050; BORDER-TOP-COLOR: #ededed; LINE-HEIGHT: 32px; PADDING-TOP: 0px; BORDER-RIGHT-COLOR: #ededed; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; text-shadow: none; -moz-text-shadow: none; -webkit-text-shadow: none">Read 
More</SPAN></A></DIV></DIV></DIV></SECTION></DIV><!-- end #ez-home-middle-3 --></DIV><!-- end #ez-home-middle-container -->

That is all I can do without the files on my local pc. I tried to download from your site but IE7 would not render it with the same issues as your onlinedraft page. That meant I could not test my fix.

When you implement the change to your stylesheets you should enclose them in IE conditional stylesheet options. Like was mentioned in the comments to your question.

Upvotes: 1

Alexander O&#39;Mara
Alexander O&#39;Mara

Reputation: 60517

Your issue appears to be caused by having imbalanced tags, specifically the <div class="widget-wrap"> tags are not being closed before the </section> tags. Browsers error-correct imbalanced tags differently, and IE7 and IE8 appears to be getting tripped up on this.

Corrected HTML:

<div id="ez-home-middle-container" class="ez-home-container-area clearfix">

    <div id="ez-home-middle-1" class="widget-area ez-widget-area one-third first">
        <section id="black-studio-tinymce-4" class="widget widget_black_studio_tinymce">
            <div class="widget-wrap">
                <h4 class="widget-title widgettitle">SEO</h4> Strategic approach, driving traffic with Search Engine Optimization.
                <div class="su-button-center">Read More</div>
            </div>
        </section>
    </div>
    <!-- end #ez-home-middle-1 -->

    <div id="ez-home-middle-2" class="widget-area ez-widget-area one-third">
        <section id="black-studio-tinymce-6" class="widget widget_black_studio_tinymce">
            <div class="widget-wrap">
                <h4 class="widget-title widgettitle">Website Audits &amp; Competitive Analysis</h4> Online health check &amp; how you measure up to your competitors.
                <div class="su-button-center"> Read More</div>
            </div>
        </section>
    </div>
    <!-- end #ez-home-middle-2 -->

    <div id="ez-home-middle-3" class="widget-area ez-widget-area one-third">
        <section id="black-studio-tinymce-5" class="widget widget_black_studio_tinymce">
            <div class="widget-wrap">
                <h4 class="widget-title widgettitle">Local Search</h4> Be prominent in you local market.
                <div class="su-button-center">Read More</div>
            </div>
        </section>
    </div>
    <!-- end #ez-home-middle-3 -->

</div>
<!-- end #ez-home-middle-container -->

Before:

before

After:

after

Upvotes: 1

Related Questions