PDA

View Full Version : Header not working in Mozilla


RedBoy
02-21-2006, 02:44 PM
Hi, hoping someone can help me. I have a web page I am doing for a property site-so far it is only rough. Everything looks just how I want it in IE, but in Mozilla the header is coming away from the top of the browser window by about 10 px. This in turn is pushing my links out of the screen.
The url is www.propertiesturkish.co.uk any help will be much appreciated.
Thanks :)

domedia
02-21-2006, 03:03 PM
You've added a h6 tag around the header, either remove the h6 tag, or set the margins in CSS for h6 to 0

RedBoy
02-21-2006, 03:50 PM
Thanks Domedia, do you have any idea also why my banner is about 10 px down from the top margin of the browser in Mozilla despite the fact that I have set the margin to 0 px. It looks fine in IE? :?

domedia
02-21-2006, 04:14 PM
Yes, you've placed your image inside a paragraph (

) which has margins by default.
So remove the paragraph tag and you should be fine.

All that aside, you *really* should look into removing the frames from your site. It makes it harder to use, bookmark, print your website. It's an archaic web technology used very little anymore.

RedBoy
02-21-2006, 04:33 PM
Thanks a lot Domedia, I am going to try and remove the Frames ASAP. I have almost no experience of css though and I am waiting for a book to arrive to help me design more up to date websites.
Thanks so much for your help, and for replying so quickly :)

domedia
02-21-2006, 04:45 PM
No problem redboy :)

CSS is not an alternative to frames, they're completely different things and should work together.

What you need to do is replace your frames page with *one* page.

Like this, copy and paste to a new page to see:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Propertiesturkish.co.uk</title>
<style type="text/css">
<!--
.style1 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: x-small;}
.style4 {font-size: x-small}
body {margin: 0; text-align: center;background: #999;}
.style7 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: small;
#wrapper {
background: white; margin-left: auto; margin-right: auto; text-align: left; width: 585px;
}
-->
</style>
</head>
<body>
<div id="wrapper">
Image files/Banner Text.bmp
<table width="585" border="0" align="left" cellpadding="5" cellspacing="0" class="border">
<tr bordercolor="#000000">
<th width="309" align="left" valign="top" scope="row"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="300" height="200" title="Flash image viewer">

<param name="movie" value="Flash/Homepage Ani.swf" />
<param name="quality" value="high" />
<embed src="Flash/Homepage Ani.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="300" height="200"></embed>
</object></th>
<th width="37" align="left" valign="top" bordercolor="#000000" scope="row">Image files/Mid-wht.jpg</th>
<td width="262" rowspan="2" align="left" valign="top" bordercolor="#000000" scope="row"><span class="style7">News</span>
<p class="style1">This is where I will place information on what
is happening regarding maybe building work
or other such things.</p>
<span class="style1">I may place information on what the weather
will be like and so on and so forth!!!
</p>
</span> </td>
<td width="1" rowspan="2" align="left" valign="top" bordercolor="#000000" scope="row"></td>
</tr>
<tr>
<td height="180" align="left" valign="top" scope="row"><span class="style7">Introduction
</span>
<p class="style4 style1">This is where there will be some sort of description

about the website, it will give you an idea of the

people responsible for the website (i.e. the family)

and will briefly explain what is coming up in the

website </p>
</td>
<th scope="row"></th>
</tr>
<tr>
<th colspan="4" scope="row">Image files/Dots.jpg</th>
</tr>
<tr>
<td colspan="3" align="right" scope="row"><span class="style1">About (#) | Property 1 (#) | Property 2 (#) | Legal (#) | Contact (#) | Links (http://redboy.co.uk)</span></td>
<td align="right" scope="row"></td>
</tr>
</table>
</div>
</body>
</html>

RedBoy
02-21-2006, 06:41 PM
How do I get the effect of my margins being one colour (for instance the grey margins on the url above), and have the content section of my page white. So that my site looks exactly as it did when it was using frames? :?

domedia
02-21-2006, 07:34 PM
If you put the above code on your webpage (with a different filename like new.html) I can take it from there :)

d a v e
02-28-2006, 08:57 PM
also redboy your header is a bmp (windows bitmap) which won't show up on macs and is way bigger (filesize) than it needs to be. use jpeg instead :)

D7
03-06-2006, 03:46 AM
Yes, you've placed your image inside a paragraph (

) which has margins by default.
So remove the paragraph tag and you should be fine.

Good to know! Have you notice that between IE & FF the first

</p> that you use renders differently if there is no text before it?