SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jun 2006
    Location
    Kent, UK
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question IE is non compliant, need help!

    Hi,

    Thanks to all who help here!

    I have made several website designs but they never look right in IE (internet explorer). The stylesheet I use is shown below and it works fine in all browsers apart from IE.

    Do I need to use two style sheets? If so what would beed replacing, editing or including to make IE not display things wrong?

    HERE IS THE WEBSITE LINK!!

    Code:
    /* CSS Code by Oliver Martin of TM-Designs.org */
    
    #header {
    
    
    	margin-top: -8px;
    	margin-bottom: -5px;
    }
    
    #adspace {
    	width: 475px;
    	height: 80px;
    }
    
    #copyright {
    	border-top: 2px solid #7F7F7F;
    	width: auto;
    }
    
    #header a, #nav a{
    	color: #212121;
    }
    
    #leftpanel {
    	position: absolute;
    }
    
    #leftpanel {
    	margin-top: 2px;
    	padding: 0 4px 0 2px;
    	width: 218px;
    	height: auto;
    	text-align: left;
    }
    
    #content {
    	border-left: 2px solid #7F7F7F;
    	margin-top: 7px;
    	margin-left: 230px;
    	margin-right: 200px;
    	padding: 2px 4px 2px 18px;
    	min-height: 600px;
    	height: auto;
    	text-align: left;
    }
    
    body {
    	font-size: 12px;
    	font-family: Arial, Helvetica, sans-serif;
    }
    
    /* specifies color for links */
    a {
    	text-decoration: underline;
    	color: #b5b5b5;
    	font-size: 10px;
    }
    
    a:hover {
    	text-decoration: none;
    	color: #84ff00;
    }
    Theres not loads of code in this style sheet so hopefully you can help me. I need to learn how to adjust things so that they appear perfect in IE as well as FF and etc.

    Thanks alot!
    Visit my website design site at Vimbeee.com

  2. #2
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First thing noticed is you are using the transitional/loose/sloppy doctype along with Xhtml end tags so that won't work. All new pages should always use a strict doctype. See my link below. Use html4.01 strict. Change the ending /> tags to just >

    Then validate your code and fix the couple of errors you have. Ignore the alt tag errors for now.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI,

    Your left column is misplaced because you have made it position absolute but neglected to supply the position co-ordinates. This means the browers will decide where it thinks it is which may not be where you want it.

    Use border on elements for dicviding lines and then you won't ness horizontal rules.

    Don't mix dprecated presentational attributes such as align="left" etc when using css as there will be conflicts and it is also bad practice. Use css for all presentation.

    Control the margins correctly. For example you have applied negative margins to your header when you should have been controlling the default body margins and padding instead. Nealy all elements have defualt margins/padding that you must control.

    If you design things carefully in the first place you will find that the browsers display pretty much the same apart from browser bugs.

    Code:
    #header {
        border-bottom:1px solid #666;
    	margin:0 0 5px 0;
    }
    
    #leftpanel {
    	position: absolute;
        left:10px;
    
    }
    a img{border:none}


Bookmarks

Posting Permissions

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