When is it ok to use Absolute Positioning ??

MikeHopley · #21 (**permalink**) Feb 5th, 2008, 16:30

Quote:

Also, I've never ever seen a need to hack for IE. There's always a way to write 1 css that can work on both.

I don't agree with this. IE has many bugs, and you will frequently encounter some of them, including some pretty serious ones.

If you're talking about using CSS tricks to target or exclude browsers, be aware that these are unstable hacks and should be avoided. It's much better to put your IE hacks in a separate CSS file, using conditional comments. This also allows you to validate your main stylesheet.

JustinStudios · #22 (**permalink**) Feb 5th, 2008, 17:09

I've never had this problem before... and yes my CSS validates. I think most hacks are caused by the fact people get too complicated in their coding and don't understand that they could have done it simpler. I had a friend that had hacked his website for IE and I made him a tiny CSS file that was about 1/2 as long as his original and it worked great for both. I'd link it but it was hosted on his school account and he graduated last semester and no longer has it hosted. I've done basic layouts to extremely complicated E-commerce websites and still haven't found a need to hack it.

slimboyfatz32 · #23 (**permalink**) Feb 5th, 2008, 17:14

hi justinstudios .. here is the link for my test page

many thanks

JustinStudios · #24 (**permalink**) Feb 5th, 2008, 17:22

Yeah.. you have WAY too much code for what you have...

here's how I see the layout...

Header
Navigation - Float: right
/Header
Content
Text - Float: left width: 60% ( can be a pixel value too)
Recent - Float: left width: 40% (can be a pixel value too)
/Content
Footer

That's the way I see the layout needing to be. No positions needed. If you need me to elaborate i'd be happy too.

slimboyfatz32 · #25 (**permalink**) Feb 5th, 2008, 17:36

Quote:

Originally Posted by JustinStudios

Yeah.. you have WAY too much code for what you have...

here's how I see the layout...

Header
Navigation - Float: right
/Header
Content
Text - Float: left width: 60% ( can be a pixel value too)
Recent - Float: left width: 40% (can be a pixel value too)
/Content
Footer

That's the way I see the layout needing to be. No positions needed. If you need me to elaborate i'd be happy too.

Please elaborate (lol) !!!

I want to get the XHTML/CSS coding as tight as possible , and your advice is greatly appreciated !!

slimboyfatz32 · #26 (**permalink**) Feb 5th, 2008, 18:40

could anyone else possibly elaborate ??

many thanks !!

JustinStudios · #27 (**permalink**) Feb 5th, 2008, 22:33

Well you took your link down so I couldn't snag the images... but I think I remember the layout just fine.

Here's the example: http://blog.justudios.com/test.htm

Here's the layout code:

Code: Select all

<div id="Header">
    <div id="Nav">
        <ul>
            <li  class="nv"><a href="/">Home</a></li>
            <li  class="nv"><a href="#">Link 2</a></li>
            <li  class="nv"><a href="#">Link 3</a></li>
            <li  class="nv"><a href="#">Link 4</a></li>
        </ul>
    </div>
</div>
<div id="wrapper">
    <div id="content">
    </div>
    <div id="otherContent">
    </div>
</div>
<div id="Footer">
</div>

and the CSS...

Code: Select all

body {margin: 0;
      padding: 0;}
#Header {width: 100%;
        height: 145px;
        background: #000000;}
#Nav {height: 75px;
    float: right;
    background-color: #FFFF00;}
#wrapper {width: 100%;
          height: 500px;
          background: #FFFFFF;}
#content {float: left;
          width: 60%;
          height: 500px;
          background: #FFFF00;}
#otherContent {float: left;
            width: 40%;
            height: 500px;
            background: #FFF000;}
#Footer {width: 100%;
        height: 35px;
        background: #FF9900;}
.nv a:Link, .nv a:Visited{
    text-decoration: none;
    padding: 0 25px 0 25px;
    font: bold 12px Verdana, Arial, Helvetica, sans-serif;
    color: #000000;}
.nv a:Hover{
    text-decoration: none;
    padding: 0 25px 0 25px;
    font:  bold 12px Verdana, Arial, Helvetica, sans-serif;
    color: #0000FF;}
ul {list-style: none;}
li {display: inline;}

Now your design looked like a fixed width layout, so you might want to change the percentages into pixels for that...

slimboyfatz32 · #28 (**permalink**) Feb 6th, 2008, 07:53

hi justin , thanks greatly for the time and effort , apologies here is the link again for the images ..... http://www.firstbasedesign.co.uk/index_test.html

its just so i can visualise it that little bit better.

many thanks

also with my page , i was aiming to put the 'wrapper' div around all my other divs , so that everything centred on screen.. ie:

<body>
<div id=wrapper>
<div id=header></div>
<div id=main></div>
</div>
</body>

etc etc.....

MikeHopley · #29 (**permalink**) Feb 6th, 2008, 10:21

Quote:

Originally Posted by JustinStudios

I've done basic layouts to extremely complicated E-commerce websites and still haven't found a need to hack it.

Well I most certainly have found a need to hack for IE, and I know the CSS specs inside out.

Of course, I could avoid this hacking by limiting the layout methods that I use. Using flexible/elastic layouts, for example, complicates matters considerably. But I believe it's worthwhile for the user benefit.

Not all complexity is a bad thing.

In any case, I think you'd be remarkably lucky to never encounter an IE bug. They are everywhere.

JustinStudios · #30 (**permalink**) Feb 6th, 2008, 14:48

You don't need a wrapper around the whole site to make it centered. You can use the margin: o auto on the Header and the wrapper in my code and that'll center it also. Just make sure you zero out the body still. Also sometimes to center in IE you gotta use text-align so make sure if you do use that you default your text back before you use it. Even by doing so you'll still have valid code AND you won't have to waste time writing a switch statement on browsers or produce that nasty bloated code.

I found a reason to hack IE btw... After many many many hours of looking at sites I finally found 1 solution that might need a hack. That is using the z-index to display a flash movie over your website for an advert, then "closing it" to a smaller advert on the page. Cause you'd HAVE to get that exactly right in all browsers you'd have to use absolute positioning there which'd force you to hack.

BAM! I found a reason for you

.

slimboyfatz32 · #31 (**permalink**) Feb 6th, 2008, 15:17

thanks , if you take a look at my site again http://www.firstbasedesign.co.uk/index_test.html

is there anyway i could refine the CSS code for my buttons , its just that i am thinking i have duplicate code , when its not really needed.

many thanks

MikeHopley · #32 (**permalink**) Feb 6th, 2008, 17:25

Quote:

Also sometimes to center in IE you gotta use text-align so make sure if you do use that you default your text back before you use it.

This should not be necessary for IE6+ (providing you're not triggering quirks mode).

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
positioning - relative or absolute?	google	Web Page Design	13	Nov 8th, 2007 16:00
absolute positioning	micker	Flash & Multimedia Forum	1	May 21st, 2007 19:17
Trouble with absolute positioning	minerguy	Web Page Design	4	May 26th, 2006 04:35
Rollovers and absolute positioning	echo	Web Page Design	5	May 2nd, 2006 10:51
absolute bottom positioning in all browsers	stephenleefarmer	Web Page Design	5	Dec 6th, 2005 23:19

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
When is it ok to use Absolute Positioning ??