Padding problem (firefox/IE)

Millmi · #1 (**permalink**) 08-22-10, 01:53 PM

Hi! ^-^ don't know if I'm in the right forum, but m'kai :3

Got problems with padding in IE and Firefox. The scipts work well in IE(explorer) but messes up in firefox. Like.. the total area enlarges.

Does it have anything with the fact that IE and firefox doesn't have the same pixels? You can see what I mean ;
This is how it look in IE: click! (and how it should look like!)
and this is how it look in Firefox: click! (and how it shouldn't look like.)

I can send the scripts if you want to have a look at 'em x) Just wanna make sure that there's somebody that can help me at first! ;D

best regards,
mimmi/amina.

UnrealEd · #2 (**permalink**) 08-22-10, 03:07 PM

The general rule in web-design is: when it looks great in IE, but sucks in Firefox, you've made a mistake somewhere (no offense intended).

You'll have to post your code before we can help you any further (btw: there's always someone willing to help)

Millmi · #3 (**permalink**) 08-23-10, 07:52 AM

Haha, that's what I thought xD

Ok, I'll send some of it. I'm using pretty... 'easy' codes, but I guess that's no problem.

This is where the area stretches at most - the white area with a white horse.

HTML Code:

<span style="Z-INDEX: 11; LEFT: 137px; POSITION: absolute; TOP: 376px; width: 805px; border: 0px solid black; background-image:url('http://i37.tinypic.com/1hfd4g.png'); padding-left: 55px; padding-right: 55px; padding-top: 20px; color: #7B5354;"><font color="#7B5354" face="baskerville old face">
<font color="#000000" face="trebuchet ms" size="1">
<center>
<img src="http://i41.tinypic.com/2cmvoyr.gif">
<br>
<img src="http://i33.tinypic.com/24npoug.png">
<br><i>Patriarch från RIKS 2 augusti 2010</i></center>
<br><br>
</font></span></p></span>

thanks!

UnrealEd · #4 (**permalink**) 08-23-10, 08:14 AM

You forgot to close a  tag, and instead you closed a  tag.

I don't know what doctype you're using, but if it's xhtml, you should avoid using  and <center> tags, as well as close all opened tags (such as the images). CSS is usually written in lowercase

Millmi · #5 (**permalink**) 08-23-10, 10:14 AM

thanks

when you say close all opened tags, do you mean including ?

hmm.. well. It's still not working. It doesn't have anything at all with the paddings to do? "padding-left: 55px; padding-right: 55px; padding-top: 20px; etc" ? Cause it's when I change those pixels the area starts to stretch/shorten..

nooo, only use html

Millmi · #6 (**permalink**) 08-23-10, 10:20 AM

edit;

HTML Code:

<span style="Z-INDEX: 11; LEFT: 137px; POSITION: absolute; TOP: 376px; width: 805px; border: 0px solid black; background-image:url('http://i37.tinypic.com/1hfd4g.png'); padding-left: 55px; padding-right: 55px; padding-top: 20px; color: #7B5354;">
<font color="#000000" face="trebuchet ms" size="1">
<center>
<img src="http://i41.tinypic.com/2cmvoyr.gif"></img>
<br>
<img src="http://i33.tinypic.com/24npoug.png"></img>
<br>
<i>Patriarch från RIKS 2 augusti 2010</i>
</center>
<br><br>
</font></span>

UnrealEd · #7 (**permalink**) 08-23-10, 11:28 AM

Caan you show us the complete html code?

Millmi · #8 (**permalink**) 08-23-10, 11:35 AM

like this?

HTML Code:

<html>
<head>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<title>Amina SK fotografi</title>
</head>
<body text="#7B5354">
<body background="http://i34.tinypic.com/a2ewyx.png">

