aarondm
02-14-2007, 08:04 AM
Hi...having problem with the alignment of my #menu div on mac based browsers, but not on pc browsers..........can i write a MAC-only conditonal comment to increase the top padding...or is there a simpler way that i've overlooked............
Here the HTML....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>positiv impact webdesign & identity - home</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" type="text/css" href="impacthome.css" />
<link rel="stylesheet" type="text/css" href="impact.css" />
</head>
<body>
<!--[if lt IE 7]>
<style>
#maininfo {
width: 460px; height: 332px; margin: 0 0 0 70px; padding: 0; float: left;
}
#menu {
font-size: 9pt; margin: 4px 0 0 0; padding: 0; float: left;
}
</style>
<![endif]-->
<!--[if IE 7]>
<style>
#maininfo {
width: 460px; height: 332px; margin: 0 0 0 140px; padding: 0; float: left;
}
#menu {
font-size: 9pt; margin: 4px 0 0 0; padding: 0; float: left;
}
</style>
<![endif]-->
<div id="outercontainer">
<img src="mainlogo.gif" width="248" height="46" title="positiv impact webdesign & identity" alt="positiv impact" />
<h5>webdesign <span class="logoorange">& identity solutions</span></h5>
<div id="top">
<div id="menu">
<a href="index.html" title="homepage">home</a>
<a href="webdesign.html" title="webdesign services">webdesign</a>
<a href="identity.html" title="corporate identity services">identity</a>
<a href="portfolio.html" title="portfolio">portfolio</a>
<a href="contact.html" title="contact us for a free consultation">contact</a>
</div>
<h4 title="first impressions. lasting impact.">Turning first impressions<br/>into lasting impact.</h4>
</div>
<div id="inner">
<div id="maininfo">
<h1><span class="welcome">welcome</span> to <span class="positiv">positiv impact</span></h1>
<p class="intro">Based in Berkshire, we provide <span class="orange">individual</span>, <span class="orange">reliable</span> & <span class="orange">affordable</span>
website design & identity solutions for small to medium sized businesses.<br/><br/>
And CSS
body {width: 100%; margin: 0; padding: 0; font-family: arial, sans-serif;
font-size: 8pt; background: #747474; color: #333333; }
#outercontainer {width: 750px; height: 560px; margin: 0 auto; padding: 0;
background: #1a1a1a; color: #333333; }
#outercontainer img { margin: 28px 0 5px 37px; padding: 0; width: 248px; height: 46px; float: left; }
img { margin: 0; padding: 0; }
.logoorange { color: #cc9933; background: #1a1a1a; }
#outercontainer h5 { font-size: 10pt; color: white; background: #1a1a1a; margin: 0; text-align: right; padding: 52px 34px 5px 0; }
#outercontainer .and { color: #ffb875; background: #1a1a1a; }
#top h4 { font-size: 12pt; color: white; background-color: transparent; margin: 0; padding: 65px 30px 0 0; text-align: right; cursor: default; }
#top .banner { color: white; background-color: transparent; text-align: right; }
#menu { font-size: 9pt; margin: 0; padding: 4px 0 0 0; float: left; }
#menu a, #menu a:visited {text-decoration: none; text-align: left; background: #333333; color: #a7a9ac; font-weight: bold;
display: block; width: 115px; padding: 2px 2px 2px 13px; margin: 3px 56px; border: 1px solid white;}
#menu a:hover { border: 1px solid white; padding: 2px 2px 2px 13px; border-right: 7px solid white; background: #1a1a1a; color: #cc9933; font-weight: bold; }
#right { width: 254px; height: 332px; margin: 0; padding: 0; float: left; }
although it maybe from this additonal style sheet, but doubt it.....
#top { width: 750px; height: 130px; margin: 0; padding: 0; background: white url(sunsetbg.jpg) no-repeat bottom; float: left; }
#inner { width: 750px; height: 332px; margin: 0 0 2px 0; padding: 0; b
thanks for help.....!!:)
Here the HTML....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>positiv impact webdesign & identity - home</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" type="text/css" href="impacthome.css" />
<link rel="stylesheet" type="text/css" href="impact.css" />
</head>
<body>
<!--[if lt IE 7]>
<style>
#maininfo {
width: 460px; height: 332px; margin: 0 0 0 70px; padding: 0; float: left;
}
#menu {
font-size: 9pt; margin: 4px 0 0 0; padding: 0; float: left;
}
</style>
<![endif]-->
<!--[if IE 7]>
<style>
#maininfo {
width: 460px; height: 332px; margin: 0 0 0 140px; padding: 0; float: left;
}
#menu {
font-size: 9pt; margin: 4px 0 0 0; padding: 0; float: left;
}
</style>
<![endif]-->
<div id="outercontainer">
<img src="mainlogo.gif" width="248" height="46" title="positiv impact webdesign & identity" alt="positiv impact" />
<h5>webdesign <span class="logoorange">& identity solutions</span></h5>
<div id="top">
<div id="menu">
<a href="index.html" title="homepage">home</a>
<a href="webdesign.html" title="webdesign services">webdesign</a>
<a href="identity.html" title="corporate identity services">identity</a>
<a href="portfolio.html" title="portfolio">portfolio</a>
<a href="contact.html" title="contact us for a free consultation">contact</a>
</div>
<h4 title="first impressions. lasting impact.">Turning first impressions<br/>into lasting impact.</h4>
</div>
<div id="inner">
<div id="maininfo">
<h1><span class="welcome">welcome</span> to <span class="positiv">positiv impact</span></h1>
<p class="intro">Based in Berkshire, we provide <span class="orange">individual</span>, <span class="orange">reliable</span> & <span class="orange">affordable</span>
website design & identity solutions for small to medium sized businesses.<br/><br/>
And CSS
body {width: 100%; margin: 0; padding: 0; font-family: arial, sans-serif;
font-size: 8pt; background: #747474; color: #333333; }
#outercontainer {width: 750px; height: 560px; margin: 0 auto; padding: 0;
background: #1a1a1a; color: #333333; }
#outercontainer img { margin: 28px 0 5px 37px; padding: 0; width: 248px; height: 46px; float: left; }
img { margin: 0; padding: 0; }
.logoorange { color: #cc9933; background: #1a1a1a; }
#outercontainer h5 { font-size: 10pt; color: white; background: #1a1a1a; margin: 0; text-align: right; padding: 52px 34px 5px 0; }
#outercontainer .and { color: #ffb875; background: #1a1a1a; }
#top h4 { font-size: 12pt; color: white; background-color: transparent; margin: 0; padding: 65px 30px 0 0; text-align: right; cursor: default; }
#top .banner { color: white; background-color: transparent; text-align: right; }
#menu { font-size: 9pt; margin: 0; padding: 4px 0 0 0; float: left; }
#menu a, #menu a:visited {text-decoration: none; text-align: left; background: #333333; color: #a7a9ac; font-weight: bold;
display: block; width: 115px; padding: 2px 2px 2px 13px; margin: 3px 56px; border: 1px solid white;}
#menu a:hover { border: 1px solid white; padding: 2px 2px 2px 13px; border-right: 7px solid white; background: #1a1a1a; color: #cc9933; font-weight: bold; }
#right { width: 254px; height: 332px; margin: 0; padding: 0; float: left; }
although it maybe from this additonal style sheet, but doubt it.....
#top { width: 750px; height: 130px; margin: 0; padding: 0; background: white url(sunsetbg.jpg) no-repeat bottom; float: left; }
#inner { width: 750px; height: 332px; margin: 0 0 2px 0; padding: 0; b
thanks for help.....!!:)