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:
 Original
- html4strict Code |
|
|
|
<img id="logo" src="images/logo.gif" alt="Palladio Tours Logo"><br> <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:palladio@aol.com"><img src="images/contact.gif" alt="Contact Us"></a></li> </ul>
</div>
</div>
And the relevant CSS;
css Code:
| Original
- 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!
Dev Shed Forums Sponsor:
May 6th, 2008, 05:34 PM
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
