Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Feb 2009
    Posts
    23
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question IE compatability problem?

    I changed something in my code and all of a sudden the left half of my rounded corners on my main content box are not showing up. They show up fine in Firefox and other browsers, but never in IE.

    Can someone else take a look at this and maybe offer some advice? It would be much appreciated! I am relatively new to CSS so it would not surprise me if it was something simple. Thank you!

    URL: www.fellowcitizensmusic.com/Music.html

    my CSS:
    @charset "utf-8";
    body {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    background: #FFF;
    text-align: center;
    color: #000000;
    margin: 0;
    padding: 0;
    font-family: Verdana, Geneva, sans-serif;
    }

    .oneColElsCtrHdr #container {
    border: 1px solid #000000;
    text-align: left; /* this overrides the text-align: center on the body element. */
    background-color: #FFF;
    margin: auto;
    }
    .oneColElsCtrHdr #header h1 {

    }
    .oneColElsCtrHdr #mainContent {
    background-color: #CCC;
    padding: 0 40px;
    }

    #mainContent {
    font-family: "Rockwell Extra Bold";
    font-size: 100%;
    font-style: normal;
    color: #FFF;
    text-align: center;
    float: none;
    clear: none;
    position: absolute;
    top: 210px;
    left: 0px;
    }

    .oneColElsCtrHdr #footer {
    padding: 0 10px;
    background:#DDDDDD;
    }
    .oneColElsCtrHdr #footer p {
    margin: 0;
    padding: 10px 0;
    }#header {
    background-color: #FFF;
    position: absolute;
    top: 0px;
    background-repeat: repeat-x;
    left: 0px;
    width: 100%;
    height: 60px;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    background-image: url(../images/Header_Bg2.jpg);
    overflow: hidden;
    }
    #header ul {
    list-style-type: none;
    font-size: 20px;
    color: #FFF;
    font-weight: bold;
    position: absolute;
    top: 0;
    clear: right;
    padding-left: 2.5em;
    left: 40px;
    float: left;
    }
    #header li {
    display: inline;
    margin-right: 1em;
    overflow: hidden;
    }
    #header a {
    font-size: 100%;
    color: #FFF;
    text-decoration: none;
    padding-top: 2px;
    padding-right: 15px;
    padding-bottom: 2px;
    padding-left: 15px;
    }


    #masthead {
    background-position: center;
    position: absolute;
    width: 100%;
    left: 0px;
    top: 60px;
    }
    .box {
    background-color: #000;
    clear: left;
    }
    .boxtop {
    background-image: url(../images/ne.gif);
    background-repeat: no-repeat;
    background-position: right top;
    }
    .boxtop div {
    background-image: url(../images/nw.gif);
    background-repeat: no-repeat;
    background-position: left top;
    height: 50px;
    font-size: 0px;
    }
    .boxbottom {
    background-image: url(../images/se.gif);
    background-repeat: no-repeat;
    background-position: right bottom;
    }
    .boxbottom div {
    font-size: 0px;
    height: 50px;
    background-image: url(../images/sw.gif);
    background-repeat: no-repeat;
    background-position: left bottom;
    }
    .boxcontent {
    padding: 0px 50px 0px 50px;
    }

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Fix all errors in your markup first, see http://validator.w3.org/check?uri=ht...Inline&group=0

    btw, I don't see any difference in the display of FF and IE(6)
    Last edited by abduraooft; 02-26-2009 at 09:52 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Feb 2009
    Posts
    23
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you I will try that first!

    IE7 is where i am displaying the problem, it is completely possible it is only my computer I suppose.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Have a try by
    Code:
    .boxtop {/*holder.css (line 107)*/
    background-image:url(../images/ne.gif);
    background-position:right top;
    background-repeat:no-repeat;
    text-align:left;
    }
    .boxtop div {/*holder.css (line 112)*/
    background-image:url(../images/nw.gif);
    background-position:left top;
    background-repeat:no-repeat;
    font-size:0;
    height:50px;
    width:50px;
    float:left;
    }
    and the same for your bottom divs' styles
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Regular Coder
    Join Date
    Jul 2008
    Location
    UK
    Posts
    116
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Looks fine in IE7 to me as well

  • #6
    New Coder
    Join Date
    Feb 2009
    Posts
    23
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Have a try by
    Code:
    .boxtop {/*holder.css (line 107)*/
    background-image:url(../images/ne.gif);
    background-position:right top;
    background-repeat:no-repeat;
    text-align:left;
    }
    .boxtop div {/*holder.css (line 112)*/
    background-image:url(../images/nw.gif);
    background-position:left top;
    background-repeat:no-repeat;
    font-size:0;
    height:50px;
    width:50px;
    float:left;
    }
    and the same for your bottom divs' styles
    I tried out what you said here and it made everything work, except then the top right corner was out for some reason. I then kept the other settings you gave me but turned off the float settings in each of the divs, now it is showing up perfectly!

    Thanks again for the quick and pointed response, it is much appreciated!

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Thanks again for the quick and pointed response, it is much appreciated!
    However I seriously recommend you to follow my first comment
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #8
    New Coder
    Join Date
    Feb 2009
    Posts
    23
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I went through the validation and looked at what it brought up, I tried fixing one of the things it said and it actually caused a problem so I backtracked it. As well as most of the problems it brings up are actually having to do with the flash on that page and it is working fine?


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •