PDA

View Full Version : ie & firefox spacing - no suggestions working



carbilldyer
Apr 26th, 2010, 04:48 PM
I have a simple bit of coding that looks as I expect in firefox but has spacing issues in IE.
I am trying to display a header with 2 lines. each has a different background. The 1st line has an image. The 2nd is a line with links.

Line 2 in IE appears to have margin above (approx 2px - I can see the background from line 1 so guessing that it's not a padding issue (though I have tried to ensure it isn't).

I have tried everything I can find suggested as solutions on forums ( *{padding:0; margin: 0;}, etc.

I have tried setting margin to a -2px but while it fixes it in IE, it screws up firefox.

I've tried using tables, spans, bunging in heights and paddings & margins everywhere - what is below is my latest (and last) attempt.

Don't know if I'm allowed to put the link to the file here (it doesn't say I cant in the rules) - so it's www.radycalheating.com/test/headerdiv.html

My html/css is

<html>
<head>
<title>RADyCAL HEATING Moraira Costa Blanca - Infrared heating panels. Economical, Ecological, Efficient,
aesthetic radiators
</title>
<meta name="description" content="Infrared heating in Spain, economical, ecological, healthy, and efficient heating">
<meta name="keywords" content="radycal heating, radical heating, infrared heating, Infrared panels,
infrared heating Costa Blanca, infrared heating Moraira, infrared heating spain, glass radiators, designer radiators">
<style type="text/css">
*
{
margin: 0px;
padding: 0px;
}
body
{
margin: 0px;
padding: 0px;
}
.header
{
background-image: url(i/bg/bodybg.PNG);
margin: 0px;
padding: 0px;
border: 0px;
height: 150px;
}
.linkbar
{
background-image: url(i/bg/imagebar2r.png);
margin-top: 0px;
padding: 2px;
border: 0px;
height: 20px
}
.links
{
margin: 0px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
}
a
{
font-size: 15px;
font-family: eurostile;
font-weight: bold;
text-decoration: none;
color: #4a1111;
}
a:hover
{
color: #C9252B;
}
a:link
{
font-style: normal;
}
</style>
</head>
<body>
<!-- banner and link row -->
<div class="header" align="center">
<img src="i/flamedradiator-header4.png" alt="RADyCAL Heating, Moraira, Costa Blanca, Infrared Heating" width="721" height="150">
</div>
<div class="linkbar" align="center">
<a href="index.html" target="_top"><span class="links">Home</span></a><img src="i/redline-sep.bmp" width="2" height="15">
<a href="howitworks.html" target="_top"><span class="links">How It Works</span></a><img src="i/redline-sep.bmp" width="2" height="15">
<a href="thebenefits.html"><span class="links" target="_top">The Benefits</span></a><img src="i/redline-sep.bmp" width="2" height="15">
<a href="productlist.html"><span class="links" target="_top">Product List</span></a><img src="i/redline-sep.bmp" width="2" height="15">
<a href="contact.html"><span class="links" target="_top">Contact Us</span></a>
</div>
</body>
</html>


I would be grateful for any advice.
thanks
Caroline

JGirl
Apr 26th, 2010, 05:28 PM
Hey, I just checked in IE & FF and it seems fine to me in both browsers. Did you find a solution yet, or is it still looking wonky for you?

carbilldyer
Apr 26th, 2010, 07:58 PM
Thanks for that. I was having the problem on my pc and on the server. Couldn't figure it out, so I tried to validate it. Then to do that I had to add the 'doctype' code. I did this and put it live without bothering to look at the screen again. I was then getting errors with the validation, so I got aggravated and took out the doctype on my pc code (but didn't update the live version). I posted my problem, you looked at it, said it was ok, so I reviewed my code and the inclusion of the doctype was the only difference between the live and test version of the code. I changed my code to include it, put it live (headerdiv2.html) and, hey presto, it works now.

I have no idea why it works. Do you have any suggestions? Also I haven't a clue about what doctype I should use for my website - I will have pages with frames (somebody on a forum said frames were antiquated - is this true?), javascript, etc.

Thanks for your help with this. I've wasted so much time trying to sort it out.
I would be grateful if you could clear up the doctype issue for me please.

JGirl
Apr 26th, 2010, 08:45 PM
I'm glad it ended up working out -- 99% of my problems are exactly that, I forget something small but crucial, and it throws off my entire design :)

What happens in IE: if you do not have a valid doctype on the very first line of your document, IE kicks into quirks mode -- so even just one space between the top of your document and your doctype will confuse IE. When IE is in quirks mode, it will not render auto margins properly (or even at all, in my experience). So, the fact that you skipped the doctype is very likely what caused your issue in IE.

I don't know if the same thing happens in FF, because I'm a build-in-IE, double-check-in-FF kinda girl. But I can tell you will 100% certainty that you should always declare a valid doctype on the very first line of your document, and your margins should work just fine ;)

