...

View Full Version : 2 bugs - IE vs FF



greaterd
12-20-2007, 04:00 AM
www.greater-designs.com

My code should be fairly clean in this one but here are my 2 issues:
1) I am trying to get my NAV-Bar directly in the middle between the 2 rasied band areas. Also centered. I thought I have been doing everything correct so far, the logo ISO logo and mission statements are behaving the same in both IE and FF, but now that I am trying to do the NAV Bar it shows different in IE and in FF.
2) I am trying to do the trick at where the background stops to have a 1 pixel continuation of the background where how far the page goes down is how many times that the 1px background repeats. I can use this code by itself with only that DIV and it works just fine.

Please help the handicapped.

effpeetee
12-20-2007, 08:13 AM
Add this code. It resets these to zero before you start the CSS. It may mean resetting some of these values in some of your divs.

Frank


/* CSS Document */

*{
margin:0;
padding:0;
}

body {
text-align: center;
background-image: url(background-rounded-edges-top.gif);
background-repeat: no-repeat;
background-position: top;
margin: 10px;
float: none;
}

Excavator
12-20-2007, 09:53 AM
Hello greatrd,
It's not hard to move things up and down with margins. Sometimes you can even do it without running into a browser bug that knocks it all out of whack.
Like this:

<!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=iso-8859-1" />
<title>Untitled Document</title>
<meta name="" content="authored by http://nopeople.com/Design" />
<link rel="stylesheet" type="text/css" href="trial7css.css" />
</head>
<body>
<div id="container">
<div id="header">
<div id="top-heading-space"></div>
<div id="top-heading">
<img src="greatrd_files/Logo-to-size.gif" alt="logo image" width="261" height="80" id="logo" />
<div class="mission">
<i>Our Mission</i><br />
To be the very best at acheiving our<br />
Purpose and Vision we are committed to:<br />
<u>Exceeding Customers' Expectations</u><br />
through highly Engaged Employees<br />
using Superior Processes and<br />
sustaining Profitable Growth
<!--end .mission--></div>
<!--end top-heading-space--></div>
<div id="navbar">
<div id="rollover1"><a href="http://nopeople.com/Design"></a></div>
<div id="rollover2"><a href="http://nopeople.com/Design"></a></div>
<div id="rollover3"><a href="http://nopeople.com/Design"></a></div>
<div id="rollover4"><a href="http://nopeople.com/Design"></a></div>
<div id="rollover5"><a href="http://nopeople.com/Design"></a></div>
<div id="rollover6"><a href="http://nopeople.com/Design"></a></div>
<div id="rollover7"><a href="http://nopeople.com/Design"></a></div>
<!--end navbar--></div>
<!--end header--></div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<!--end content--></div>
<!--end container--></div>
</body>
</html>
and the CSS that goes with that:
html, body {
background: #FFFFFF;
text-align: center;
font: 12px Verdana, Arial, Helvetica, sans-serif;
}
* {
margin:0;
padding: 0;
border: none;
}
#container {
width: 800px;
margin: 0 auto;
}
#header{
height: 256px;
background: url(http://www.greater-designs.com/background-rounded-edges-top.gif) no-repeat top;
}
#top-heading-space {
width: 800px;
height: 40px;
margin: 0 auto;
}
#top-heading {
width: 675px;
height: 100px;
margin: 10px auto 0 auto;
background: #66FF00 url(http://www.greater-designs.com/grafic-i-s-o-act.gif) no-repeat center center;
}
#logo {
float: left;
margin: 10px 0 0 0;
}
.mission {
background-attachment: scroll;
font-family:Arial, Helvetica, sans-serif;
width: 224px;
height: 90px;
float: right;
text-align: center;
font-size: xx-small;
font-weight:bolder;
margin-top: 12px;
}
/***************/
/*NAV Contents */
#navbar {
height: 61px;
width: 706px;
margin: 20px auto 0;
}
#rollover1 {
height: 61px;
width: 88px;
float: left;
background: url(http://www.greater-designs.com/images/home.gif);
}
#rollover1 a:hover {
display:block;
height: 61px;
width: 88px;
background: url(http://www.greater-designs.com/images/home.gif) bottom;
}
#rollover1 a {
display:block;
height: 61px;
width: 88px;
background: url(http://www.greater-designs.com/images/home.gif) top;
}
#rollover2 {
height: 61px;
width: 93px;
float: left;
background: url(http://www.greater-designs.com/images/history.gif);
}
#rollover2 a:hover {
display:block;
height: 61px;
width: 93px;
background: url(http://www.greater-designs.com/images/history.gif) bottom;
}
#rollover2 a {
display:block;
height: 61px;
width: 93px;
background: url(http://www.greater-designs.com/images/history.gif) top;
}
#rollover3 {
height: 61px;
width: 110px;
float: left;
background: url(http://www.greater-designs.com/images/eng.gif);
}
#rollover3 a:hover {
display:block;
height: 61px;
width: 110px;
background: url(http://www.greater-designs.com/images/eng.gif) bottom;
}
#rollover3 a {
display:block;
height: 61px;
width: 110px;
background: url(http://www.greater-designs.com/images/eng.gif) top;
}
#rollover4 {
height: 61px;
width: 117px;
float: left;
background: url(http://www.greater-designs.com/images/manuf.gif);
}
#rollover4 a:hover {
display:block;
height: 61px;
width: 117px;
background: url(http://www.greater-designs.com/images/manuf.gif) bottom;
}
#rollover4 a {
display:block;
height: 61px;
width: 117px;
background: url(http://www.greater-designs.com/images/manuf.gif) top;
}
#rollover5 {
height: 61px;
width: 71px;
float: left;
background: url(http://www.greater-designs.com/images/qa.gif);
}
#rollover5 a:hover {
display:block;
height: 61px;
width: 71px;
background: url(http://www.greater-designs.com/images/qa.gif) bottom;
}
#rollover5 a {
display:block;
height: 61px;
width: 71px;
background: url(http://www.greater-designs.com/images/qa.gif) top;
}
#rollover6 {
height: 61px;
width: 102px;
float: left;
background: url(http://www.greater-designs.com/images/contact.gif);
}
#rollover6 a:hover {
display:block;
height: 61px;
width: 102px;
background: url(http://www.greater-designs.com/images/contact.gif) bottom;
}
#rollover6 a {
display:block;
height: 61px;
width: 102px;
background: url(http://www.greater-designs.com/images/contact.gif) top;
}
#rollover7 {
height: 61px;
width: 125px;
float: left;
background: url(http://www.greater-designs.com/images/employ.gif);
}
#rollover7 a:hover {
display:block;
height: 61px;
width: 125px;
background: url(http://www.greater-designs.com/images/employ.gif) bottom;
}
#rollover7 a {
display:block;
height: 61px;
width: 125px;
background: url(http://www.greater-designs.com/images/employ.gif) top;
}
/* This is the end of the Nav contents*/


.style2 {font-size: 24px}


A couple things to note:

the logo image is too wide - need to trim about 50px of the right side
.mission breaks with only one text resize... maybe that should be an image too?
#content would work well with a 800px by 1px image repeated on the y-axis. I think that was what your question #2 was about?
I removed the ul tags from your nav - that was not a ul.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum