11 Replies - 1895 Views - Last Post: 07 June 2006 - 08:32 PM

#1 Israel  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 7
  • View blog
  • Posts: 818
  • Joined: 22-November 04

Need help with CSS problem

Posted 05 June 2006 - 08:19 PM

Ok, something is wrong with this CSS and I'm still too new to it to know how to make it work with this site except to remove the trouble parts and make a separate re-directed page for Firefox with Javascript... which works, but leads to slower loading times and a lot more files to keep track of, etc., etc. (all the reasons CSS was made) Can anyone tell me how this code should be revised to work in IE and Firefox correctly?

#banner {
	background-image: url(WebPics/BannerBack.jpg);
	background-repeat: repeat-x;
	position: absolute;
	height: auto;
	top: 0px;
	right: 0px;
	width: 100%;
	left: 0px;
	visibility: visible;
}
#nav {
	width: 600px;
	left: 225px;
	top: 0px;
}

#main {
	margin-top: 190px;
	margin-right: auto;
	font-family: "Times New Roman", Times, serif;
	font-size: 18px;
	font-style: italic;
	color: #000000;
	margin-left: 160px;
	background-color: #0066FF;
	text-align: left;
	font-weight: bold;
}


#SideBar {
	background-color: #0000CC;
	position: absolute;
	width: 150px;
	left: 2px;
	top: 185px;
	right: auto;
	visibility: visible;
	border: thin none #000000;
}

#main img {
	margin: 10px;
	float: left;
}
#mutat {
	right: 0px;
	bottom: 0px;
}


Is This A Good Question/Topic? 0
  • +

Replies To: Need help with CSS problem

#2 William_Wilson  Icon User is offline

  • lost in compilation
  • member icon

Reputation: 205
  • View blog
  • Posts: 4,807
  • Joined: 23-December 05

Re: Need help with CSS problem

Posted 05 June 2006 - 09:24 PM

The problem with your banner is simple, the alignment of firefox and IE are not exactly the same, your css script takes into account IE, but the margin on a webpage for FF needs something different, try modifying your body tag as:
body marginwidth=0 marginheight=0
or even try creating a script for it, but it will have to within the page and not linked to work like that.
Was This Post Helpful? 0
  • +
  • -

#3 Arbitrator  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 51
  • View blog
  • Posts: 530
  • Joined: 26-January 05

Re: Need help with CSS problem

Posted 05 June 2006 - 09:35 PM

Basic layout should generally not rely on absolute positioning. That's probably your main problem, as Firefox and Internet Explorer tend to render positioned elements in differing ways. If you insist, you may need to use conditional comments (CCs) to assign different style rules to IE. There's also the problem with IE doubling the margins of floated elements though I'm not sure if that's a problem here.

Your CSS could also use some cleaning up as it contains long-form, redundant, and inactive code:
#banner {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  background: url("WebPics/BannerBack.jpg") repeat-x;
  }
#nav {
  width: 600px;
  }
#main {
  margin: 190px auto auto 160px;
  background: #06f;
  color: #000;
  font: italic bold 18px "Times New Roman", Times, serif;
  text-align: left;
  }
#SideBar {
  width: 150px;
  position: absolute;
  top: 185px;
  left: 2px;
  background: #00c;
  }
#main img {
  float: left;
  margin: 10px;
  }
#mutat {
  right: 0;
  bottom: 0;
  }

Was This Post Helpful? 0
  • +
  • -

#4 William_Wilson  Icon User is offline

  • lost in compilation
  • member icon

Reputation: 205
  • View blog
  • Posts: 4,807
  • Joined: 23-December 05

Re: Need help with CSS problem

Posted 05 June 2006 - 09:40 PM

in fact i took a look at the body section of your css script and if you make it like this, it should be ok:
body {
		margin-left: 0px;
		margin-top: 0px;
		margin-right: 0px;
		marginwidth=0;
		marginheight=0;
	}


Was This Post Helpful? 0
  • +
  • -

#5 Israel  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 7
  • View blog
  • Posts: 818
  • Joined: 22-November 04

Re: Need help with CSS problem

Posted 05 June 2006 - 10:08 PM

I don't believe that I had a "body" section in my css. (Maybe that was the problem?) I tried it like this and it lined up perfect, but part of the border across the top disappeared?

#banner {
	background-image: url(WebPics/BannerBack.jpg);
	background-repeat: repeat-x;
	position: absolute;
	height: auto;
	top: 0px;
	right: 0px;
	width: 100%;
	left: 0px;
	visibility: visible;
}
#nav {
	width: 600px;
	left: 225px;
	top: 0px;
}