<STYLE TYPE="text/css">a {font-family:arial;border-bottom: 0px #ffffff}a:link{text-decoration: none}a:hover{font-variant: monospace;border-bottom: 0px solid #ffffff; color: #ffffff!important;font-family: "Arial"} --></STYLE></body& gt;><span style="Z-INDEX: 11; LEFT: 137px; POSITION: absolute; TOP: 0px; height: 307px; width: 805px; border: 0px solid black; background-image:url('http://i35.tinypic.com/34eqq1j.png'); padding-left: 3px; padding-top: 6px; color: #7B5354;"><font color="#7B5354" face="baskerville old face">
<center><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a href="index.html"></u><font color="#ffffff" face="baskerville old face"></u></u></u>Hem</font></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="nyheter.html"></u><font color="#ffffff" face="baskerville old face">Nyheter</font></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<a href="galleri.html"></u><font color="#ffffff" face="baskerville old face">Galleri</font></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<a href="information.html"></u><font color="#ffffff" face="baskerville old face">Information</font></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="gastbok.html"></u><font color="#ffffff" face="baskerville old face">Gنstbok</font></a>
</font></center></span>



<span style="Z-INDEX: 11; LEFT: 137px; POSITION: absolute; TOP: 307px; height: 85px; width: 805px; border: 0px solid black; background-image:url('http://i37.tinypic.com/e1cjsp.png'); padding-left: 3px; padding-top: 20px; color: #7B5354;"><font color="#7B5354" face="baskerville old face"><center>
<font color="black" size="5" face="baskerville old face">A M I N A &nbsp;&nbsp; S K</font></center>
</span>



<span style="Z-INDEX: 11; LEFT: 137px; POSITION: absolute; TOP: 376px; width: 805px; border: 0px solid black; background-image:url('http://i37.tinypic.com/1hfd4g.png'); padding-left: 55px; padding-right: 55px; padding-top: 20px; color: #7B5354;">
<font color="#000000" face="trebuchet ms" size="1">
<center>
<img src="http://i41.tinypic.com/2cmvoyr.gif"></img>
<br></br>
<img src="http://i33.tinypic.com/24npoug.png"></img>
<br></br><i>Patriarch från RIKS 2 augusti 2010</i>
</center>
<br></br><br></br>
</font></span>






</body>
</html>

UnrealEd · #9 (**permalink**) 08-23-10, 12:58 PM

Instead of  elements, you should use <div>s as span elements aren't containers for other elements, while divs are.

Besides that, you have 2 <body> elements, while all (x)html documents only allow one. Try fixing this, cause it might solve the problem already

Golith · #10 (**permalink**) 08-23-10, 01:50 PM

The extra lines that were drawn on the right side have now disappeared. Some tags were not closed.. going to convert the spans to divs now
but here is the revised code thus far

HTML Code:

<html>
<head>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<title>Amina SK fotografi</title>
</head>
<body background="http://i34.tinypic.com/a2ewyx.png" text="#7B5354">
<STYLE TYPE="text/css">
a {font-family:arial;border-bottom: 0px #ffffff}
a:link{text-decoration: none}
a:hover{font-variant: monospace;border-bottom: 0px solid #ffffff; color: #ffffff!important;font-family: "Arial"} -->
</STYLE>
<span style="Z-INDEX: 11; 
LEFT: 137px; 
POSITION: absolute; 
TOP: 0px; 
height: 307px; 
width: 805px; 
border: 0px solid black; 
background-image:url('http://i35.tinypic.com/34eqq1j.png'); 
padding-left: 3px; padding-top: 6px; color: #7B5354;">
<font color="#7B5354" face="baskerville old face">
<center>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a href="index.html"></u><font color="#ffffff" face="baskerville old face"></u></u></u>Hem</font></a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="nyheter.html"></u><font color="#ffffff" face="baskerville old face">Nyheter</font></a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="galleri.html"></u><font color="#ffffff" face="baskerville old face">Galleri</font></a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="information.html"></u><font color="#ffffff" face="baskerville old face">Information</font></a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="gastbok.html"></u><font color="#ffffff" face="baskerville old face">G?stbok</font></a>
</center>
</span>
<span style="Z-INDEX: 11; 
LEFT: 137px; 
POSITION: absolute; 
TOP: 307px; 
height: 85px; 
width: 805px; border: 0px solid black; 
background-image:url('http://i37.tinypic.com/e1cjsp.png'); 
padding-left: 3px; padding-top: 20px; color: #7B5354;">
<font color="#7B5354" face="baskerville old face">
<center>
<font color="black" size="5" face="baskerville old face">A M I N A &nbsp;&nbsp; S K</font>
</center>
</font>
</span>
<span style="Z-INDEX: 11; 
LEFT: 137px; 
POSITION: absolute; 
TOP: 376px; 
width: 805px; border: 0px solid black; 
background-image:url('http://i37.tinypic.com/1hfd4g.png'); 
padding-left: 55px; 
padding-right: 55px; 
padding-top: 20px; 
color: #7B5354;">
<font color="#000000" face="trebuchet ms" size="1">
<center>
<img src="http://i41.tinypic.com/2cmvoyr.gif"></img>
<br></br>
<img src="http://i33.tinypic.com/24npoug.png"></img>
<br></br><i>Patriarch från RIKS 2 augusti 2010</i>
</center>
<br></br><br></br>
</font>
</span>
</body>
</html>