Cross Browser Combatability and another Question

No replies

Thu, 2009-01-08 00:36

skitelluride531

Offline

Regular

Last seen: 12 years 48 weeks ago

Joined: 2009-01-05

Posts: 17

Points: 0

Another question for you pros out there. I am still piecing together my first CSS Site (http://bostonelitedesign.com/msmmusic/index.html).

My first question is, on the navigation bar on the top, on the hover state, how do I prevent the dark grey from going too far to the left?

Secondly, everything appears fine in IE and Firefox, but in Safari, the black columns that are to the left and right of the content

are slightly off. Any idea how to fix this issue?

Here is the code:

CSS

body {
	text-align: justify;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: small;
	color: #333333;
	margin-top:0px;
	margin-bottom:0px;
	padding-top:5px;
 
}
 
 
h1 {
}
 
h2, h3 {
	margin-top: 0px;
}
 
h4, h5, h6 {
}
 
p, ol, ul, dl, blockquote {
}
 
a {
	color: #333333;
}
 
a:hover {
	text-decoration: underline;
}
 
.img1 {
	float: left;
	margin: 3px 15px 0px 0px;
}
/* Header */
 
#header {
	width: 705px;
	height: 234px;
	margin: 0px auto;
	top-margin: -2px;
	background: url(images/banner.jpg);
}
 
#header h1 {
	margin: 0px;
	padding: 160px 0 0 380px;
	font-size: 52px;
	font-style: italic;
}
 
#header h2 {
	margin: 0;
	padding: 0 0 0 380px;
	font-size: 16px;
	font-style: italic;
	color: #666666;
}
 
#header a {
	text-decoration: none;
	color: #FFFFFF;
}
 
/* Menu */
 
#container {
	margin-top:8px;
	background: url(./images/column.jpg) repeat-y 50%;
	margin-bottom:8px;
 
}
 
#menu {
	width: 715px;
	height: 49px;
	float: top;
	margin: 0px auto;
}
 
#menu ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
}
 
#menu li {
	display: inline;
}
 
#menu a {
	display: block;
	float: left;
	width: 143px;
	height: 39px;
	padding-top: 10px;
	text-align: center;
	text-decoration: none;
	font-size: 16px;
	font-family: "Book Antiqua", calibri;
	color: #ffffff;
	letter-spacing: -2px;
	font-weight: bold;
	background: url(images/img4.jpg) no-repeat;
 
 
}
 
#menu .last a {
	background: url(images/img4l.jpg) no-repeat;
 
}
 
#menu a:hover {
	display: block;
	float: left;
	width: 143px;
	height: 39px;
	padding-top: 10px;
	text-align: center;
	text-decoration: none;
	font-size: 16px;
	font-family: "Book Antiqua", calibri;
	color: #ffffff;
	letter-spacing: -2px;
	font-weight: bold;
	background: url(images/img5.jpg) no-repeat;
 
}
 
/* Content */
 
#container2{
	background: url(./images/column2.jpg) repeat-y 50%;
}
 
#content {
	background: #FFFFFF;
	width: 705px;
	margin: 0px auto;
	padding: 0px 0px 0px 0px;
 
}
 
#colOne {
	float: right;
	width: 48%;
	margin-top: 10px;
	padding-left: 10px;
	margin-right: 25px;
	border-left:  2px solid #333333;
}
 
#colTwo {
	float: left;
	width: 45%;
	margin-top: 10px;
 
}
 
#colTwo ul {
	margin-left: 0px;
	padding-left: 0px;
	list-style-position: inside;
}
 
#content h1 {
	padding: 5px 0px 5px 5px;
	color: #330033;
}
 
#content h2 {
	padding: 5px 0px 0px 5px;
	text-align: center;
	text-transform: uppercase;
	font-size: 16px;
	color: #330033;
}
 
#content h3 {
	font-weight: bold;
	text-align: center;
	color: #330033;
	font-size: 16px;
}
/* Footer */
 
#footer {
	width: 705px;
	margin: 0px auto;
	padding: 3px 0px;
	height: 50px;
	background: #9966cc;
	border-top:  15px solid #333333;
}
#footercolOne {
	float: right;
	width: 50%;
}
#footercolOne p {
	margin: 0px;
	text-align: right;
	font-size: 15px;
	font-weight: bold;
	color: #ffffff;
	font-family: calibri;
}
 
#footercolTwo {
	float: left;
	width: 48%;
	color: #ffffff;
 
}
#footercolTwo p {
	margin: 0px;
	text-align: left;
	font-size: 15px;
	color: #ffffff;
	font-family: calibri;
	font-weight: bold;
}
 
#footer a {
	color: #ffffff;
	text-decoration: none;
}
 
#footer a:hover {
	color: #ffffff;
	text-decoration: underline;
	font-weight: bold;
}

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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>MSM Music Servce :: Official Website</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="menu">
	<ul>
		<li><a href="./about.html"  title="">ABOUT US</a></li>
		<li><a href="./event.html"  title="">EVENT MUSIC</a></li>
		<li><a href="./education.html"  title="">EDUCATION</a></li>
		<li><a href="./artist.html"  title="">ARTISTS</a></li>
		<li class="last"><a href="/booking.html" title="">BOOKING</a></li>
	</ul>
</div>
 
<div id="header">
 
</div>
 
<div id="content">
<div id="container2">
 
	<div id="colOne">
		<h2>WELCOME</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu enim 
 
eget mi auctor semper. Donec et sapien ut diam aliquet tincidunt. Morbi dictum, justo at 
 
gravida suscipit, tellus odio suscipit enim, nec egestas lorem lectus nec tortor. Phasellus 
 
ultrices, lectus quis aliquam imperdiet, leo nibh ultricies sapien, non semper dui mi eu 
 
est. Donec commodo tincidunt neque. Etiam ac lacus in dui pharetra ullamcorper. Aliquam 
 
erat volutpat. Ut condimentum. Suspendisse ullamcorper, purus sed pulvinar posuere, quam 
 
massa aliquam velit, eget fringilla nunc nunc consequat purus. Suspendisse consectetur 
 
neque quis lorem vehicula lobortis. Donec luctus aliquet diam. Lorem ipsum dolor. </p>
		<h2>Msm music overview</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu enim 
 
eget mi auctor semper. Donec et sapien ut diam aliquet tincidunt. Morbi dictum, justo at 
 
gravida suscipit, tellus odio suscipit enim, nec egestas lorem lectus nec tortor. pulvinar 
 
posuere, quam massa aliquam velit, eget fringilla nunc nunc consequat purus.</p>
		<h3>-- Read More --</h3>
	</div>
	<div id="colTwo">
		<h2>GROUPS</h2>
		<h3><br><br>FLASH VIDEO HERE<br><br><br><br><br><br><br></h3>
		<h2>NEWS</h2>
 
	</div>
	<div style="clear: both;">&nbsp;</div>
</div>
<div id="footer">
	<div id="footercolOne">
	<p>&copy; MSM Music Service | 2009</p>
</div>
	<div id="footercolTwo">
	<p><a href="./index.html">home</a>&nbsp;::&nbsp;<a 
 
href="./gallery.html">gallery</a>&nbsp;::&nbsp;<a 
 
href="./calendar.html">calendar</a>&nbsp;::&nbsp;<a href="./contact.html">contact 
 
us</a></p>
</div>
<div style="clear: both;">&nbsp;</div>
 
 
</body>
</html>

Thanks in advance!

Tags:

Beginners CSS Questions

Cross Browser Combatability and another Question

User login

Navigation