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 Coder
    Join Date
    Sep 2007
    Posts
    19
    Thanks
    4
    Thanked 0 Times in 0 Posts

    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.





    Code:
    /* 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

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,671
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello ChetG,
    I made a few changes in your CSS..
    try this
    Code:
    /*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!


    ...
    Last edited by Excavator; 11-24-2008 at 02:43 AM. Reason: forgot to tell you I changed the path to your images to edit locally and you will need to change them back.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    ChetG (11-24-2008)

  • #3
    New Coder
    Join Date
    Sep 2007
    Posts
    19
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Thanks!

    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?

  • #4
    New Coder
    Join Date
    Sep 2007
    Posts
    19
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Solved

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

    Thanks again for your help


  •  

    Posting Permissions

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