• Sign in to Neowin Faster!

    Create an account on Neowin to contribute and support the site.

  • 0
Sign in to follow this  

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

Question

PortalPacific    3

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!

Share this post


Link to post
Share on other sites

12 answers to this question

Recommended Posts

  • 0
Seahorsepip    610

Seriously never use percentages to fix these things...

 

Instead set width: 100% on the iframe.

 

Like so:

<iframe width="100%" height="325" src="http://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 ;)

Share this post


Link to post
Share on other sites
  • 0
Eric    1,605

[Moved here]

Share this post


Link to post
Share on other sites
  • 0
the better twin    364

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.

Share this post


Link to post
Share on other sites
  • 0
PortalPacific    3

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

Share this post


Link to post
Share on other sites
  • 0
+Zlip792    482

 

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...

Share this post


Link to post
Share on other sites
  • 0
PortalPacific    3

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!

Share this post


Link to post
Share on other sites
  • 0
PortalPacific    3

Seriously never use percentages to fix these things...

 

Instead set width: 100% on the iframe.

 

Like so:

<iframe width="100%" height="325" src="http://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. 

Share this post


Link to post
Share on other sites
  • 0
Seahorsepip    610

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 ^^

Share this post


Link to post
Share on other sites
  • 0
PortalPacific    3

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?

Share this post


Link to post
Share on other sites
  • 0
Seahorsepip    610

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.

Share this post


Link to post
Share on other sites
  • 0
PortalPacific    3

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!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.