#main {
	margin-top: 190px;
	margin-right: auto;
	font-family: "Times New Roman", Times, serif;
	font-size: 18px;
	font-style: italic;
	color: #000000;
	margin-left: 160px;
	background-color: #0066FF;
	text-align: left;
	font-weight: bold;
}

body {
		margin-left: 0px;
		margin-top: 0px;
		margin-right: 0px;
		marginwidth=0;
		marginheight=0;
}

#SideBar {
	background-color: #0000CC;
	position: absolute;
	width: 150px;
	left: 2px;
	top: 185px;
	right: auto;
	visibility: visible;
	border: thin none #000000;
}

#main img {
	margin: 10px;
	float: left;
}
#mutat {
	right: 0px;
	bottom: 0px;

Was This Post Helpful? 0
  • +
  • -

#6 Israel  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 7
  • View blog
  • Posts: 818
  • Joined: 22-November 04

Re: Need help with CSS problem

Posted 06 June 2006 - 12:08 PM

Ok, I had ghetto-rigged a work-around with some javascritpt
You can see it in action here.

<html>
<head>
<title>transfer</title>
</head>
<body>
<script language="Javascript">
<!--
if (navigator.appName == "Microsoft Internet Explorer")
  window.location = "http://www.mutat.net/nette.html";
else
  window.location = "http://www.angelfire.com/linux/2130/nette.html/";
// -->
</script>



If you look at the code in firefox for this new page you can see the new css I butchered just for the Firefox display.

Here's the problem, this seems to work perfect at 1024x768 but looks like crap when I change the screen resolution to 800x600. What have I done wrong this time? Am I any getting closer?

This post has been edited by Israel: 06 June 2006 - 12:10 PM

Was This Post Helpful? 0
  • +
  • -

#7 Arbitrator  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 51
  • View blog
  • Posts: 530
  • Joined: 26-January 05

Re: Need help with CSS problem

Posted 06 June 2006 - 10:32 PM

Your website's structure is totally flawed. You shouldn't by designing for Internet Explorer since that browser doesn't comply with the web standards unlike Firefox, Opera, et al. Here's your website revised:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="en-us">
<head>

<!-- This Page Is Valid XHTML 1.0 Strict! -->

<meta http-equiv="content-type" content="text/html; charset = iso-8859-1"/>
<base href="http://www.mutat.net/"/>

<title>Nette One Fishing Team</title>

<style type="text/css">
/*** Disabled: Remove Comment Tags to Enable
@import url("Layout.css"); ****************/

* {
  margin: 0;
  padding: 0;
  list-style: none inside;
  }
body {
  background: #06f;
  }
a:link {
  color: #f30;
  }
a:visited {
  color: #f33;
  }
a:hover {
  color: #f63;
  }
a:active {
  color: #ff3;
  }

#bannerbg {
  background: url("WebPics/BannerBack.jpg") repeat-x;
  }
#banner {
  width: 600px;
  height: 120px;
  background: url("WebPics/BannerPic.jpg") no-repeat;
  }
#nav img {
  border: 0;
  }
#main {
  color: #000;
  font: italic bold 18px "Times New Roman", Times, serif;
  }
#main img {
  float: left;
  margin: 0 10px;
  }
#SideBar {
  width: 180px;
  float: left;
  margin-left: 10px;
  padding: 5px;
  background: #00c;
  color: #f30;
  font: 18px Georgia, "Times New Roman", Times, serif;
  }
#SideBar li {
  padding-bottom: 10px;
  }
#SideBar li#last {
  padding-bottom: 5px;
  }
#mutat img {
  float: right;
  margin-top: 50px;
  }
#preload {
  display: none;
  }
</style>

<!--[if IE]>
<style type="text/css">
#SideBar {
  margin-left: 5px; /* Counters IE Double-Margin on Floated Elements Bug */
  }
#SideBar li {
  text-indent: -15px; /* Counters IE First-Line List Indent */
  }
</style>
<![endif]-->

</head>
<body>

<div id="bannerbg">
<div id="banner">
</div><!-- #banner -->
</div><!-- #bannerbg -->

<div id="nav">
<a href="Nette.html"><img width="150" height="40" alt="Home" src="WebPics/HomeB2.jpg" onmouseover="this.src = 'WebPics/HomeB.jpg';" onmouseout="this.src = 'WebPics/HomeB2.jpg';"/></a>
<a href="Cast.html"><img width="150" height="40" alt="Cast and Crew" src="WebPics/CaCB2.jpg" onmouseover="this.src = 'WebPics/CaCB.jpg';" onmouseout="this.src = 'WebPics/CaCB2.jpg';"/></a>
<a href="http://www.fishska.com/"><img width="150" height="40" alt="SKA" src="WebPics/SKAB2.jpg" onmouseover="this.src = 'WebPics/SKAB.jpg';" onmouseout="this.src = 'WebPics/SKAB2.jpg';"/></a>
<a href="http://www.wiregrassdesigns.com/"><img width="150" height="40" alt="Sponsors" src="WebPics/SponB2.jpg" onmouseover="this.src = 'WebPics/SponB.jpg';" onmouseout="this.src = 'WebPics/SponB2.jpg';"/></a>
</div><!-- #nav -->

