5 replies [Last post]
Keld
Offline
newbie
Merseyside, UK
Last seen: 16 years 38 weeks ago
Merseyside, UK
Joined: 2004-06-14
Posts: 4
Points: 0

Hi all. My first post here.

I'm a bit new to creating sites all in CSS. But I'm trying.

MY first attempt is www.roymartin.co.uk which I am currently working on.

It's 'ok' but I decided to create a 2nd css version with more or less the same html but a seperate css file.

I got exactly the result I was looking for in IE. But when I tested the site in Mozilla Firefox, it was ... well not so nice Sad

The new version is at www.roymartin.co.uk/css/

As you will see in IE, the site is supposed to be in the center, with a header at the top, footer at the bottom, and a middle section with a navigation column and a main content box.

In the first version I had the main content box scrolling seperatly. But it didnt look right in 800x600. So I decided to make this version re-size vertically.

Like I said, I got it to work great in IE, but in movilla it's gone wrong.

Any help is appreciated.

Thanks, Keith

Example HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
    <link href="roy_red.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <div id="container">
      <div id="header"><h1>Roy Martin . co . uk</h1></div>

      <div id="middle">

      <div id="navigation">
        <h2>Navigation</h2>

        <ul>
          <li><a href="index.htm">Home</a></li>
          <li><a href="news.htm">News</a></li>
          <li><a href="biog.htm">Biography</a></li>
          <li><a href="pastwork.htm">Past Work</a></li>
          <li><a href="equipment.htm">Equipment</a></li>
          <li><a href="photo.htm">Photos</a></li>
          <li><a href="contact.htm">Contact</a></li>
          <li><a href="links.htm">Links</a></li>
        </ul>
      </div>

      <div id="main">
        <div id="maincontent">
          <h2>News</h2>

          <h3>Roy Martin . co . uk goes live!</h3>

          <p>
            Welcome to the official website of Roy Martin!
          </p>

          <p>
            Its taken a while, but the site is now finally online.
            <br />
            Please take a look around.  There is lots of informatiom
            about Roy, including:
          </p>

          <ul>
            <li>Latest news (this page!)</li>
            <li>Biography</li>
            <li>Past work</li>
            <li>Equipment</li>
          </ul>

          <p> ... etc.</p>

          <p>Thanks,</p>

          <h4>
            Keith Crooks
            <br />
            Web Master
            <br />
            www.roymartin.co.uk
          </h4>

          <h4>Posted Saturday 5th June 2004 at 19:16 (gmt).</h4>

          <hr />

          <h3>Roy on tour!</h3>

          <p>
            Roy is currently on a <em>massive</em> European tour
            at the moment with famous french star, <b>Patricia Kaas</b>.
          </p>

          <p>
            The tour kick off on 30th May 2004 and ends in March 2005!
          </p>

          <p>
            Full tour dates to be posted here soon!
          </p>

          <h4>Post Saturday 5th June 2004 at 19:20 (gmt).</h4>
        </div>
      </div>

      </div>

      <div id="footer">
	    <h2>
	      Site designed and maintained by Keith Crooks
	      -
	      Last updated Monday 7th June 2004
	    </h2>
	  </div>
    </div>
  </body>
</html>

CSS:

body
{
	font-family: Arial, Helvetica, sans-serif;
	color: #ffffff;
	background-color: #333333;
	background-image: url(images/bg.gif);
	text-align: center;
}

a:link, a:visited
{
	color: #cc0000;
}

a:hover
{
	background-color: #cc0000;
	color: #ffffff;
	text-decoration: none;
}

#container
{
	width: 760px;
	min-height: 560px;
	margin-left: auto;
	margin-right: auto;
	padding: 0px;
	background-color: #333333;	
}

#header
{
	background-color: #cc0000;
	height: 75px;
	width: 740px;
	padding: 0px;
	position: relative;
	border: 1px solid #ffffff;
	margin-top: 10px;
}

#header h1
{
	font-family: Century Gothic, Arial, Helvetica, sans-serif;
	font-weight: normal;
	text-align: center;
	padding-top: 15px;
	margin: 0;
}

#middle
{
	width: 740px;
	margin-top: 10px;
}

#navigation
{
	background-color: #cc0000;
	background-image: url(images/backgrounds/bg3.jpg);
	background-position: center;
	height: 400px;
	width: 200px;
	position: relative;
	border: 1px solid #ffffff;
	text-align: center;
	float: left;
	margin: 0px;
	
}

#navigation h2
{
	visibility: hidden;
}

#navigation a
{
	color: #ffffff;
	height: 20px;
	width: 120px;
	text-decoration: none;
	text-align: center;
	font-weight: bold;
}

#navigation ul
{
	margin: 0px;
	padding: 0px:
	position: relative;
}

