19 replies [Last post]
edi
edi's picture
Offline
newbie
Last seen: 12 years 34 weeks ago
Timezone: GMT+2
Joined: 2007-06-03
Posts: 10
Points: 0

Sad Hello there,
I've just finished most of my Project Site when I discovered that in Firefox no Links and Forms and other interactive stuff does not work in the header intrusion aerea.
I used the page maker form and so I had a closer look at this header intrusion thing and really it sais there:

"Due to a problem with Gecko based browsers, if you want to have links and/or form controls inside this intrusion area, you mustn't set the Header to be separate from the Main Body and the intrusion must be into all the header rows."
(http://www.positioniseverything.net/articles/pie-maker/pagemaker_form.php click on the questionmark under "Left Column Header Intrusion")

Unfortunatly, as I mentioned I#m nearly finished the job and it would be rather painful starting all over again. So I wondered whether there is no other way around this problem with Gecko.

Any suggestions?

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 12 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Hi Whilst I am incredibly

Hi

Whilst I am incredibly busy over the next week, I will take a look, if you would give me a live url to look at.

ClevaTreva

edi
edi's picture
Offline
newbie
Last seen: 12 years 34 weeks ago
Timezone: GMT+2
Joined: 2007-06-03
Posts: 10
Points: 0

Hello ClevaTreva, thanks for

Hello ClevaTreva,
thanks for your quick reply.
You can find the site under: rasquin.net
Check out the header section. You will find that it's not possible to click the Languages nor the Textsize buttons.
As well, in the left Frame under WebTipps, its not possible to click a link and the "REFERENZEN" button appears to be disabled as well.
All that is only in Firefox. IE 7 works fine.
If you have further questions please let me know.

Thanks for your help,
edi

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 12 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Hi Nice looking site. One

Hi

Nice looking site.

One question before I take a look. Do you want/need the page to be full height of the browser window even if the content doesn't fill it (so called 100% height)?

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 12 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Oh *IF* you *DON'T* want

Oh

*IF* you *DON'T* want 100% height, the pagemaker puts the center content, then the side columns, then the footer and header. Is this order important for you?

mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 7 years 25 weeks ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

hi,well CT will giv you some

hi,well CT will giv you some other way out,but i found that you can do this.

giv your

which is inside the another p class"recths" a position:relative and a z-index of 1, while giv ur div subheader1 a z-index of 2, and position relative.

Do NOT FORGET THE POSITION RELATIVE...

hope that works,

mihir Smile

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com

Triumph (not verified)
Anonymous's picture
Guru

mihirc wrote:hi,well CT will

mihirc wrote:
hi,well CT will giv you some other way out,but i found that you can do this.

hope that works
A paragraph inside of a paragraph does not validate.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 12 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Meanwhile, no reply from edi.

Meanwhile, no reply from edi.

mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 7 years 25 weeks ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

Triumph wrote:mihirc

Triumph wrote:
mihirc wrote:
hi,well CT will giv you some other way out,but i found that you can do this.

hope that works
A paragraph inside of a paragraph does not validate.

hi, i know that... but my guess is that he is using some CMS, and that it must be coming from there. am quite sure of that...
and since its there... i suggested a way out... Smile

mihir. Smile

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com

edi
edi's picture
Offline
newbie
Last seen: 12 years 34 weeks ago
Timezone: GMT+2
Joined: 2007-06-03
Posts: 10
Points: 0

Hello ClevaTreva,

Sorry to keep you waiting.
First of all, thanks for your compliment regarding the look of the site.

To answer your questions:
- Initially I was hoping to achieve the 100% hight of the page but than I found that if the content of one of the side columns is longer than the center colmumn, the container-center does not stretch all the way down to the bottom of the page and since I'm applying the left and right gray border to this container I end up with a broken box for my content area. Also the "background: url(/images/bgLoop.png) top center repeat-y;" ends looping! If you can come up with some solution for that problem I'd rather prefer the 100% hight.
To work around that issue I added the "height: auto;" to the body-class in the layout.css.

- Another topic with the 100% is, that it's not working with some of the backgrounds. I figured out that especially the IE7 only applies the Background for the 100% hight of the visible part of the window and if you scroll down, the background does not stretch all the way down to the bottom of the actual page. That is the case when I'm implementing the http://huddletogether.com/projects/lightbox2/. So far I could not find a solution for that.

- To me it is important that the center content comes fist in the order. I read that this is quite important when it comes to google ranking criteria. The order after that is optional.

edi

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

Quote: - To me it is

Quote:

- To me it is important that the center content comes fist in the order. I read that this is quite important when it comes to google ranking criteria. The order after that is optional.

No this is a highly debatable point and one that is not proven, it's based on the belief that spiders only read roughly the first 2-300 lines of code and that content ranks higher than anything for placement (likely true)in reality many factors contribute to search engine rankings, messing with source order is not necessarily a great idea, as you have to consider accessibility issues and how people perceive page content flow. Ensuring that one doesn't have loads of scripting in the head of a document goes a long way to keeping content high up in the document flow so linking to scripts is preferable if they start to run over more than a few lines.

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

edi
edi's picture
Offline
newbie
Last seen: 12 years 34 weeks ago
Timezone: GMT+2
Joined: 2007-06-03
Posts: 10
Points: 0

One topic solved

Hello mihirc,
Wink thanks for your approach. It solved one problem.
In the style.css I just added:

#subheader1 .rechts {
	position: absolute; 
	right: 0;
	z-index: 2;
} 

and now all the Links in the header section are working fine both in Firefox and IE7.

Unfortunately this approach does not work for the left container.

Thanks for your help,
edi

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 12 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Hi edi edi wrote:Initially

Hi edi

edi wrote:
Initially I was hoping to achieve the 100% hight of the page... I'd rather prefer the 100% height.

OK, will do Wink

Quote:
Another topic with the 100% is, that it's not working with some of the backgrounds. I figured out that especially the IE7 only applies the Background for the 100% hight of the visible part of the window

With IE7, some changes in the code are needed to get this to work, but can do.

Quote:
To me it is important that the center content comes fist in the order. I read that this is quite important when it comes to google ranking criteria. The order after that is optional.

Hugo talked about the downside to this, so I'll stick with what you want. When I did this to a friend's site (but the content stayed the same, he wanted to keep the awful look and feel) his rankings improved substantially. Can't say it putting the content first that did it though, just that was all that changed.

It'll have to be Thursday night now, but it shouldn't take long (I hope!).

edi
edi's picture
Offline
newbie
Last seen: 12 years 34 weeks ago
Timezone: GMT+2
Joined: 2007-06-03
Posts: 10
Points: 0

Brilliant

Hi ClevaTreva,

well thats brilliant news!
I really appreciate your effort and hope it won't take up to much of your time. It seems you are incredibly busy.
If I can be of any help please let me know.

Thanks a lot,
edi

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 12 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Hi Got home a bit early.

Hi

Got home a bit early. Just rebuilt your page on my server, so now I can play.

CT

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 12 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Hi Could you take a gander

Hi

Could you take a gander at this link:

http://www.siteunderconstruction.net/rasquin/

Note a few changes I made.

Towards the top, you will see the overall font-size being set for page-container etc.

This is how you should set it in your java style switcher.

NEVER use px font-sizes (there have been numerous discussions on this forum about this.

I prefer to use % as this scales relative to the overall sizing. Some folk use ems. Whatever.

I didn't do the whole page. But those links in the left work. See how I use padding to move the bits inwards inside the columns.

The code I now use is much improved on the pagemaker version. It's smaller too.

The image names are all lowercase. My server doesn't like caps in names.

See how I made the bottom navigation list, and floated it. Do your top one like that!

I tested this test page in IE6, IE7 FF2, Opera 9 and Safari.

Minor changes in % font-sizes can change the font-size in just one browser, so take care!

CT

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 12 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Hi edi

Hi edi

As you haven't replied to this post, I assume you haven't taken a look yet.

I had forgotten to add a fix for IE7 when the page is longer than the viewport, which is now done.

BTW. Why are cut up header images not just one image, which could go in the background of the wrapper (except the nav bar underneath anyway)?

Or maybe you intend to change the big image for each page or change it randomly?

edi
edi's picture
Offline
newbie
Last seen: 12 years 34 weeks ago
Timezone: GMT+2
Joined: 2007-06-03
Posts: 10
Points: 0

Great!

Hello ClevaTreva,

Sensational! It all works and the code is so much less than the generated one before. Great work, I'm impressed. Thank you very much!

To answer your question:
As you already suggested the big image is going to change dynamically on each single page. It can be both just an ordinary Image or a Flash movie. But maybe the BGimages can be in one big Image in the warpper anyway. I don't know whether taht would work and how ...

I did not have the time jet to have a closer look but probably tonight I will have time to put in all the content. Hopefully I will manage. I let you know weather I run into trouble.

Also I will have a look at the % Font discussion. I never did it because in one project I had to guarantee an 11px Verdana Font and I was unsure how to exactly determine wich % that is ...
Also I had trouble whith this inherit behaviour where you end up whith your Font beeing far to little or far to big. All that confused me but I'm shure I didn't look into that object thoroughly enough.

Why are you seperating the font-family from the font-size? Is that to do whith browser incompatibilities? I always put both in one:
font: 100.1% "verdana", arial, helvetica, sans-serif;

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 12 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

edi wrote:As you already

edi wrote:
As you already suggested the big image is going to change dynamically on each single page. It can be both just an ordinary Image or a Flash movie. But maybe the BGimages can be in one big Image in the warpper anyway. I don't know whether taht would work and how ...

It would work, I'll change it tonight for you to see.

Quote:
Also I will have a look at the % Font discussion. I never did it because in one project I had to guarantee an 11px Verdana Font and I was unsure how to exactly determine wich % that is ...

Internet Explorer will honor the px font height, but all the other borwsers won't, and it means the page won't be accessible to visually imparied users. The % I gave you match the font heights you had.

Quote:
Also I had trouble whith this inherit behaviour where you end up whith your Font beeing far to little or far to big.

By setting fonts entirely through inherited values, your font-size change java would call a stylesheet with very little in. Change the page-container font-size and the whole page changes.

Quote:
Why are you seperating the font-family from the font-size?

No reason, just that I always do coz I search for the font-size attribute regularly. One less search. Use the shorthand by all means.

edi
edi's picture
Offline
newbie
Last seen: 12 years 34 weeks ago
Timezone: GMT+2
Joined: 2007-06-03
Posts: 10
Points: 0

New Layout - New Problems

Hello ClevaTreva,
once again I am experiencing a few problems trying to build a CSS Website.
If you have a minute you could have a look at:
http://www.rasquin.net/plaschke/

What I used there is more or less the template that you have built the last time.
I have now two main problems with it:

# Is there a way to make it look like my layout that I have created in Photoshop:
http://www.rasquin.net/plaschke/images/layout.gif meaning the curved dark gray bit in the left sidebar at the bottom. I need it to always stay at the bottom with the page beeing 100% in height. Do you know wheather that would be possible?

# And there is another thing that I don't quite understand. I have put the height of the page 100.1% so that Firefox always displays the scrollbar. But because of that the background images do not line up neatly in IE7 any more. Will I have to put the 100% height in the IE Stylesheet or is there a better way to solve the problem that I don't know of?

Thanks a lot,
edi