CSS Positioning issues

  • SB
  • Moderator
  • Genius
  • User avatar
  • Posts: 8745
  • Loc: Aberdeen, Scotland

Post 3+ Months Ago

I've across the usual headache of trying to position something using CSS on a website so it appears the same in all web browsers.

Here is the code...

Code: [ Select ]
#contentbox {
    width: 260px;
    height: 260px;
    overflow: auto;
    position: absolute;
    margin-left: -605px;
    margin-top: -157px;
    text-align: justify;
    padding-right: 1em;
}
html>body #contentbox {
    margin-left: -350px;
    margin-top: -15px;
}
  1. #contentbox {
  2.     width: 260px;
  3.     height: 260px;
  4.     overflow: auto;
  5.     position: absolute;
  6.     margin-left: -605px;
  7.     margin-top: -157px;
  8.     text-align: justify;
  9.     padding-right: 1em;
  10. }
  11. html>body #contentbox {
  12.     margin-left: -350px;
  13.     margin-top: -15px;
  14. }


and here is the page..

http://www.campbell-james.co.uk/2006/index.php

It would appear okay in FF but in IE it's a bit of a mess. Ideally it would be good to see it the same as it does in FF.

As you may also notice there is an issue with the text at the bottom of the page in IE too which would be great to sort out too.

CSS code for that is...

Code: [ Select ]
#motto {
    position: absolute;
    margin-top: 50px;
    margin-left: 275px;
    font-weight: bold;
}
  1. #motto {
  2.     position: absolute;
  3.     margin-top: 50px;
  4.     margin-left: 275px;
  5.     font-weight: bold;
  6. }


Thanks you in advance for any help here.
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

just curious what is it your trying to accomplish with the absolute position? I'm thinking you might be able to do the same thing in a slightly more cross browser compliant way
  • SB
  • Moderator
  • Genius
  • User avatar
  • Posts: 8745
  • Loc: Aberdeen, Scotland

Post 3+ Months Ago

To be honest, alot of this code is old and done at at time i was learning. I went off web design for a while because life just got in the way and forgot some of it. So i'm doing my bit to relearn it again and improve. So you are most likely right on what you say.

Any advice?
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

well I can't find a div with an ID of contentbox anywhere in your code. You have "mainbox" and "contentarea" so your fist code block isn't doing anything at all.

I think overall you would be best off to ditch all the crazy positioning and inside your content area build everything relative to its container. For example create a div for the nav. A left and a right column div (each floated left with a width of 50%) and then create another div for the motto use clear both to remove it from the floats and align the text right

you'd end up with something like
Code: [ Select ]
 
|-------------------|
|                   |
|-------------------|
|         |         |
|         |         |
|         |         |
|         |         |
|-------------------|
|                   |
|-------------------|
 
  1.  
  2. |-------------------|
  3. |                   |
  4. |-------------------|
  5. |         |         |
  6. |         |         |
  7. |         |         |
  8. |         |         |
  9. |-------------------|
  10. |                   |
  11. |-------------------|
  12.  


Then just position everything inside those areas with a margin
  • SB
  • Moderator
  • Genius
  • User avatar
  • Posts: 8745
  • Loc: Aberdeen, Scotland

Post 3+ Months Ago

Thanks graphixboy.

I genuinely cannot remember how the coding came about, i know there was a time i took code from elsewhere but there was also someone dealing with this page back then too so it could have been their lack of knowledge combined with my limited knowledge that came up with this crap.

Trying to really work out how i can redo this without having to rip most of it apart.

Will look at your post and work on it a bit later. If i've any queries i'll let you know. Cheers!
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8416
  • Loc: USA

Post 3+ Months Ago

I usually start and create my CSS and HTML as I expect it to show on the screen. I mean in that order.

I really don't bother with positioning at all. They've caused me so much trouble that I ditched them at all and started using floats and clears :lol:
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

did you get this figured out?
  • SB
  • Moderator
  • Genius
  • User avatar
  • Posts: 8745
  • Loc: Aberdeen, Scotland

Post 3+ Months Ago

Was working on it before i left to head home from my parents (3hrs in the car). I don't think i was doing it the way you suggested, but it was tidier even though i know i'm likely to have problems in the future.

Wasn't really sure what you meant by a few bits, so i experimented...

http://www.campbell-james.co.uk/2006/new/index.php

It's trying to get the positioning so the box appears exactly in the middle in all of the browsers thats a wee bit annoying.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8416
  • Loc: USA

Post 3+ Months Ago

I got a question.
Code: [ Select ]
#frame {
    width: 699px;
    margin: 0px auto;
    margin-top: 100px;
    margin-left: 300px;
    z-index: 1;
    style="background-image: url(".$img.");">
}
  1. #frame {
  2.     width: 699px;
  3.     margin: 0px auto;
  4.     margin-top: 100px;
  5.     margin-left: 300px;
  6.     z-index: 1;
  7.     style="background-image: url(".$img.");">
  8. }
Did you forget something here?
  • SB
  • Moderator
  • Genius
  • User avatar
  • Posts: 8745
  • Loc: Aberdeen, Scotland

Post 3+ Months Ago

:lol:

Quite likely.

Like i say, i am trying to relearn it all. So you'll have to excuse me.

What is missing?
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8416
  • Loc: USA

Post 3+ Months Ago

I was just referring to the PHP variable in there... and the style=""; thing... that's CSS already... you don't need that in CSS.
CSS Code: [ Select ]
#frame {
   width: 699px;
   margin: 0px auto;
   margin-top: 100px;
   margin-left: 300px;
   z-index: 1;
   <span style="color: #FF0000">style="background-image: url(".$img.");"></span>
}
  1. #frame {
  2.    width: 699px;
  3.    margin: 0px auto;
  4.    margin-top: 100px;
  5.    margin-left: 300px;
  6.    z-index: 1;
  7.    <span style="color: #FF0000">style="background-image: url(".$img.");"></span>
  8. }

The line colored red... that is incorrect.

Post Information

  • Total Posts in this topic: 11 posts
  • Users browsing this forum: No registered users and 18 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
 
cron
 

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