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 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    IE compatibility issues

    Oh my, first post ever on these forums, scary. So, sorry about the length of this, but I'm long-winded like that.... D:

    Anyways, I should start with a bit of back story in terms of my project. I'm designing a section of my high schools web page (the section for the technology department, to be specific). I was chosen, because I was the only one in my class that knew HTML (which is surprising, in a class in the technology department...). This said, when I learned HTML, people were still ranting to me how much IE4 sucked...and with this newfangled (a 17 year old shouldn't be using that word, should I?) XHTML stuff, it got annoying. I read a book or two, as well as a few web tutorials, and made a fairly simple webpage, and when I showed it to the "web admin" (22 year old art grad teacher D: ), she was happy.

    However, I showed it to her in Firefox, and just for the purpose of testing, when I went back to my classroom, I tested a few more browsers. FF2, pass. Opera 9, pass. Safari [whatever version is new], pass. Chrome, pass. IE, D: Fail. Well, the easiest way to explain it, would be in pictures, so:

    (for some reason, the screenshots look REALLY dark, sorry, but, not quite in the mood to re do them off of my laptop.)
    This is what one of the pages looks like in FF:
    http://img401.imageshack.us/img401/4890/foxfoxry7.png
    And in Safari:
    http://img165.imageshack.us/img165/5184/safariov8.png
    And in IE:
    http://img246.imageshack.us/img246/6382/ieng6.png
    (paint FTW)

    Here is my CSS sheet (I used quite a few divs for 3 pages):
    Code:
    /* Basic Background for the Body*/
    body {
    background-color:#000000;
    font-family:tahoma, veranda, arial, sans-serif;
    background-image: url(images/background.png);
    }
    
    /* Text Formatting */
    h1.title {
    color:#EEAD0E;
    text-align:center;
    }
    h3.secondtitle {
    color:#EEAD0E; 
    text-align:center;
    line-height:1px;
    position:relative;
    top:-10px;
    }
    p.welcomeboxtext {
    color:#EEAD0E;
    }
    /*Divs */
    div#welcome {
    display:block;
    width:200px; 
    text-align:left; 
    margin: 0px auto; 
    text-align:center;
    background-color:#555555; 
    background-image: url(images/welcomeheader.png);
    border-style: solid;
    border-width:2px;
    border-color:#333333; 
    position:absolute;
    left:10px;
    top:120px;
    }
    div#header {
    width:1024px;
    background-color:#555555;
    background-image: url(images/header.png);
    border-style: solid;
    border-width:2px;
    border-color:#333333;
    }
    div#links {
    width:200px;
    background-color:#555555;
    background-image: url(images/welcomeheader.png);
    border-style: solid;
    border-width:2px;
    border-color:#333333;
    position:absolute;
    left:10px;
    top:255px;
    }
    div#linksv2 {
    width:200px;
    background-color:#555555;
    background-image: url(images/welcomeheader.png);
    border-style: solid;
    border-width:2px;
    border-color:#333333;
    position:absolute;
    left:10px;
    top:295px;
    }
    div#staff {
    width:200px;
    background-color:#555555;
    background-image: url(images/techheaderright.png);
    text-align:center;
    border-style: solid;
    border-width:2px;
    border-color:#333333;
    position:absolute;
    left:800px;
    top:120px;
    }
    /*links*/
    a:link {color:#EEB422;}
    a:visited {color:#82CFFD;}
    a:hover {color:#FFFFFF;}
    /*More Divs*/
    div#bottombox{
    width:200px;
    background-color:#555555;
    background-image: url(images/welcomeheader.png);
    text-align:center;
    border-style: solid;
    border-width:2px;
    border-color:#333333;
    position:absolute;
    left:10px;
    top:410px;
    }
    div#version{
    width:200px;
    background-color:#555555;
    background-image: url(images/welcomeheader.png);
    text-align:center;
    border-style: solid;
    border-width:2px;
    border-color:#333333;
    position:absolute;
    left:10px;
    top:490px;
    }
    div#hpmiddle{
    width:570px;
    background-color:#555555;
    background-image: url(images/hpmiddlebg.png);
    text-align:center;
    border-style: solid;
    border-width:2px;
    border-color:#333333;
    position:absolute;
    left:220px;
    top:120px;
    }
    Here is the HTML for the page in the pictures above:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtmll/DTD/html-transitional.dtd">
    <html>
    <head>
    <title>Sachem North Tech Department Webpage</title>
    <link rel="stylesheet" type="text/css" href="stdcss.css" />
    </head>
    <body>
    <div id="header"><h1 class="title">Sachem North Technology Department</h1>
    <h3 class="secondtitle">Homepage</h3>
    </div>
    <div id="welcome"><p class="welcomeboxtext">Welcome to Sachem North's Technology Department homepage. To begin your journey, click on one of the links below.</p></div>
    <div id="links">
    <ul>
      <li><a href="WWW.MUFFIN.COM">Homepage</a></li>
      <li><a href="">Teacher List D:</a></li>
      <li><a href="">Course List</a></li>
      <li><a href="">Useful Links</a></li>
      <li><a href="">Sachem Robotics Webpage</a></li>
    </ul></div>
    <div id="hpmiddle">The video that would be showing a montage of the tech department would be here.</div>
    <div id="staff"><p class="welcomeboxtext">Technology Education is the study of the human made world.
    We live in a society that increasingly depends upon technology.
    Citizens who understand and are comfortable with the concepts
    and workings of modern technology will be better prepared for
    the workplace and better able to participate fully in society and
    in the global marketplace. Technologically literate
    citizens employ systems-oriented thinking as they interact with
    the technological world, cognizant of how such interaction affects
    individuals, our society, and the environment.</p></div>
    <div id="bottombox"><p class="welcomeboxtext">Current Chairperson:<br /><b>Eric Jorgensen</b></p></div>
    <div id="version"><p class="welcomeboxtext">Placeholder Text...</div></body>
    </html>
    I really hope this is something simple to fix, I've already had it be recommended to write an entire new set of pages for IE alone, and then make the homepage a javascript redirect to go to the right page for IE or other browsers. I really don't want to do this, so I hope yalls can help D:
    Last edited by Muffin_Fox; 11-22-2008 at 07:41 AM. Reason: Fixed a dead link D:

  • #2
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    You're doctype is incorrect. Replace it with this one and see if IE rights itself:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    Your CSS is correct and your html is, too, except for the doctype and the validator says you're missing a </p> somewhere.

    Since it works in all the modern browsers, we can assume you wrote your markup correctly and IE is screwing up, as usual.

  • #3
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Nope still didn't fix the problem, but thanks for fixing my Doctype, it looked like two ll's on w3's webpage D:

    Thanks for noticing the open p tag too D:

    (fyi, I use "D:" too often, so it's used as happy AND sad for me.)

    Sigh, I wish I could just make a script that tells IE users to get firefox, but the admin already said no to that ._.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Well, the easiest way to explain it, would be in pictures, so:
    A small description of the problem also help us, so that we don't have to look all around there and guess it. I guess you are talking about the color of the links. If so, you need to give some thing in the href attribute to make it correct in IE, at least a #
    Code:
    <a href="http://WWW.MUFFIN.COM">Homepage</a></li>
      <li><a href="#">Teacher List D:</a></li>
      <li><a href="#">Course List</a></li>
      <li><a href="#">Useful Links</a></li>
      <li><a href="#">Sachem Robotics Webpage</a></li>
    PS: warm welcome to CF
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Sorry, no, I just suck at describing things in under 4 paragraphs. Thanks for the welcome, though. I know I need something in the links for the color to change, just have to wait for the bloody order these people want me to make the website in, so I can have actual links...

    Anyways, to word my problem in a....better way, on the FF version, there is a good padding between the end of the text and the border of the Div boxes, in the IE one, the div ends as soon as the text does. Now, I'm looking for a way to make the so called padding in FF appear in IE, without making a new css sheet/htmls, with JS to detect IE, and switch to it.

    That sounded a bit confusing to me, but it's the only way I can put it into text.

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    The output that you see is the effect of default margins/padding value of various elements in browser, which may vary from browser to browser. So, the designers usually reset these values by adding a CSS like
    Code:
    *{
    margin:0;
    padding:0;
    }
    .

    After that, we can explicitly set the required paddings and margins for the elements.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    Muffin_Fox (11-22-2008)

  • #7
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Well, it's a lot better then doing dual html sheets. Thanks.

    Oh, while I have an open topic, the images that appear left of the URL in the address bar, I feel stupid asking, but assuming I have full control over the webserver the site is on, how would I do that for a site? Although, this falls out of the realm of html and css ._.

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    It's called Favicon
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #9
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Oh. Thanks again. While I'll have a LOT more questions before this bloody website is finished, but for now, I'm happy. -_-

  • #10
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    You're welcome, at any time.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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