Mozilla/IE Line up Differently :(

  • The Apostle of God
  • Beginner
  • Beginner
  • User avatar
  • Posts: 54
  • Loc: SDSU, SD, USA

Post 3+ Months Ago

Hi, it's me again.

I'm having problems lining up my two nav bars and my content area on a site template (It's heavily modified from an example site that allows this) I'm working on. I'm almost ready to export it to a php version, I just can't get the three tops to level up in Mozilla!

http://www.theapostleofgod.com/test/test.html is the page, go up a directory http://www.theapostleofgod.com/test to see the css.

Thanks for your help
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Posts: 4581
  • Loc: Maryland

Post 3+ Months Ago

I'm not sure if you can do this with relative positioning but try the top property:

Code: [ Select ]
/* All the content boxes belong to the content class. */
.content {
    position:relative; /* Position is declared "relative" to gain control of stacking order (z-index). */
    width:480px;
    left:137px;
    top:153px;
    margin-top: 2px;
    border:1px solid black;
    border:1px solid #3388cc;
    background-color:#000;
    padding:1px;
    }
  1. /* All the content boxes belong to the content class. */
  2. .content {
  3.     position:relative; /* Position is declared "relative" to gain control of stacking order (z-index). */
  4.     width:480px;
  5.     left:137px;
  6.     top:153px;
  7.     margin-top: 2px;
  8.     border:1px solid black;
  9.     border:1px solid #3388cc;
  10.     background-color:#000;
  11.     padding:1px;
  12.     }
  • The Apostle of God
  • Beginner
  • Beginner
  • User avatar
  • Posts: 54
  • Loc: SDSU, SD, USA

Post 3+ Months Ago

Didn't work :(
  • conorific
  • Proficient
  • Proficient
  • User avatar
  • Posts: 350
  • Loc: NY

Post 3+ Months Ago

I think the only way to get them to line up exactly would be to use absolute positioning.
  • allgoodpeople
  • Proficient
  • Proficient
  • User avatar
  • Posts: 379
  • Loc: here

Post 3+ Months Ago

a couple things i noticed:

1) your top property for #banner is wrong. it shoudl be a colon, not an equals sign

2) did you insert the code in your css telling mozilla browsers to act like IE browsers when rendering boxes, or vice versa? here's a thread on ozzu discussing what i'm talking about: http://www.ozzu.com/website-design-forum/width-width-width-right-t21298.html . until i put that in my CSS, i had alot of trouble getting my boxes to behave correctly in both types of browsers as well.

3) If i had to guess, i would say start playing with margin settings and see what happens. I'd start with the .content class and set a top margin value to see what happens. if that doesn't work, move to the #banner id and a bottom margin.

Mark
  • conorific
  • Proficient
  • Proficient
  • User avatar
  • Posts: 350
  • Loc: NY

Post 3+ Months Ago

You're confusing the crap out of me. If you're talking about divs, say DIVS, not boxes!
  • allgoodpeople
  • Proficient
  • Proficient
  • User avatar
  • Posts: 379
  • Loc: here

Post 3+ Months Ago

conorific wrote:
You're confusing the crap out of me. If you're talking about divs, say DIVS, not boxes!


*lol* i hear you. i wrote a little bit about it on the other thread there, you can see what i mean there.

mark

Post Information

  • Total Posts in this topic: 7 posts
  • Users browsing this forum: No registered users and 71 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.