1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

A couple of easy to fix issues!

Discussion in 'CSS' started by iCreate, Oct 21, 2005.

0
  1. #1
    Hi Guys,

    If you head over to www.imedia.cc/temp in Firefox, it all looks as it should, however in IE, the top part seems to be out of alignment by 1px and I'm not entirely sure how to do this. I'm pretty sure its got something to do with a bit of code that only IE will pick up on but aside from that I'm stumped.

    Also, with the navigation (you can see in the code below) I know there is a far simpler way of doing that, rather than having the onMouseOver actions etc applied to each navigation element. Also, if I've 'bloated' it in any other way's, pointers would be appreciated!

    If anyone can help with these problems I'd appreciate it.

    Many thanks (code below)

    Index Page
    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
* {margin:0;padding:0}
body {
	background: #F1F1F1 url(Images/BackgroundV.gif) repeat-y 50% 0;
}
-->
</style>
<link href="iMedia.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div align="center">
<div class="Top-Banner"><img src="Images/Top.gif" alt="iMedia Banner" width="520" height="170" /></div>
<div class="NavContainer">
  <div class="NavOff" onClick="window.location.href='home.php';" onMouseOver="this.className='NavOn';" onMouseOut="this.className='NavOff';">Home</div>
  <div class="NavOff" onClick="window.location.href='home.php';" onMouseOver="this.className='NavOn';" onMouseOut="this.className='NavOff';">About</div>
  <div class="NavOff" onClick="window.location.href='home.php';" onMouseOver="this.className='NavOn';" onMouseOut="this.className='NavOff';">Gallery</div>
  <div class="NavOff" onClick="window.location.href='home.php';" onMouseOver="this.className='NavOn';" onMouseOut="this.className='NavOff';">Photo's</div>
  <div class="NavOff" onClick="window.location.href='home.php';" onMouseOver="this.className='NavOn';" onMouseOut="this.className='NavOff';">Blog</div>
  <div class="NavOff" onClick="window.location.href='home.php';" onMouseOver="this.className='NavOn';" onMouseOut="this.className='NavOff';">Contact</div>
</div>
<div class="MainContainer">
<div class="Front-Content">Text</div>
</div>
</div>
</body>
</html>
    HTML:
    CSS
    
.Top-Banner {
	background-image: url(Images/TopBG.gif);
	height: 170px;
	width: 100%;
}
.NavContainer {
	background-image: url(Images/Nav.gif);
	height: 29px;
	width: 498px;
}
.NavOff {
	font-family: "Trebuchet MS", Arial, sans-serif;
	font-size: 10px;
	font-weight: normal;
	color: #FFFFFF;
	background-color: #CCC4B5;
	height: 29px;
	width: 83px;
	float: left;
	line-height: 29px;
	text-transform: uppercase;
	cursor: pointer;
}
.NavOn {
	font-family: "Trebuchet MS", Arial, sans-serif;
	font-size: 10px;
	font-weight: normal;
	color: #000000;
	background-color: #FFFFFF;
	height: 29px;
	width: 83px;
	float: left;
	line-height: 29px;
	text-transform: uppercase;
	cursor: pointer;
	text-decoration: underline;
}
.Front-Content {
	font-family: "Trebuchet MS", Arial, sans-serif;
	font-size: 10px;
	font-weight: normal;
	color: #000000;
	width: 400px;
	border-bottom-width: 2px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-bottom-color: #CCC4B5;
	left: 20px;
	position: relative;
}
.MainContainer {
	width: 500px;
	text-align: left;
}
.Top-Banner-Content {

	background-image: url(Images/Top.gif);
	height: 170px;
	width: 520px;
}
    Code (markup):

     
    iCreate, Oct 21, 2005 IP