#navigation li
{
	list-style-type: none;
	height: 20px;
	width: 120px;
	border: 1px solid #ffffff;
	overflow: hidden;
	margin-bottom: 10px;
	text-align: center;
	background-color: #cc0000;
	padding: 0px;
}

#navigation a:hover
{
	color: #cc0000;
	background-color: #ffffff;
}

#navigation li:hover
{
	color: #cc0000;
	background-color: #ffffff;
}

#main
{
	position: relative;
	float: right;
	width: 530px;
	height: 400px;
	background-color: #000000;
	border: 1px solid #ffffff;
	margin: 0px;
	padding: 0px;
	text-align: justify;
}

#main h2
{
	width: 100%;
	height: 30px;
	font-size: 23px;
	background-color: #cc0000;
	margin: 0px;
	padding: 0px;
	font-family: Century Gothic, Arial, Helvetica, sans-serif;
	font-weight: normal;
	text-indent: 10px;
	border-bottom: 1px solid #ffffff;
}

#main hr
{
	width: 500px;
	color: #cc0000;
	padding:0;
	margin:0;
	text-align: center;
}



#footer
{
	background-color: #cc0000;
	height: 20px;
	width: 740px;
	position: relative;
	margin: 10px;
	border: 1px solid #ffffff;
}

#footer h2
{
	font-size: 90%;
	text-align: center;
	margin: 0px;
	padding: 0px;
	font-family: Century Gothic, Arial, Helvetica, sans-serif;
	font-weight: normal;
}

#footer a:link, a:visited
{
	color: #ffffff;
	text-decoration: none;
}

#front
{
}

#front h1
{
	width: 200px;
	height: 200px;
	background-image: url(images/frontpic.jpg);
	background-position: center;
	border: 1px dashed #ffffff;
}

span
{
	visibility: hidden;
}

Keld
Offline
newbie
Merseyside, UK
Last seen: 16 years 38 weeks ago
Merseyside, UK
Joined: 2004-06-14
Posts: 4
Points: 0

Works in IE, not mozilla :(

I've tried vlidating the news page (http://www.roymartin.co.uk/css/news.htm) at www.w3schools.com to check the HTML and css file are both valid.

Both come up as valid. So I'm clueless to as to why its not working.

Any help is greatly appreciated. Or at least a specific topic to search on where I may find a solution. I dont even know what to search for Sad

F5
Offline
Regular
Houston, Tx.
Last seen: 16 years 40 weeks ago
Houston, Tx.
Timezone: GMT+6
Joined: 2004-05-28
Posts: 12
Points: 0

Works in IE, not mozilla :(

Well, unfortunately, I can't really afford the time to dive into your site and see exactly what is happening, but one thing I can suggest off the top of my head, is that you may need to incorporate a small little "hack" that will read in Mozilla, but not in IE. This way, you can correct the alignment problems that are browser dependent.

Mozilla based browsers support the !important rule while IE (so far) does not. I can't remember where I learned this from, so I can't give you any resource, but basically, If you define say a "margin" for your rule, like
#myId {margin: 25%;}
which works in a Mozilla browser, but you find that for IE it needs to be 23%, you can accomplish both like so:
#myId {margin: 25% !important; margin: 23%;}

Because IE doesn't yet support !important, it will display your margins as 23% according to cascade rules, but in Mozilla, because !important is given priority beyond the normal cascade, the 25% margin will remain.

Anyway, something else that might help you is http://www.positioniseverything.net/index.php

good luck!

gashnois
Offline
newbie
Last seen: 16 years 42 weeks ago
Joined: 2004-05-12
Posts: 1
Points: 0

Works in IE, not mozilla :(

I think the problem may be your use of "min-height" for the container div. This is not supported by all browsers - your text overlapping the footer problem appears on Firefox, Safari and ie on the mac, which don't support it, but looks fine on Opera which does support min-height - your main layout area stretches to accommodate the text. IE PC doesn't support min-height either, however it will stretch a box with a fixed height to accommodate additional content, although this is a violation of the W3C spec.

I would suggest you don't use min-height for now. Better to not declare a height for areas where content is added and only use fixed heights if you are sure the content remains the same. As for your problem with the red blocks at the top of the page, this may be a related matter - again it looks as (i assume) it should in Opera

Hope this helps Smile

Gashnois

Keld
Offline
newbie
Merseyside, UK
Last seen: 16 years 38 weeks ago
Merseyside, UK
Joined: 2004-06-14
Posts: 4
Points: 0

Works in IE, not mozilla :(

Great thanks to you both. I'll go have a play around and see what I can do.

Thanks for the help. I'll let you know.

Keld
Offline
newbie
Merseyside, UK
Last seen: 16 years 38 weeks ago
Merseyside, UK
Joined: 2004-06-14
Posts: 4
Points: 0

Works in IE, not mozilla :(

Ok I tried removing the min-height but that didnt help. I have a feeling it has something to do with the float left and right on the navigation and main content box.

Has anybody else get any help? Sad