2 replies [Last post]
bmpwe2
Offline
newbie
Last seen: 17 years 50 weeks ago
Joined: 2004-12-12
Posts: 1
Points: 0

Hey, the page in question is http://www.utapikes.com/photos/albums.php . It looks fine in firefox but not in IE.

here's the stylesheet:

/* ##### Common Styles ##### */ 
 
body { 
  color: black; 
  background-color: white; 
  font-family: "times new roman", times, roman, serif; 
  font-size: 12pt; 
  margin: 0; 
  padding: 0; 
} 
 
acronym, .titleTip { 
  font-style: italic; 
  border-bottom: none; 
} 
 
acronym:after, .titleTip:after {  /* Prints titles after the acronyms/titletips. Doesn't work in MSIE */ 
  content: "(" attr(title) ")"; 
  font-size: 90%; 
  font-style: normal; 
  padding-left: 1ex; 
} 
 
.doNotPrint { 
  display: none !important; 
} 
 
 
/* ##### Header ##### */ 
 
#header { 
  margin: 0; 
  padding: 0; 
  border-bottom: 1px solid black; 
} 
 
.headerTitle { 
  font-size: 200%; 
  margin: 0; 
  padding: 0 0 0.5ex 0; 
} 
 
.headerTitle a { 
  color: black; 
  background-color: transparent; 
  font-family: "trebuchet ms", verdana, helvetica, arial, sans-serif; 
  font-weight: normal; 
  text-decoration: none; 
} 
 
.subHeader { 
  display: none; 
} 
 
 
/* ##### Side Bars ##### */ 
 
#side-bar { 
  display: none; 
} 
 
 
/* ##### Main Copy ##### */ 
 
#main-copy { 
  text-align: justify; 
  margin: 0; 
  padding: 0; 
} 
 
#main-copy h1 { 
  font-family: "trebuchet ms", verdana, helvetica, arial, sans-serif; 
  font-size: 120%; 
  margin: 2ex 0 1ex 0; 
  padding: 0; 
} 
 
#main-copy a { 
  color: black; 
  background-color: transparent; 
  text-decoration: none; 
} 
 
#main-copy a:after {  /* Prints the links' URIs after the links' texts. Doesn't work in MSIE */ 
  content: "<" attr(href) ">"; 
  font-size: 90%; 
  padding-left: 1ex; 
} 
 
p { 
  margin: 0 0 2ex 0; 
  padding: 0; 
} 
 
dl { 
  margin: 0; 
  padding: 0; 
} 
 
dt { 
  font-weight: bold; 
  margin: 0; 
  padding: 0 0 1ex 0; 
} 
 
dd { 
  margin: 0 0 2ex 1.5em; 
  padding: 0; 
} 
 
 
/* ##### Footer ##### */ 
 
#footer { 
  margin: 2em 0 0 0; 
  padding: 1ex 0 0 0; 
  border-top: 1px solid black; 
} 
 
#footer a { 
  color: black; 
  background-color: transparent; 
  text-decoration: none; 
}


Any suggestions would be much appreciated.

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 5 years 29 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

3 colum layout fine in FF, dies in ie...

Try changing the floating of your right sidebar in the margin rather than the border of your main-copy div.

 /* ##### Main Copy ##### */

#main-copy {
  color: black;
  background-color: white;
  text-align: justify;
  line-height: 1.5em;
  margin: 0 15em 0 12.5em;
  padding: 0.5ex 1em 1em 1em;
  border-left: 1px solid rgb(216,210,195);
}

Using a margin handles the float better.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

3 colum layout fine in FF, dies in ie...

You may want to investigate why you are generating two sets of html head tags, as at the moment you are rendering the page in "Quirks Mode"
I would sort that out before making any suggested changes.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me