Margin problem, different browsers different looks |
Margin problem, different browsers different looks |
tomkorver |
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 |
pandy |
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.
|
tomkorver |
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. |
pandy |
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. |
tomkorver |
Nov 24 2009, 05:01 AM
Post
#5
|
Newbie Group: Members Posts: 13 Joined: 5-November 09 Member No.: 10,242 |
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 |
tomkorver |
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!
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... |
tomkorver |
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? |
pandy |
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. |
tomkorver |
Nov 24 2009, 07:03 AM
Post
#9
|
Newbie Group: Members Posts: 13 Joined: 5-November 09 Member No.: 10,242 |
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! 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! 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! |
Lo-Fi Version | Time is now: 29th March 2024 - 02:27 AM |