<div id="SideBar">
<ul>
  <li><a href="Off.html">Off to a Good Start</a></li>
  <li><a href="Knot.html">Knot Much</a></li>
  <li><a href="Sap.html">Sapelo Tournament</a></li>
  <li><a href="StMary.html">St. Mary's</a></li>
  <li><a href="2Way.html">Two Way Tournament</a></li>
  <li id="last"><a href="StSimmons.html">St. Simmons / Golden Isles Tournament</a></li>
</ul>
</div><!-- #SideBar -->

<div id="main">
<img width="429" height="288" alt="The One That Got Away!!" src="WebPics/PageAway.jpg"/>
<p>The fishing was great and a lot of fun was had by all but the big one got away or eaten. The Nette One set out Saturday to land the big One but we came to the hill with a box full of small to medium sized Kings. Hopefully the fishing gods will smile on us next Week as we head to St. Mary's for another chance to Win Big.</p>
<div id="mutat">
<img width="177" height="25" alt="mutat.net  2006" title="(912) 654-0395" src="WebPics/mutat.jpg"/>
</div><!-- #mutat -->
</div><!-- #main -->

<!-- Preload Images -->
<div id="preload">
<img width="150" height="40" alt="" src="WebPics/HomeB.jpg"/>
<img width="150" height="40" alt="" src="WebPics/CaCB.jpg"/>
<img width="150" height="40" alt="" src="WebPics/SKAB.jpg"/>
<img width="150" height="40" alt="" src="WebPics/SponB.jpg"/>
</div>
<!-- End Preload Images -->

</body>
</html>

Was This Post Helpful? 0
  • +
  • -

#8 William_Wilson  Icon User is offline

  • lost in compilation
  • member icon

Reputation: 205
  • View blog
  • Posts: 4,807
  • Joined: 23-December 05

Re: Need help with CSS problem

Posted 06 June 2006 - 10:44 PM

although your script provided does not have a body section, the source of your page does, so it is coming from somewhere.

Arbitrator is absolutly correct in his modifications as far as i can see (good job :))
Was This Post Helpful? 0
  • +
  • -

#9 snoj  Icon User is offline

  • Married Life
  • member icon

Reputation: 84
  • View blog
  • Posts: 3,564
  • Joined: 31-March 03

Re: Need help with CSS problem

Posted 06 June 2006 - 10:52 PM

Off topic, but what is the purpose of the div#preload? Is that some magic keywork for browsers?
Was This Post Helpful? 0
  • +
  • -

#10 Israel  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 7
  • View blog
  • Posts: 818
  • Joined: 22-November 04

Re: Need help with CSS problem

Posted 07 June 2006 - 01:21 PM

Arbitrator, I owe you man. That works perfect... But how come when I try to link that same css into the next link of the site the border back pitchure dissappears? It seems like your code:

#bannerbg {
  background: url("http://www.mutat.net/WebPics/BannerBack.jpg") repeat-x;
  }


...should do the trick but instead it's blank there?

This post has been edited by Israel: 07 June 2006 - 01:22 PM

Was This Post Helpful? 0
  • +
  • -

#11 Israel  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 7
  • View blog
  • Posts: 818
  • Joined: 22-November 04

Re: Need help with CSS problem

Posted 07 June 2006 - 06:23 PM

Nevermind, I got it. Thanks for all the help. I guess it's time to take myself back to W3C and wise. Thanks again for all the help! :D
Was This Post Helpful? 0
  • +
  • -

#12 Arbitrator  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 51
  • View blog
  • Posts: 530
  • Joined: 26-January 05

Re: Need help with CSS problem

Posted 07 June 2006 - 08:32 PM

View Posthotsnoj, on 6 Jun, 2006 - 09:44 PM, said:

Off topic, but what is the purpose of the div#preload? Is that some magic keywork for browsers?
No, it's not a magic keyword. I understand that even images with display: none will still load, so this would effectively load them in the background (preload them). I got rid of the messy script that was on the page but in the process lost the preload mechanism and I don't know Javascript well enough to preload images through that. The reason I used a div is because the validator cries foul if I don't surround images with a block-level element.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1