PDA

Click to See Complete Forum and Search --> : Need help with CSS positioning of picture & Menu

prospmw
03-07-2008, 08:22 AM
Photo and menu don't line up on all browsers...any clues? Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>


<style type="text/css">
#info {position:relative;}
p.bold {padding-left:15px; color:#c00;}
a.linkup {position:relative;}
a.buttonup {position:absolute; top:200px; left:745px; border:0;}
a.buttonup img {border:0;}
.gleft {float:left; margin:25px 0 10px 0;}
.gright {float:right; margin:25px 5px 10px 0;}
.grc {margin:20px 0 0 10px;}









.menu {width:745px; height:32px; font-size:0.85em; position:relative; z-index:100;border-right:1px solid #000;}
* html .menu {width:745px; w\idth:745px;}

.menu ul {padding:0;margin:0;list-style-type:none;}
.menu ul ul {width:146px;}
.menu li {float:left;width:146px;position:relative;}
.menu a, .menu a:visited {display:block;font-size:12px;text-decoration:none; color:lightblue; width:138px; height:30px; border:1px solid #000; border-width:1px 0 1px 1px; background:darkslategray; padding-left:10px; line-height:29px;}

* html .menu a, * html .menu a:visited {width:146px; w\idth:138px;}


.menu ul ul a.drop, .menu ul ul a.drop:visited {background:silver url(http://www.cssplay.co.uk/graphics/drop.gif) bottom right no-repeat;}

.menu ul ul a.drop:hover{background:silver url(http://www.cssplay.co.uk/graphics/drop.gif) bottom right no-repeat;}
.menu ul ul :hover > a.drop {background:silver url(http://www.cssplay.co.uk/graphics/drop.gif) bottom right no-repeat;}

.menu ul ul ul a, .menu ul ul ul a:visited {background:darkslategray;}

.menu ul ul ul a:hover {background:darkslategray;}



.menu ul ul {visibility:hidden;position:absolute;height:0;top:31px;left:0; width:138px;border-top:1px solid #000;}

* html .menu ul ul {top:30px;t\op:31px;}


.menu ul ul ul{left:150px; top:-1px; width:150px;}


.menu ul ul ul.left {left:-150px;}


.menu table {position:absolute; top:0; left:0; border-collapse:collapse;;}

.menu ul ul a, .menu ul ul a:visited {background:silver; color:#000; height:auto; line-height:1em; padding:5px 10px; width:131px;border-width:0 1px 1px 1px;}

* html .menu ul ul a, * html .menu ul ul a:visited {width:128px;w\idth:128px;}


.menu a:hover, .menu ul ul a:hover{color:#fff; background:lightslategray;}
.menu :hover > a, .menu ul ul :hover > a {color:#fff;background:lightslategray;}


.menu ul li:hover ul,
.menu ul a:hover ul{visibility:visible; }
.menu ul :hover ul ul{visibility:hidden;}
.menu ul :hover ul :hover ul{ visibility:visible;}

</style>

</head>
<body bgcolor="#ffefd5">




<div class="menu">

<ul>
<li><a href="Index.htm"><font face="tahoma"><b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;HOME</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->

<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="AboutUs.htm"><font face="tahoma"><b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ABOUT US</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://www.mapquest.com" title="Directions To Colebrook, NH"><font face="tahoma"><b>How To Get Here</a></li>
<li><a href="DunkBooth.htm" title="Dunk Booth for Local Rental"><font face="tahoma"><b>Dunk Booth</a></li>

<li><a href="VacationPackages.htm" title="Vacation Packages"><font face="tahoma"><b>Vacation Packages</a></li>

</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="YellowPages.htm"><font face="tahoma"><b>&nbsp;&nbsp;&nbsp;YELLOW PAGES<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>

<li><a href="Dining.htm"><font face="tahoma"><b>Dining</a></li>
<li><a href="Lodging.htm"><font face="tahoma"><b>Lodging</a></li>
<li><a href="Services.htm"><font face="tahoma"><b>Services</a></li>


</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a href="Calendar.htm"><font face="tahoma"><b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CALENDAR<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->

<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a href="AreaInformation.htm"><font face="tahoma"><b>&nbsp;AREA INFORMATION&nbsp;&nbsp;<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul> <li><a href="AreaOrganizations.htm"><font face="tahoma"><b>Organizations</a></li>
<li><a href="LocalSchools.htm"><font face="tahoma"><b>Local Schools</a></li>
<li><a href="PlacesOfWorship.htm"><font face="tahoma"><b>Places Of Worship</a></li>
<li><a href="PointsOfInterest.htm"><font face="tahoma"><b>Points Of Interest</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>



</li>
</ul>



</div> <!-- end of info -->
<div id="info_right">
<div style="width:99.5%;height:100px;border:0px solid darkslategray;background:url(Images/ChamberPremier3.jpg) repeat;">
<div style="color:orange;width:50%px;height:80px;margin-top:95px;margin-bottom:40px;font-size:30px;font-family:tahoma;font-weight:bold;line-height:4em;text-align:center;">North Country Chamber Of Commerce</div>
</div>



<div class="menu">

<ul>
<li><a href="MooseFestival.htm"><font face="tahoma"><b>&nbsp;&nbsp;&nbsp;&nbsp;MOOSE FESTIVAL</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul> <li><a href="Letters.htm"><font face="tahoma"><b>Letter to Vendors/Crafters</a></li>
<li><a href="FoodVendorApp.htm"><font face="tahoma"><b>Food Vendor Application</a></li>
<li><a href="CraftersApp.htm"><font face="tahoma"><b>Crafters Application</a></li>
<li><a href="AutoShowApp.htm"><font face="tahoma"><b>Auto Show Application</a></li>
<li><a href="PhotographyContest.htm"><font face="tahoma"><b>Photography Contest Entry Form</a></li>
<li><a href="PhotoAlbums.htm"><font face="tahoma"><b>Photo Albums</a></li>

</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="WhatToDo.htm"><font face="tahoma"><b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;WHAT TO DO</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="AnimalWatching.htm"><font face="tahoma"><b>Animal Watching</a></li>
<li><a href="Atving.htm"><font face="tahoma"><b>ATVing</a></li>
<li><a href="BirdWatching.htm"><font face="tahoma"><b>Bird Watching</a></li>
<li><a href="Boating.htm"><font face="tahoma"><b>Boat/Kayak/Canoe</a></li>
<li><a href="Camping.htm"><font face="tahoma"><b>Camping</a></li>
<li><a href="CoveredBridges.htm"><font face="tahoma"><b>Covered Bridges</a></li>
<li><a href="Fishing.htm"><font face="tahoma"><b>Fishing</a></li>
<li><a href="Hiking.htm"><font face="tahoma"><b>Hiking</a></li>
<li><a href="HistoricalPlaces.htm"><font face="tahoma"><b>Historical Places</a></li>
<li><a href="Hunting.htm"><font face="tahoma"><b>Hunting</a></li>
<li><a href="LakesPonds.htm"><font face="tahoma"><b>Lakes And Ponds</a></li>
<li><a href="MooseWatching.htm"><font face="tahoma"><b>Moose Watching</a></li>
<li><a href="Skiing.htm"><font face="tahoma"><b>Skiing</a></li>
<li><a href="Snowmobiling.htm"><font face="tahoma"><b>Snowmobiling</a></li>
<li><a href="Waterfalls.htm"><font face="tahoma"><b>Waterfalls</a></li>

</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="Weather.htm"><font face="tahoma"><b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;WEATHER<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul> <li><a href="http://www.fairbanksmuseum.org/eye_detailed.cfm" title="Fairbanks Museum - St. Johnsbury, VT"><font face="tahoma"><b>Local Weather</a></li>
<li><a href="http://www.pittsburgridgerunners.org/Trails.html" title="Webcams"><font face="tahoma"><b>Pittsburg Ridge Runners Webcams</a></li>
<li><a href="http://www.cabinsatlopstick.com/GNW/WebCam.html" title="Webcam"><font face="tahoma"><b>Lopstick's Webcam</a></li>
<li><a href="http://www.johnsnhweather.com" title="Doplar Satellite Imagery"><font face="tahoma"><b>John's Weather</a></li>
<li><a href="http://www.thebalsams.com/weather_snow_conditions.aspx" title="Snow Conditions"><font face="tahoma"><b>Balsams Snow Conditions</a></li></ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="mailto:nccoc@ncia.net"><font face="tahoma"><b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTACT US<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->

<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="Tours.htm"><font face="tahoma"><b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;TOURS<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul> <li><a href="Tour1.htm"><font face="tahoma"><b>Historical Loop Tour</a></li>
<li><a href="Tour2.htm"><font face="tahoma"><b>Critters Tour</a></li>
<li><a href="Tour3.htm"><font face="tahoma"><b>Mountain Tour</a></li>
<li><a href="Tour4.htm"><font face="tahoma"><b>Canadian Tour</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>



</li>
</ul>



</div> <!-- end of info -->
<div id="info_right">


</div>
skywalker2208
03-07-2008, 09:13 AM
Is this on a live server somewhere?
WebJoel
03-09-2008, 10:52 PM
Not sure if I want to copy-&-paste this into an html-editor, -would like to see it hosted live somewhere...

You know, -you could get rid of all those font face="tahoma", every single one of them, by merely stating li a {font-family: tahoma;}, once, in your CSS...

I'd even recommend adding to "font-family" a second-choice, third choice, and serif to this... :)