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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    1
    Thanks
    1
    Thanked 0 Times in 0 Posts

    HTML 5 & IE7 Margin Issue

    Morning Everyone.

    First post here so hope I follow guidelines correctly - Apologies if not quite right.

    I've started playing with HTML5 but for some reason am getting an issue with margins in IE7 - I know, age old problem but it's killing me all the same. My problem is I'm more an illustrator than a coder. Hence I hope someone can guide me here.

    There are 4 image boxes 2/3 of the way down the page and everything appears perfectly in all browsers - except IE7 where the final box jumps underneath the others.

    The code:

    Code:
    	<div class="section">
    				<ol class="works-list">
    					<li class="thumb">
    						<div class="thumb-inner">
    							<a href="#">
    								<img src="media/images/works/bookmark.jpg" width="200" height="145" alt="" />
    							</a>
    						</div>
    					</li>
    					<li class="thumb">
    						<div class="thumb-inner">
    							<a href="#">
    								<img src="media/images/works/thumb1.jpg" width="200" height="145" alt="My New Book" />
    							</a>
    						</div>
    					</li>
    					<li class="thumb">
    						<div class="thumb-inner">
    							<a href="mailto:enquiries@davidrashleigh.com">
    								<img src="media/images/works/stamp.jpg" width="200" height="145" alt="Contact David Rashleigh" />
    							</a>
    						</div>
    					</li>
    					<li class="thumb">
    						<div class="thumb-inner">
    							<a href="#"><img src="media/images/works/followme.jpg" width="200" height="145" alt="Follow me on Twitter" /></a>
    						</div>
    					</li>
    				</ol>
    			</div>
    
    			<hr />
    And the CSS:

    Code:
    @import url("reset.css");
    @import url("form.css");
    
    body {
    	background: #444;
    	font: 13px/22px Helvetica, Arial, sans-serif;
    }
    
    /* #header
    ==========================================================*/
    #header { padding: 19px 0 0; }
    	#navigation {}
    		#navigation > ul > li { padding-bottom: 17px; }
    			#navigation > ul > li > a {
    				font-size: 14px;
    				padding: 6px 8px;
    				-webkit-border-radius: 5px;
    				-moz-border-radius: 5px;
    				border-radius: 5px;
    			}
    			#navigation li ul {
    				margin-top: -2px;
    				padding: 7px 0;
    				white-space: nowrap;
    				z-index: 1111;
    				-webkit-border-radius: 5px;
    				-webkit-border-top-left-radius: 0;
    				-moz-border-radius: 5px;
    				-moz-border-radius-topleft: 0;
    				border-radius: 5px;
    				border-top-left-radius: 0;
    			}
    				#navigation li ul a {
    					color: #c1e4f6;
    					line-height: 18px;
    					padding: 0 15px 0 9px;
    				}
    
    			#navigation ul ul,
    			#navigation > ul > li:hover > a { background: #62a6c9; }
    
    		#navigation > ul > li.current-menu-item { background: url("../images/navigation/current-item.png"); }
    
    /* #content
    ==========================================================*/
    #content { padding: 10px 0; }
    
    	/* .home
    	==========================================================*/
    	.home {}
    		.home h2 {}
    			.home h2 span {
    				padding: 0 30px;
    				top: -9px;
    			}
    
    		.home .section { padding: 35px 0 50px; }
    			.home .logo { padding: 21px 0 20px; }
    
    			.home .about {}
    				.home .about h3 {
    					font-size: 48px;
    					line-height: 50px;
    				}
    
    			.home .works-list { margin: -20px 0 0 -20px; }
    				.home .works-list li { margin: 20px 0 0 20px; }
    
    			.home .more { margin: -20px 0 0 -20px; }
    				.home .more .text {
    					margin: 20px 0 0 20px;
    					width: 300px;
    				}
    
    			.home .blog {}
    				.home .blog .text p {
    					font-size: 12px;
    					line-height: 18px;
    				}
    
    				.home .blog .latest-posts {
    					margin: -20px 0 0 -20px;
    					width: 720px;
    				}
    					.home .blog .post {
    						margin: 20px 0 0 20px;
    						width: 220px;
    					}
    						.home .blog .post h3 {
    							line-height: 20px;
    							margin-bottom: 15px;
    						}
    
    				.home .blog .tweet {
    					background-image: url("../images/icons/24/tweet.png");
    					background-position: 0 3px;
    					margin-left: 20px;
    					padding-left: 35px;
    					width: 185px;
    				}
    					.home .tweet .follow { margin-top: 10px; }
    
    	/* .columns
    	==========================================================*/
    	.columns {}
    		.columns .main {
    			margin-left: 80px;
    			width: 720px;
    		}
    			.portfolio .back-to-top {
    				margin-top: 50px;
    				padding-left: 180px;
    			}
    				#content .back-to-top span {
    					background: #fff url("../images/works/back.png") 14px 1px no-repeat;
    					padding: 3px 20px 3px 40px;
    					top: -9px;
    				}
    			.portfolio .message { padding-top: 45px; }
    
    		.columns .sidebar { width: 140px; }
    			.columns #logo { margin-bottom: 55px; }
    			.sidebar .tags-list { font-size: 16px; }
    
    	/* @
    	==========================================================*/
    	.thumb {
    		background-image: url("../images/works/thumb-shadow.png");
    		padding-bottom: 8px;
    		width: 220px;
    	}
    		.thumb .thumb-inner { height: 145px; }
    
    	.tags-list {}
    		.tags-list li + li { margin-top: 3px; }
    		.tags-list li {}
    			.tags-list a { padding: 3px 0; }
    				.tags-list .posts {
    					right: 0;
    					top: 7px;
    				}
    
    	.badge {
    		background: #ddd;
    		display: inline-block;
    		line-height: 15px;
    		padding: 0 5px;
    		-webkit-border-radius: 6px;
    		-moz-border-radius: 6px;
    		border-radius: 6px;
    	}
    
    	.works-list .work + .work { margin-top: 50px; }
    	.work {}
    		.work .description { width: 220px; }
    		.work .gallery {
    			background: url("../images/works/gallery-shadow.png");
    			padding-bottom: 8px;
    			width: 480px;
    		}
    			.work .gallery .photos {
    				height: 340px;
    				width: 460px;
    			}
    				.work .gallery .nivo-controlNav {
    					padding: 1px 2px 8px 9px;
    					right: 0;
    					top: 0;
    					z-index: 1112;
    				}
    					.work .gallery .nivo-controlNav .nivo-control {
    						background: url("../images/works/pages.png");
    						height: 7px;
    						text-indent: -9999px;
    						width: 7px;
    					}
    					.work .gallery .nivo-controlNav .nivo-control + .nivo-control { margin-left: 3px; }
    					.work .gallery .nivo-controlNav .nivo-control.active { background-position: -7px 0; }
    
    	.message { padding: 2px 0; }
    		.message h2 {
    			font-size: 36px;
    			line-height: 40px;
    		}
    
    	.text {}
    		.text h2.with-icon,
    		.text h3.with-icon { padding-left: 40px; }
    		#content h2.with-icon,
    		#content h3.with-icon { background-position: 0 3px; }
    
    		.text .checkmark { background-image: url("../images/icons/24/checkmark.png"); }
    
    		.text h2,
    		.text h3,
    		.text ul,
    		.text p { margin-bottom: 10px; }
    
    		.text ul {}
    			.text ul li + li { margin-top: 7px; }
    			.text ul li {
    				background: url("../images/icons/16/bullet.png") 0 1px no-repeat;
    				padding-left: 25px;
    			}
    
    		.text .meta { color: #cbcbcb; }
    
    	.posts .post + .post { margin-top: 50px; }
    	.post {}
    		.post .meta {}
    			.post .meta li + li { margin-left: 20px; }
    
    		.post-header { margin-bottom: 40px; }
    			.post-header h2 { margin-bottom: 10px; }
    
    		.post-body {}
    			.post-body .thumb { margin: 0 22px 22px 0; }
    			.post-body .excerpt { line-height: 30px; }
    
    		.post-footer { margin-top: 15px; }
    			.post-footer .meta {
    				padding-right: 15px;
    				top: -10px;
    			}
    
    	.posts + .pagination { margin-top: 60px; }
    	.pagination {}
    		.pagination .page { top: -11px; }
    		.pagination .next { padding-left: 15px; }
    			.pagination .next a {
    				background: url("../images/posts/next.png") 100% 1px no-repeat;
    				padding-right: 30px;
    			}
    			.pagination .next a:hover { background-position: 100% -17px; }
    		.pagination .prev { padding-right: 15px; }
    			.pagination .prev a {
    				background: url("../images/posts/prev.png") 0 1px no-repeat;
    				padding-left: 30px;
    			}
    			.pagination .prev a:hover { background-position: 0 -17px; }
    
    /* #footer
    ==========================================================*/
    #footer { padding: 20px 0; }
    	#footer span + span { margin-left: 8px; }
    
    /* ~
    ==========================================================*/
    body,
    #content .tags-list a,
    #content .pagination a:hover,
    #navigation > ul > li > a { color: #888; }
    
    .home .blog { color: #999; }
    
    .message h2,
    .home .about h3 { color: #333; }
    
    .post-header h2,
    #content .post-header h2 a,
    .text h2, #content .text h2 a,
    .text h3, #content .text h3 a { color: #444; }
    
    #content a,
    #content .post-header h2 a:hover,
    #content .tags-list a:hover,
    #content .tags-list .current-menu-item a,
    #content .text a:hover { color: #61a5c9; }
    
    #footer a,
    #content .badge,
    #navigation li li a:hover,
    #navigation > ul > li:hover > a { color: #fff; }
    
    .tags-list .current-menu-item .posts,
    a:hover .badge,
    .badge:hover { background: #62a6c9; }
    
    #content,
    .pagination .page,
    .home h2 span,
    .back-to-top span,
    .post-footer .meta,
    .work .gallery .nivo-controlNav { background: #fff; }
    
    .thumb,
    .home .tweet,
    .text h2.with-icon,
    .text h3.with-icon,
    .work .gallery,
    #navigation > ul > li.current-menu-item {
    	background-position: 50% 100%;
    	background-repeat: no-repeat;
    }
    
    .home h2,
    .pagination,
    .back-to-top { border-top: 1px dashed #ddd; }
    
    .thumb .thumb-inner,
    .work .gallery-inner {
    	border: 1px solid #dadada;
    	padding: 9px;
    }
    
    .tags-list a,
    .home .tweet .follow,
    #navigation li:hover ul,
    #navigation li ul a,
    .back-to-top, .back-to-top a,
    .pagination a,
    .work .gallery .nivo-controlNav .nivo-control { display: block; }
    
    hr,
    #navigation li ul { display: none; }
    
    .work .gallery,
    #navigation,
    #navigation > ul > li,
    .columns .sidebar,
    .columns .main,
    .home .works-list li,
    .home .more .text,
    .home .blog .latest-posts,
    .home .blog .tweet,
    .message h2,
    .post-body .thumb,
    .post-footer .meta,
    .post .meta li,
    .pagination .prev,
    .home .blog .latest-posts .post,
    .work .gallery .nivo-controlNav .nivo-control { float: left; }
    
    .pagination .next,
    .work .description,
    .message .ui-button,
    .post-footer .back-to-top a,
    #header .search { float: right; }
    
    .home .blog .post h3,
    .post-body .excerpt { font-size: 18px; }
    
    .text h2,
    .text h3,
    .home .about p {
    	font-size: 24px;
    	line-height: 36px;
    }
    
    .post-header h2,
    .home .about h3 {
    	font-size: 48px;
    	line-height: 50px;
    }
    
    .badge,
    .home .blog .meta,
    .home .tweet .follow,
    #navigation li ul a { font-size: 11px; }
    
    .text h2,
    .text h3,
    .message h2,
    .badge,
    .post-header h2,
    .home .more .continue,
    .home .about h3,
    #navigation > ul > li > a { font-weight: bold; }
    
    .home .works-list,
    .home .more,
    .work .gallery .photos,
    .home .blog,
    .message,
    .work .gallery .nivo-controlNav { overflow: hidden; }
    
    #navigation li ul,
    .tags-list .posts,
    .nivo-controlNav,
    .post-footer .meta,
    .tags-list li { position: absolute; }
    
    .tags-list li,
    .home h2 span,
    .post-footer,
    .pagination .page,
    #content .back-to-top span,
    .work .gallery .photos,
    #navigation > ul > li { position: relative; }
    
    #footer,
    .home h2,
    .home .logo,
    .home .about { text-align: center; }
    
    #content .badge:hover,
    #content .tags-list a:hover,
    #content .text h2 a:hover,
    #content .text h3 a:hover,
    #content .post-header h2 a:hover,
    #content .pagination a:hover,
    #content a.back-to-top:hover,
    #content .back-to-top a:hover { text-decoration: none; }
    
    #footer a:hover,
    #content a:hover { text-decoration: underline; }
    
    .home h2,
    #content .pagination .page,
    #content .pagination a,
    #content .back-to-top,
    #content .back-to-top a {
    	color: #bbb;
    	font-size: 9px;
    	text-transform: uppercase;
    }
    
    #header > .inner,
    #content > .inner,
    #footer > .inner {
    	margin: 0 auto;
    	width: 940px;
    }
    
    .cf:before,
    .cf:after {
        content: "";
        display: table;
    }
    .cf:after { clear: both; }
    I hope Ive got everything right here good people and offer thanks in advance of any guidance you can offer, it will be much appreciated I promise

    All the best

    Jim
    Last edited by smadamij; 06-08-2012 at 08:43 AM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    I don't find any HTML5 tags in your page except the DOCTYPE.

    Anyway, it looks like the floats are not being applied on those 3 boxes. Have a try after adding
    Code:
    .text{float:left;}
    into your CSS.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    smadamij (06-08-2012)


  •  

    Posting Permissions

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