Website issues with IE8

Question

4.00/5 (1 vote)

See more:

Hi. First off, I'm fairly new with HTML and CSS. Keep that in mind. I'm no professional.

Here is a link to the site I've created for a local artist to their specifications: www.bransart.com

I've tested the site using the following: IE9, IE10, Mozilla Firefox, Google Chrome, and everything looks okay.

In IE8 a problem occurs. The text describing the artist is *not* supposed to flow into the picture of the little girl. How do I stop that from happening? As I said before, it looks okay in the browsers I tested except IE8.

Here is a snippet of the CSS used to style the

containing the descriptive content.

CSS

#content-nav {
    height: 320px; /*IMPORTANT ----- needs to be defined or page jump occurs ----- */
        width: auto;
        margin: 0px 0px 20px 0px;
        padding: 0px;
        background: #FFFFFF url(background-girl.png) top right no-repeat;
        clear: both;
        overflow: hidden;

        /* rounded edges */
        border-radius: 5px 5px 5px;
        webkit-border-radius: 5px 5px 5px;
        -moz-border-radius: 5px 5px 5px;

        /* drop shadow */
        box-shadow: 0 0 5px 5px #C2C2C2;
        -webkit-box-shadow: 0 0 5px 5px #C2C2C2;
        -mox-box-shadow: 0 0 5px 5px #C2C2C2;
}

section.content{
    heigth: auto;
    width: 65%;
    margin: 0px;
    padding: 20px 0px 0px 20px;
    line-height: 23px;
    text-align: justify;
    color: #515151;
    overflow: hidden;
}

section.content p.first:first-child:first-letter {
    font-size: 72px;
    padding: 10px;
    float: left;
    line-height: 35px;
}

section.content p.indent {
    text-indent: 20px;
}

If more clarification is needed or I've posted in the wrong category please let me know! Thanks.

Posted 23-Jun-12 8:32am

Donald F. Smith Jr.

Updated 23-Jun-12 9:08am

v4

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

AmitKumar89 · Answer 1 · 2012-06-24T17:53:00

Hi,
At first let me tell you one thing, Rounded Edges will not work through css in IE8.
May be your are getting problem because of these code:

CSS

/* rounded edges */
border-radius: 5px 5px 5px;
webkit-border-radius: 5px 5px 5px;
-moz-border-radius: 5px 5px 5px;

/* drop shadow */
box-shadow: 0 0 5px 5px #C2C2C2;
-webkit-box-shadow: 0 0 5px 5px #C2C2C2;
-mox-box-shadow: 0 0 5px 5px #C2C2C2;

You just use rounded corner extender of ajax to make it solve.
All the best.
--AK

AshishChaudha · Answer 2 · 2012-06-24T18:22:00

Solution 2

CSS

section.content p.first:first-child:first-letter {
    font-size: 72px;
    padding: 10px;
    float: left;
    line-height: 35px;
    width:400px;
}

set width according to your requirement..

It will help you.

Note: dont forget to test in every browser while making your website compatible for all browsers.

Thanks
Ashish

Posted 24-Jun-12 18:22pm

AshishChaudha

Comments

Ubaid ur Rahman IT 25-Jun-12 1:42am

Dear Where should we write this solution 2 code....i mean in which page. Bcoz am also facing same problem with browsers.

AshishChaudha 25-Jun-12 1:47am

Dear Ubaid,

Are you using CSS?? or using inline style..you have to show your code exactly what you are doing..other wise how could anyone give solution??