Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: CSS HTML
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.
 
#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
Edited 23-Jun-12 9:08am
v4
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

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:
/* 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
  Permalink  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

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
  Permalink  
Comments
Ubaid ur Rahman IT at 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 at 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??

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

  Print Answers RSS
0 Sergey Alexandrovich Kryukov 598
1 OriginalGriff 280
2 George Jonsson 258
3 CPallini 190
4 Animesh Datta 130
0 OriginalGriff 5,985
1 Sergey Alexandrovich Kryukov 5,341
2 CPallini 4,760
3 George Jonsson 3,400
4 Gihan Liyanage 2,522


Advertise | Privacy | Mobile
Web03 | 2.8.140916.1 | Last Updated 25 Jun 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100