2 replies [Last post]
sejf83
Offline
Enthusiast
London
Last seen: 14 years 24 weeks ago
London
Joined: 2006-01-01
Posts: 56
Points: 0

Here is a link to the page I'm working on:

http://www.myhomefront.tv/ap/

In IE 6 & 7, there's a few extra pixels added to the top of the first blue nav bar. All is well in FF. I'm guessing it has something to do with the floats above this element, but I can't seem to figure it out.

Also, Safari on a Mac kills my page. The box elements are squished over to the right for some reason. Can anyone help?

Here's the HTML: (I'm leaving out the JS code pertinent to the Flash)

America's Promise -- Homepage code

window.onload=function(){
if(!NiftyCheck())
return;
Rounded("h3#donation","#fffdda","#000080");
Rounded("h3#getInvolved","#fffdda","#cc3333");
}

@import "css/home.css";

flash goes here

Promises Gallery

promise gallery photo goes here

brought to you by

Success Story

Success Story Image

In sed lacus eu dui ullamcorper tempor. Duis imperdiet. Nullam cursus vestibulum massa. Sed vitae nisl. Aenean varius porta felis. Pellentesque eleifend. Donec libero est, mattis id, varius nec. In sed lacus eu dui ullamcorper tempor. Nam lobortis felis eu risus. In sed lacus eu dui ullamcorper tempor. Duis imperdiet. Nullam cursus vestibulum massa. Sed vitae nisl. Aenean varius porta felis. Pellentesque eleifend. Nam lobortis felis eu risus. In sed lacus eu dui ullamcorper tempor. Duis imperdiet. ellentesque eleifend. Nam lobortis. In sed lacus eu dui ullamcorper tempor. Duis imperdiet. Nullam cursus vestibulum massa.

more

Issue Spotlight

Graduation photo more

National Action Strategies

All Kids Covered

Pellentesque gravida, ante eu pretium dapibus, lacus lacus placerat diam, et fringilla leo massa tempus ante. Integer lorem neque, bibendum rhoncus, lacus lacus sed lacus eu dui ullam. More...

Preparing Kids for the World

Praesent ac magna id nulla sollicitudin laoreet. Sed iaculis venenatis arcu. Praesent id odio. In in urna id nisl sagittis mollis. Morbi tincidunt, est vel. sed lacus eu dui ullamcorper tempor. More...

Schools as Hubs

Maecenas volutpat rutrum arcu. Donec sed ante. Vestibulum fringilla. In enim. Proin phar ultricies erat. Etiam nec ligula. Sed nulla felis, convallis eu, donec sed ante sed lacus eu dui. More...

  • Contact Us |
  • Privacy Policy |
  • Site Map |
  • E-Newsletter Sign-Up |
  • Careers

And the CSS:

* { margin:0; padding:0; } html { background: url(../images/blue-gradient.gif) repeat-x; }

body {
margin: 0 auto 25px auto;
width: 800px;
border-right: 1px solid #acaaaa;
border-left: 1px solid #acaaaa;
border-bottom: 1px solid #acaaaa;
background-color: #fffdda;

}
#header {
background-color:#FFFDDA;
}

#header #ap-logo {
float: left;
border: none;
margin-top: 13px;
margin-left: 10px;
}

#header #buttons {
margin-top: 15px;
float: right;
overflow: auto;
width: 350px;
text-align: right;
}

#header #buttons #form {
display: block;
}

#header #buttons fieldset {
border: none;
clear: both;
padding-top: 20px;
margin-right: 25px;
.margin-right: 10px;
}

#header #buttons input.text {
border: 1px solid #ccc;
background-color: #fffdda;
}

#header #buttons input.submitButton {
background-color: #fffdda;
border: none;
color: #cc3333;
font: bold 13px Tahoma, Verdana, Arial, Helvetica, sans-serif;
}

#header #buttons h3#donation {
font: bold 16px "Trajan Pro", "Palatino Linotype", Arial, Helevetica, sans-serif;
text-transform: uppercase;
text-align:center;
width: 188px;
background-color: #000080;
float: left;
margin-right: 25px;
}

#header #buttons h3#donation a,
#header #buttons h3#getInvolved a {
color: #fff;
text-decoration: none;
}

#header #buttons h3#donation a:hover,
#header #buttons h3#getInvolved a:hover {
color: #fcb134;
text-decoration: none;
}

#header #buttons h3#getInvolved {
margin-top: 5px;
float: left;
width: 115px;
text-transform: uppercase;
text-align:center;
color: #fff;
background-color: #cc3333;
font: bold 12px "Trajan Pro", "Palatino Linotype", Arial, Helevetica, sans-serif;
}

#nav {
clear: both;
padding: 0;
margin: 0;
font: bold 14px Tahoma, Verdana, Arial, Helvetica, sans-serif;
}

#nav ul {
margin:0px;
padding: 5px 0;
background-color: #010080;
list-style: none;
}

#nav ul li {
padding-right: 34px;
display: inline;
}

#nav ul li#firstOption {
padding-left: 20px;
}

#nav ul li#lastOption {
padding-right: 0px;
}

#nav ul li a {
color: #fff;
text-decoration: none;
}

#nav a:hover {
color: #fcb134;
}
/*Flash area/Promises Gallery*/

#flash {
height: 244px;
border-bottom: 1px solid #cc3333;
}

#flash #flashContainer {
float: left;
width: 591px;

}

#flash #galleryContainer {
border-left: 1px solid #cc3333;
height: 100%;
/*_height: 97%;*/
width: 208px;
float: left;
background-color: #fcb134;
text-align:center;
}

