Sorry, I did not mean to be

decibel.places — Wed, 31 Dec 2008 19:31:36 +0000

Sorry, I did not mean to be rude or critical

sometimes I am blunt but my intentions are friendly...

please feel welcome to continue to post questions!

Gentelmen, you both have

Maxal — Wed, 31 Dec 2008 19:04:36 +0000

Gentelmen, you both have been extremely helpful. I agree that I should settle with something less complicated. I will definitely check with Layout Gala for a better, stable and easy template. Thank both of you for your time, tips and suggestions

Max

I am a bit concerned... we

decibel.places — Wed, 31 Dec 2008 17:14:28 +0000

I am a bit concerned... we have provided a few of specific suggestions, and suggested tools that Maxal can use to further customize the css.

I am not interested in providing endless support for basic css issues - a service that I charge good $$$ for - although webwiz or other TWF members may feel differently.

If Maxal is having problems with managing the template, a simpler tempate as webwiz suggested may help.

If Maxal is having difficulty with basic css, there are free resources to learn more:

http://www.tizag.com/cssT/

http://www.w3schools.com/css/default.asp

The URL you just posted

webwiz — Tue, 30 Dec 2008 21:17:19 +0000

The URL you just posted differs from your page in several ways. The "tabs" are inside the "content" DIV, for example, thus they position themselves above the rest of the content. Yours has to be positioned separately, as decibel.places points out.

I'm not sure that page is your best template. It seems unnecessarily complicated for a simple two column page. It seems to me to suffer from a bad case of both "divitis" and "classitis'. I suggest you would be better off with one of the two-column templates from Layout Gala. Put the navigation inside the main content, and you should be good to go.

If you run into problems with one of Layout Gala's templates, post a new thread and we'll try to help you out.

Try putting this at the

decibel.places — Tue, 30 Dec 2008 20:09:29 +0000

Try putting this at the end/bottom of your stylesheet:

div#header ul.tabs {margin: 500px 0 0 -350px; position: absolute}

looks ok in Firefox - in other browsers, you might have to mess around

I find the css attributes that most often cause/solve cross browser issues are position: (absolute, static, relative) and display: (block, inline, table etc)

You may find that you need a separate stylesheet for IE, or even IE6 and IE7

Thanx webwiz for your

Maxal — Tue, 30 Dec 2008 19:24:39 +0000

Thanx webwiz for your review. You ar right that the layout is behaving abnormally on different browsers. I really do not have any clue as to how could it be fixed. I just love the theme. You can have a look at this. This should give you clear idea. I had managed to achieve the result, but again this layout is screwed in Safari.

My idea is to have the right column start from the top whereas the left column (tabs+main contents) somewhere below the top background. You are right that the logo.png is transparent at the moment, I couldn't find how to remove it as it wasn't needed by me.

First let me say what a

webwiz — Tue, 30 Dec 2008 18:15:27 +0000

First let me say what a pleasure it is to see a page that validates, has considerate text size and contrast, and does not break when text is enlarged.

Sadly, the layout appears so different from one browser to another, I find it hard to imagine what you are trying to achieve. Also, what do you intend to do with the header, which at this point is positioned off the page, but would show the 'logo.png' image that seems to be completely transparent(?).

Can you mock up a page that shows what you want, and link to a screen shot of it? It's a nice design, and I'd like to help - once I know what you want.

Thanx for the reply

Maxal — Tue, 30 Dec 2008 14:06:40 +0000

Thanx for the reply decibel.places, I have tried your solution but it's not working as contents and tabs are two different divs. You can have a look at the site after the implementation of your solution. The tabs are controlled by the following:

#header ul.tabs {
width: 440px;
clear: both;
height: 33px;
overflow: hidden;
margin-top: 22px;
margin-left: 27px;
float: left;
display: inline;
}

If I increase the top margin, it will also drag the sidebar (right column) down, which I want to avoid.

umm - 5 minutes with Firefox

decibel.places — Tue, 30 Dec 2008 00:01:25 +0000

umm - 5 minutes with Firefox using the Firebug and Web Developer addons yields this solution:

add margin-top: 300px; to #content and remove margin: 0px;:

#content { 
margin-top: 300px;
float: left;
color: #333;
padding: 0px;
width: 590px;
display: inline;
position: relative;
}