SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict capescafe's Avatar
    Join Date
    Dec 2004
    Location
    Bellevue, WA
    Posts
    222
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question Problem with site layout...can someone help?

    Hi all,
    I've got 2 issues on a site I'm working on that are bugging me and I just cannot figure out what it is that's causing the problems. I'll paste the code below.

    First of all there's an image in the upper left corner that I want to link back to the home page, but in Firefox only the left part of the image will link. When you hover over the image you can only see the hand on about the left 1/4 of the image. I just cannot figure out why.

    Second, in IE7 all the top links that should be up on the top white bar are bumped down below into the content section. I've tried everything I can think of to fix these issues and just am not getting anywhere.

    Can someone look at my code and help me figure out how to fix these problems? Thanks!

    Here's the HTML:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Testing Page for Layout</title>
    <link rel="stylesheet" type="text/css" href="1299MassAve-styles.css" />
    </head>
    <body>
    <div id="wrap">
    	<div id="header">
        	<div id="logo"><a href="index.html"><img src="images/1299-Massachusetts-Ave.jpg" width="303" height="100" alt="1299 Massachusetts Avenue" /></a>
                <div id="navigation">
                	<div id="mainmenu">
                    <ul>
                    <li><a href="#">This is Link 1</a></li>
                    <li><a href="#">And This is Link 2</a></li>
                    <li><a href="#" class="last">And Finally Link 3</a></li>
                    </ul>
                    </div> <!-- /mainmenu -->
                </div> <!-- /navigation -->
        	</div> <!-- /logo -->
        </div> <!-- /header -->
    	<div id="main">
        	<div id="content">
            	<div id="images">
                <img src="images/1299-Massachusetts-Ave-before.jpg" width="303" height="188" alt="Before pic" />
            	<div id="mapviewer"><iframe id="map" name="mapFrame" scrolling="no" width="303" height="220" frameborder="0" src="http://www.bing.com/maps/embed/?lvl=15&amp;cp=42.320615686476216~-71.06166142970324&amp;sty=r&amp;draggable=false&amp;v=2&amp;rtp=pos.42.320617_-71.06166_1299+Massachusetts+Ave%2C+Dorchester%2C+MA+02125-1603___a_~pos.42.320617_-71.06166_1299+Massachusetts+Ave%2C+Dorchester%2C+MA+02125-1603___a_&amp;mode=D&amp;rtop=0~0~0~&amp;emid=eccd4693-b7e6-86d4-24bb-ebfec7fce6f9&amp;w=303&amp;h=220"></iframe><div id="LME_maplinks" style="line-height:20px;"><a id="LME_largerMap" href="http://www.bing.com/maps/?mm_embed=map&amp;cp=42.320615686476216~-71.06166142970324&amp;lvl=15&amp;sty=r" target="_blank">View Larger Map</a> | <a id="LME_directions" href="http://www.bing.com/maps/?mm_embed=dir&amp;cp=42.320615686476216~-71.06166142970324&amp;rtp=~pos.42.320615686476216_-71.06166142970324_Your+location&amp;lvl=15&amp;sty=r" target="_blank">Get Directions</a> | <a id="LME_birdsEye" href="http://www.bing.com/maps/?mm_embed=be&amp;cp=42.320615686476216~-71.06166142970324&amp;lvl=1&amp;sty=b" target="_blank">View Bird's Eye</a></div>
    </div>
    			
    			</div> <!-- /images -->
            <h1>Heading One</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas congue pretium augue, sed rhoncus urna bibendum vitae. Donec quis libero nec quam placerat tristique quis at elit. Maecenas facilisis, metus eleifend placerat pellentesque, neque magna condimentum est, non sagittis odio nunc sit amet diam. Donec nec risus erat, at viverra ligula. Suspendisse id urna nunc. In sit amet dui purus. Aliquam non ornare orci. Donec sed neque nec elit sodales aliquet a sed lectus. Donec quam magna, ullamcorper sed volutpat eu, porttitor vitae nunc. Curabitur quam metus, lacinia ut convallis et, pulvinar vitae ante. Vestibulum porta lacus sed ipsum auctor id aliquam arcu semper. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam eu malesuada tellus. Nullam eu metus tellus, vitae ultricies dolor. In convallis imperdiet sem et vestibulum. Vestibulum magna arcu, luctus ut porta ullamcorper, egestas eu augue.</p>
    		<p>Curabitur tristique, lorem eget pretium adipiscing, magna metus tempor erat, ac dapibus metus lectus non mauris. Etiam cursus gravida ligula, sed aliquam est laoreet vulputate. Fusce lobortis metus venenatis ligula commodo semper. Suspendisse sodales nulla sed neque faucibus varius. Pellentesque consectetur nulla mattis neque auctor sed aliquet elit malesuada. Curabitur tempus pretium vehicula. Vivamus laoreet lectus eget augue egestas sollicitudin. Sed sit amet aliquet lorem. Vestibulum ornare, ligula ut consectetur placerat, elit tellus tempus elit, eget euismod orci metus sit amet leo. Quisque odio eros, facilisis vitae dictum egestas, facilisis in metus. Sed lacus est, porttitor non dictum et, iaculis nec turpis. Proin quam leo, bibendum sit amet ultricies in, iaculis iaculis dui.</p>
           	</div> <!-- /content -->
        </div> <!-- /main -->
    </div> <!-- /wrap -->
    
    <div id="footer">
    		<p>COPYRIGHT  2010. All rights reserved. Reproduction in whole or in part without permission is prohibited.</p>
    </div> <!-- /footer -->
    </body>
    </html>
    Here's the CSS:

    Code:
    /* overall site structure */
    * {margin:0; padding:0;}
    html, body {height:100%;}
    html {overflow:scroll;}
    #wrap {
    	min-height:100%; 
    	width:100%;
    	margin:-60px auto 0;
    	background:url(images/white-bg-shadow.gif) repeat-y center top;}
    * html #wrap {height:100%;}
    #main {
    	overflow:auto; 
    	width:850px; 
    	margin:0 auto;
    	clear:both;}
    /* Footer */
    #footer {
    	position:relative; 
    	margin:0;
    	height:60px; 
    	clear:both; 
    	background-color:#68748d; 
    	color:#ccc; 
    	font:normal 11px Verdana, Geneva, sans-serif;}
    #footer a {
    	color:#fff; 
    	text-decoration:underline; 
    	font:bold 1em Verdana, Geneva, sans-serif;}
    #footer a:hover {
    	color:#960214; 
    	text-decoration:underline;}
    #footer p {padding:15px 0; margin:0; text-align:center;}
    	
    /*Opera Fix*/
    body:before {
        content:"";
        height:100%;
        float:left;
        width:0;
        margin-top:-32767px;
    }
    
    body {
    	font:bold .8em/1.3em Arial, Helvetica, sans-serif; 
    	background-color:#dae0ee; 
    	color:#7f8082;}
    a img {border:0;}
    a, a:link {color:#3366ff; text-decoration:underline; font-weight:bold;}
    a:hover {color:#960214; text-decoration:underline;}
    p {margin:10px 0 5px 0; text-align:justify;}
    form p {margin:0; text-align:right;}
    
    
    /* Header */
    #header {
    	padding:0; 
    	height:122px;
    	width:100%;
    	background:#fff url(images/header-bg.gif) repeat-x center;
    	border-top:60px solid #fff;
    }
    #header #logo {
    	width:850px; 
    	margin:0 auto; 
    	padding:0;
    }
    #logo #imglogo {
    	margin-top:0; 
    	float:left;
    }
    #navigation {
    	width:502px; 
    	float:right; 
    	height:100px; 
    	margin:0; 
    	padding:0;
    }
    
    /* Main menu settings */
    #mainmenu {
    	clear:both; 
    	float:left; 
    	margin:0; 
    	padding:0; 
    	width:500px;
    	z-index:1000; 
    	position:relative;
    }
    /* Top menu items */
    #mainmenu ul {
    	margin:0; 
    	padding:0; 
    	list-style:none; 
    	float:right; 
    	position:relative; 
    	right:50%;
    }
    #mainmenu ul li {
    	margin:0; 
    	padding:0; 
    	float:left; 
    	position:relative; 
    	left:50%; 
    	top:0;
    }
    #mainmenu ul li a {
    	display:block; 
    	margin:0; 
    	padding:63px 20px 26px 20px; 
    	font:bold 11px Verdana, Geneva, sans-serif; 
    	text-transform:uppercase; 
    	line-height:1em; 
    	text-decoration:none; 
    	color:#071f4c;
    	border-left:1px dotted #ccc;
    }
    #mainmenu ul li a.last {
    	display:block; 
    	margin:0; 
    	padding:63px 20px 26px 20px; 
    	font:bold 11px Verdana, Geneva, sans-serif; 
    	text-transform:uppercase; 
    	line-height:1em; 
    	text-decoration:none; 
    	color:#071f4c;
    	border-left:1px dotted #ccc;
    	border-right:1px dotted #ccc;
    }
    #mainmenu ul li a:hover {
    	background:#f4e5e7; /* Top menu items background colour */ 
    	color:#071f4c;
    }
    #mainmenu ul li:hover a, #mainmenu ul li.hover a { /* This line is required for IE 6 and below */ 
    	background:#f4e5e7; /* Top menu items background colour */ 
    	color:#071f4c;
    }
    
    /* Content Area for index page */
    #content {
    	width:810px; 
    	padding:20px;
    	background-color:#fff;
    }
    #content h1 {
    	font:bold 1.3em Tahoma, Geneva, sans-serif; 
    	margin:0;
    	padding:0; 
    	color:#960214;
    }
    #content h2 {
    	font:bold 1.1em Tahoma, Geneva, sans-serif; 
    	margin:15px 0 10px 0; 
    	color:#960214;
    }
    #content h3 {
    	font:normal 1em Tahoma, Geneva, sans-serif; 
    	margin:15px 0 10px 0; 
    	color:#960214;
    }
    #images {float:left; padding-bottom:20px;}
    #mapviewer {
    	margin:10px 20px 0 0;
    	text-align:center;
    }
    #mapviewer a {font-size:11px;}
    
    #content ul.circle {
    	list-style-type:circle;
    	margin:10px 0 10px 35px;
    	line-height:2em;
    }
    
    /* Breadcrumbs */
    #breadcrumbs {
    	margin-bottom:0; 
    	padding-bottom:20px; 
    	padding-left:0; 
    	overflow:hidden;
    	width:810px;}
    #crumbslist {
    	list-style-type:none; 
    	margin:0; 
    	padding:0; 
    	font-size:11px;}
    #crumbslist li {
    	float:left;
    	list-style-type:none;
    	margin:0 .5em 0 -.5em; 
    	padding:0 .5em 0 .5em; 
    	font:normal 11px Verdana, Geneva, sans-serif;
    	color:#071f4c;}
    #crumbslist a {
    	padding:0 16px 0 0; 
    	_padding:0 16px 0 0; 
    	margin:0; 
    	background:url('images/subnavarrow.gif') right no-repeat; 
    	font-size:11px; 
    	text-decoration:underline;}
    
    .clearfix:after {
    	content:"."; 
    	display:block; 
    	height:0; 
    	clear:both; 
    	visibility:hidden;}
    .clearfix {display:inline-block;}
    * html .clearfix {height:1%;}
    .clearfix {display:block;}
    Carolyn (cape's cafe)
    Twitter | My Treehouse Profile | eBookFling

  2. #2
    SitePoint Addict capescafe's Avatar
    Join Date
    Dec 2004
    Location
    Bellevue, WA
    Posts
    222
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Ok I seemed to have figured out the problem with only part of the image linking. But I can't seem to figure out why IE7 is pushing the div id="navigation" down below the div id="logo" box when navigation is inside logo.

    Any help would be much appreciated.
    Carolyn (cape's cafe)
    Twitter | My Treehouse Profile | eBookFling

  3. #3
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by capescafe View Post
    Ok I seemed to have figured out the problem with only part of the image linking. But I can't seem to figure out why IE7 is pushing the div id="navigation" down below the div id="logo" box when navigation is inside logo.
    It's because you've floated the #navigation, which takes it out of the flow.

    If you have floated and non-floated content within the same container, and you want them to appear side-by-side, you need to have the floated items first in the HTML.

  4. #4
    SitePoint Addict capescafe's Avatar
    Join Date
    Dec 2004
    Location
    Bellevue, WA
    Posts
    222
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Ok, yes just as you posted this...I solved it. I put my image in a div with float:left and that fixed it. Thanks!
    Carolyn (cape's cafe)
    Twitter | My Treehouse Profile | eBookFling


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
  •