The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Margin problem, different browsers different looks
tomkorver
post Nov 23 2009, 04:18 PM
Post #1


Newbie
*

Group: Members
Posts: 13
Joined: 5-November 09
Member No.: 10,242



Hi,

I am building a website, but there is something I cant figure out.
In Chrome my website looks as it should be, but in Firefox and IE there is a strange margin error at the top,
I dont know why, I'm a beginner in website programming I guess.

This is the link:
tckrecordz

The problem is the top, <div id="header">
CSS:
CODE
#header {
    width: 400px;
    height: 188px;
    margin-left: 162px;
    margin-top: 0px;
    padding: 0px;
}


In this div is an iframe.
This is the code of one of the files the iframe links to (they are all set up the same):
CODE
<!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"><!-- InstanceBegin template="/Templates/mp3player.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="DocName" -->
<title>Socratez - Dreamin</title>
<!-- InstanceEndEditable -->
<link href="../styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {background-color: transparent; font-size: 68.75%;}
-->
</style>
</head>

<body>
<img src="../images/spacer.gif" width="400" height="102" alt="spacer" />
  
<table width="450" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="86" rowspan="2"><!-- InstanceBeginEditable name="cover" --><a href="#"><img src="../images/coverart/default.jpg" alt="heartlad" width="86" height="86" border="0" align="left" /></a><!-- InstanceEndEditable --></td>
    <td width="364" class="songinfo"><!-- InstanceBeginEditable name="Name" --><a href="../artists/socratez.html" target="contentinfo">Socratez - Dreamin'</a><!-- InstanceEndEditable --></td>
  </tr>
  <tr>
    <td>
    
    <script type='text/javascript' src='swfobject.js'></script>

<div id='mediaspace'>This text will be replaced</div>
<!-- InstanceBeginEditable name="player" -->
<script type='text/javascript'>
  var so = new SWFObject('../tracks/player.swf','mpl','300','18','9');
  so.addParam('allowfullscreen','true');
  so.addParam('allowscriptaccess','always');
  so.addParam('wmode','opaque');
  so.addVariable('author','Socratez');
  so.addVariable('description','Dreamin');
  so.addVariable('duration','261');
  so.addVariable('file','../tracks/Socratez - Dreamin (mix02) (master).mp3');
  so.addVariable('autostart','true');
  so.addVariable('backcolor','000000');
  so.addVariable('frontcolor','ffec81');
  so.addVariable('lightcolor','FFFFFF');
  so.write('mediaspace');
</script>
<!-- InstanceEndEditable --></td>
  </tr>
</table>

</body>
<!-- InstanceEnd --></html>


Any ideas on how to fix this?

To summarize:
In Chrome it looks as it should be, how can I make it look the same in FF & IE (the top margin differences)?

Thanks,
Tom
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 23 2009, 05:22 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Can you give us an idea of what this margin error looks like so we know what to look for? Nothing jumps out.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
tomkorver
post Nov 23 2009, 05:48 PM
Post #3


Newbie
*

Group: Members
Posts: 13
Joined: 5-November 09
Member No.: 10,242



On the top it says:
Tom Korver - Heartlad
Below that is a mp3 player.

These words and the player are a few pixels down in FF & IE in comparison to Chrome.

In Chrome the words are 15px below the top edge of the black frame, in FF 19px and in IE 21px.

In Chrome the player is 11px below the top edge of the black frame, in FF 15px and in IE 18px.

I have FF 3.0.1 and IE 6.0.2900 by the way.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 23 2009, 06:27 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Maybe you need to get rid of the page margins on this page.
http://www.tomkorver.nl/tckrecordz/tracks/...20Heartlad.html

http://htmlhelp.com/faq/html/effects.html#no-margins

Don't use the old mumbo jumbo. It isn't needed any more. The CSS is enough.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
tomkorver
post Nov 24 2009, 05:01 AM
Post #5


Newbie
*

Group: Members
Posts: 13
Joined: 5-November 09
Member No.: 10,242



QUOTE(pandy @ Nov 24 2009, 12:27 AM) *

Maybe you need to get rid of the page margins on this page.
http://www.tomkorver.nl/tckrecordz/tracks/...20Heartlad.html

http://htmlhelp.com/faq/html/effects.html#no-margins

Don't use the old mumbo jumbo. It isn't needed any more. The CSS is enough.


Thanks for the help I appreciate it.

Unfortunately I didnt succeed in solving the problem, although Im pretty sure its this file http://www.tomkorver.nl/tckrecordz/tracks/...20Heartlad.html thanks to your clue.

How frustrating to waste so much time with moving things a few pixels! (I assume everyone experienced this some time)

I hope I can work it out with some help, here is the code of this file:

CODE
<!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"><!-- InstanceBegin template="/Templates/mp3player.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="DocName" -->
<title>Tom Korver - Heartlad</title>
<!-- InstanceEndEditable -->
<link href="../styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {background-color: transparent; font-size: 68.75%; margin:0; padding:0}
-->
</style>
</head>

<body marginheight="0" topmargin="0" marginwidth="0" leftmargin="0">
<img src="../images/spacer.gif" width="400" height="102" alt="spacer" />
  
<table width="450" height="86" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="86" rowspan="2"><!-- InstanceBeginEditable name="cover" --><img src="../images/coverart/Tom-Korver---Heartlad.jpg" alt="heartlad" width="86" height="86" border="0" align="left" /><!-- InstanceEndEditable --></td>
    <td width="364" height="40" valign="bottom" class="songinfo"><!-- InstanceBeginEditable name="Name" --><a href="../artists/tomkorver.html" target="contentinfo">Tom Korver - Heartlad</a><!-- InstanceEndEditable --></td>
  </tr>
  <tr>
    <td valign="bottom">
    
    <script type='text/javascript' src='swfobject.js'></script>

<div id='mediaspace'>This text will be replaced</div>
<!-- InstanceBeginEditable name="player" -->
<script type='text/javascript'>
  var so = new SWFObject('../tracks/player.swf','mpl','300','18','9');
  so.addParam('allowfullscreen','true');
  so.addParam('allowscriptaccess','always');
  so.addParam('wmode','opaque');
  so.addVariable('author','Tom Korver');
  so.addVariable('description','Heartlad');
  so.addVariable('duration','246');
  so.addVariable('file','../tracks/Tom Korver - Heartlad (mix05).mp3');
  so.addVariable('autostart','true');
  so.addVariable('backcolor','000000');
  so.addVariable('frontcolor','ffec81');
  so.addVariable('lightcolor','FFFFFF');
  so.write('mediaspace');
</script>
<!-- InstanceEndEditable --></td>
  </tr>
</table>

</body>
<!-- InstanceEnd --></html>


And some CSS, dont know if its relevant but I dont know it anymore:

CODE

.songinfo a{
    color: #ffec81;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 1em;
    padding-left: 27px;
    text-decoration: none;
}

.songinfo a:hover{
    color: #F90;
    height: 35px;
    line-height: 35px;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 1em;
    padding-left: 27px;
    text-decoration: none;
}
#mediaspace {
    color: #FFF;
    margin-left: 21px;
    background-color: #000;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 11px;
}


Any clues would be great!

Thanks,
Tom
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
tomkorver
post Nov 24 2009, 05:14 AM
Post #6


Newbie
*

Group: Members
Posts: 13
Joined: 5-November 09
Member No.: 10,242



I solved a part! smile.gif
It seems that the spacer gif I put on top of the page is causing part of the difference between Chrome and IE.
I replaced the spacer with a css style on the table with margin-top:102.
I have no idea why this works but it does.
Now I only need to position the text and the player inside the table right. But no luck so far...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
tomkorver
post Nov 24 2009, 06:05 AM
Post #7


Newbie
*

Group: Members
Posts: 13
Joined: 5-November 09
Member No.: 10,242



Well, Im a bit (frustration) further...it all boils down to this now:

How can I position my line of text and my mp3player exaclty where I want them, displayed the same in all browsers?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 24 2009, 06:16 AM
Post #8


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Geez, that's a large spacer! Remove the spacer and use margins instead. And add this as I said earlier.
CODE
body   { margin: 0; padding: 0 }


I don't understand why you try to push the content of the iframe down instead of placing the iframe lower and let the content on the framed page be at the top. Seems backwards. Is there a reason for this? But then again, I don't understand why you use an iframe at all.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
tomkorver
post Nov 24 2009, 07:03 AM
Post #9


Newbie
*

Group: Members
Posts: 13
Joined: 5-November 09
Member No.: 10,242



QUOTE(pandy @ Nov 24 2009, 12:16 PM) *
Geez, that's a large spacer! Remove the spacer and use margins instead. And add this as I said earlier.
CODE
body { margin: 0; padding: 0 }


Yes I did, thanks!

QUOTE(pandy @ Nov 24 2009, 12:16 PM) *
I don't understand why you try to push the content of the iframe down instead of placing the iframe lower and let the content on the framed page be at the top. Seems backwards. Is there a reason for this? But then again, I don't understand why you use an iframe at all.


Yes, it seems more logic indeed to lower the iframe.
I use an iframe because I need to update the content; the song must be able to change.

But, everything works as I want it now! biggrin.gif

I started from scratch, without the table, with 3 divs.
Applied the padding for each div, and...it works!

I hope I don't look to stupid, since this solution is very simple I guess, but somehow I needed to go all through this to figure it out.

Many thanks for the help Pandy!


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 29th March 2024 - 02:27 AM