SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast Locker's Avatar
    Join Date
    May 2005
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE7 Specific Problem

    I've recently completed a website which works fine in IE6, FireFox and Safari, but there's quite a nasty layout error in IE7. Please take a look here. Any ideas? Help would be greatly appreciated.

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,109
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hello,

    Your CSS can be more efficient so have a look at the changes I have made:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link type="text/css" rel="stylesheet" href="Bradstar&#37;20English%20Setters%20&amp;%20German%20Shepherd%20Dogs_files/style.css">
    <title>Bradstar English Setters &amp; German Shepherd Dogs</title>
    </head>
    <body id="one">
    <div id="wrapper">
      <img id="header" src="Bradstar%20English%20Setters%20&amp;%20German%20Shepherd%20Dogs_files/header.gif" alt="">
      <ul id="nav">
        <li class="one"><a href="http://www.bradstar.co.uk/">Home</a></li>
        <li class="two"><a href="http://www.bradstar.co.uk/about.php">About Us</a></li>
        <li class="three"><a href="http://www.bradstar.co.uk/dogs.php">Dogs</a></li>
        <li class="four"><a href="http://www.bradstar.co.uk/puppies.php">Puppies</a></li>
        <li class="five"><a href="http://www.bradstar.co.uk/gallery.php">Gallery</a></li>
        <li class="six"><a href="http://www.bradstar.co.uk/guestbook.php">Guest Book</a></li>
        <li class="seven"><a href="http://www.bradstar.co.uk/contact.php">Contact Us</a></li>
        <li class="eight"><a href="http://www.bradstar.co.uk/links.php">Links</a></li>
      </ul>
      <div id="content"> <strong>Welcome!</strong><br>
        Welcome to Bradstar! This "is" amazing, don't you think.<br>
        <br>
        <strong>Latest News:</strong><br>
        There are no news items at this time. </div>
    </div>
    <div id="footer">&#169; Bradstar.co.uk 2007. All Rights Reserved.</div>
    </body>
    </html>
    Code:
    /*-------------------------
    | Bradstar Style Sheet
    | Written By: Mark Locker
    | www.DigiStylers.com
    --------------------------*/
    
    
    /*-----
    | Tags
    -----*/
    body {
    	font-family: "Trebuchet MS", "Verdana", "Arial", "Helvetica", "sans-serif";
    	background: #fff url(images/bg.gif);
    }
    
    
    /*----
    | IDs
    ----*/
    #wrapper {
    	width: 751px;
    	margin: 0 auto;
    }
    
    #header {
    	width: 751px;
    	height: 100px;
    	display: block;
    }
    #content {
    	background: #E2E3E7;
    	font-size: .8em;
    	padding: 5px 5px 5px 5px;
    	border: 2px solid #000000;
    	border-top: none;
    }
    #footer {
    	width: 100%;
    	text-align: center;
    	margin-top: 5px;
    	font-size: .6em;
    }
    
    /*--------
    | Classes
    --------*/
    
    .txtbox {
    	background: #F1F2F4;
    	border: 1px solid #000;
    	padding: 2px 3px 2px 3px;
    	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    	font-size: 1em;
    }
    
    .txtboxedit {
    	background-color: #E2E3E7;
    	border: 1px dashed #939FCD;
    	padding: 2px 3px 2px 3px;
    	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    	font-size: 1em;
    }
    
    .button {
    	background-color: #BDC1D2;
    	border: 1px solid #000000;
    }
    
    
    /*--------
    | Nav CSS
    --------*/
    ul#nav{
    	list-style:none;
    	margin:0;
    	padding:0;
    	overflow: hidden;
    	background: #C2CFFF;
    	border: 2px solid #000000;
    }
    ul#nav li {
    	float:left;
    }
    ul#nav li a {
    	float:left;
    	font-size: .8em;
    	padding: 2px 8px;
    	text-decoration: none;
    	background:#C2CFFF;
    	color:#000;
    }
    ul#nav li a:hover{
    	color:#000000;
    	background:#476391;
    }
    ul#nav li span {
    	position:absolute;
    	left:-999em;
    	top:0;
    	height:2em;
    	width:5em;
    	z-index:999;
    }
    
    #one .one a,
    #two .two a,
    #three .three a,
    #four .four a,
    #five .five a,
    #six .six a,
    #seven .seven a,
    #eight .eight a{color:#000;background:#476391;}
    No hacks are needed at all.

    Your menu didn't fit - you had width:100% as well as borders, That makes more than 100% because padding and borders both contribute to the total width of an element

    Make it simple as possible and you won't need to use many hacks at all.

    Hope it helps

  3. #3
    SitePoint Enthusiast Locker's Avatar
    Join Date
    May 2005
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your prompt response! I really shouldn't dive into what I think the problem is, but instead take a step back and contemplate that it could be other elements that are messing things up. Ah well, we learn. Thanks again - works perfectly


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
  •