14 replies [Last post]
CorkyMcDoogle
Offline
Regular
Last seen: 15 years 18 weeks ago
Joined: 2006-02-08
Posts: 12
Points: 0

Hello...

I'm working on a new layout. A scroll bar is showing up like it would if overflow was set to scroll but its not. Everything works fine in IE but Firefox is having an issue with it. Everything validates except for some bg color issues.

The page can be seen here http://metaltactics.com/version2.php

and the css here http://metaltactics.com/v2css.css

Probably an easy fix.

Thanks

richy240
richy240's picture
Offline
Regular
Last seen: 16 years 2 weeks ago
Timezone: GMT-6
Joined: 2005-11-20
Posts: 28
Points: 0

Scroll bar showing but I don't understand why...

overflow:auto in #contentbox?

Seriously, I don't know... This is the first thing I would try though.

CorkyMcDoogle
Offline
Regular
Last seen: 15 years 18 weeks ago
Joined: 2006-02-08
Posts: 12
Points: 0

Scroll bar showing but I don't understand why...

Thanks for the suggestion but it didn't fix it.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 11 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Scroll bar showing but I don't understand why...

Get rid of all your position:relative and replace any offsets with margins. e.g. right: 30px => margin-right: 30px;

Why?

You need to undestand both how position:relative works and how overflow works when the height is auto.

position:relative shifts an element, but leaves its space behind in normal flow. In placing other elements, the browser ignores the visible location of the position:relative element and only pays attention to the space it leaves behind.

overflow values other than visible when combined with a height of auto force an element to expand to enclose its children.

Its at this point when my head begins to hurt Smile.

So your #contentbox has expanded to surround its children (its overflow:auto and height:auto), based on their in flow locations. But one of its children, #meatwrapper, is position:relative and offset 10px below (top:10px) its actual position. In order to decide how to show you that content the browser follows the overflow rule - in this case auto, so it pops out a scroll bar to allow you to scroll down the 10px.

Big tip:
As you learn and gain confidence in CSS, try to stay away from position:relative and position:absolute as much as possible. They are extremely useful properties but you need to understand their effects before you jump in and use them. If you follow my advice, you'll end up coming to these properties as a last resort when you have exhausted other possibilities, that'll improve your understanding of their side-effects and when and how to use them.

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

Scroll bar showing but I don't understand why...

Just to add a footnote to what Chris has said it is permissable to use position relative at times but without actually then making use of the offset abilities it provides, just setting position relative can sort out a few rendering problems encountered in IE, it will- apart from being able to shift position - set a new context for that element in the stacking order and allows IE to better deal with certain properties.

The main thing is avoid is the offset properties which rarely need to be used and when using them one is generally speaking delving into slightly advanced layout concepts, don't rush into those without understanding.

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

CorkyMcDoogle
Offline
Regular
Last seen: 15 years 18 weeks ago
Joined: 2006-02-08
Posts: 12
Points: 0

Scroll bar showing but I don't understand why...

Thanks guys

I took your margin advice and it fixed the problem I was having. However, now everything is fine in FF but IE is having trouble with the margins. Perhaps I missed something when I switched everything over to the new style of positioning...

IE is pushing the leftcol too far to the right and its causing the "meat" box to collapse underneath of the leftcol. The margin is set to 30px but it looks like IE is putting it 50+px.

I appreciate any suggestions you can make.

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

Scroll bar showing but I don't understand why...

IE is putting it over exactly 60px actually , it's the 'Double Margin Bug'

Add display:inline to #leftcolcontain and things should be ok.

IE doubles any margin that is in the same direction as the float is floated to, if it is abutting the edge of the parent element.

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

CorkyMcDoogle
Offline
Regular
Last seen: 15 years 18 weeks ago
Joined: 2006-02-08
Posts: 12
Points: 0

Scroll bar showing but I don't understand why...

Huzzah!

I'm disgusted by your amount of knowledge. You are a beast and I thank you.

HellsBells
HellsBells's picture
Offline
Leader
Bedford, UK
Last seen: 13 years 31 weeks ago
Bedford, UK
Joined: 2004-04-07
Posts: 851
Points: 0

Scroll bar showing but I don't understand why...

CorkyMcDoogle wrote:
Huzzah!

I'm disgusted by your amount of knowledge. You are a beast and I thank you.

Laughing out loud Laughing out loud

My strategy is so simple an idiot could have devised it!

"Also, your CSS (no offence) makes me want to gouge my eyes out with a rusty spoon" - TPH

