Thank you for your response. The issue seems to be related more to the image
in the body section: (which is currently remmed out for testing purposes)
body
{
background-position: right;
height: 100%;
/*background-image: url('../Images/whiteroseborder.jpg');
background-repeat: repeat-y;*/
margin:0;
padding:0;
}
The problem I am now having is that the "middle" column in IE is now
floating over to the left-hand side in IE8 (only!) See here:
http://s105.photobucket.com/albums/m229/ayliea/Programming%20Problems/?action=view¤t=middlecolumnerror.jpg
As you can see, with the image gone from the right-hand column, it is no
longer over flowing, but now my middle column (in IE only!) is flowing over
into the right hand column. The right column is set to height 100%:
#section-navigation
{
float: left;
width: 16%;
height: 100%;
padding: 20px 0;
margin: 0 2%;
display: inline;
z-index: 5;
}
Any suggestions?
Thanks very much for the help, it is very appreciated.
Coleen
On Fri, Mar 25, 2011 at 7:59 AM, HallMarc Websites <
[email protected]> wrote:
>
>
> > -----Original Message-----
> > From: [email protected] [mailto:
> [email protected]
> > discuss.org] On Behalf Of Coleen Holley
> > Sent: Friday, March 25, 2011 8:53 AM
> > To: [email protected]
> > Subject: [css-d] Column overflow problem in IE8...
> >
> > I am re-vamping a website and am having some issues with my right-column
> > overflowing in IE8. Here's a link to see the screen shot: Sidebar
> Overflow
> > problem<%20http://i105.photobucket.com/albums/m229/ayliea/Programmi
> > ng%20Problems/IE8SidebarError.jpg>
> >
> > Here's my .css code:
> >
> > #aside
> > {
> > background-color: transparent;
> > width: 18%;
> > height: 100%;
> > display: inline;
> > float:right;
> > margin: 0 10px 10px 10px;
> > vertical-align:top;
> > }
> >
> > #aside h3 { margin: 0; }
> >
> > #sidebar
> > {
> > position: absolute;
> > top: 150px;
> > width:17%;
> > padding-left: 15px;
> > }
> >
> > and here's my HTML for that section:
> > <div id="aside"">
> > <br />
> > <h3>
> > Mother's tell their stories...
> > </h3><br />
> > <form target="searchwindow"
> action="../../cgi-sys/entropysearch.cgi">
> > <h3>Search Our Site</h3><br />
> > <input name="query" /> <input type="hidden"
> > value="ahc" name="user" />
> > <input type="hidden"
> > value="http://aheartbreakingchoice.com"; name="basehref" />
> > <input type="hidden" value="default" name="template"
> />
> > <input type="submit" value="Search" />
> > </form><br />
> > <div id="sidebar">
> > <h3>I told her how sorry...
> > <br />~Brokenhearted Mother</h3><br /><br />
> > </div>
> > </div>
> >
> > This seems to be working just fine in Firefox, Chrome and Opera, but of
> > course IE never plays by the same rules as everyone else. Can anyone give
> > me a little help with this issue? Any help would be much appreciated.
> >
> > Thanks,
> >
> > Coleen
> > __________________________________________________________
> > ____________
> > css-discuss [[email protected]] http://www.css-
> > discuss.org/mailman/listinfo/css-d
> > List wiki/FAQ -- http://css-discuss.incutio.com/ List policies --
> http://css-
> > discuss.org/policies.html
> > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
> >
> >
> > __________ Information from ESET Smart Security, version of virus
> > signature database 5984 (20110325) __________
> >
> > The message was checked by ESET Smart Security.
> >
> > http://www.eset.com
> >
>
> I see this so often, one of the first things you need in your CSS toolbox
> is
> a basic understanding of floats and padding/margins. This is where the
> focus
> needs to be.
>
> First, change the padding and margin in the body declarations to be
> padding:
> 0; margin:0;
> Next, in #primarycontent change the float to left then in #navdiv add
> clear:both;
> Also I see position: absolute in #sidebar change to position: relative;
> then
> you can easily position it. Remove the padding-left and the padding-right.
> Completely unnecessary.
>
> Once you start changing these you will see the #navdiv fall to the bottom
> of
> the page and your main content will move to the left closer to the sidebar.
>
> Looks like you have your work cut out for you. Start with these changes and
> then check what you have in the browsers.
>
> I will suggest a few sites to learn from:
> www.w3schools.com
> www.csszengarden.com
> http://meyerweb.com/
>
> That should be more than enough to get you on your way to understanding CSS
> design patterns.
>
> Thank you,
> Marc Hall
> HallMarc Websites
> 610.446.3346
> http://www.hallmarcwebsites.com/
>
> Spread the word about my services and earn money!
> Contact me for details.
>
>
>
>
>
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
