Back To Website Design Forum

CSS Positioning issues

  • SB
  • Moderator
  • Genius
  • User avatar
  • Joined: Nov 16, 2004
  • Posts: 8671
  • Loc: Aberdeen, Scotland
  • Status: Online

Post March 2nd, 2009, 7:29 am

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.
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post March 2nd, 2009, 7:29 am

  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Joined: Jul 11, 2005
  • Posts: 1828
  • Loc: In the Great White North
  • Status: Offline

Post March 2nd, 2009, 1:35 pm

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
If at first you don't succeed F1... If that doesn't work try Google!
//// Designer, Developer & Teacher - Interactive, Motion and 3D \\\\
Portfolio at WhenImNotSleeping.com
  • SB
  • Moderator
  • Genius
  • User avatar
  • Joined: Nov 16, 2004
  • Posts: 8671
  • Loc: Aberdeen, Scotland
  • Status: Online

Post March 2nd, 2009, 2:29 pm

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
  • Joined: Jul 11, 2005
  • Posts: 1828
  • Loc: In the Great White North
  • Status: Offline

Post March 2nd, 2009, 3:02 pm

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
If at first you don't succeed F1... If that doesn't work try Google!
//// Designer, Developer & Teacher - Interactive, Motion and 3D \\\\
Portfolio at WhenImNotSleeping.com
  • SB
  • Moderator
  • Genius
  • User avatar
  • Joined: Nov 16, 2004
  • Posts: 8671
  • Loc: Aberdeen, Scotland
  • Status: Online

Post March 2nd, 2009, 4:11 pm

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
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8211
  • Loc: USA
  • Status: Offline

Post March 2nd, 2009, 8:27 pm

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:
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Joined: Jul 11, 2005
  • Posts: 1828
  • Loc: In the Great White North
  • Status: Offline

Post March 3rd, 2009, 12:29 pm

did you get this figured out?
If at first you don't succeed F1... If that doesn't work try Google!
//// Designer, Developer & Teacher - Interactive, Motion and 3D \\\\
Portfolio at WhenImNotSleeping.com
  • SB
  • Moderator
  • Genius
  • User avatar
  • Joined: Nov 16, 2004
  • Posts: 8671
  • Loc: Aberdeen, Scotland
  • Status: Online

Post March 3rd, 2009, 12:59 pm

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
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8211
  • Loc: USA
  • Status: Offline

Post March 3rd, 2009, 4:19 pm

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?
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • SB
  • Moderator
  • Genius
  • User avatar
  • Joined: Nov 16, 2004
  • Posts: 8671
  • Loc: Aberdeen, Scotland
  • Status: Online

Post March 3rd, 2009, 5:39 pm

:lol:

Quite likely.

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

What is missing?
  • Bogey
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8211
  • Loc: USA
  • Status: Offline

Post March 3rd, 2009, 9:01 pm

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.
"Bring forth therefore fruits meet for repentance:" Matthew 3:8

Page 1 of 1

Post Information

  • Total Posts in this topic: 11 posts
  • Users browsing this forum: roelof and 125 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
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.