Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS my website is broken in IE8

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #31523
    amelmgd
    Participant

    hello there
    i have been working on a website and i didn’t test it in IE till i finished the home page ( my bad )
    and when i tested it now it’s all over the place , it works in all the other major browsers
    this is my css code
    sorry it’s too long but just scan it and maybe you will tell me where is the problem!




    .header {
    width: 100%;
    height: 120px;
    background: url(images/bg_header.gif); }

    .logo {
    padding-top: 9px;
    width: 100px;
    height: 420px;
    position: absolute;
    top: 0;
    left: 100px; }

    #logostatment {
    position: absolute;
    top: 50px;
    left: 130px; }

    form {
    background: url(images/formBg.png);
    margin: 0px ;
    padding: 0px;
    width: 277px;
    height: 76px;
    position: absolute;
    top: 0px;
    left: 800px; }

    span#searchword {
    color: #c2c6ca;
    padding-left: 15px; }

    #searchimg {
    margin-top: 15px;
    position: relative;
    top: 3px; }

    .mainmenu {
    height: 47px;
    margin-right: 200px;
    padding: 0;
    margin-top: -10px; }

    #menu ul li {
    display: inline ;
    float: right;
    padding: 10px; }

    #menu ul li a {
    float: right;
    text-decoration: none;
    color: #6e6e6e;
    border-right: 1px #900;
    padding: 5px 5px 10px 5px; }

    #contact {
    padding-right: 10px;
    border: #000 4px; }

    #menu a:hover {
    background: #4c5964;
    color: #FFF;
    padding: 5px 5px 10px 5px; }

    .menu1 { border-right: 3px #C33; }

    .midcontent {
    margin: 0;
    padding: 0;
    background: #f4f4f4 url(images/MID.png);
    height: 285px; }

    h1#midcontenthead {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 30px;
    color: #424a55;
    font-weight: bold;
    width: 440px;
    position: absolute;
    top: 180px;
    left: 550px; }

    #firstpara {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: #90989e;
    width: 500px;
    position: absolute;
    top: 260px;
    left: 550px; }

    #midlinks {
    padding: 0;
    margin: 0;
    height: 25px;
    width: 335px;
    position: absolute;
    top: 360px;
    left: 600px; }

    #midlink1 {
    background: url(images/preporvect.png)no-repeat ;
    margin: 11px;
    text-decoration: none;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    padding: 5px 12px; }

    #midlink2 {
    background: url(images/next.png) no-repeat ;
    margin: 10px;
    text-decoration: none;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    padding: 5px 7px; }

    #midlink3 {
    background: url(images/viweprofile.png)no-repeat;
    margin: 10px;
    text-decoration: none;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    padding: 5px 10px; }

    #midlink1:hover ,#midlink2:hover,#midlink3:hover {
    color: #FFF;
    background: #CCC; }

    #midimage {
    position: relative;
    top: -180px;
    left: -400px; }

    #aftermid {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 700px;
    background: #fff; }

    #aftermid1 {
    width: 100%;
    height: 350px; }

    h2 {
    font: normal 30px Arial, Helvetica, sans-serif;
    color: #424a55;
    margin: 30px;
    margin-left: 200px; }

    #aftermipara1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    width: 340px;
    color: #656565;
    margin: 20px;
    margin-left: 200px; }

    #boldtext { font-weight: bold; }

    #aftermidheading3 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    margin: 20px;
    color: #646464;
    margin-left: 200px; }

    #aftermipara2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    width: 550px;
    color: #656565;
    margin: 20px;
    margin-left: 200px; }

    #linkaftermid1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #3f91b4;
    margin: 10px;
    position: relative;
    left: 180px;
    padding: 10px; }

    #linkaftermid1:before { content: url(images/linkdot.png); }

    #linkaftermid2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #3f91b4;
    margin: 10px;
    position: relative;
    left: 180px;
    padding: 10px; }

    #linkaftermid2:before { content: url(images/linkdot.png); }

    #iphoneicon {
    position: absolute;
    left: 800px;
    top: 450px; }

    #borderimg {
    position: relative;
    top: 400px;
    left: 290px; }

    #aftermid2 {
    width: 100%;
    height: 300px; }

    #aftermidheading1 {
    font: normal 30px Arial, Helvetica, sans-serif;
    color: #424a55;
    margin-top: 40px;
    margin-left: 250px; }

    #aftermidheading2 {
    font: normal 20px Arial, Helvetica, sans-serif;
    color: #424a55;
    margin-top: 40px;
    margin-left: 250px; }

    #aftermipara3 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    width: 570px;
    color: #656565;
    margin: 20px;
    margin-left: 250px; }

    #aftermipara4 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    width: 570px;
    color: #656565;
    margin-top: 50px;
    margin-left: 380px; }

    #iphonekeyboard {
    float: right;
    position: absolute;
    left: 100px;
    top: 890px; }

    #usbicon {
    position: relative;
    top: -50px;
    left: 140px; }

    #linkaftermid3 {
    background: url(images/next.png) no-repeat ;
    margin: 10px;
    text-decoration: none;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    padding: 5px 7px;
    position: relative;
    top: -20px;
    left: 250px; }

    #linkaftermid3:hover {
    color: #FFF;
    background: #CCC; }

    #aftermid2text {
    position: absolute;
    top: 860px ;
    left: 310px; }

    #aftermidtext {
    position: absolute;
    top: 470px;
    left: 35px; }

    #footer1 {
    width: 100%;
    height: 500px;
    background: #5b6873; }

    #contactus {
    color: white;
    padding-top: 150px;
    margin-left: 100px; }

    #phoneicon {
    position: absolute;
    left: 100px;
    top: 1330px; }

    #contact11 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #ced2d5;
    position: absolute;
    top: 1310px;
    left: 300px; }

    #contact11 ul li:before { content: url(images/5_home.jpg); }

    #contact12 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #ced2d5;
    position: absolute;
    top: 1310px;
    left: 500px; }

    #contact12 ul li:before { content: url(images/5_home.jpg); }

    #Testimonials {
    color: white;
    margin-left: 830px;
    margin-top: -66px; }

    #Testimonials11 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #ced2d5;
    position: absolute;
    top: 1340px;
    left: 830px;
    width: 200px;
    font-style: italic; }

    #Testimonialsid {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    color: #bdc3c7;
    position: absolute;
    top: 1440px;
    left: 930px;
    font-weight: bold;
    font-style: italic; }

    #Blogcomments {
    color: white;
    position: absolute;
    top: 1480px;
    left: 430px; }

    #comment1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #bdc3c7;
    position: absolute;
    top: 1580px;
    left: 630px;
    font-style: italic;
    width: 450px; }

    #comment2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #bdc3c7;
    position: absolute;
    top: 1640px;
    left: 630px;
    font-style: italic;
    width: 450px; }

    #twitterimg {
    position: absolute;
    left: 580px;
    top: 1580px; }

    #twitterimg2 {
    position: absolute;
    left: 580px;
    top: 1640px; }

    #LinksFriends {
    color: white;
    position: absolute;
    top: 1480px;
    left: -90px; }

    #linksfriends11 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #bdc3c7;
    font-style: italic;
    position: absolute;
    top: 1570px;
    left: 120px; }

    #donicons {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #bdc3c7;
    font-style: italic;
    position: absolute;
    top: 1620px;
    left: 360px;
    width: 200px; }

    #icon3 {
    position: absolute;
    top: 1560px;
    left: 380px; }

    #footer2 {
    height: 30px;
    width: 100%; }

    #footer2 #menufooter ul {
    margin-left: 100px;
    margin-top: 10px; }

    #footer2 #menufooter ul li {
    display: inline;
    padding: 10px; }

    #footer2 #menufooter ul li a {
    color: #919aa1;
    font-size: 14px;
    text-align: center; }

    #copyright {
    color: #919aa1;
    font-size: 14px;
    margin-left: 300px; }

    #footer2 #menufooter ul li a:hover { color: #4c5964; }

    #62576
    renancoelho
    Member

    It would be nice if there was a link to this website. if it is not live, you can scan it on prnt scrn on both firefox and IE, so we know exactly what you are talking about and upload to a service like picasa and put the link to it here.

    Here is what you can do… put another css file to target IE 8
    something like this.. look up conditional stylesheets for ie and you will find it… put this stylesheet after the main one… if you put it before hand it won’t work… Also, IE8 doesn’t mess up that much… have you also checked it on IE 6 & 7? They really mess up the layout..
    Also, there are some good articles here at css-tricks about conditional stylesheets…

    #62555
    amelmgd
    Participant

    thanx for your comment renancoelho
    this is the website on ff
    http://postimage.org/image/6oqsts90/

    and here is it on IE
    http://postimage.org/image/6olu7qro/

    #62540
    sliver37
    Member

    First thing you should do is run the website through validation, it will go a long way in fixing various cross browser issues: w3 validator

    Using a css reset will also help tremendously, plenty of articles on that.

    IE8 doesn’t usually give me too many (major) problems, though I’m sure someone will know what’s up and be able to help you.

    #62543
    amelmgd
    Participant

    thanx sliver
    though i did the reset on my website from the start and actually fixed the validation
    but n’thing is up
    again
    thanx

    #62015
    amelmgd
    Participant

    hey guys i solved the problem , it was really weird though
    what happened is that i didn’t close the form tag
    so i did that but it didn’t work
    then i tried to add a div and class for the form and change the css from the form element
    to form class and it magically worked the wired thing when i validate it didn’t show that i forgot to close the form tag
    thanx for the help !

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.