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

    CSS Columns - work in FF3 but not IE7!

    Hi, there.

    I've created a simple tableless 3-column fixed-width layout within a 'wrapper' div#. The column displays exactly how I want it and where I want it in Firefox, Safari, Chrome... but not in IE7 - for some reason, IE7 repeats part of the content of the third column.

    courses.algarve-golf.co.uk/problem.htm
    courses.algarve-golf.co.uk/scripts/default.css

    (The site isn't yet finished, so while the CSS validates, the HTML is not completely validated as I have more content, nav-bars and so on to add.)

    I was told that the problem with IE is that I have a comment (necessary for the Dreamweaver Template to function) before the Doctype, which renders the page in 'quirks mode'. Removing that comment made the page display correctly, but the problem is that I need the pages to work on Dreamweaver Templates - so, fixing one problem presents another!

    Is there a work-around for the first issue that allows me to maintain the Template markup so that this (and many future pages) can be built on same Template?

    Any further help or advice that anyone can offer greatfully appreciated!

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,864
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Validate your code and fix all errors in your markup, see http://validator.w3.org/check?uri=ht...Inline&group=0
    You can't have the same id for multiple elements. Consider giving some class instead.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    Changing your side bar attributes to a class should fix the problem

    Code:
    <div class="sidebar">
    Code:
    /* Sidebar */
    
    .sidebar {
    	width: 260px;
    	float: left;
    }
    
    .sidebar ul {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    }
    
    .sidebar li {
    }
    
    .sidebar li ul {
    	padding-top: 10px;
    	padding-right: 10px;
    	padding-bottom: 10px;
    	padding-left: 9px;
    }
    
    .sidebar li li {
    	padding-left: 15px;
    }
    
    .sidebar h2 {
    	margin: 0;
    	background: url("../grafics/h2-icon.png") no-repeat left 75%;
    	padding-top: 5px;
    	padding-right: 0;
    	padding-bottom: 0;
    	padding-left: 35px;
    }
    
    .sidebar a {
    	text-decoration: none;
    }
    
    .sidebar a:hover {
    	font-weight: bold;
    }
    
    .sidebar a:visited {
    	color: #99CC00;
    }
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.

  • #4
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by PitbullMean View Post
    Changing your side bar attributes to a class should fix the problem

    Code:
    <div class="sidebar">
    Code:
    /* Sidebar */
    
    .sidebar {
    	width: 260px;
    	float: left;
    }
    
    .sidebar ul {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    }
    
    .sidebar li {
    }
    
    .sidebar li ul {
    	padding-top: 10px;
    	padding-right: 10px;
    	padding-bottom: 10px;
    	padding-left: 9px;
    }
    
    .sidebar li li {
    	padding-left: 15px;
    }
    
    .sidebar h2 {
    	margin: 0;
    	background: url("../grafics/h2-icon.png") no-repeat left 75%;
    	padding-top: 5px;
    	padding-right: 0;
    	padding-bottom: 0;
    	padding-left: 35px;
    }
    
    .sidebar a {
    	text-decoration: none;
    }
    
    .sidebar a:hover {
    	font-weight: bold;
    }
    
    .sidebar a:visited {
    	color: #99CC00;
    }
    That's sorted it - great! Many thanks to and abduraooft.


  •  

    Posting Permissions

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