#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2008
    Posts
    6
    Rep Power
    0

    Image fine in Firefox, clipped in IE 7


    Basic, I know. I've probably just been staring at this thing too long. The building image to the right of the navbar displays correctly in Firefox, and has its top clipped off in IE 7 (not caring at this point about 6).

    Hmm... I guess I can't post a link.

    Crumbs. Well, not sure if its even possible to get help with this thing but maybe describing it with code will make the solution pop to my head.

    I'm doing a quick rebuild of palladio-tours .com to sort of bring the code into this millennia. In my first run through using Firefox to check (mistake) I changed the navbar to a horizontal text CSS based <ul> underneath the Palladio Tours <img> with a <br>.

    Now, in Firefox this works just fine, but in IE 7 (and 6, but again, not caring at this point), the yellow-ish building to the right of the nav list is clipped off exactly above the upper boundary of the list before it.

    Let's see if I can post the relevant code. Html:

    html4strict Code:
    <div id="header">
    <div id="navwrap">
    	<img id="logo" src="images/logo.gif" alt="Palladio Tours Logo"><br>
    	<ul id="nav">
    	<li id="t-home"><a href="index.html">home</a></li>
    	<li id="t-company"><a href="company.html">company</a></li>
    	<li id="t-daily"><a href="daily.html">daily</a></li>
    	<li id="t-weekly"><a href="weekly.html">weekly</a></li>
    	<li id="t-brochure"><a href="brochure.html">brochure</a></li>
    	<li id="t-faq"><a href="faq.html">faq</a></li>
    	<li id="t-contact"><a href="mailto<img src="http://images.devshed.com/fds/smilies/tongue.gif" border="0" alt="" title="Stick Out Tongue" class="inlineimg" />alladio@aol.com"><img src="images/contact.gif" alt="Contact Us"></a></li>
    	</ul>
    </div>
    </div>


    And the relevant CSS;

    css Code:
    body {
    	margin: 0px 0px 0px 0px;
    	padding: 0px;
    	border: 0px;
    	background: #ffffff url(images/header-bg.gif) no-repeat top left;
    	font-family: "times", serif;
        color: #000000;
    	font-size: small;
    	text-align: left;
    	}
     
    * html body {
    	font-size: x-small; /* for IE */
    	f\ont-size: small; /* for IE 6+ */
    	}
     
    #header {
    	text-align: left;
    }
     
    #nav {
    	float: left;
    	list-style: none;
    	margin: 0px 0px 0px 0px;
    }
     
    #nav li {
    	float: left;
    	font-family: "times", serif;
    	font-size: 120%;
    	font-weight: normal;
    	margin: 0px 0px 0px 0px;
    	padding: 0px 0px 0px 0px;
    }
     
    #nav a {
    	float: left;
    	display: block;
    	text-decoration: none;
    	color: #000000;
    	border: 1px solid #000000;
    	border-left: none;
    	margin: 0px;
    	padding: 0px 4px 0px 4px;
    }
     
    #t-home a {
    	padding: 0px 4px 0px 12px;
    }
     
    #t-faq a {
    	border-right: none;
    	padding: 0px 12px 0px 4px;
    }
     
    #t-contact a {
    	border: none;
    	padding: 0px 0px 0px 0px;
    }
     
    #t-contact a img {
    	border: none;
    	margin: -37px 0px 0px 0px;
    	padding: 0px 0px 0px 0px;
    	background: none;
    }
     
    #nav a:hover {
    	background: #FFCE63;
    }
     
    #nav t-contact a:hover {
    	background: #ffffff;
    }
     
    #navwrap {
    	margin: 0px 0px 0px 0px;
    	padding: 65px 0px 0px 90px;
    }
     
    #logo {
    	margin: 0px 0px 6px 50px;
    }


    I wish I could post a link to the live example. It's a file called "shell.html" in the "css-test" folder at the above site. My brain obviously has gas, any help with this fart will be appreciated!
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Welcome to DevShed Forums, navajas.

    Give that <img> position:relative.

    You're using an incomplete doctype, so browsers are rendering the page in quirks mode, which is a bad thing. You should use a complete doctype (one that includes a URL) to get browsers to render as close to the same as possible. I recommend HTML 4.01 Strict. The doctype tells the browser which rendering mode to use for the page.
    Activating the Right Layout Mode Using the Doctype Declaration
    Fix Your Site With the Right DOCTYPE!
    Choosing a DOCTYPE
    Doctype switching
    Rendering Mode and Doctype Switching
    http://www.w3.org/QA/2002/04/valid-dtd-list.html

    As you found out new users are restricted from posting URLs until they have made 5 posts. You may need to get around this by leaving out the "http://" and putting a space before each ".".
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2008
    Posts
    6
    Rep Power
    0
    Kabong. That did it, thanks man!

    Thanks for the welcome, this appears to be a nice place. I think I'll hang out!

IMN logo majestic logo threadwatch logo seochat tools logo