• 0

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


Go to solution Solved by Seahorsepip,

Question

PortalPacific

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 post
Share on other sites

12 answers to this question

Recommended Posts

  • 0
Seahorsepip

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 ;)

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

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 post
Share on other sites
  • 0
PortalPacific

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 post
Share on other sites
  • 0
+Zlip792

 

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 post
Share on other sites
  • 0
PortalPacific

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 post
Share on other sites
  • 0
PortalPacific

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. 

Link to post
Share on other sites
  • 0
Seahorsepip

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 post
Share on other sites
  • 0
PortalPacific

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 post
Share on other sites
  • 0
Seahorsepip

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 post
Share on other sites
  • 0
PortalPacific

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 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
  • Recently Browsing   0 members

    No registered users viewing this page.