...

View Full Version : CSS Columns - work in FF3 but not IE7!



srlagarto
03-13-2009, 05:01 PM
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!

abduraooft
03-13-2009, 05:10 PM
Validate your code and fix all errors in your markup, see http://validator.w3.org/check?uri=http%3A%2F%2Fcourses.algarve-golf.co.uk%2Fproblem.htm&charset=%28detect+automatically%29&doctype=Inline&group=0
You can't have the same id for multiple elements. Consider giving some class instead.

PitbullMean
03-13-2009, 05:18 PM
Changing your side bar attributes to a class should fix the problem



<div class="sidebar">



/* 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;
}

srlagarto
03-20-2009, 09:41 PM
Changing your side bar attributes to a class should fix the problem



<div class="sidebar">



/* 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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum