IE Flickr, and Floating UL problems.

Hello everyone,

I'm redesigning my website in order to incorporate my portfolio and resume. Everything is going pretty well, except when I load it up in IE my navigation bar looks like a set of stairs, and my Flickr badge is just flat out screwy. You can see it at:

http://chetgassett.com/new

Here are examples so that you don't have to load it up in IE if you don't want to.

http://chetgassett.com/new/forum/nav.jpg

http://chetgassett.com/new/forum/flickr.jpg


/* Stylesheet for ChetGassett.com
Author: Chet Gassett
E-mail: chetgassett@gmail.com
URL: http://chetgassett.com */

body {
background-image: url(../images/background.jpg);
background-position: top left;
background-repeat: repeat;
}

/*Construction*/

#container {
max-width: 950px;
min-height: 600px;
margin: 15px auto;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
-opera-border-radius: 25px;
}

#header {
width: 100%;
min-height: 10px;
}

#nav {
width: 100%;
height: 50px;
}

#biobar {
background-image: url(../images/biobar.jpg);
background-repeat: repeat-x;
background-position: top left;
max-width: 70%;
min-height: 225px;
margin: 20px auto 0;
}

#wrapper {
width: 100%;
}

#wrapper #subnav, #wrapper #content {
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
-opera-border-radius: 25px;
}

#subnav {
width: 30%;
float: right;
margin: 13px;
min-height: 380px;
}

#content {
width: 60%;
float: left;
margin: 17px;
}

#content #posts {
padding-top: 15px;
}

#footer {
clear: both;
}

/*Colors*/

#container {
background-color: #333030;
border: 2px solid #524F4F;
color: #a69696;
}

#subnav {
background-color: #2c2a2a;
}

#content {
background-color: #2c2a2a;
}


/*Typography*/

#container {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}

#nav {
text-align: center;
color: #a69696;
}

#biobar {
padding-top: 10px;
line-height: 30px;
}

#biobar strong {
font-size: 30px;
font-family: 'Trajan Pro';
}

#wrapper #subnav, #wrapper #content {
padding: 5px;
}

/*Images*/

img {
border: none;
}

/*Links*/

#container a {
color: #a69696;
text-decoration: none;
font-weight: bold;
}

#container a:hover {
border-bottom: none;
}

#biobar a {
border-bottom: dashed 2px #a69696;
}


/*Lists*/


#nav ul {
margin: 0 135px;
font-family: Helvetica, sans-serif;
list-style-type: none;
}

#nav li a{
background-image: url(../images/nav/back.png);
background-repeat: no-repeat;
min-height: 50px;
min-width: 110px;
list-style-type: none;
padding: 10px 0 0 0;
margin: 0 5px 0 5px;
float: left;
display: block;
}

#nav li a:hover {
background-image: url(../images/nav/hover.png);
background-repeat: no-repeat;
list-style-type: none;
}

#wrapper #content ul {
padding: 0;
margin: 20px;
}

#wrapper #content #posts ul {
padding: 15px;
margin: 20px;
}


#wrapper #subnav ul {
text-align: center;
padding: 0;
margin: 0;
}

#wrapper li {
list-style-type: none;
padding: 0;
margin: 0;
}

#wrapper #subnav li{
margin: 5px 0 5px;
}

/*Classes*/

#container .bracket {
background-image: url(../images/bracket.png);
background-repeat: no-repeat;
min-width: 100px;
min-height: 220px;
float: left;
margin-left: 50px;
}

#container .bracketr {
background-image: url(../images/bracketr.gif);
background-repeat: no-repeat;
min-width: 100px;
min-height: 300px;
float: right;
}

#wrapper #content .title {
font-size: 14px;
text-decoration: underline;
font-family: 'Trajan Pro';
margin-top: 25px;
}

.clear {
clear: both;
}

/*Headers*/

#wrapper #content #posts h3 {
margin: 0;
padding: 0 0 0 15px;
font-size: 30px;
}

#wrapper #content h3 {
margin: 0;
padding: 0 0 0 15px;
}

/*Flickr Badge*/

/*
Images are wrapped in divs classed "flickr_badge_image" with ids
"flickr_badge_imageX" where "X" is an integer specifying ordinal position.
Below are some styles to get you started!
*/
#flickr_badge_uber_wrapper {
text-align:center;
width: 100%;
}

#flickr_badge_wrapper {
padding:10px 0 10px 0;
margin: 0 25px 0;
}

.flickr_badge_image {
margin:0 10px 10px 10px;
float: none;
display: inline;
}


.flickr_badge_image img {
border: 1px solid #FFF !important;
width: auto;
float: left;

}

#flickr_badge_source {
text-align:left;
margin:0 10px 0 10px;
}

#flickr_badge_icon {
float: left;
margin-right:5px;
}

#flickr_www {
display:block;
padding:0 10px 0 10px !important;
font: 11px Arial, Helvetica, Sans serif !important;
color:#3993ff !important;
}

#flickr_badge_uber_wrapper a:hover,
#flickr_badge_uber_wrapper a:link,
#flickr_badge_uber_wrapper a:active,
#flickr_badge_uber_wrapper a:visited {
text-decoration:none !important;
background:inherit !important;
color:#3993ff;
}

#flickr_badge_source {
padding:0 !important;
font: 11px Arial, Helvetica, Sans serif !important;
color:#666666 !important;
}

I hope you guys can help me out with this. Thanks in advance!!

-ChetG

Hello ChetG,
I made a few changes in your CSS..
try this

/*Lists*/


#nav {
width: 600px;
margin: 0 auto; /**give it a width and center it with margins**/
text-align: center;
color: #a69696;
}
#nav ul {
font-family: Helvetica, sans-serif;
list-style-type: none;
}
#nav li {
float: left; /**float the li**/
}
#nav li a {
display: block; /**style the links**/
width: 110px;
height: 33px;
margin: 0 5px 0 5px;
padding: 10px 0 0 0;
background: url(back.png) no-repeat;
}

#nav li a:hover {
list-style-type: none; /**style the hover**/
background: url(hover.png) no-repeat;
}



Hope that helps!


...

Thanks for that. The major issue was telling the anchors to float left, and not just the list items in general. I don't know why, but it's better now.

Anyone have any ideas about the flickr badge?

All of my Problems are solved now. This thread can be killed now.

Thanks again for your help