SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Some margin/padding issues in FF/IE

    Here is my site I'm working with: www.kentuckygolfing.com

    I'm having a problem with the "recent pictures" thumbnails. I can't seem to get them to look the same with FF/IE. More margin on the bottom of the UL in FF than there is in IE for one and another I just can't get the left and right margin's/padding right so that it looks like this image:



    BonRouge, if you're out there...I followed your easy gallery on your site to get this far, but I guess I've made a mess of it some way or another here.

    I want the spacing on the "recent pictures" images to look like (or as close as possible) to the image above. Seems that I can't get the left and right margin's correct. It's either really messed up where it has to much margins and messes the navigation menu where it drops down below the main content, or there is not enough (like you see on the live page currently) and there is to much space on the left and right of the unordered list. I'd like to have the left and right margin's of the unordered list to set flush in line with the "recent pictures" bottom grey border...but as you can see now they sit slightly inside it.

    There is also less margin-bottom on the UL in IE than there is in FF...this part actually looks better in IE than does FF.

    The CSS for this UL/LI is at the very bottom of the CSS File (sorry I know it's a mess right now)

    I also have a small IE only conditional in the head of the HTML that is probably also messing things up, but in my trials, I can't get it worked out.
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  2. #2
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Deron,
    See if this works for you:
    Code:
    body {
    background-color: #fff;
    min-width: 850px;
    text-align: center;
    font-family: arial, sans-serif, helvetica;
    font-size: 12px;
    color: #666;
    border-top: 15px solid #3080cb;
    }
    * {
    padding: 0;
    margin: 0;
    }
    h1 {
    font-family: Georgia, arial, sans-serif;
    font-size: 16px;
    }
    h1 a:link    { 
    text-decoration: none;
    color: #57ad40; 
    }    
    h1 a:visited { 
    color: #57ad40; 
    text-decoration: none;
    }   
    h1 a:hover   {
    text-decoration: underline;
    color: #57ad40;
    }
    h2 {
    font-size: 12px;
    border-bottom: 1px solid #999;
    margin: 0 0 5px 0;
    }
    h3 {
    font-size: 12px;
    margin: 20px 0 20px 0;
    border-bottom: 1px solid #999;
    }
    h4 {
    font-size: 12px;
    }
    a:link { 
    text-decoration: none;
    color: #3080cb; 
    }    
    a:visited { 
    text-decoration: none;
    color: #3080cb; 
    }   
    a:hover {
    text-decoration: underline;
    color: #3080cb;
    }
    #wrap {
    background: url(bg.gif) repeat-y;
    width: 850px;
    margin:  0 auto 0 auto;
    padding-bottom: 20px;
    text-align: left;
    }
    #wrap:after {
    content: ".";
    display: block;
    height: 0;
    font-size: 0;
    clear: both;
    visibility: hidden;
    }
    #wrap {display: inline-table;}
    
    /* Hides from IE5/Mac \*/
    * html #wrap {height: 1px;}
    #wrap {display: block;}
    /* End hide from IE5/Mac */
    
    #header {
    width: 850px;
    height: 109px;
    background: #fff;
    padding-top: 10px;
    }
    #left_header {
    float: left;
    overflow: hidden;
    }
    #right_header {
    float: right;
    }
    #left_header img {
    border: none;
    }
    #maincontent {
    float: left;
    width: 480px;
    }
    #maincontent div {
    padding: 0 10px 0 0;
    }
    .mainbodytext {
    margin: 10px 0 5px 0;
    }
    .homepage_article_body {
    margin-bottom: 10px;
    }
    .featured_course_image {
    float: left;
    padding: 1px;
    margin: 0 5px 0 0;
    border: 1px solid #57ad40;
    height: 50px;
    width: 50px;
    }
    p.featured_course {
    font-size: 11px;
    }
    .excerpt_image {
    float: left;
    padding: 1px;
    margin: 0 5px 0 0;
    border: 1px solid #57ad40;
    height: 50px;
    width: 50px;
    }
    .comment_time_author {
    font-size: 11px;
    background: #e3f1dd;
    margin: 3px 0 0 0;
    height: 15px;
    }
    .date {
    background: url(/images/calendar.gif) no-repeat 0 50%;
    padding-left: 15px;
    margin: 0 0 0 3px;
    }
    .posted_by {
    background: url(/images/poster.gif) no-repeat 0 50%;
    padding-left: 15px;
    margin: 0 0 0 3px;
    }
    .filed_in {
    background: url(/images/folder.gif) no-repeat 0 50%;
    padding-left: 15px;
    margin: 0 0 0 3px;
    }
    .comment_invite_icon {
    background: url(/images/commenticon.gif) no-repeat 0 50%;
    padding-left: 15px;
    margin: 0 0 0 3px;
    }
    .right_left_arrows {
    font-size: 14px;
    }
    #prev_next {
    margin: 20px 0 0 0;
    overflow: hidden;
    width: 470px;
    }
    #prev {
    float: left;
    }
    #next {
    float: right;
    }
    #recent_posts ul {
    list-style: none;
    border: none;
    }
    #recent_posts ul li {
    border-bottom: 1px dotted #ccc;
    }
    
    /* Hides from IE-mac \*/
    * html  #recent_posts ul li{height: 1%;}
    /* End hide from IE-mac */
    
    #recent_posts ul li a {
    display: block;
    padding: 2px 2px 2px 3px;
    text-decoration: none;
    }
    #recent_posts ul li a:hover {
    text-decoration: none;
    color: #3080cb;
    background: #daeaee;
    }
    #recent_forum_topics ul {
    list-style: none;
    border: none;
    }
    #recent_forum_topics ul li {
    border-bottom: 1px dotted #ccc;
    }
    
    /* Hides from IE-mac \*/
    * html  #recent_forum_topics ul li{height: 1%;}
    /* End hide from IE-mac */
    
    #recent_forum_topics ul li a {
    display: block;
    padding: 2px 2px 2px 3px;
    text-decoration: none;
    }
    #recent_forum_topics ul li a:hover {
    text-decoration: none;
    color: #3080cb;
    background: #daeaee;
    }
    .more_articles {
    padding: 10px 0 0 10px;
    background: url(/images/greenarrow.gif) no-repeat  0 70%;
    }
    .more_articles a { 
    text-decoration: none;
    color: #57ad40; 
    font-weight: bold;
    }    
    .more_articles a:visited { 
    text-decoration: none;
    color: #57ad40; 
    font-weight: bold;
    }   
    .more_articles a:hover {
    text-decoration: underline;
    color: #57ad40;
    font-weight: bold;
    }
    .joinforums {
    padding: 10px 0 0 10px;
    background: url(/images/greenarrow.gif) no-repeat  0 70%;
    }
    .joinforums a { 
    text-decoration: none;
    color: #57ad40; 
    font-weight: bold;
    }    
    .joinforums a:visited { 
    text-decoration: none;
    color: #57ad40; 
    font-weight: bold;
    }   
    .joinforums a:hover {
    text-decoration: underline;
    color: #57ad40;
    font-weight: bold;
    }
    #search { 
    border: 0;
    }
    #search input {
    border: 1px solid #3080cb;
    height: 15px;
    }
    #search button {
    width: 17px; 
    height: 17px; 
    border: 0;
    background: url(/images/gobutton.gif) no-repeat 0 50%;
    cursor: pointer; 
    padding-left: 2px;
    }
    #search legend,#search button {
    /*hide the legend and button text */
    text-indent: -9999px;
    }
    #search legend {
    /*Remove the legend remnants*/
    display: none;
    }
    #search label {
    background: url(/images/magnifyingglass.gif) no-repeat 0 50%;
    height: 8px;
    width: 8px;
    padding-left: 12px;
    font-size: 11px;
    }
    .search_results {
    border-bottom: 1px solid #3080cb;
    margin-bottom: 15px;
    }
    .search_results_link {
    color: #57ad40
    }
    #rightcontent {
    float: left;
    width: 170px;
    }
    #rightcontent div {
    padding: 0 0 0 10px;
    }
    #rightcontent ul {
    list-style: none;
    border: none;
    }
    #rightcontent ul li {
    border-bottom: 1px dotted #ccc;
    background: url(/images/bluearrow.gif) no-repeat 0 55%;
    padding: 0 0 0 6px;
    }
    
    /* Hides from IE-mac \*/
    * html  #rightcontent ul li{height: 1%;}
    /* End hide from IE-mac */
    
    #rightcontent ul li a {
    display: block;
    padding: 2px 2px 2px 3px;
    text-decoration: none;
    }
    #rightcontent ul li a:hover {
    text-decoration: none;
    color: #3080cb;
    background: #daeaee;
    }
    #secondary {
    background: #3080cb;
    height: 65px;
    }
    #footer {
    color: #fff;
    font-size: 11px;
    width: 850px;
    text-align: left;
    margin: auto auto;
    padding: 10px 0 0 0;
    }
    #footer a {
    color: #ffc000;
    text-decoration: none;
    }
    #footer a:visited { 
    color: #ffc000; 
    text-decoration: none;
    }   
    #footer a:hover   {
    text-decoration: underline;
    color: #ffc000;
    }
    #article_body {
    margin: 8px 0 0 0;
    }
    input#remember, input#forget {
    margin-right: 5px;
    }
    p.rememberinfo {
    margin: 10px 0 10px 0;
    }
    .not_public {
    font-size: 10px;
    font-weight: normal;
    }
    #comment_form label {
    padding: 2px 0 2px 0;
    font-weight: bold;
    }
    input {
    border: 1px solid #999;
    padding-left: 2px;
    }
    textarea {
    padding: 2px;
    border: 1px solid #999;
    width: 460px;
    }
    .comments_not_allowed {
    margin-top: 20px;
    }
    #comments_error {
    margin: 10px 0 10px 0;
    margin-left: 18px;
    }
    #comments_display dt {
    /*style the commenter info*/
    padding: 4px 0;
    background: #fff;
    }
    #comments_display dd {
    background: #eee;
    border: 1px solid #ddd;
    }
    #comments_display dd p {
    padding: 5px;
    }
    #comments_display ul {
    list-style: none;
    }
    #comments_display ul li {
    margin: 10px 0 0 0;
    }
    .comment-num {
    font-size: 12px;
    font-weight: bold;
    color: #57ad40;
    margin: 0 10px 0 0;
    }
    .comment-num:before {
    content: "# ";
    }
    #comment_disclaimer {
    margin: 0 0 20px 0;
    font-size: 11px;
    }
    .red {
    color: red;
    margin: 10px 0 0 0;
    }
    
    
    #rating {
    margin: 20px 0 0 0;
    }
    table {
    width: 470px;
    clear:both;
    }
    .description {
    padding: 20px 0 0 0; 
    font-size: 14px; 
    color: #57ad40; 
    font-weight: bold;
    }
    .column {
    background: #eee;
    border: 1px solid #ddd;
    color: #666;
    padding: 0 0 0 2px;
    }
    .yardageslope {
    color: #57ad40;
    font-weight: bold;
    }
    .asterisk {
    color: red;
    }
    #course_disclaimer {
    font-size: 10px;
    margin-top: 20px;
    }
    #course_disclaimer p {
    margin-top: 10px;
    }
    
             	
    
             	/*             styles for the star rater                */
    	.star-rating{
    		list-style:none;
    		width: 125px;
    		height: 25px;
    		position: relative;
    		background: url(/images/star.gif) top left repeat-x;
    	}
    	.star-rating li{
    		/*\*/
    		float: left;
    		/* */
    	}
    	.star-rating li a{
    border: 0;
    		display:block;
    		width:25px;
    		height: 25px;
    		text-decoration: none;
    		text-indent: -9000px;
    		z-index: 20;
    		position: absolute;
    	}
    	.star-rating li a:hover{
    		background: url(/images/star.gif) left bottom;
    		z-index: 2;
    		left: 0px;
    	}
    	.star-rating a.one-star{
    		left: 0;
    	}
    	.star-rating a.one-star:hover{
    		width:25px;
    	}
    	.star-rating a.two-stars{
    		left:25px;
    	}
    	.star-rating a.two-stars:hover{
    		width: 50px;
    	}
    	.star-rating a.three-stars{
    		left: 50px;
    	}
    	.star-rating a.three-stars:hover{
    		width: 75px;
    	}
    	.star-rating a.four-stars{
    		left: 75px;
    	}
    	.star-rating a.four-stars:hover{
    		width: 100px;
    	}
    	.star-rating a.five-stars{
    		left: 100px;
    	}
    	.star-rating a.five-stars:hover{
    		width: 125px;
    	}
    	.star-rating li.current-rating{
    		background: url(/images/star.gif) left center;
    		position: absolute;
    		height: 25px;
    		display: block;
    		text-indent: -9000px;
    		z-index: 1;
    	}
    .ratingerror {
    color: red;
    padding-left: 5px;
    }
    .rating_number {
    color: #57ad40;
    padding-left: 5px;
    }
    .thanks_for_voting {
    color: #57ad40;
    }
    #email_to_friend {
    background: url(/images/email.gif) no-repeat 0 50%;
    padding-left: 15px;
    font-size: 11px;
    }
    #rating {
    font-size: 11px;
    }
    #course_rating_text {
    padding-left: 5px;
    }
    #course_images {
    font-size: 11px;
    }
    #course_images_text {
    padding-left: 3px;
    }
    #course_images img {
    border: 1px solid #3080cb;
    padding: 1px;
    margin: 10px 5px 0 3px;
    }
    ul.wet_thumbfilter {
    padding: 5px 0 0 0;
    list-style-type: none;
    }
    ul.wet_thumbfilter li {
    float: left;
    padding: 5px 0 0 5px;
    }
    ul.wet_thumbfilter li img {
    border: 1px solid #3080cb;
    padding: 1px;
    }
    .clear {
    clear: left;
    }
    #middlecontent{
    float: left;
    width: 190px;
    margin-left:5px;
    display:inline;
    }
    #middlecontent div {
    padding: 0 10px 7px;
    }

  3. #3
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey!

    I actually fixed it before I read your post. I tried the code you supplied though and it moved the navigation menu because the width changed for the middle content and made a couple other things display wrong like the search box (which I'd just have to change the width on).

    Anyway, I was wondering if you wouldn't mind taking a quick look at the code to see what you think? The way I eventually got it to work was get it to look the way I wanted in FF, and then use IE 6 conditionals in the head of the html document. I had to use a couple of negative margins to move the pictures around in IE so they displayed the same as FF. I haven't really done much with negative margins and was wondering if this is okay to do? I seems to work, so I don't know.
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  4. #4
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My first thought was that you shouldn't need so many differences for IE, so I removed the IE style and started playing with the regular style. I was kind of getting there, but it did seem like too much trouble. You 've done a good job getting it to look the same in both browsers. I'd be happy with that.

  5. #5
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah I figured I didn't need to use so many IE conditionals, but it seemed that was the only way I could get it to do what I wanted. I guess it's my inexperience with a lot of the IE/FF differences and that I just don't know how to prepare for them all or avoid them.

    I guess I'm happy also with the result. It works, so I need to just move on. lol.

    Now to see what it looks like in something like FF on Mac and Safari on Mac (fingers crossed)

    EDIT: Well everything actually looks good in Safari/FF on Mac except the search input bar. It's longer than it should be so the "go" button is pushed down a line. Have not checked IE Mac yet. It could be ugly.
    Last edited by deronsizemore; Sep 22, 2006 at 06:20.
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore


Bookmarks

Posting Permissions

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