16 replies [Last post]
niekkes
niekkes's picture
Offline
Regular
The Netherlands
Last seen: 5 years 23 weeks ago
The Netherlands
Timezone: GMT+2
Joined: 2007-10-04
Posts: 16
Points: 0

Hi guys,

I've just started using div's and now the center column height sizes with the content size but the left and right column don't.
How can i fix this?

take a look: http://www.niekdepunder.nl/SH/

incauncalator
incauncalator's picture
Offline
Regular
Timisoara, Romania
Last seen: 15 years 4 weeks ago
Timisoara, Romania
Joined: 2007-10-03
Posts: 27
Points: 0

Overflow for FF

Try to add to your id="main" this property:
#main {
overflow: auto; /* for FF */
}

niekkes
niekkes's picture
Offline
Regular
The Netherlands
Last seen: 5 years 23 weeks ago
The Netherlands
Timezone: GMT+2
Joined: 2007-10-04
Posts: 16
Points: 0

menu

thank you,

now it works in FF. But with IE7 in the menu under the webcam button I have a vertical line, don't know where this one is comming from. FF shows the menu perfectly.

any ideas?

incauncalator
incauncalator's picture
Offline
Regular
Timisoara, Romania
Last seen: 15 years 4 weeks ago
Timisoara, Romania
Joined: 2007-10-03
Posts: 27
Points: 0

No SPACE!

this line should be with no space!


like this:

niekkes
niekkes's picture
Offline
Regular
The Netherlands
Last seen: 5 years 23 weeks ago
The Netherlands
Timezone: GMT+2
Joined: 2007-10-04
Posts: 16
Points: 0

thank you!

Thanks!
don't know why the other images show no line, cause i copy pasted the code.

anyway,. thankyou Smile

incauncalator
incauncalator's picture
Offline
Regular
Timisoara, Romania
Last seen: 15 years 4 weeks ago
Timisoara, Romania
Joined: 2007-10-03
Posts: 27
Points: 0

One line!

Try to keep one line when you have images in your markup, and remove all extra spaces surrounding your images!

niekkes
niekkes's picture
Offline
Regular
The Netherlands
Last seen: 5 years 23 weeks ago
The Netherlands
Timezone: GMT+2
Joined: 2007-10-04
Posts: 16
Points: 0

visaversa

thanks for your help.

the problem is that the line shows up in firefox now. I can't find out what the problem is, probably the same thing but i checked the lines.

What am I missing?

incauncalator
incauncalator's picture
Offline
Regular
Timisoara, Romania
Last seen: 15 years 4 weeks ago
Timisoara, Romania
Joined: 2007-10-03
Posts: 27
Points: 0

first of all ... try to keep

first of all ... try to keep all your content in columns! Any other margin or padding to your columns will affect the "main" container
IE broken layout and FF sroolbar warning!!!
Your html code is invalid. You are using the same id in different places!
Fix those problems first!

niekkes
niekkes's picture
Offline
Regular
The Netherlands
Last seen: 5 years 23 weeks ago
The Netherlands
Timezone: GMT+2
Joined: 2007-10-04
Posts: 16
Points: 0

Valid

Valid now..

http://www.niekdepunder.nl/SH/index_old.html

With this old code the line is not visible in FF, but it is in IE.
I can't notice any differences in the code except for the two div's under the webcam button:

actionM
Offline
newbie
Last seen: 15 years 16 weeks ago
Timezone: GMT-5
Joined: 2007-10-03
Posts: 4
Points: 0

I haven't pinpointed the

I'm referring to your first link given and I haven't pinpointed the problem yet but I did notice something odd about your CSS code.

body { background:#0e79bf url("../images/background.png") repeat-x; font:12px Arial, Helvetica, sans-serif; color:#003f5e; line-height:140%; margin:0 auto; padding:0; }

If your mess with the line-height here, the gap below your picture grows or shrinks depending on the direction you take with it.

And I think you need to maybe change all the id="menu" to class="menu", and then edit your CSS code to match to be more valid. Possibly change #menu to div.menu in your stylesheet.

And it would most likely be more helpful if you showed us your stylesheet.

incauncalator
incauncalator's picture
Offline
Regular
Timisoara, Romania
Last seen: 15 years 4 weeks ago
Timisoara, Romania
Joined: 2007-10-03
Posts: 27
Points: 0

it is not valid! Try to fix

it is not valid!
Try to fix the id's problems! ID is only for one element and you can apply CLASS on multiple elements!

and the same thing on my previous post NO SPACE!

with this layout fixed go and add content to your layout but constantly testing your file in IE6, IE7, FF, Opera or any other Browser you like

niekkes
niekkes's picture
Offline
Regular
The Netherlands
Last seen: 5 years 23 weeks ago
The Netherlands
Timezone: GMT+2
Joined: 2007-10-04
Posts: 16
Points: 0

sorry guys, i think it was

sorry guys, i think it was the old version i uploaden just now.
The valid version is uploaden now, all the id's are unique en the space is gone.

stylesheet: http://www.niekdepunder.nl/SH/css/style.css

I just removed the line-height and the line is shrinking 1 or 2 px.

the css shows no errors.

lokiloks
lokiloks's picture
Offline
Enthusiast
Albuquerque, NM
Last seen: 12 years 40 weeks ago
Albuquerque, NM
Timezone: GMT-6
Joined: 2007-05-16
Posts: 145
Points: 24

First, let me apologize for

First, let me apologize for my tone. I just woke.

You're not using divs correctly, you're overusing them to a serious extreme.

Please read thepineapplehead's article on divitis and re-work your code so that you're using semantic tags.

The HTML of your navigation should look something like this:

Then use css to style each of its components. To do that you'll want to know how to tame lists (http://www.alistapart.com/articles/taminglists/) and how to replace images (http://www.mezzoblue.com/tests/revised-image-replacement/).

On a side note, don't break apart images into slices unless it's important to do so. There's no gain in download time to have 4 images for your header instead of one. However, there IS a tradition of having the logo be a link, so put the circle for schouwer hocck in one a seperate image and the rest in one image.

Then use image replacement for the logo so you can link to the home page and also have your business name actually prominent in Search Engine lookups.

Hope that helps,
LokiLoks

niekkes
niekkes's picture
Offline
Regular
The Netherlands
Last seen: 5 years 23 weeks ago
The Netherlands
Timezone: GMT+2
Joined: 2007-10-04
Posts: 16
Points: 0

ok, thank you for your

ok, thank you for your advice, im gonna work that through now, see if it helps and I let you guys know.

niekkes
niekkes's picture
Offline
Regular
The Netherlands
Last seen: 5 years 23 weeks ago
The Netherlands
Timezone: GMT+2
Joined: 2007-10-04
Posts: 16
Points: 0

THE LINE IS GONE!

I have removed the image line in the html and added a background image in the css. The line is gone in FF and IE7. :thumbsup:

Thank you for the advice about to many div's. I am working on that. I allready replaced the header for one bigger image instead of 3 little ones.

For the id's in the menu im gonna use one class to group the styles.

thank you again!

**********edit: used class="menu" instead of id=menu_1,2,3 etc... but then ff and IE showed lines between the buttons!!! so I'm gonna stick with this for now...

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

Mysterious gaps--a robust solution

incauncalator wrote:
Try to keep one line when you have images in your markup, and remove all extra spaces surrounding your images!

I'm coming to the party a bit late, but there is no need for creating difficult-to-read (by humans) formatting for a simple rendering issue. Removing the white space as you've done causes there to be no anonymous inline box. That, in turn, means there is no established baseline for the image to sit on. That will work okay, right up 'til someone adds a white space during some routine maintenance.

A more robust solution may be seen at this mysterious gap under images demo. View the source; note the formatting aimed at ease of readability and maintenance, with lot's of white space.

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.

incauncalator
incauncalator's picture
Offline
Regular
Timisoara, Romania
Last seen: 15 years 4 weeks ago
Timisoara, Romania
Joined: 2007-10-03
Posts: 27
Points: 0

Float your images!

Yes my english in poor but i'm trying to help others!
I'm aware that The "Extra space remove" tip :rolleyes: it's not the final solution for all the problems. If you have the ability to "float" everything in your page then please float your images and this will remove any extra space! Smile