13 replies [Last post]
Patrick923
Patrick923's picture
Offline
Regular
California - Central Coast
Last seen: 13 years 40 weeks ago
California - Central Coast
Joined: 2007-08-28
Posts: 23
Points: 0

Hi,

Is there an advantage/disadvantage to using absolute positioning? Is relative positioning the better way to go because of something quirky in Internet Explorer?

:?

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 4 years 10 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

The only disadvantage of

The only disadvantage of absolute positioning is it being used in the wrong hands.
It can be very handy and has helped me many times in the past, but if you don't know what you're doing with it, it can be a very big nuiscance.

It all depends on the layout you are trying to create. most people look at position as the only way to layout a website, most newbies to CSS don't pay any attention to floating elements, which will quickly become your best friend.

Either way you go IE will always have it's quirks, your best bet is to start out with a standards compliant doctype and make sure you validate often along the way.

Build for Firefox and hack for IE.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 30 weeks 9 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

While it is true that IE

While it is true that IE does not properly, nor completely comply with the specs on positioned elements, that isn't necessarily the issue.

Absolute positioning (AP) appeals to the css tyro because of its similarity to the print world's layup board. Oh, wow! Just stick that menu section where you want it! That also makes it a natural for the soi-disant web page development applications such as Dreamweaver.

The troubles arise because AP has certain requirements and "features" that become carnivorous gotchas looking for some butt to bite, if you don't know about them.

AP is a very powerful and complex tool. Like most special tools, it is not for general use.

As to relative positioning, it is not an either/or thing. The default positioning is static, which is not positioned at all. It is the flow position, where the element belongs in its natural spot.

For the real skinny on all this, study §s 9 & 10 of http://www.w3.org/TR/CSS21/

See the tutorials at htmldog.com, and then bring your questions; we'll try to clear the foggy parts.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Patrick923
Patrick923's picture
Offline
Regular
California - Central Coast
Last seen: 13 years 40 weeks ago
California - Central Coast
Joined: 2007-08-28
Posts: 23
Points: 0

Absolute Positioning ... more ...

Hi and thank you both for your replies.

I've worked through some tutorials and have purchased and read a few introductory books about CSS and xhtml markup. At the present time I am reading the second in a series about CSS, entitled "Pro CSS Techniques" published by Apress. They've all been very helpful, and I continue to learn more every day. Hmmm...that sounds somewhat pompous, but I don't feel that way. I don't know as much as either of you, probably never will, and I don't mean to imply in any way that I do. Though I've spent many, many hours at this, I still consider myself a Newbie and don't mind that. After all, it is what it is, and I am who I am. Smile

Despite my best efforts to become comfortable with CSS positioning, it seems to behave for me in ways I don't intend it to. I have a web page, it is at this address:

http://www.centralcoastpsychology.com/

It's working OK in FF and Opera and Safari, but I don't like the way it appears on IE7, and I want to fix it.

So, I've decided I've learned enough to feel comfortable with an effort at making big alterations in my design, so that it appears as I want it to on all platforms. My efforts thus far can be seen at:

http://www.dontthinktwice.ws/test.html

Everything is positioned statically now, and my next move will be to adjust positioning of the elements. I want the green "Central Coast Psychology" to rest at the very top of the page, without the blue that is at the very top now. I don't think I'll have much trouble making that happen, but as soon as I get into changing positions from static to either absolute or relative, I get into trouble. What appears fine on my mac using Safari or FF doesn't look so hot in IE7.

So, that's where I am at right now.

Thanks for your help. I read every word of each post and appreciate your comments immensely.

Soi-disant! I liked that. :thumbsup:

Best regards,

Patrick

Crea
Crea's picture
Offline
Enthusiast
Hamburg - Germany
Last seen: 10 years 21 weeks ago
Hamburg - Germany
Timezone: GMT+2
Joined: 2007-02-08
Posts: 131
Points: 8

A very very special Theory of Relativity.

Hi Patrick 923,

"absolute" can be "relative" as well. To the border of the parent-element/or the body
when they are positioned too.
Anyway, so the difference is that "absolute"-Elements
are without any influence to the float/layout of the other
elements. Normally there´s no need to position (:absolute; or :relative)
each element. When you just use float: and a margin: the layout
looks ok.

http://en.wikipedia.org/wiki/Quirks_mode
http://www.quirksmode.org/css/quirksmode.html
http://www.quirksmode.org/css/csshacks.html

I think much more important is the use of a correct
doctype.

It´s easier to explain it on the basis of a real problem.
Hope it answers your question at least a little bit.

lars

A perfection of means, and confusion of aims, seems to be our main problem.
Albert Einstein

http://www.creategg.de

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 4 years 10 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

One thing you need to learn

One thing you need to learn to do and just might help out your IE7 issues, is to validate early and validate often.

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.centralcoastpsychology.com%2F

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Patrick923
Patrick923's picture
Offline
Regular
California - Central Coast
Last seen: 13 years 40 weeks ago
California - Central Coast
Joined: 2007-08-28
Posts: 23
Points: 0