#flash #galleryContainer h3 {
margin:0;
padding: 0px;
font: bold 15px "Trajan Pro", "Palatino Linotype", Arial, Helevetica, sans-serif;
text-transform: uppercase;
margin-top: 7px;
margin-bottom: 3px;
}

#flash #galleryContainer #sponsorInfo {
margin: 4px auto;
.margin-top: 1px;
width: 173px;
}

#flash #galleryContainer #sponsorInfo p {
margin-right: 4px;
margin-top: 28px;
float:right;
color: #cc3333;
font: normal 12px Tahoma, Verdana, Arial, sans-serif;
}

#flash #galleryContainer #sponsorInfo img {
float: right;
}

#boxes {
background-image: url(../images/yellow-gradient.gif);
background-repeat: repeat-x;
background-position:center -6px;
overflow:auto;
font: 12px Tahoma, Verdana, Arial, Helvetica, sans-serif;
line-height:18px;
}

#boxes #left {
float: left;
background-color: #fffdda;
width: 387px;
padding-bottom: 10px;
border-right: 1px solid #cc3333;
border-bottom: 1px solid #cc3333;
}

#boxes #left h3 {
color: #cc3333;
margin: 6px 0 4px 15px;
font: bold 16px "Trajan Pro", "Palatino Linotype", Arial, Helevetica, sans-serif;
text-transform: uppercase;
}

#boxes #left img.leftAlign {
float:left;
margin:0 15px 5px 15px;
}

#boxes #left p {
margin: 0 15px;
line-height: 18px;
}

#boxes #center {
width: 202px;
float: left;
border-bottom: 1px solid #cc3333;
background-color:#FFFDDA;
}

#boxes #center h3 {
text-align: center;
color: #cc3333;

font: bold 16px "Trajan Pro", "Palatino Linotype", Arial, Helevetica, sans-serif;
text-transform: uppercase;
margin-top: 6px;
margin-bottom: 4px;
}

#boxes #center img {
display: block;
margin-left: auto;
margin-right: auto;
}

#boxes #right {
background-color: #fffdda;
border-bottom: 1px solid #cc3333;
border-left: 1px solid #cc3333;
float:right;
width:208px;
}

#boxes #right h3 {
text-align:center;
color: #cc3333;
font: bold 16px "Trajan Pro", "Palatino Linotype", Arial, Helevetica, sans-serif;
text-transform: uppercase;
margin-top: 6px;
margin-bottom: 4px;
}

#boxes #right img {
display: block;
margin-left: auto;
margin-right: auto;
}

#boxes #right h4,
#boxes #right p {
padding:0 22px;
}

a.more {
font: bold 13px Tahoma, Verdana, sans-serif;
margin-top: 2px;
background:url(../images/blue-arrow.gif) no-repeat;
background-position: right;
text-decoration: none;
color: #000080;
margin-right: 10px;
margin-bottom:5px;
padding-right:10px;
float:right;
}

a.more:hover {
text-decoration: underline;
}

#boxes #actionStrategies h2 {
clear:both;
padding-top: 20px;
.padding-top: 10px;
margin-left: 13px;
margin-bottom: 0;
color: #cc3333;
font: bold 24px "Trajan Pro", "Palatino Linotype", Arial, Helevetica, sans-serif;
}

#boxes #actionStrategies #strategyRight,
#boxes #actionStrategies #strategyCenter,
#boxes #actionStrategies #strategyLeft {
border: 1px solid #cc3333;
float: left;
width: 230px;
margin: 6px;
padding:10px;
.padding: 8px;
}

#boxes #actionStrategies #strategyLeft {
margin-left: 9px;
}

#boxes #actionStrategies #strategyRight h4,
#boxes #actionStrategies #strategyCenter h4,
#boxes #actionStrategies #strategyLeft h4 {
font: bold 13px Tahoma, Verdana, Arial, Helevetica, sans-serif;
margin-top:0;
margin-bottom: 0;
}

#boxes #actionStrategies #strategyRight p,
#boxes #actionStrategies #strategyCenter p,
#boxes #actionStrategies #strategyLeft p {
margin-top: 0;
margin-bottom: 0;
}

#boxes #actionStrategies #strategyRight p a,
#boxes #actionStrategies #strategyCenter p a,
#boxes #actionStrategies #strategyLeft p a {
color: #000080;
}

#subNav {
padding-top: 20px;
margin: 0;
font: bold 14px Tahoma, Verdana, Arial, Helvetica, sans-serif;
}

#subNav ul {
margin:0px;
padding: 5px 0;
background-color: #010080;
list-style: none;
}

#subNav ul li {
padding-right: 24px;
display: inline;
}

#subNav ul li.firstOption {
padding-left: 10px;
}

#subNav ul li.lastOption {
padding-right: 0px;
}

#subNav ul li a {
color: #fff;
text-decoration: none;
}

#subNav a:hover {
color: #fcb134;
}

#tertiaryNav {
padding-top: 20px;
padding-bottom: 20px;
color:#000080;
text-align:center;
margin: 0;
font: 12px Tahoma, Verdana, Arial, Helvetica, sans-serif;
}

#tertiaryNav ul {
list-style:none;
}

#tertiaryNav ul li {
display: inline;
}

#tertiaryNav ul li a {
color: #000080;
text-decoration: none;
}

#tertiaryNav ul li a:hover {
text-decoration: underline;
}

DanA
DanA's picture
Offline
Elder
Last seen: 11 years 37 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

For IE 6 & 7 try to set

For IE 6 & 7 try to set hasLayout in #nav by adding height:1%; or width:100%;

sejf83
Offline
Enthusiast
London
Last seen: 14 years 24 weeks ago
London
Joined: 2006-01-01
Posts: 56
Points: 0

Thanks DanA! That worked

Thanks DanA! That worked perfectly for IE. Does anyone have any tips for Safari?