PDA

View Full Version : Different Margins in IE and FF

Riboflavin
04-21-2005, 02:12 AM
For some reason my news bar is too far left in FF :confused: and in higher resolutions everything gets shifted left.

hosted at http://www.joshmountain.com

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="http://www.joshmountain.com/style.css" />
<title>Josh Mountain . com</title>
</head>
<body>
<h1 align="center"><img src="http://www.joshmountain.com/header.gif" alt="" id="main" /></h1>

<p style="margin-left:145px;float:left;position:absolute;">
<iframe src='http://simpleshout.co.uk/shoutbox/shoutbox.php?u=joshmountain' width='180' height='455' frameborder='0'></iframe>

</p>
<table id="main2" cellpadding="0" cellspacing="0">
<tr>
<td style="background-image:url(http://www.joshmountain.com/grad.gif);">.News : Articles.</td>
</tr>
</table>
</body>
</html>
rpgfan3233
04-21-2005, 02:24 AM
Try enclosing your entire layout in a container element (a DIV element, for example). You can then remove the absolute positioning since it seems that it will mess up, without looking at the CSS file.
Riboflavin
04-21-2005, 02:36 AM
Nope, it didnt help :(

And when I remove the absolute pos the shout box goes in the middle and pushes the news bar underneath.
rpgfan3233
04-21-2005, 02:51 AM
Try this:

CSS:
body {



background-color: #BDCBA4;

background-image: url('http://img216.echo.cx/img216/1341/bg2lm.gif');

background-position:center;

background-attachment:fixed;

background-repeat:repeat-y;

color: #000000;
a:link {color: #E1E300;}
a:hover {color : #E1E300;}
a:active {color: #E1E300;}
a:visited {color: #E1E300;}
}



html {
background-color: #BDCBA4;

background-image: url('http://img216.echo.cx/img216/1341/bg2lm.gif');

background-position:center;

background-attachment:fixed;

background-repeat:repeat-y;

color: #000000;
a:link {color: #E1E300;}
a:hover {color : #E1E300;}
a:active {color: #E1E300;}
a:visited {color: #E1E300;}

scrollbar-face-color:#9CAA83;
scrollbar-highlight-color: #CBDAB0;
scrollbar-3dlight-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-shadow-color: #BDCBA4;
scrollbar-arrow-color: #BDCBAD;
scrollbar-track-color: #BDCBA4;
}

#main {
border-style:solid;
border-width:1px;
border-color:#000000;
}



#main2 {
border-style:solid;
border-width:1px;
border-color:#000000;
float:right;
width:450px;
text-align:right;
align:center;
}

XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="Josh%20Mountain_files/style.css" />
<title>Josh Mountain . com</title>
</head>
<body>
<div id="pageContainer" style="width: 60%; margin: 0 auto;">
<h1 align="center"><img src="http://www.joshmountain.com/header.gif" alt="" id="main" /></h1>

<p style="float:left;">
<iframe src='http://simpleshout.co.uk/shoutbox/shoutbox.php?u=joshmountain' width='180' height='455' frameborder='0'></iframe>
</p>
<table id="main2" cellpadding="0" cellspacing="0">

<tr>
<td style="background-image:url(http://www.joshmountain.com/grad.gif);">.News : Articles.</td>
</tr>
</table>
</div>
</body>
</html>


Basically, all I did was enclose your page in a container, which required a width (I failed to mention that :p), and then centered your page. Because of that, margins and absolute positioning were not needed. Change the width of the container as needed.
Riboflavin
04-21-2005, 03:07 AM
Thats seems to work great! Thanks so much.

Just curious is there any reason the CSS under Body is repeated under HTML?

Thanks again :thumbsup:


Edit: In larger resolutions the shoutbox and the news bar get farther apart :confused:
rpgfan3233
04-21-2005, 03:36 AM
In XHTML, the canvas is the HTML element whereas the BODY element is the canvas in HTML. This means that in a true XHTML document, a background is only as high as the content it contains when using the BODY element, provided the content is addressed properly. This means that you must use the HTML element. It is duplicated for absolutely no reason (I forgot to take it out) :p

If you are addressing your Web pages on your server as application/xhtml+xml (the XHTML media-type) or application/xml, your bg should be broken without the repetition in the HTML element.

Examples:
HTML element: http://www.freewebs.com/gohankid77/testxhtmlgood.xhtml
BODY element: http://www.freewebs.com/gohankid77/testxhtml.xhtml

Sorry it took so long to reply.


Edit:
That's because they are floated opposite directions and the width of the container is measured relative to the viewport. To correct this, just change the "width: 60%" to "width: 760px". 760px should fit the container inside your page background. Adjust as desired.



Edit:
You may want to add a 5-6 pixel right margin to "#main2". Otherwise, your layout won't seem quite centered.