Validation

HI,

OK. I will do that, starting now.

Thanks,

Patrick

Patrick923
Patrick923's picture
Offline
Regular
California - Central Coast
Last seen: 13 years 40 weeks ago
California - Central Coast
Joined: 2007-08-28
Posts: 23
Points: 0

character encoding error?

Hmmm...

Well, I went to the validation site and checked out my new test site (http://www.dontthinktwice.ws/test.html) and was informed, for starters, that there is no text encoding declared in the expected places. Yet, my software automatically enclosed the encoding in a meta tag, as shown below:

Central Coast Psychology



Is it placed incorrectly or something?

Patrick

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 4 years 10 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

try <meta

try

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Patrick923
Patrick923's picture
Offline
Regular
California - Central Coast
Last seen: 13 years 40 weeks ago
California - Central Coast
Joined: 2007-08-28
Posts: 23
Points: 0

character set fixed, and other errors corrected

Hi,

Thanks for that. I replaced the markup that was there with what you posted, and then went through the remaining code and corrected the mistakes. It seems strange to me that these errors occured, because my software enters the closing tag as > rather than / >

I'll have to look into these things and see what I can do to prevent them in the future.

Patrick

Patrick923
Patrick923's picture
Offline
Regular
California - Central Coast
Last seen: 13 years 40 weeks ago
California - Central Coast
Joined: 2007-08-28
Posts: 23
Points: 0

Theory of Relativity

Hi,

Lars, I really enjoyed your post. Thank you for taking the time to find those links. I especially enjoyed the last one (www.quirksmode.org/css/csshacks.html), and on that page really enjoyed the linked article "Keep CSS Simple" by Peter-Paul Koch. That was quite refreshing and reinforced my belief that I am on the right course with CSS and xhtml and web development.

As far as doctypes go, this is what I use:

I think that this is the right doctype for me to use for what I do.

Your post helped more than just a little bit.

Patrick

Crea
Crea's picture
Offline
Enthusiast
Hamburg - Germany
Last seen: 10 years 21 weeks ago
Hamburg - Germany
Timezone: GMT+2
Joined: 2007-02-08
Posts: 131
Points: 8

Hehe, my favourite is the

Hehe, my favourite is the voice-family hack.

"A certain browser has a certain CSS bug. Good to know. This same browser has another bug, usually in its parsing of CSS selectors or comments. This, too, is important information. However, a CSS hacker proceeds to use the second bug to “solve” the first one." :scared:

And when you watch the television-news you´ll see many quirks-mode-guys.
Unfortunately there´s no hack. Smile

Sorry, offtopic

A perfection of means, and confusion of aims, seems to be our main problem.
Albert Einstein

http://www.creategg.de

Patrick923
Patrick923's picture
Offline
Regular
California - Central Coast
Last seen: 13 years 40 weeks ago
California - Central Coast
Joined: 2007-08-28
Posts: 23
Points: 0

A specificity problem, perhaps?

Hi,

Well, I've made quite a bit of progress on my website, thanks in no small part to the advise I've received here. But now I've reached another point where I need some more help. Here's what's happened.

I'm having some difficulty placing the navigation bar where I want it to go. But I'm not too worried about that as I'm confident I can take care of that issue. I just want to move it over to the right and up, that's all.

But the real issue for me now is that I have no control over the unordered list within the navigation bar. I believe it is an issue of writing specific hooks to take control over the bar, but I can't seem to get it right.

Here's the markup I have:

Testtwo



panorama

Hi, and welcome to this website!

Proin at eros non eros adipiscing mollis. Donec semper turpis sed diam. Sed consequat ligula nec tortor. Integer eget sem. Ut vitae enim eu est vehicula gravida. Morbi ipsum ipsum, porta nec, tempor id, auctor vitae, purus. Pellentesque neque. Nulla luctus erat vitae libero. Integer nec enim. Phasellus aliquam enim et tortor. Quisque aliquet, quam elementum condimentum feugiat, tellus odio consectetuer wisi, vel nonummy sem neque in elit. Curabitur eleifend wisi iaculis ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In non velit non ligula laoreet ultrices. Praesent ultricies facilisis nisl. Vivamus luctus elit sit amet mi. Phasellus pellentesque, erat eget elementum volutpat, dolor nisl porta neque, vitae sodales ipsum nibh in ligula. Maecenas mattis pulvinar diam. Curabitur sed leo.

Blah Blah Blah. And, did I mention that blah, da blah blah blah? Blah! And you thought blah? Ha! Blah blah blah, de blah blah. Blah de blah, when you get a case of the Blahs, well, then Blah. Blah ze faire! Who wouldla thought it? Not blah, that's for blah. Blah blah, and good luck to ya!

Proin at eros non eros adipiscing mollis. Donec semper turpis sed diam. Sed consequat ligula nec tortor. Integer eget sem. Ut vitae enim eu est vehicula gravida. Morbi ipsum ipsum, porta nec, tempor id, auctor vitae, purus. Pellentesque neque. Nulla luctus erat vitae libero. Integer nec enim. Phasellus aliquam enim et tortor. Quisque aliquet, quam elementum condimentum feugiat, tellus odio consectetuer wisi, vel nonummy sem neque in elit. Curabitur eleifend wisi iaculis ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In non velit non ligula laoreet ultrices. Praesent ultricies facilisis nisl. Vivamus luctus elit sit amet mi. Phasellus pellentesque, erat eget elementum volutpat, dolor nisl porta neque, vitae sodales ipsum nibh in ligula. Maecenas mattis pulvinar diam. Curabitur sed leo.

  • Home Sweet Home → go to the home page An overview of Central Coast Psychology
  • Services → What to expect View the Assessment Process
  • Assessment Models → compares two intervention models Especially for parents who have been getting "the runaround"
  • Payment Plans → easy payment plans Flexible payment plans to make your life easier
  • Contact → I'm easy to reach Contact information: Telephone and email





Here's the CSS I have:

body { width: 1100px; height: 2000px; position: absolute; background-color: #1e4e8f; top: 0px; left: 0px; margin-top: 0px; margin-left: 0px; } div#panorama { position: static; width: 1100px; height: 252px; right: 50%; left: 0px; top: 0px; } .roundedcornr_box_460576 { background: #ffffff; position: relative; width: 73%; margin-right: 0px; margin-left: 4px; margin-top: 80px; top: -74px; } .roundedcornr_top_460576 div { background: url(images/roundedcornr_460576_tl.png) no-repeat top left; } .roundedcornr_top_460576 { background: url(images/roundedcornr_460576_tr.png) no-repeat top right; } .roundedcornr_bottom_460576 div { background: url(images/roundedcornr_460576_bl.png) no-repeat bottom left; } .roundedcornr_bottom_460576 { background: url(images/roundedcornr_460576_br.png) no-repeat bottom right; }

.roundedcornr_top_460576 div, .roundedcornr_top_460576,
.roundedcornr_bottom_460576 div, .roundedcornr_bottom_460576 {
width: 100%;
height: 30px;
font-size: 1px;
}
.roundedcornr_content_460576 { margin: 0 30px;
}
p {
line-height: 1.4em;
font-size: 1.1em;
font-weight: normal;
color: #1d2f3d;
font-stretch: normal;
font-family: Times, "Times New Roman", serif; }
.roundedcornr_box_460577 {
background: #a5c921;
width: 25%;
position: relative;
top: +260px;
right: 1%; }
.roundedcornr_top_460577 div {
background: url(images/roundedcornr_460576_tl.png) no-repeat top left;
}
.roundedcornr_top_460577 {
background: url(images/roundedcornr_460576_tr.png) no-repeat top right;
}
.roundedcornr_bottom_460577 div {
background: url(images/roundedcornr_460576_bl.png) no-repeat bottom left;
}
.roundedcornr_bottom_460577 {
background: url(images/roundedcornr_460576_br.png) no-repeat bottom right;
}
.roundedcornr_top_460577 div, .roundedcornr_top_460576,
.roundedcornr_bottom_460577 div, .roundedcornr_bottom_460576 {
width: 100%;
height: 30px;
font-size: 1px;
}
.roundedcornr_content_460577 { margin: 0 30px;
}
#sidebar ul {
list-style:none;
margin:0 0 12px;
padding:0;
font-size:11px;
float: right;
position: relative;
height: 100%;
width: 275px;
left: 280px;
top: -560px;
background-color: #95ccff; }
#sidebar ul a {
display:block;
background:url(../i/icon_bullet_sidebar.gif) no-repeat 12px 7px;
padding:3px 0 3px 25px;
color:#cb5100;
font-weight:bold;
text-decoration:none;
}
#sidebar ul a span {
color:#333;
font-size:10px;
font-style:normal;
font-weight:normal;
visibility: hidden;
}
#sidebar ul a em {
display:block;
color:#808080;
font-size:10px;
font-style:normal;
font-weight:normal;
}
#sidebar ul a:hover {
background-color:#262626;
background-image:url(../i/icon_bullet_sidebar_hover.gif);
color:#6cf;
border-right:3px solid #221C18;
}
#sidebar ul a:hover span { color:#fc3;
visibility: visible;
}
#sidebar ul a:hover em { color:#4d4d4d;
}

How can I gain control over the sidebar?

Oh, the site is now at:

http://www.dontthinktwice.ws/testtwo.html

Best regards,

Patrick

Patrick923
Patrick923's picture
Offline
Regular
California - Central Coast
Last seen: 13 years 40 weeks ago
California - Central Coast
Joined: 2007-08-28
Posts: 23
Points: 0

Corners markup and css removed

Hi,

Well, I just could not gain control over the navigation bar with corners, and so I decided to temporarily put the corners idea aside for that part of the site. So, I removed the markup and CSS for the navbar corners, and it seems to be working OK for now. I really like the corners on the text window, though, and wish I could get it to work for the navbar. Oh well. :shrug: