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 6 of 6
  1. #1
    New Coder
    Join Date
    May 2011
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts

    IE is kicking my @$$...

    I can't get anything to work correctly in IE. I need this logo to be nearly flush with the text (centered in between the text and the bottom of the header). It works perfectly in chrome/firefox, but for some reason there is a huge space above and below the text in IE.

    As in my previous post (which there has been zero responses in over 5 hours), I have tried using conditional statements and have tried different paragraph styling and divs/classes.
    Code:
    #page
    {
        width: 900px;
        margin-left: auto;
        margin-right: auto;
        letter-spacing: .1px;
    }
    
    #header
    {
        width: 900px;
        height: 163px;
        border: 1px solid orange;
        background-color: orange;
        line-height: 30px;
    }
    
    #nav
    {
        line-height: 50px;
        width: 902px;
        height: 50px;
        background-color: blue;
    }
    
    #contentheader
    {
        text-align: center;
        width: 900px;
        line-height: 50px;
        padding-top: 10px;
        border-left: 1px solid black;       
        border-right: 1px solid black; 
        text-transform: capitalize;
    }
    
    #content
    {
        width: 900px;
        height: 90%;
        border-left: 1px solid black;       
        border-right: 1px solid black; 
        background-color: white;
        padding-bottom: 25px;
        float: left;
    }
    
    #onecolumn
    {
        display: block;
        width: 86%;
        float: left;
        margin: 0px 0px 0px 50px;
        background-color: white;
        padding: 15px 7px 15px 7px;
        text-align: left;
    }
    #leftcolumn
    {
        width: 43%;
        float: left;
        margin: 7px 0px 0% 3%;
        background-color: white;
        padding: 15px 7px 15px 7px;
    }
    
    #rightcolumn
    {
        width: 43%;
        float: right;
        margin: 7px 3% 0% 0px;
        background-color: white;
        padding: 15px 7px 15px 7px;
    }
    
    #footer
    {
        height: 62px;
        width: 902px;
        line-height: 56px;
        background-color: orange;
        color: black;
        clear: both;
        margin: auto;
    }
    
    ul
    {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    
    li
    {
        margin: auto;
        float: left;
    }
    
    a.nav
    {
        display: block;
        width: 178px;
        height: 48px;
        font-weight: bold;
        color: white;
        background-color: blue;
        text-align: center;
        padding: 1px;
        text-decoration: none;
        text-transform: uppercase;
        margin-top: -10px;
    }
    
    a.navend
    {
        display: block;
        width: 179px;
        height: 48px;
        font-weight: bold;
        color: white;
        background-color: blue;
        text-align: center;
        padding: 1px;
        text-decoration: none;
        text-transform: uppercase;
        margin-top: -10px;
    }
    
    a:hover,a:active
    {
        background-color: black;
    }
    
    img.center
    {
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-top: 5px;
    }
    
    img.botright
    {
        display: block;
        margin-left: 813px;
        margin-right: 0px;
        margin-top: -72px;
        width: 88px;
        height: 62px;
    }
    
    p
    {
        font-family:"Times New Roman", Times, serif;
        display: block;
        margin-top: -5px;
        margin-left: -1px;
    }
    
    p.floatleft
    {
        margin: auto;
        float: left;
    }
    
    p.header
    {
        margin-left: auto;
        margin-right: auto;
        margin-top: -15px;
    }
    
    p.footer
    {
        text-align: center;
    }
    
    h1.center
    {
        display: block;
        margin: auto;
        text-align: center;
    }
    
    h4.center
    {
        margin-top: 10px;
    }
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    
    <html>
    
    <head>
    <title>Home</title>
    <link rel=stylesheet type="text/css" href="css/mainCss.css" media=screen>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    </head>
    
    <body>
    
    <div id="page">
    
        <div id="header">
        <h1 class="center">Internal Medicine of Dubois County</h1><img 
    
    src="http://i1098.photobucket.com/albums/g361/Forrest_Young/logo.jpg" class="center" ALT="Logo">
        </div>
    
        <div id="nav">
            <ul>
                <li><h4 class="center"><a href="index.html" class="nav">Home</a></h4></li>
                <li><h4 class="center"><a href="info.html" class="nav">Info</a></h4></li>
                <li><h4 class="center"><a href="staff.html" class="nav">Staff</a></h4></li>
                <li><h4 class="center"><a href="contact.html" class="nav">Contact</a></h4></li>
                <li><h4 class="center"><a href="about.html" class="navend">About</a></h4></li>
            </ul>
        </div>
    
        <div id="contentheader">
            <h1 class="center">Home</h1>
        </div>
    
        <div id="content">
            <div id="onecolumn">
                <p>Internal Medicine of Dubois County is a primary care Internal Medicine office devoted to the comprehensive 
    
    care of adult patients.  This website is meant to introduce you to the staff who will be helping you maintain your health and 
    
    the policies employed in order to accomplish this.</p>
                <p>What is an internist?  Internal medicine is the specialty of adult medicine.  As a primary caregiver, an 
    
    internist has general training in all of the subspecialties of medicine.  This includes cardiology, neurology, rheumatology, 
    
    gastroenterology, allergy and immunology, diabetology, dermatology, and hematology/oncology.</p>
                <p>The main job of any primary caregiver --especially internal medicine-- is omniscience (the ability to 
    
    coordinate and monitor the multiple medications and symptoms as they apply to any one specific complaint).  It is common for 
    
    one treatment to have a profound effect on some other condition or medication.  Primary caregivers keep an eye on all of the 
    
    multiple health problems and try to be sure that treating one problem does not interfere with the treatment of another 
    
    problem.  Subspecialists take very good care of their own subspecialty, but their care is never meant to be 
    
    comprehensive.</p>
            </div>
        </div>
    
        <div id="footer">
            <p class="footer">Footer</p>
            <img src="http://i1098.photobucket.com/albums/g361/Forrest_Young/validator.png" class="botright" ALT="Valid HTML 4.01 
    
    Strict/CSS">
        </div>
    
    </div>
    
    </body>
    
    </html>
    The pic below shows Chrome then Firefox then IE. Also, the bottom right validator pic is skewed up a couple pixels as well (same problem from my previous post).

    Thanks in advance, and sorry for the frequent posts.

  • #2
    Registered User
    Join Date
    Feb 2011
    Posts
    82
    Thanks
    15
    Thanked 3 Times in 3 Posts
    define a height.

    you haven't reset your page either.

    Code:
    /* --RESET-- */
    a, abbr, acronym, address, applet, b, big, blockquote, button, canvas, caption, center, cite, code, 
    body, dd, del, dfn, div, dl, dt, em, embed, fieldset, font, form, h1, h2, h3, h4, h5, h6, hr, html, 
    i, iframe, img, ins, kbd, label, legend, li, menu, object, ol, p, pre, q, s, samp, small, span, 
    strike, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, var {
    	margin: 0;
    	padding: 0;
    	border: 0;
    }
    most ppl just reset what they need, but eh...

    when I open the browser in ie9 on windows7 it looks fine
    ie alternatives!
    Last edited by Aurora.Light; 05-15-2011 at 11:13 PM.

  • #3
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,742
    Thanks
    41
    Thanked 191 Times in 190 Posts
    i would suggest (sort of issue had on prior post dealing with your footer) defining attributes of your image, or attributes of a <div> to contain your image (height width placement)... it might also be helpful to take a couple steps back... When I look at your code i immediately start seeing all of this styling and text and "stuff"... it may be helpful to slow down... Don't try and rush and expect the page to plop out completed working fine... I like to "start slow" and build my page's elements... i concurrently style only the must haves of the boxes, and also some "construction aids"... here is an example:

    Code:
    #col_a{
    margin: 10px;
    border: whatever;
    background-color: gray;(make each one unique so you can distinguish them)
    etc, but only 'must haves'
    }
    what this does is allows me to see graphically where everything is laying out and making sure it is where is should be. Then add in "filler" or "development" text... a general standard is latin. This will also aid in seeing how the page will come together.

    check it often... and go in steps... when you automatically start to have all this styling at once it can become overwhelming and interfere with itself quickly... it also makes it difficult to narrow down where your problem is exactly.

    I offer anecdote: I recently posted thread called "padding"... If I hadn't done this titrated method of development I would have spent hours not knowing why my div blocks were getting screwed up... instead i was able to see that the second i applied padding incorrectly it screwed them up and was able to resolve the matter lickity-split.

    I hope that helps some... best regards-
    Last edited by alykins; 05-16-2011 at 01:20 AM.

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • Users who have thanked alykins for this post:

    borosarchangel (05-16-2011)

  • #4
    New Coder
    Join Date
    May 2011
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I understand... it is just very frustrating that the same code acts wildly different in IE. IE just needs to die.

  • #5
    New Coder
    Join Date
    May 2011
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts
    well i fixed both issues. I used an inline p instead of h1 and had to explicitly set each margin (maybe IE has different default margins?). I also had to use percentages for the bottom right image.

  • #6
    Regular Coder djh101's Avatar
    Join Date
    May 2009
    Location
    California
    Posts
    616
    Thanks
    48
    Thanked 65 Times in 65 Posts
    Do what I do- post a message to Internet Explorer users telling them that the page might not be displayed properly in IE that directs them to the Google Chrome download page 8).
    Last edited by WA; 05-16-2011 at 07:18 PM.
    "Yeah science!"
    Online Science Tools

  • Users who have thanked djh101 for this post:

    Aurora.Light (05-16-2011)


  •  

    Posting Permissions

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