What errors were you getting during validation that prompted you to remove your doctype, btw? And, I have a standard .. thing (I call it my "metathing") .. somewhere that I use to start every new document I create, if you want to use it. It's for XHTML strict, but you can change the doctype to whatever you code in (or, if you tell me, I'd be happy to change it for you -- then all you need to do is copy, paste, and fill in the applicable blanks)

SB65
Apr 26th, 2010, 08:48 PM
Here's a good article on doctypes (http://www.alistapart.com/articles/doctype/).

Here's a few reasons why frames aren't a good idea (http://www.brighthub.com/internet/web-development/articles/32445.aspx).

drhowarddrfine
Apr 26th, 2010, 08:50 PM
The doctype (Document Type Definition) is used by the browser to determine whether to render your page in "standards mode" or "quirks mode" (or almost standards but we won't go there). The validator uses it to determine what DTD to test your web page against for conformance during error and syntax checking.

New web pages should always use the strict doctype. Transitional, the one you are using, is only for older pages transitioning from old, deprecated markup that you shouldn't be using in the first place. No one should use transitional.

Without a doctype, or an incomplete/incorrect one, the browser renders your page as if it's 1995 all over again and you don't want to go there. A doctype is required for all web sites today.

The problem with frames is mostly bookmarking. You can't 'right click' and select "bookmark" for the whole page cause you'll only bookmark the frame you are in.

carbilldyer
Apr 27th, 2010, 11:14 AM
Thanks to all for the helpful comments.

Firstly, I learned my basic understanding of webpage design from 'the complete idiots guide to creating a webpage (2002). It doesn't mention doctypes and I've always muddled along without since, so I guess from day one I was on the back foot!.

The reason I wanted to use frames was that I wanted to keep some text showing on the left, while being able to scroll down through products on the right and also to change the information on the right.

You can see what I'm trying to do on www.radycalheating.com/energy.html (I know it's still not 100% working properly). I do not have the skills to do this with javascript (will study it later when I get some time) and thought this the simplest solution for the moment. Any alternative solutions gratefully accepted.

Re doctype. I would like to use strict xhtml and will use w3 from now on. (Jgirl - can I take you up on your offer of your metathing please?. The errors I got were 25+ for the tiny piece of code, so I lost heart. I need to restart my coding for everything and study the xhtml rules as I go along I guess. I can see some things that I need to change. I will fix what I perceive to be wrong to save your time and I will get back to you with any that I'm really stuck on).

Re IE security, etc. I personally have moved to Firefox, but our pc in work is IE at the moment which is how I discovered the discrepancies.

Again thanks to all.

effpeetee
Apr 27th, 2010, 12:11 PM
A lot of helpful sites here.
(http://exitfegs.co.uk/Sources.html)
Frank

carbilldyer
Apr 27th, 2010, 12:19 PM
thank you effteepee, looks like very helpful stuff - I'll look at this.

jgirl - only one error now. Prob I'm having is that the doctype I specified is transitional not strict (<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
:-

Line 73, Column 57: there is no attribute "target"

…fits.html"><span class="links" target="_top">The Benefits</span></a><img src="…



You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the <embed> element to incorporate flash media in a Web page, see the FAQ item on valid flash.

SB65
Apr 27th, 2010, 12:28 PM
Your target attribute should be on your anchor element, not on the span.

carbilldyer
Apr 27th, 2010, 02:37 PM
thanks sb65.

I have one more question relating to all of this please.

I will be using this html code for the header in all of my webpages. I'd like to keep it as a separate file and call it into other files as required. The only way that I can see to do this is with a php include. I tried this and it's not working. I'd prefer to keep it simple if possible and include in an html file - any suggestions?

SB65
Apr 27th, 2010, 02:52 PM
What happens when you try the php include?

drhowarddrfine
Apr 27th, 2010, 03:34 PM
The reason I wanted to use frames was that I wanted to keep some text showing on the left, while being able to scroll down through products on the right and also to change the information on the right.Look into the CSS property "position:fixed".


Re doctype. I would like to use strict xhtmlYour sample does not use strict. Here's the strict doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

carbilldyer
Apr 27th, 2010, 03:47 PM
Things have changed a bit since the last post. Firstly, while the php include file was .php, the calling file was .html and there was nothing being displayed in the web page.

I changed the calling file to be a .php also and I then got my data (links and images) but without formatting as specified in the external css file (note I've checked that the css file is in the correct directory). I've just called the webpage up again (without changing anything in the code) and I'm back to blank page.

I then loaded these files to the server to better show you the problem and, as if by a miracle, it looks fine in both IE and Firefox.

However I am still having the problem with blank pages when viewing from my pc in my pc directory.

here is the code I used:-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>RADyCAL HEATING Moraira Costa Blanca - Infrared heating panels. Economical, Ecological, Efficient, Aesthetic Radiators</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="description" content="Infrared heating in Spain, economical, ecological, healthy, and efficient heating" />
<meta name="keywords" content="radycal heating, radical heating, infrared heating, Infrared panels, infrared heating Costa Blanca, infrared heating Moraira, infrared heating spain, glass radiators, designer radiators" />
<link rel="shortcut icon" href="i/favicon.ico" />
<link rel="stylesheet" href="hdrcss.css" type="text/css" />
</head>
<body>
<?php require("hdr.php"); ?>
</body>
</html>

here is the hdr.php file:-

<!-- banner and link row -->
<div class="header" align="center">
<img src="i/flamedradiator-header4.png" alt="RADyCAL Heating, Moraira, Costa Blanca, Infrared Heating" width="721" height="150"></img>
</div>
<div class="linkbar" align="center">
<a href="index.html" target="_top"><span class="links">Home</span></a><img src="i/redline-sep.bmp" alt=" " width="2" height="15"></img>
<a href="howitworks.html" target="_top"><span class="links">How It Works</span></a><img src="i/redline-sep.bmp" alt=" " width="2" height="15"></img>
<a href="thebenefits.html"><span class="links" target="_top">The Benefits</span></a><img src="i/redline-sep.bmp" alt=" " width="2" height="15"></img>
<a href="productlist.html"><span class="links" target="_top">Product List</span></a><img src="i/redline-sep.bmp" alt=" " width="2" height="15"></img>
<a href="contact.html"><span class="links" target="_top">Contact Us</span></a>
</div>

Is using php a standard procedure for setting up the header or other commonly used bits of code?

Are there any implications for using it? If say, I wanted to use frames in a php file is this possible?

Developing is a problem if there is no way to view the page until it is loaded to a server - am I doing something incorrectly here?

thanks in anticipation

SB65
Apr 27th, 2010, 06:17 PM
Is using php a standard procedure for setting up the header or other commonly used bits of code?

Yes


If say, I wanted to use frames in a php file is this possible?

All you're doing with php includes is constructing the same html in a different way, so anything you can do in html you can do using php, if you see what I mean


Developing is a problem if there is no way to view the page until it is loaded to a server - am I doing something incorrectly here?

Php won't work just run on your PC, as you've discovered. However, you could use something like xampp (http://www.apachefriends.org/en/xampp.html) to install a local version. Installing it's a piece of cake.

carbilldyer
Apr 28th, 2010, 03:23 PM
Hi I'm learning loads here - so thanks guys.

I installed xampp onto my pc, but I don't know where to go from there. I've tried searching this (and other) forums for some simple steps. They were either too convoluted, or not applicable for me, so once again prevailing on you.

As it stands, I have apache now running on my pc. When I try to open my php file I sort of hoped that it would miraculously find the side server and open my webpage correctly. However, it is still opening with a blank page. Do I need to place my files elsewhere, or how do I link them? Answers with words of less than 1 syllable please!

thanks again.

SB65
Apr 28th, 2010, 03:42 PM
Think of xampp as a web server that just happens to be on your own PC. To view the files you need to load them onto the webserver into the folder htdocs, just as you would on a remote server.

Then just type localhost into your favourite web browser - equivalent to typing in www.mysite.com for a public site.

EDIT: See here too (http://www.apachefriends.org/en/xampp-windows.html#1168)

carbilldyer
Apr 28th, 2010, 06:34 PM
Finally got there! Thanks to everybody for the input.
Caroline