/    Sign up×
Community /Pin to ProfileBookmark

Need help with CSS positioning of picture & Menu

Copy linkTweet thisAlerts:
Mar 07.2008

Photo and menu don’t line up on all browsers…any clues? Thanks

[code=html]
<!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; width: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; width:138px;}

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

.menu ul ul a.drop:hover{background:silver url([url]http://www.cssplay.co.uk/graphics/drop.gif[/url]) bottom right no-repeat;}
.menu ul ul :hover > a.drop {background:silver url([url]http://www.cssplay.co.uk/graphics/drop.gif[/url]) 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;top: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;width: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:[email protected]”><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”>
[/code]

</div>

to post a comment
CSS

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@skywalker2208Mar 07.2008 — Is this on a live server somewhere?
Copy linkTweet thisAlerts:
@WebJoelMar 10.2008 — 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 [B]font face="tahoma"[/B], every single one of them, by merely stating [B]li a {font-family: tahoma;}, [/B][U]once[/U], in your CSS...

I'd even recommend adding to "font-family" a [I]second-choice, third choice, [/I]and[I] serif[/I] to this... ?
×

Success!

Help @prospmw spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.6,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...