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 14 of 14
  1. #1
    New Coder
    Join Date
    Nov 2009
    Location
    Florida
    Posts
    20
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Unhappy IE css layout issues

    I have been scratching my head for days over how to correctly get this site (http://www.pdtest.com/Perrie_Web_New/index.html) to correctly display in IE. It works fine in Chrome, Firefox, Opera, and Safari, but no matter what I seem to do, the content in the right colum is forced down, when viewing in IE

    I have basically just started it and this will be the home page and part of the template.

    It is built in Dreamweaver CS4 on MAC.

    FYI - am a 6 month old DW student

    Thanks so much - really appreciate any help here.

    Barbara
    Last edited by blskny; 11-19-2009 at 03:28 PM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello blskny,
    One of the very first things you should learn in a DW class is that you should use a DocType. Check out the link about DocTypes in my signature below.
    That's going to go a long ways toward making your .html cross browser compatable.

    Your layout should work ... I usually float the left column and margin over the right but I don't think there's anything wrong with doing it the other way around. Just in case, here is a bug list for IE... helps sometimes to see if your inadvertently causing some known issue.

    In IE8 and IE7, your #sidebar1 stays up but your #mainContent drops. Odd that you see your right column drop... are you viewing this in IE6?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    blskny (11-19-2009)

  • #3
    Senior Coder ckeyrouz's Avatar
    Join Date
    Jun 2009
    Location
    Montreal, Canada
    Posts
    1,044
    Thanks
    5
    Thanked 179 Times in 179 Posts
    I have done the following changes to some of your css rules:
    Code:
    1- .twoColFixRtHdr # sidebar1 I removed the padding-top: 30px
    2- .twoColFixRtHdr #mainContent I removed the zoom : 1
    3- #meetFamily I rmeoved the margin : 10px 5px 10px 10px
    4- #advertise_us I removed the margin : 5px 5px 10px 10px
    Try them, it worked for me, but I did not test the impacts of Firefox or google chrome.
    Software and cathedrals are much the same - first we build them, then we pray.

  • Users who have thanked ckeyrouz for this post:

    blskny (11-19-2009)

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Hi blskny,
    If you are serious, I'd recommend you to learn how to hand code your pages using a simple editor like notepad++. You may use DW's code view, but don't use/trust it's design view, since it's not a browser. It might be easy for you to use DW to get some quick output, but it may screw your document at the end.

    Read the following resources...
    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:

    blskny (11-19-2009)

  • #5
    New Coder
    Join Date
    Nov 2009
    Location
    Florida
    Posts
    20
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Thank you everyone. Have never been to a Forum before and I am AMAZED at how fast help comes in.

    I used the template from DW that is called 2 col fixed, right sidebar, header and footer to build this. it did not have DOC TYPE in the code.

    Also tried taking out the margins - I don' think it did the trick. Here is the new link:
    file:///Clients/Starmony/Perrie_Web_New2/index2.html

    Meet the Family just moved out to the edge.

    Am I just doing something incorrectly because I am a novice?

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by blskny View Post
    new link:
    file:///Clients/Starmony/Perrie_Web_New2/index2.html
    That's just your local link. Do you have it up on a test server?
    Am I just doing something incorrectly because I am a novice?
    Haha, not being a novice does not preclude us from doing something incorrectly - I do that all the time!
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    New Coder
    Join Date
    Nov 2009
    Location
    Florida
    Posts
    20
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Unhappy Corrected URL

    Sorry you are right. I am too stressed. I hate not knowing - the learning curve is very frustrating.

    Here is the link:

    http://www.pdtest.com/Perrie_Web_New2/index2.html

    THANKS AGAIN

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    There is still no DocType...
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    I always use an XHTML Strict DocType declaration but the code DW has provided you may work better with this -
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Perrie Meno-Pudge</title>
    <link href="perrie.css" rel="stylesheet" type="text/css"><!--[if IE 5]>
    <style type="text/css"> 
    /* place css box model fixes for IE 5* in this conditional comment */
    .twoColFixRtHdr #sidebar1 { width: 220px; }
    </style>
    <![endif]--><!--[if IE]>
    <style type="text/css"> 
    /* place css fixes for all versions of IE in this conditional comment */
    /* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
    </style>
    <![endif]-->
    <style type="text/css"> 
    <!--
     
    #apDiv3 {
    	position:absolute;
    	width:491px;
    	height:30px;
    	z-index:1;
    	left: 469px;
    	top: 108px;
    }
    -->
    </style>
    </head>
     
    <body class="twoColFixRtHdr">
    ...the rest of your site
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #10
    New Coder
    Join Date
    Nov 2009
    Location
    Florida
    Posts
    20
    Thanks
    7
    Thanked 0 Times in 0 Posts
    There are so many different ones. How do I choose the right one.
    Thanks.B

  • #11
    New Coder
    Join Date
    Nov 2009
    Location
    Florida
    Posts
    20
    Thanks
    7
    Thanked 0 Times in 0 Posts
    OK i got it - I just put the Doc type at the top of the same file.
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    Here is the link again

    http://www.pdtest.com/Perrie_Web_New2/index2.html

  • #12
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Right on! That seems to have fixed the problems when I view it in IE8 and IE7.
    How does it look for you now?
    I don't have IE6 to look at it, don't be surprised if that browser messes it up

    Now have a look at http://validator.w3.org/check?verbos...%2findex2.html
    Check out the links about validation in my sig below.

    Next site you do, you'll be ready to take abduraooft's advice and hand code it.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    blskny (11-19-2009)

  • #13
    New Coder
    Join Date
    Nov 2009
    Location
    Florida
    Posts
    20
    Thanks
    7
    Thanked 0 Times in 0 Posts
    THAT IS UNBELIEVABLE!!! It worked!!! You are wonderful.
    OK NOW I must understand why and how it worked. Will review the validator

    THANK YOU ALL for your time and help and patience.
    Barbara

  • #14
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    blskny,
    I have some menu examples up here if you're interested - it looks like that may be the next thing you tackle.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    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
    •