• 0

Alignment issues in Firefox/IE <div style="margin-left: 19.7%;">

Asked by PortalPacific,

 Share

Question

Proficient

PortalPacific

Posted
Posted

Hello! I spent an hour trying to align my header with my forum at http://miningmojo.com/community. I then noticed in firefox and internet explore it is not aligned. But in chrome it is perfect.

I had someone attach the header to the forum for me a long time ago and am just getting around to this project.
 

</head>
<body>
<div style="margin-left: 19.7%;">
<iframe width="1050" height="320" src="', $settings['theme_url'] ,'/header/index.html" frameBorder="0"></iframe>
</div>

I changed the alignment from left to right by changing the value in <div style="margin-left: 19.7%;"> to align it in chrome.. But still messed up in Firefox and IE

Do you know how I can fix this? Any help would be much appreciated!

Thanks!
Link to comment
Share on other sites

12 answers to this question

Recommended Posts

  • 0
Grand Master

Seahorsepip Veteran

Posted
  • Veteran
Posted

Seriously never use percentages to fix these things...

 

Instead set width: 100% on the iframe.

 

Like so:

<iframe width="100%" height="325" src="https://miningmojo.com/community/Themes/Minecraft/header/index.html" frameborder="0"></iframe>

And remove the margin-left from the parent div.

 

This should solve your issue ^^

 

Oh and to remove the scrollbar on the header when the browser window is too small add style="overflow: hidden;" to <html> on the html file ;)

Link to comment
Share on other sites
  • 0
Mentor

the better twin

Posted
Posted

Edit your div with the margin left to give it a width of 1050 (to match the iframe [A horrible way of doing things]) and set its left and right margins to auto.

Link to comment
Share on other sites
  • 0
Proficient

PortalPacific

Posted
  • Author
Posted

Edit your div with the margin left to give it a width of 1050 (to match the iframe [A horrible way of doing things]) and set its left and right margins to auto.

 

Sorry im not the best coder. Its stuck to the far left now.

 

<div style="margin-left: auto; margin-right: auto; width:1050;"> 
<iframe width="1050" height="320" src="', $settings['theme_url'] ,'/header/index.html" frameBorder="0"></iframe>
</div>
';
}

Also to Zlip I am not sure how to change it from % to units? what is a unit? :P haha

Link to comment
Share on other sites
  • 0
Grand Master

+Zlip792 MVC

Posted
  • MVC
Posted

 

Also to Zlip I am not sure how to change it from % to units? what is a unit? :p haha

 

 

I mean in px.. tell margin-left...

Link to comment
Share on other sites
  • 0
Proficient

PortalPacific

Posted
  • Author
Posted

I donno what I did.... I tried everything you guys said (to the best of my ability) than gave up and put the original code that I posted back in. And now it seems to be aligned perfectly on all browsers.

Does it look aligned for you guys?

Thanks!

Link to comment
Share on other sites
  • 0
Proficient

PortalPacific

Posted
  • Author
Posted

Seriously never use percentages to fix these things...

 

Instead set width: 100% on the iframe.

 

Like so:

<iframe width="100%" height="325" src="https://miningmojo.com/community/Themes/Minecraft/header/index.html" frameborder="0"></iframe>

And remove the margin-left from the parent div.

 

This should solve your issue ^^

 

Oh and to remove the scrollbar on the header when the browser window is too small add style="overflow: hidden;" to <html> on the html file ;)

 

Wow Seahorepip thank you so so so much! It was still un-aligned on my phone but you have totally fixed that too.. 

Thank you, thank you, thank you! 

Now to try your overflow thingy. 

Link to comment
Share on other sites
  • 0
Grand Master

Seahorsepip Veteran

Posted
  • Veteran
Posted

Wow Seahorepip thank you so so so much! It was still un-aligned on my phone but you have totally fixed that too.. 

Thank you, thank you, thank you! 

Now to try your overflow thingy. 

No problem and feel free to mark my comment as solved ^^

Link to comment
Share on other sites
  • 0
Proficient

PortalPacific

Posted
  • Author
Posted

Hey if any of you get a sec. What are those page navigations called where you have links at the top of a page and they snap to different parts of the pages content. I cant seem to locate a script/tutorial. 

Do they have a specific name?

Link to comment
Share on other sites
  • 0
Grand Master

Seahorsepip Veteran

Posted
  • Veteran
Posted

Hey if any of you get a sec. What are those page navigations called where you have links at the top of a page and they snap to different parts of the pages content. I cant seem to locate a script/tutorial. 

Do they have a specific name?

anchor links ;)

 

just make a link: href="#yolo"

 

and add id="yolo" to the element you want to link to, and never give the same id to multiple elements.

Link to comment
Share on other sites
  • 0
Proficient

PortalPacific

Posted
  • Author
Posted

anchor links ;)

 

just make a link: href="#yolo"

 

and add id="yolo" to the element you want to link to, and never give the same id to multiple elements.

Haha! That's so easy I hate myself for not thinking of it. Thank you again Seahorsepipe!

Link to comment
Share on other sites
This topic is now closed to further replies.
 Share
Go to question listing

  • Recently Browsing   0 members

    • No registered users viewing this page.