13 replies [Last post]
klaus
Offline
Enthusiast
Last seen: 17 years 30 weeks ago
Joined: 2004-11-28
Posts: 67
Points: 0

Hi Guys,

I have changed the coding of my pages to ensure that the story content goes right to the top of the code (specially when I load css as external file Wink

Now a few things:

1. Is there a way where by I can control where the headline is based on the end of the <div id="mid-nav-top"> - right now I use margin-top: 105px; but that related to the top of the content div - I'd like to have ex. 10px from the end of the mid-nav-top instead as it can change in size. In Opera the black top moved down so Opera is once again the main trouble maker..

2. At the top - the spacing between the logo and the tag line "the ultimate Middle East..." is different in FF and IE..

3 if I use <?xml version="1.0" encoding="iso-8859-1"?> then the grey color in left and right nav in IE goes all the way to the end of the page - if I don't use it then it stops. Opera stops in both cases..?

I noted that if I try to validate my css with <?xml version="1.0" encoding="iso-8859-1"?> I get an error - any ideas??

Any suggestions are welcomed

Cheers
Klaus

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 5 years 7 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Help needed again

Klaus

Just a general observation first. You are not making enough use of contextual selectors.. For example, each one of your menu choices has a class attached to the <a> tag wheras that same tag can be selected with the context ' .left .nav .li a ' . You are overcoding all over the place and it means (1) more work for you (2) more work for the browser (2) more chances of making mistakes and (4) it becomes harder to debug and maintain. By overcoding I mean you are sometimes adding properties that don't really affect the selector to which they are being applied or are simply restating the default.

I don't know why you have chosen the top div to be position absolute - it would sit there anyway (although you have done something else that makes the top content disappear if you change it from position absolute)

The logo at top has a tagline in regular text - I think it should be part of the graphic. there are a number of nice small fonts out there that would go well with it - I am thinking silkscreen (free) by Jason Kottke or Tenacity ($15US) but there are other free pixel fonts that would do the job. Having it part of the graphic solves a number of problems, I think.

DO NOT include the XML prolog ' <?xml version="1.0" encoding="iso-8859-1"?> ' - it puts IE into quirks mode and that is a BAD THING.

I usually have an img {display:block;margin:0;border:0;} in my CSS to handle the vagaries of image display. You have to create a separate style for inlined images but most times people use images as floats.

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

klaus
Offline
Enthusiast
Last seen: 17 years 30 weeks ago
Joined: 2004-11-28
Posts: 67
Points: 0

Help needed again

Hi David,

I think you are right about the top - in fact I have changed the entire top to a png file - that will ensure it works.

1. I removed the <?xml version="1.0" encoding="iso-8859-1"?> and now the grey color on the two navs are no longer reaching the end of the page in IE or Opera - only FF does it - any suggestions?

2. As for over-coding - I try to limit it as much as I feel I can - but obviously not doing a good job. I would really appreciate if you could give me a few examples of reducing the code.

3. Not sure what you mean by the top - it does need to be absolute I think - the code is for the top is placed at the end of the page. Did I misunderstand something?

Thanks in advance

Cheers
Klaus

klaus
Offline
Enthusiast
Last seen: 17 years 30 weeks ago
Joined: 2004-11-28
Posts: 67
Points: 0

Help needed again

All,

I have reduced a lot more code - can I do more?

Really can't figure why the left and right grey color is not filling 100% in Opera and IE6 - works fine in FF - I used height:100% all over now - no luck..

Any suggestions

Cheers
Klaus

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 24 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Help needed again

Hello again Klaus,

I see what you were getting at with positioning the top div absolute
but have taken the concept slightly too literally .
Yes position absolute is often used as a way of keeping specific div markup at the end of the html out of the way and using CSS to re-position it , but this technique is usually applied in the case of nav lists or the like where if CSS is disabled or page read as text then one would rather not start the page off with a long list of links.
In this case you are moving your title to the bottom which has the consequence in plain text of leaving the page with no initial heading or title or your login etc, your not sure what site your looking at !
I think that you will be better off returning the div to the top of the html as position relative and perhaps moving the title graphic to the CSS if you would rather not have it appear in plain text mode and using the image replacement technique to hide a h1 text title within the title graphic div which would only be seen when CSS was disabled .

What DE mentioned, regarding the overcoding is true; you seem to be using far too many classes which just fill out the html and make editing harder also it may well be possible to reduce the code further by paying attention to the rules of inheritance.
As a rough rule of thumb certain properties are inherited through nested elements most textual styling , colors etc are inherited whereas properties that would cause problems to layouts such as margins, padding, borders, backgrounds are not.
When you declare a set of rules it pays to stop and think whether any of those rules will be passed on down to other nested elements
before declaring the same color repeatedly.

Contextual selectors allow you to target elements that exist within specified ancestor divs/elements and are a very powerful way of feeding rules, if used you will find that you will be able to loose a few classes from your html.

These two concepts are not hard to grasp Klaus once you have read a few tutorials.
These links may help to clarify and were found on a simple keyword search in Google


CSS Inheritance

Contextual Selectors

Also check out the "How To" section for a good guide on "Shorthand CSS"

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

klaus
Offline
Enthusiast
Last seen: 17 years 30 weeks ago
Joined: 2004-11-28
Posts: 67
Points: 0

Help needed again

Hello Hugo,

Thanks for your advise - The reason for me placing the top at the end was simply to ensure that the actualy story <h1>Headline.. got right up at the top of the page - but you have a point that the users would need to know which site they are on...

Hence I took the top back up - but I still face the same problem of the left and right nav colors not following down to the end of the page - it works in FF but not in Opera or IE Sad

I'll be trimming the code as per your suggestions - already on it - making it a sport to see how much I can reduce.

Any suggestions?

Cheers
Klaus

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 5 years 7 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Help needed again

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

klaus
Offline
Enthusiast
Last seen: 17 years 30 weeks ago
Joined: 2004-11-28
Posts: 67
Points: 0

Help needed again

DE,

Thanks but is it an IE bug? Works fine on FF and Safari for Mac - and also works if I add <?xml version="1.0" encoding="iso-8859-1"?>

Is there not a smarter way than using an image?

Cheers
Klaus

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 24 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Help needed again

Klaus,
I'm slightly confused, here correct me if I'm wrong but didn't we spend a lot of time going over this layout in your previous thread and discussed layout issues at some length especially floated columns and using the faux columns technique and the use of the clearing fix on the floats . I thought that we had overcome most of the major issues , yet looking at the page now I see a series of absolute column divs ? have you changed the layout ? if so why or am I just loosing the plot. I get a sense of moving backwards somewhat.

On the subject of the xml prolog, no no no it just throws IE into quirks mode and we have only just got everything switched to standards mode.

With the use of height % you do need to have something for the percentage to relate to so will need to put 100% in the body rules.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

klaus
Offline
Enthusiast
Last seen: 17 years 30 weeks ago
Joined: 2004-11-28
Posts: 67
Points: 0

Help needed again

Hi Hugo,

Sorry for the confusion - I have indeed changed the layout as I wanted to position the code differently (ie not have the navigation links at the top of the html) and I have tried just about everything I know without any luck...

When I set the mid columns to relative they move below the column in the middle.. I have tried the "html, body{height:100%;}" - and nothing changed..

Your help would be much apprciated as it is pretty much the only pending issue I have - design now appears to be the same across all browsers that I know of - except that color thing - and that is only a problem in IE and Opera

Cheers
Klaus

#top-section {position:relative; left:0; top:0;}
#mid-section {position:relative; left:0; top:0; height:100%;}
#bottom-section {position:relative; left:0; top:0;}

#top-col-1 {position:relative; padding-left:0; padding:0; width:768px;}
#mid-col-1 {position:absolute; top:0; left:0; width:140px; padding:0; background-color:#ddd; height:100%;}
#mid-col-2 {position:relative; top:0; left:140px; width:488px; padding:0px; background-color:#fff; height:100%;}
#mid-col-3 {position:absolute; top:0; left:628px; width:140px; background-color:#ddd; color:#666; height:100%;}
#mid-nav-top {position:absolute; top:0; left:10px; width:468px; padding:0;}
#bottom-col-1 {position:relative; width:760px; padding:5px;}

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 24 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Help needed again

But klaus,
We discussed this issue in the previous thread, you had a working layout with floated elements and were asking the question whether it was possible to get content towards the top. DE provided you with a link to "Source Ordered Columns" which is exactly what you were after but nowhere in that article does it mention using absolute positioning it revolves around ordering floated divs in the html .
I would strongly suggest that you revert to the previous layout that we spent the time helping you get right, as at the moment we just seem to be going round in circles here
You say that you have tried everything that you know, but I'm not clear how you figure that; did you follow the examples in the source ordered column guide? if so what went wrong.
When you say you changed a div to relative and it just dropped down are you aware of how the position properties work and of the nature of page flow as it's a very important concept to have fixed in ones head if your going to create layouts and would suggest that you MUST read as many guides on the subject as possible.


Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

klaus
Offline
Enthusiast
Last seen: 17 years 30 weeks ago
Joined: 2004-11-28
Posts: 67
Points: 0

Help needed again

Ok thanks - will find a way

Cheers
Klaus

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 5 years 7 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Take a deep breath . . .

Drawing deeply from my vast reserves of guruness, let me lead you all in this little exercise:

OK, everybody sit in a relaxed position, breath in through the nose, out through the mouth. Once, twice, three times. Now doesn't that feel better.

Having achieved a sense of transcendental oneness with the web, lets focus inward on the beauty of CSS.
Ohhmm
[-o<
Ohhhhmmmmm - come on try it with me
[-o< [-o< [-o<
Ohhhhhhhmmmmmmmmmmm - yes, you are getting it.
[-o< [-o< [-o< [-o< [-o< [-o<
BE the CSS.


My advice, when confronted with a situation like this, is to once again start from the basic positional CSS using a "faux columns" template. You want to add your nav links but I wouldn't worry too much about them coming before your main content. I think Search Engine Optimization (SEO) will be more concerned about having appropriate heading tags and will not be tripped up by having a short nav list. Remember you are still probably more optimized than 95% of table based designs.

It is all a question of priorities and the compromises they force us to make. Your priorities, as I have assimilated from working with you and others over the past couple of weeks appear to be:

  1. Accessible, cross-browser, standards-based coding with XHTML and CSS
  2. Using modern, robust, div-based (as opposed to table-based) layout
  3. Using a floated design that (apparently) extends the float background to the bottom of the content section (i.e. a faux column design)
  4. Optimizing content placement for SEO purposes
  5. ? Other considerations
Keeping it as simple as possible generally means you will also be making it as robust as possible. If you stay away from any absolute positioning you will likely avoid situations that will "break" your layout. Klaus, you are nearly, there, but you do have to backtrack a little. I think Hugo has given some excellent advice. Unfortunately, having so much advice sometimes becomes bewildering and it is hard to sort things out. I think I have accurately prioritized what you are aiming for in the list above - it allows you to say: OK, this is more important than that, so I can drop this idea for now.
Hope this helps, and that everyone had a chuckle or two.

DE

[/]

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 8 years 48 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Help needed again

Ohhmmmmmmmmzzzzzzzzzzzzzzzzzzzzz
[-o< [-o< [-o< [-o< [-o<

Laughing out loud

Life's a b*tch and then you die!