richy240
richy240's picture
Offline
Regular
Last seen: 16 years 2 weeks ago
Timezone: GMT-6
Joined: 2005-11-20
Posts: 28
Points: 0

Scroll bar showing but I don't understand why...

CorkyMcDoogle wrote:
Thanks for the suggestion but it didn't fix it.

That doesn't surprise me. I was guessing. I don't know a whole lot about this CSS stuff yet.

Hugo wrote:
IE is putting it over exactly 60px actually , it's the 'Double Margin Bug'

Add display:inline to #leftcolcontain and things should be ok.

IE doubles any margin that is in the same direction as the float is floated to, if it is abutting the edge of the parent element.

Hugo.

I am having the same problem, but I wasn't too concerned with it because it didn't break my design - it is just annoying.

Thanks Hugo! I'm gonna try this as soon as I get home!

CorkyMcDoogle
Offline
Regular
Last seen: 15 years 18 weeks ago
Joined: 2006-02-08
Posts: 12
Points: 0

Scroll bar showing but I don't understand why...

I've got another question but perhaps it belongs in the php forum...

How would I go about splitting these parts into seperate peices to include them via php include? I.E. left coloumn, header, footer, content box etc into their own php file so they can be edited seperately.

It seems with the wrappers and containers its going to be tricky. Hope you understand...

If this should be posted in the php forum just tell me.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Scroll bar showing but I don't understand why...

You should be able to do it with just two includes. Header include has everything up to the start of the variable content (which can include left column if you have one) and footer include will have everything that comes after it (which might include right column).
You can then have includes inside of includes if it makes it easier for you to separate certain aspects.
You can then use PHP scripting inside the includes to vary the content on a page by page basis if need be.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

CorkyMcDoogle
Offline
Regular
Last seen: 15 years 18 weeks ago
Joined: 2006-02-08
Posts: 12
Points: 0

Scroll bar showing but I don't understand why...

I think I'm trying to learn too much at the same time... I've been trying to learn php, mysql, css, and anything else I can get into my brain over the last 6 weeks but I'm getting to the point of frustration because I just don't "get it".

You say use php scripting to change the content on a page by page basis. Thats what I want to do but I thought you include each part of the site individually and bring it together on the page you're trying to make.

I've heard the term "Seperate the layout from the content" but I don't really know where to begin. On large sites, when they have articles and tutorials or whatever, is all the "meat" content (text, pictures, graphs, etc) stored in the database and pulled into a central layout? Or does someone or something (script?) have to write that page and include ('header.php); include ('footer.php); etc everytime?

With my site I have guitar lessons. I embed movies into the page so the user can look at how the particular piece is played and also look at the transcription on the page as well. What's the most efficient way to do this? I want uniform pages.

I'm not even making sense and this doesn't even belong in the CSS forum but hopefully someone can decipher and understand what I'm trying to accomplish and possibly explain it or send me somewhere where I can get a better grasp on it.

Thanks again for the help provided already in this thread.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 11 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Scroll bar showing but I don't understand why...

There are different ways of doing things. If content is stored in a database most likely one script will pull out the desired content and place it into a template. There maybe separate pages/scripts for different types of content or everything could be controlled from one script.

"Nice URLs" (redirection) maybe used to make a site appear to have lots of individual pages but everything is actually controlled by a small number of scripts.

As soon as you enter the world of script languages virtually anything is possible. The script, if programmed appropriately, can interface with databases, other websites, the operating system, the file system and generate any response it likes. When you think all your browser receives is a string of characters. The script can decide that string.

Its best to start simple. First conquer the basics of html and css. Then move on to using includes to save yourself copying the same content from page to page. From there you will make a natural progression to generating some of that content yourself - perhaps a menu or a date. By the time you have come that far, you'll probably be looking at other people scripts of applications on the net - a blog, an rss feed aggregator or a photogallery. And then looking at customising those because they aren't quite what you want and you'll be on your way.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Scroll bar showing but I don't understand why...

CorkyMcDoogle wrote:
I've heard the term "Seperate the layout from the content" but I don't really know where to begin.

That's got nothing to do with whether you use a scripting language or not, that's basically what CSS is all about.
The content is your actual text and images and the HTML tags you use to describe that content (e.g. put a paragraph in a <p>, a heading in a <hx> and a list in a <ul> etc.). The presentation should be completely handled by CSS and that's the separation that you're trying to achieve.
By mixing content and presentation, you're back to the old days of using font tags inside your HTML.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference